Go Mobile with Responsive Design

Designing for the web has always been like catching a greased chameleon – as soon as you get a good grip everything changes and you’re looking for the elusive lizard on some new technological rock.

Varying screen resolutions, user preferences, and browser inconsistencies are just a few of the variables that have made designing for the web something a little left of eternal. Now that the mobile web has exploded you might as well add all the new screen sizes found on the iPhone, iPad, Android, Kindle, Blackberry, and Netbooks to the crazy mix. In the next few years there will probably be a dozen other new devices that we’ll need to design for. Will the madness ever end?

Responsive Web Design

Fortunately we are blessed with quite a few really smart people in this field. Ethan Marcotte wrote an article almost a year ago for A List Apart introducing the us all to what he called Responsive Web Design. Like all A List Apart articles this one goes in depth into the tools, the how-to, and the why. It’s definitely worth a read (or two) but it basically boils responsive design down to these three elements:

You could even make the case that it’s just two elements: Flexible Everything and Media Queries.

See it in Action

To see this technique in action, I invite you to take a look at our front page, or our portfolio*. Resize the browser window by dragging the bottom right corner and watch as elements move and re-stack themselves. Look at it on a mobile device and remember that there are not separate sites built for each device.

*Yes I’m a little lame in that I don’t have each and every page of this site set up for this.

Get Yer Resources Here

Smarter folks than I have written clearer and more useable information about responsive web design. I encourage you to get it straight from the horses mouth:

Other Useful Resources

The following resources have been very helpful in making HTML5 and responsive design work for us:

5 Comments


I tried resizing in Chrome with no joy :-(

Reply

Thanks for the heads up Steven. There seems to be an issue with serving the site from CloudFlare. I\’ve disabled it and it should be responding now.

I\’m going to check in with those guys to see if they have any insight on this.

Reply

[…] found out the hard way (Thanks Steven) that certain of these techniques can strip web browsers ability to read @media or […]


J\’aime beaucoup toutes ces couleur!
en ce moment, j\’aime vraiment toutes tes tenues; les couleurs te vont vraiment bien!

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Check out our Complete Website Package

Chat with us about your project or click below to find out more!

Learn More   Chat with us

Hi. We are Spigot. Telemarketers pronounce it Spy-got.

We are a Park City, Utah based web design shop that excels at building custom websites powered by WordPress and WooCommerce. We love content - content strategy, content curation, content soup...????Have a look around the site. As you browse you'll find useful navigation links in the sidebar on the left. We hope you find them useful anyway... Please let us know what you think, shoot us a message here.