The Simplest HTML5 & CSS3 Responsive Grid Ever

This has to be the simplest responsive grid or framework ever. Its so lightweight & can be built in minutes from scratch. No need for bloated frameworks like Twitter Bootstrap.

DEMO

It uses (only) 2 new CSS3 features:

  1. box-sizing
  2. calc()

The ‘box-sizing‘ property should by now be familiar to every front-end developer by now. It forces the browser to include one or more of the padding, border & margin in the specified height and/or width. For example we’ve set our height to 100px, padding to 10px & a border of 1 pixel below.

.box{
	height:100px;
	border:1px solid #CCC;
	padding:10px;
	box-sizing:border-box;
}

Usually, the css box-model would create a box covering a total height of 122px (100px height, 10px by 2 padding for the top & bottom & 1px x 2 for the border top & bottom). With ‘box-sizing’ set to ‘border-box’ the total height is set to 100px, therefore the area available for content is 78px;

The ‘calc()‘ unit value calculator allows us to calculate values by mixing multiple unit types, in our case its percentages & pixels but you can use any css values. These can be added, subtracted, multiplied or divided. The declaration would look something like this:

width:calc(100% - 20px)

Lets say the element in question is in a container 1000px wide, the element would be 980px wide.

box-sizing‘ can be used in this way on Chrome, Firefox (with vendor prefix), Safari, Opera & IE8+
calc()‘ can be used with Chrome, Firefox, Safari (with vendor prefix), Opera & IE9+

The demo below demonstrates the technique with 4, 3, 2 & 1 columns with 2 break points. On desktop it responds at 480px & on iPad it can be demo-ed successfully by rotating the device from landscape to portrait or vice versa.

DEMO
View Source

Irish County Datalist & html5 input

Here is a simple HTML5 input & datalist containing all 32 counties in Ireland suitable for an address form. A datalist is used to ‘autocomplete’ a predefined set of values.

It is fully supported in modern versions of Google Chrome, Firefox & Opera. IE 10+ is very buggy & should not be relied upon but it degrades gracefully to a text input.

DEMO

<input name="counties" list="counties" placeholder="County" required>
<datalist id="counties">
<option value="Antrim">
<option value="Armagh">
<option value="Carlow">
<option value="Cavan">
<option value="Clare">
<option value="Cork">
<option value="Derry">
<option value="Donegal">
<option value="Down">
<option value="Dublin">
<option value="Fermanagh">
<option value="Galway">
<option value="Kerry">
<option value="Kildare">
<option value="Kilkenny">
<option value="Laois">
<option value="Leitrim">
<option value="Limerick">
<option value="Longford">
<option value="Louth">
<option value="Mayo">
<option value="Meath">
<option value="Monaghan">
<option value="Offaly">
<option value="Roscommon">
<option value="Sligo">
<option value="Tipperary">
<option value="Tyrone">
<option value="Waterford">
<option value="Westmeath">
<option value="Wexford">
<option value="Wicklow">
</datalist>

Simple Responsive Mobile Template

I was playing about with media queries & CSS to test a responsive HTML5 template that adjusts to any device whose width is less than 960px. Its not perfect, just a first attempt. Feel free to use it if you like. You can test it on your mobile or by narrowing your browser.

View Demo»
Download»

Some features include:

View Demo»
Download»

Stick a Footer to the Bottom – HTML5

Below is some updated/streamlined code of my earlier post on how to stick a footer to the bottom of a page whose content is not sufficient to push below the fold. Its using some HTML5 features like the ‘footer’ & ‘header’ tags & lightweight doctype. I’ve embedded the CSS but you can link to an external file. It also has a script to create the HTML5 elements in older Microsoft browsers. Its been tested on modern browsers & seems to work fine….hope it helps.

<!DOCTYPE HTML>
<html>
<head>
<!--[if lte IE 8 ]>
<script>  
    document.createElement("footer");  
    document.createElement("header");    
</script>
<![endif]-->
<style>
    body, html{ height:100%; margin:0; }
    .wrapper{ min-height:100%; }
    header{ height:100px; background:#CCC; overflow:auto; display:block; }
    .content{ padding-bottom: 100px; }
    footer{ height: 100px; width:100%; background:#CCC; margin-top:-100px; display:block; }
</style>
</head>

<body>

    <div class="wrapper">

         <header>This is my header!</header>
         <div class="content">This is my content!</div>

    </div><!--end wrapper-->

    <footer>This is my footer!</footer>

</body>
</html>

Essential Modx Revo Plugins, Addons or Packages

Modx Revolution is a powerful & flexible CMS more than capable of handling most small to medium sized sites. However, out of the box it is little more than a framework. The advantage of this is that its a blank canvas where you build web apps from the ground up instead of modifying a CMS to fit your needs like WordPress.

When its first fired up it can be a bit confusing so in order to get started you’ll need to install a few plugins & 3rd party components. This can be done very quickly using the Package Management feature so you dont have to trawl the web for the right one for whatever you are trying to achieve.

Below is a list of components that I install on every job no matter what size:

  1. Wayfinder: Outputs lists of resources from the resource tree…in short, it makes menus
  2. tinyMCE: A well known Javascript WYSIWYG Editor
  3. getResources: Powerful way to list & display content
  4. Codemirror: This javascript library colour codes & indents your HTML & PHP similar to your desktop application for easier reading
  5. Formit: Outputs forms with lots of features like anti-spam & captcha
  6. Googlesitemap: Creates XML sitemaps on the fly to the sitemaps.org protocol
You can find out more info on all these add-ons along with many more popular ones in the online Modx manual.

 

Productivity Apps I Use Daily – Weekly – Monthly

productivity Apps for Web Design

Daily 

  • Things
    Great little app for organising your ‘todos’. Simple interface & very easy to use. Available for Apple only with dedicated Mac, iPhone & iPad apps…..each for a fee, all 3 will cost you over €50. You can sync you iPhone and iPad apps with your desktop app but only if they are on the same Wifi network. Cloud syncing has been promised for a while now but hasn’t been rolled out yet. If your tired of waiting, on a PC or dont want to part with your hard earned cash they have a look at Wunderlist. Its available on Mac, iPhone & iPad just like Things but also has a PC app too. It is available online too for when you are not on any of your own devices. Oh, it has cloud syncing too so all your devices are up to date wherever you are. And here’s the best bit…its completely free. Ok, its is lacking some features from things & doesn’t look or feel as nice (although it does look good) but its worth a try if your new to to-lists.
  • SmartCVS
    Version control software which backups all my files on a central server. It also keeps copies of each version of a file thats checked in so you can roll back to any previous version you like.
  • Adobe Bridge
    Part of the Adobe ‘Suite’, this nice little piece of software links or is the ‘bridge’ between Dreamweaver, Photoshop, Fireworks, Illustrator etc. Its organises files & resources neatly with a preview thumbnail for easy viewing. I’m surprised how few web designers actually use this tool.
  • Dreamweaver
    Dreamweaver is still the industry standard tool for web designers (the one they love to hate) even though it is by far the most expensive. There are a lot of other great coding apps out there for under €100 like Coda but I like use Dreamweaver because it it comes bundled with Photoshop etc in Adobes suites. It also works well & integrates with Adobes other apps & you can open files, launch other Adobe apps & sometimes edit files from other areas of the suite. The built in FTP client is a little clunky but works & saves time switching over & back to your FTP client. That said, if it wasn’t part of a suite, I wouldn’t buy it.
  • Photoshop / Fireworks / Illustrator
    I would use one of these daily & probably in that order. Photoshop is the de-facto tool for designing websites & has been for a long time. Its pretty powerful but can be slow & cumbersome. Fireworks on the other hand was built specifically for web design. Its very fast & can be picked up easily enough if you are familiar with Photoshop. I’ve been using it a bit more recently & find it easier for designing larger sites like online stores or sites which will have a lot of client reviews. This is due to the ‘symbols’ which are reusable resources that once edited change each instance throughout the whole file. I see myself using Fireworks a lot more in the future. I would only use Illustrator occasionally to play with vectors & as i’m familiar with Photoshops path tool its only when I really have to.
  • Firefox / Chrome
    Given the choice I would use Google Chrome all the time. Its extremely fast & I love the single bar for search & entering url’s. However I use Firebug to debug code & just see whats going on under the hood. Firebug’s just not the same on Chrome so I use Firefox for coding & Chrome for browsing.

Weekly 

  • Evernote
    Simple tool for creating & organising notes. Desktop, iPhone & iPad apps along with an online version (PC & Android too). Cloud syncing between all devices like Wunderlist. Oh, and free too.
  • Desktop Task Timer
    Simple tool for recording time spent on tasks & projects. Only available on Mac & unfortunately not free anymore. You can can enter your hourly rate & it’ll spit out the grand total at the end of the day, ready for billing.
  • Dropbox
    Free service which is basically 2Gb free cloud storage. Available on Mac, Windows, linux & various mobile devices. Syncs across all devices. You can also drop files into a public folder where you can send links to share them with friends / colleagues.
  • Cyberduck
    Simple FTP client for Mac & PC. Free from the website but not free from the Mac App Store.
  • Instapaper
    Dont have time to read that article or blog post now? Want to read it later? Then Instapaper is the service for you. It saves the url & a stripped down copy (minus the styling & advertising) for you to read later via a saved ‘Read Later’ bookmark. You can simply save page with one click. Ok, you could just book mark the page but Instapaper saves a copy with just the text & images to be read later via an iPad or iPhone app even when offline.
  • ActiveCollab / Coolab / Activecollab Timer
    A project management tool very similar to Basecamp. The main diference is that its self hosted with a one off fee instead of basecamps subscription model. You can even exoprt / import all your projects from Basecamp into it. The billing add on module is pretty powerful too. It has a desktop timer app for Mac & PC to automatically update your timesheets & Coolab (3rd party iPhone app) allows you to carry out some basic tasks.

Monthly 

  • Mindnode
    Easy to use mindmapping software which is great for creating a simple sitemap or brainstorming.
  • iPlotz
    Create clickable wireframes, mockups & prototypes very similar to Balsamiq.

Understanding Web Users Decisions

How do web users make decisions on what link to click on or what page to browse to. The answer has to do with the consequences of your actions and a shortage of time.

Why do website users make the decisions they do? What makes them click on certain links & what is the thought process behind those decisions? When a user lands on a particular page, they are presented with various options, usually in the form of links. So, what makes them choose one over another?

The answer has to do with how different types of people make decisions in different types of situations. Many nieve web designers build sites presuming that users land on the homepage, read all the text, look at all the links & then make an informed decision on what link to click on or what page to go to next. This is how most people in high pressure jobs (where their decisions have great consequence) make decisions, eg. a businessman or politician.

The reality is quite different. To understand the decision-making process we must look at how people in high pressure situations make critical life or death decisions under pressure of time. People like airline pilots & firemen don’t make decisions in the conventional way. You would presume that a fireman arriving at the scene of a fire would weigh up all the options open to him, analyse each possible course of action, then decide on the action with least danger & most chance of success. Especially as the consequences of their actions can be the difference between life and death.

In fact, the truth is alot more shocking….
As the fireman is under alot of pressure and time is running out he must act quickly. He doesn’t have time to analyse all possible courses of action. Instead, he looks at the situation with focus on his goal (eg. rescue the people in the burning building), then, he scans the first possible solution that pops into his head for any potential pit-falls. If he finds one, he then quickly comes up with option 2 and scans that one.

The process is repeated until he finds a solution that has acceptable risk and a good chance of success. This is the course of action he takes even though a better option may be available if only he took the time to work it out. As the consequences of his decisions are so serious we would expect him to take his time, but time is not a resource available to him.

Web users on the other time are more similar to the pilot or fireman than to the politician or businessman. Although the almost always have time, they are impatient and always in a hurry. When presented with a page they quickly scan the page for what they are looking for and if they find something like a link that remotely resembles a related image or phrase they’ll click on it. regardless of weather its a close match or not.

This is basically increased risk taking and because the consequences of their actions are so small it doesn’t bother them that they’ve made a mistake & clicked a wrong link. They can simply hit the back button and start again.

So, like the fireman their actions are under pressure of time & they both are subject to the consequence of their actions. However web-users actions suffer little or no adverse consequence and are therefore fickle & restless in their browsing.