400 Bad request

After reading Ethan Marcotte’s Responsive Web Design book, I realised that there is a difference between responsive and adaptive web design.

According the Ethan, who also coined the phrase “Responsive Web Design”, there are three components to a responsive design:

1. A flexible, grid-based layout
2. Flexible images and media
3. Media queries

Flexible is the keyword

Until recently I had a site that adapted to the user’s device, depending on the available screen width. If it was less than or equal to 480px, the site would adapt and styles would change to suit that user who were more than likely on a mobile device. Anyone else was served the normal 960px width site.

The CSS looked a bit like this:

@media only screen and (max-width: 480px) {
INSERT MOBILE STYLES HERE
}

But there was nothing flexible about this approach. It adapted to one other screen size, it didn’t respond to varying screen sizes.

Target/context = result

Instead of setting widths and type in pixels, which are fixed, set widths and type in percentages or ems.

This will give you a flexible design, and the widths and sizes will automatically respond depending on their relative bounding box.

After reading Ethan’s book I spent little over 1 hour converting my site from adaptive to responsive. Here is the step by step process:

How to make your site fully responsive

1. Flexible typesetting

Change all type sizes to ems.

Assuming you want your base font size to be 16px (context), which is typically the browser default, the body font-size is therefore 100%. All other font sizes are then relative to this font size using ems.

target/context = result

Therefore if we want our H1 to be 72px (target):

72(target) / 16(context) = 4.5(result)

font-size:4.5em/* 72 / 16 */;

2. Flexible grid

Change column widths to percentages (or ems) rather than pixels.

Give your container a max-width. This will be the bounding box for your grid. Everything within the box is then relative to the max width, or the width of the browser (if less than the max width).

1140 CSS Grid is a useful boilerplate with a flexible responsive grid.

3. Flexible images

Give all images a max-width of 100%. This will ensure they don’t ‘break’ your design.

img{max-width:100%};

4. Box-sizing

One issue I’ve always had with fluid grids is making input field widths flush with the grid. You want a textarea to be 100% width of the parent div, but you also want it to have a 2px border and 5px padding. Thanks to box-sizing:border-box we have a solution.

textarea{padding:5px;border:2px solid #ddd;width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;

5. Additional hacks

There may be additional hacks like positioning and width issues you have to think about. In my case, the jQuery slider plugin I was using on the homepage needed a fixed width.

Thankfully, Jordan Burke was able to recommend FlexSlider, a fully responsive jQuery slider plugin.

Further reading

• 1140 CSS Grid – A fully responsive CSS boilerplate
• The Goldilocks Approach to Responsive Web Design – Nice article and boilerplate from Front, focused on responsive design from the content out
• MQFramework – A useful responsive CSS framework

Prototyping

As designers we put together prototypes as a proof of concept. In the short term it enables you to experience how a product will function and look, and you can start user testing early on in the product development process.

In the long run it saves time and money as you can test and fix any problems before you spend hours of man power developing an end product.

You should prototype any type of product or application including web, desktop and mobile. This is easier said that done of course, and I haven’t been great at doing this myself in the past, but it will definitely save you time and money in the long run.

High fidelity

I always start designing on paper so what I end up with are sketches of user flows, sitemaps and wireframes. These are low fidelity prototypes. They’re quick, easy to put together but not really something you can have end users test or show to clients.

High fidelity prototypes closely resemble the end goal. You should be able to interact with them and other people should be able to understand them, but the standard of the code or the pixel perfection aren’t an issue.

High fidelity rapid prototyping tools

1. Axure

$589 (£366) PC and Mac

2. App Sketcher

$79 (£50) PC and Mac

3. HotGloo

$7-$48/mth (£4-£30/mth) Web based

4. ProtoShare

$29-$179/mth (£18-£111/mth) Web based

5. Easy Framework

Free HTML/CSS framework

Updated Monday 1st August 2011

6. Invision

$8-$199/mth (£5-£122/mth) Web based

7. Prototypes App

$39.99 (£27.99) iPhone app

You’ve made your prototype but how do you collect feedback?

Once you share the prototype with your team or client, you will want to gather feedback.

Onotate is a great tool that enables you to upload a screenshot and add notes to parts of that screen. Other team members are able to add their own notes or comment on your notes.

Once you’ve used Onotate to gather your feedback you can head back to your prototyping tool and start the next iteration. This gives you a nice agile design process.

Do you prototype? What tools do you use?

Thanks to @appwork, @ideawebme, @clarkvalberg, @mattbond21, @tomhayes, @markwallis, @wbdecvar, @markskinner_, @aaroni268 for your prototyping suggestions.

Further reading

• Rapid prototyping tools revisited

HTML5 Boilerplate

If you haven’t already go over to HTML5 Boilerplate and take a look at the notes. In particular look through the code for each file.

HTML5 Boilerplate is a bare bones framework for any web project, with all the best practice resets, styles, htaccess settings etc. in place.

I’ve been using bits and pieces of the HTML5 boilerplate for a while now and one of the things I like in particular is how it deals with conditional styles for Internet Explorer.

IE conditional stylesheets

Most of the sites I work on usually include something like this:

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie.css" /> 
<![endif]-->

This was to fix anything that looked out of place in IE6, usually fixes for pngs, floats, widths, positioning etc.

In some cases the site might have 2 or 3 of these conditional stylesheets for IE7 and IE8 fixes also.

Adding conditional classes to the html tag

Recently I’ve started using something like this instead:

<!--[if lt IE 7]><html class="ie6" lang="en-GB"><![endif]-->
<!--[if IE 7]><html class="ie7" lang="en-GB"><![endif]-->
<!--[if IE 8]><html class="ie8" lang="en-GB"><![endif]-->
<!--[if gt IE 8]><!--><html lang="en-GB"><!--<![endif]-->

This adds classes to the HTML tag in the different versions of IE, enabling you to target them with different CSS rules.

If the user isn’t using Internet Explorer then it only recognises the html lang=”en-GB” tag.

So you can do stuff like this in your core stylesheet:

fieldset legend{background-color:#f6f6f6;}
.ie6 fieldset{position:relative;}
.ie6 fieldset legend{position: absolute;top: -.5em;left: .2em;}

This works better for a couple of reasons:

1. Less HTTP requests (calling 1 stylesheet rather than 2 or 3)
2. It keeps your CSS rule in one place

What do you think, nice technique?

Further reading

• Conditional stylesheets vs CSS hacks? Answer: Neither!
• HTML5 Boilerplate

Why it needed re-designed and re-developed

The old site

The original site was built using WordPress. WordPress is a fantastic framework but it was far too bloated for a project like this. 99% of the WordPress functionality wasn’t needed.

Maintenance and keeping the site updated was also an issue. For every website that was submitted I would have to do several tasks including taking screenshots, saving screenshots, uploading screenshots etc.

Lots to do there, hence the reason I had no time to update it.

The new site

Using Rails I was able to develop a minimal web app that only included the functionality that it actually needed – submitting and approving websites.

Using the very cool Bluga.net webthumb API, the web app is able to automatically take, resize and save screenshots of the websites.

Approving and publishing a site now literally takes one click.

Experimental for me

As with any side project I was able to experiment and learn a few new things.

For this project I was able to try out:

• Haml
• Sass
• Compass
• Simplificator rwebthumb gem

Am loving the combination of Sass and Compass for writing CSS. Will follow up with a more detailed post on this soon.

How useful are ‘CSS galleries’?

Galleries like this have to be taken with a pinch of salt. Of course they don’t represent all the great sites that are out there and they certainly don’t take into account user experience or what’s below the surface of the iceberg. It’s a visual snapshot of a bunch of websites that form a good first impression.

Love ‘em or hate ‘em I still think it’s interesting and useful to see who’s delivering quality websites locally.

Do you know any cracking Irish websites?

Submit them to WebDesignire. Even better if it’s not one of your own sites ;-)

Looking for clean, well structured websites with a good mix of type, colour, shape, texture and whitespace etc. HTML5 and CSS3 use is a bonus.

Google research

Google looked at something like a billion web pages and measured what ID and class names were used the most.

The results looked like this:

1. footer
2. menu
3. title
4. small
5. text
6. content
7. header
8. nav
9. copyright
10. button

See the full results here.

Look familiar?

Opera research

Opera then conducted their own research too, which came up with similar results.

Classes

1. footer
2. menu
3. style1
4. msonormal
5. text

Full class results here.

IDs

1. footer
2. content
3. header
4. logo
5. container

Full ID results here.

And that’s how HTML5 element names were decided

As you can see the new HTML5 element names were decided based on the most commonly used IDs and classes that web designers were already using.

Both ‘main’ and ‘content’ are the obvious omissions. I’m not 100% behind the reasoning for this but I guess ‘section’ and ‘article’ work better semantically for the main content areas.

Good to see ‘msonormal’ didn’t creep in there.

I simply wanted to offer an iPhone version of the website so iPhone users would see an iPhone friendly view of the website and blog articles, but using the same HTML/CSS and content (i.e. not serving up a separate mobile website).

It’s surprisingly simple.

What is responsive design?

Responsive design allows you to fill in the blanks within devices classes through the application of fluid grids, flexible images, and (where possible) media queries.

— Luke Wroblewski

As Luke outlines above, it’s about using up the space that is available, on the device the user is using, most effectively.

So a user using an iPad may be served a different view of the website as to that of a user using an iPhone (or desktop, or netbook or some super duper Nasa sized resolution).

Using CSS media queries

With a CSS media query we can target different screen resolutions with different styles.

Place this in your CSS stylesheet:

@media only screen and (max-width: 480px) {
	/* Mobile styles go here */
	body{width:100%;}
	img{max-width:100%;}
}

The styles above are just examples. Remember to enter your own CSS.

Then place this in your HTML header to ensure the iPhone doesn’t automatically scale down the full page:

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Simples.

Things I changed for iPhone/smartphone view:

1. Max-width of the overall container
2. Made the grid 1 column
3. Adjusted the font size for headings
4. Adjusted navigation positioning
5. Gave images a max-width
6. Hid a couple of things that weren’t important

And the result:

Examples of responsive designs in use

Build

Simon Collison

Lanyrd

UX London

Today, anything that’s fixed and unresponsive isn’t web design, it’s something else. If you don’t embrace the inherent fluidity of the web, you’re not a web designer, you’re something else.

Web design is responsive design, Responsive Web Design is web design, done right.

— Andy Clarke

Have you made any of your sites responsive?

Let us know below so we can check them out.

Further reading

• Responsive Web Design by Ethan Marcotte
• Media Queries – showcase of responsive websites
• Guidelines for Responsive Design

At some point the HTML5 fad will die and we’ll go back to saying HTML (did you ever say you used HTML 4.01?) but until then we’ll throw the HTML5 buzz word around a bit more.

But what does it actually mean to say you use HTML5?

I see HTML5 being broken down into 5 different levels.

1. Doctype

Technically if you use an HTML5 doctype declaration, you’re using HTML5.

Along with your doctype you can tidy up the rest of your head like so.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
...

This is simple stuff, and you usually have this saved in some sort of template.

2. Forms

The next level of HTML5 is adding some niceness to forms.

Validation, place holders, calendars, input types can all be declared with HTML5 and in most cases all that is needed is dropping in an extra attribute to your already existent XHTML forms.

<input type="search" id="keywords" name="keywords" placeholder="Search our site" autofocus>

3. Layout and elements

We get a bit more advanced now with layout. HTML5 has introduced several new block elements for marking up your layout including header, footer, article, aside, section, figure.

<header>
<h1>Heading goes here</h1>
</header>
<article>
<section>
<h2>Something in here</h2>
</section>
<section>
<h2>Something else in here</h2>
</section>
</article>
<aside>
<p>Something to accompany your article here</p>
</aside>
<footer>
<p>Copyright 2011</p>
</footer>

For these new block elements to work across all browsers, make sure you declare them as block level elements and use the HTML shiv script for IE compatibility.

Include this in your head:

<!--[if lt IE 9]> 
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"> </script> 
<![endif]-->

And this in your stylesheet:

header,footer,nav,article,aside,section,figure,figcaption,hgroup,audio,video{
display:block;
}

4. Video and audio

There’s a good chance most of you have looked at levels 1 to 3 as most projects require markup, layouts and forms but not all require video and audio.

No longer do you need to embed video and audio into Flash. They now have their own elements and controls you can customise in HTML5.

<video src="video.mp4" controls width="640" height="360" poster="video.jpg"></video>

5. Advanced features and Javascript

I’ve called level 5 advanced features as we’re now diving into Javascript.

Most of the blog articles and books I’ve read on HTML5 cover the 4 levels above but brush over these advanced features, most likely because they deserve full books dedicated to the topic and are more developer than designer related.

These features include:

• Canvas
• Local/offline storage
• Geolocation

How much HTML5 are you using?

To date I’ve only been using levels 1 to 3 myself. I’ve yet to have an excuse or reason to delve any further.

Are you using HTML5? Have you looked at any of the advanced HTML5 features mentioned above?

Further reading

• Dive into HTML5 by Mark Pilgrim
• HTML5 doctor
• Hard Boiled Web Design by Andy Clarke
• HTML5 for Web Designers by Jeremy Keith

In the end, I loved it, and ended up buying it. Here’s why.

OmniGraffle is a comprehensive, yet easy to use diagramming and drawing application. Drag and drop to create wireframes, flow charts, network diagrams, UI mockups, family trees, office layouts, and more.

It’s a great tool to take your sketches to digital

I have lots of A3 sketches, wireframes and diagrams on my desk. These all make sense to me, the problem is they don’t make sense to other project team members or clients, nor are they easy to share or distribute, so at some point I have to transfer these to digital format.

In the past I would use something like Illustrator (or Balsamiq for quick wireframing), but Illustrator wasn’t really made for this.

Omnigraffle is the perfect solution. It is the digital equivalent of an A3 sheet of paper and sharpie market.

Information architecture

Simple shapes and ease of taking notes. Similar to Keynote or Powerpoint but a lot more flexible and more control over how you structure your layout.

Sitemaps

Ease of creating and managing sitemaps (so so easy).

Wireframes

Lots of reusable elements for creating wireframes for websites and applications.

Check out these templates and stencils:

• Wireframing Freebie: 960 grid template for OmniGraffle
• OmniGraffle Wireframe Stencils

Well recommended

I didn’t go into much detail here but if you’re a UX Designer, or involved with this early stage design process, I definitely recommend you try out Omnigraffle (free 14-day trial).

Check out these short video tutorials for how to get started.

I’m only just getting into Omnigraffle myself so would love to know any tips or recommendations for usage if you have any.

Only last week our rich snippets started appearing on results. Hallelujah!

If you’ve ever read an article, book or listened to someone talk about microformats they’ll usually say all you need to do us mark up your page with microformats. But it’s not that easy.

What are these rich snippets you speak of?

Google displays extra information with their search results where applicable.

Websites like TripAdvisor, Yelp, Amazon etc. stand out over other search results with their star ratings. The hope is that if Google show Lookaly star ratings along with their results, it will increase click throughs (which it has done already).

1. Mark it up with microformats

You can markup the following with extra information for Google:

1. Reviews
2. People
3. Products
4. Businesses
5. Recipes
6. Events

2. Test to make sure it works

Use the Google rich snippets testing tool to make sure it’s picking up your data.

As a Google Chrome user I also found the Michromeformats extension very useful.

3. Submit your site to Google

Submit your site here.

4. Be patient

I’ve submitted Lookaly at least 10 times over the past 2 years and have never heard back from Google (even when they accepted us).

I don’t know how they work but all I can do is assume they only approve websites that they see as:

1. A reliable source of reviews
2. Have a substantial amount of reviews
3. Are marked up correctly

If you’re able to tick these boxes then you shouldn’t have a problem.

It’s fantastic that Google have enabled rich snippets for Lookaly and a great milestone to reach. If you’re wondering, Lookaly has over 5,000 reviews and 10,000 business listings for Northern Ireland.

Have you attempted and/or had any success with Google rich snippets?

Useful links

• Google rich snippets
• Rich snippets testing tool
• Introducing rich snippets

So this past Christmas, when I had some time to spare, I took the plunge and of course, as expected, not everything worked after.

It took me a few days to get everything back up and running so I’ve noted down some things below to help any other designers/developers who have still to make the jump.

Backup your development databases

Should go without saying but here’s your reminder anyway. Backup everything.

Specifically, back up your local databases. For handiness, backup/copy your MySQL databases (located under /usr/local/mysql/data) to your desktop. You’ll want to use these shortly after upgrading.

Sidenote: How to open /usr/ in Finder

I’m usually lost when it comes to working in Terminal. I prefer to see folders in Finder.

In case you didn’t know how to locate and open any hidden folders like /usr/ do the following:

1. Open Terminal.app
2. Type: cd /usr/
3. Type: open .

Simple when you know how.

Install/Upgrade to Snow Leopard

Follow the on screen instructions. Should be simple enough and takes a little less than 1 hour.

Install MySQL

Go to MySQL.com and download the latest version of MySQL.

Just to confuse you there are a few options. Go for the DMG Archive. You’re most likely looking for the 64-bit but check first to make sure.

Once downloaded, install MySQL (along with the Startup Item and Preference Pane).

Restore your development databases

At this point we have MySQL installed but we don’t have any data.

You want to copy the data folder that we previously backed up into your new MySQL folder.

I found this link helpful from Corey. Restore development databases after Snow Leopard upgrade.

In short:

1. Turn off MySQL (use the Preference Pane)
2. Replace /usr/local/mysql/data with your backed up data folder
3. Turn on MySQL

MySQL is nearly all set

At this point I tried one of my PHP sites locally however it didn’t work.

Thanks to Aaron’s solution here, I was able to get it up and running.

1. Open Terminal.app
2. Type: sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit /usr/local/mysql/support-files/mysql.server
3. Find the line starting with basedir and datadir and replace with:
   basedir=/usr/local/mysql
   datadir=/usr/local/mysql/data
4. Save the file
5. Start MySQL using the System Preferences pane button.

Installing Ruby, rvm and Rails

This is where I got completely lost and wasted a couple of days trying to troubleshoot and get things up and running.

I installed rvm, ruby and the rails gem but couldn’t get any local applications to run for one reason or another (usually some sort of gem problem).

In the end I had to give in and ask for help from the talented Mr David Rice, whose conclusion was to do a clean install.

1. Remove RVM
2. Remove Ruby
3. Install Xcode if you haven’t already done so (p.s. it’s a big ass file)
4. Install git, RVM, Ruby and Rails

Hopefully this is you up and running.

Should it be this difficult?

I’m not a developer so I was lost quite a bit along the way. Running commands in Terminal is a task in itself.

It seems to be different for everyone so the process above might not be exactly the same for you. And if you’re a developer you might be saying to yourself “Why did he need to do that?”. Tell me if anything above looks odd.

If someone can create a button that once clicked, installs everything you need (in all the right places) to get a Rails project running locally, that would be great thanks.

Big thanks to David Rice for his help and to all the websites mentioned above. Stackoverflow is your friend in situations like this.