Responsive design patterns

15th March 2012
All posts

lukew-responsive design, mostly fluid

Thanks to Luke Wroblewski for his review on Multi-Device Layout Patterns for highlighting some great thinking in the Responsive Design space.

The “Mostly Fluid” design, the first one Luke reviews, is what I used for the SugarBang Band website; try it out on a mobile device. It doesn’t lose its look and feel, the columns just flow vertically depending on the width of the browser reading the webpage. It’s brilliant when device detection really amounts to web browser width detection; this doesn’t require any extra code magic.

This method works great for full size browsers, iPads and smaller hand-held mobile devices and the continuity of design keeps the user experience consistent between platforms which is something Path is doing really great at as well as, dare I say it, Facebook.

How to build websites with Responsive Design? WordPress has quite a few good templates for it, Yoko is one; find a theme that has built in html5/css responsive design and you’re off and running.

We designers have to give up a little bit of layout control in exchange for a consistent user experience; we have to think from the top left corner at the narrowest width and then expand outward rather than build three different specific experiences, web, ipad and mobile device.

To me, what’s gained (usability) far outweighs these challenges.

Tags:

Nathaniel Flick

I'm a Front End Web Developer passionate about usability. My primary specialties are HTML5, CSS3, SCSS, LESS, and jQuery and I am very familiar with Foundation and Bootstrap frameworks. I've worked on top of and with Rails, Python, and ASP.net/Umbraco back end frameworks.