Responsive Design Best Practice

A wee while ago I wanted to create a new single-page landing site for one of my online properties. Just a logo, company name and contact details. Nothing more, nothing less.

Now, because I’m a really cool guy and I’m down with all the latest jargon and web stuff I decided it would be a responsive website.

Not so much responsive in the sense that I’ll ever respond to inquiries from there any more than I did when there was just a logo on the website and no details you understand!

This is responsive in the sense that all the hip crowd using mobile devices to access the site will get a nice experience and not have to scroll or zoom around to see the three lines of text on the site.

Responsive design is not a new idea and I’m certainly not going to claim to know much more than someone who looks up the term on wikipedia about the dark art of CSS3 @media rules.

In fact, I’d like to encourage everyone else to stop claiming they’re experts as well!

I thought about buying a single-page website template and slapping my info on it but because that would involve parting with money for something I can do myself I decided that roll-your-own was a better plan. And it’s just one page, right?

I figured someone would have a good guide on the rules for responsive design so I put ten cents in the Google roulette machine and crafted a search for responsive design best practice.

If you search for ‘best practice responsive design’ Google says there are about 7,440,000 results which took a grand total of 0.33 seconds to dig out of the dusty corners of the web.

Without reading them I’m guessing that there are probably about 1,488,000 unique and differing opinions to be had in those results about what in fact the best practice is.

And I’m being pretty generous there, allowing for one fifth of all the results to actually be something new and interesting.

Another problem I found was a number of what I thought were reputable sites quoting other similar well respected sites that had bugs in their @media statements and simply didn’t work on the small range of devices I had to test on.

So, the quoted best practice was actually pretty poor practice if you used an iPhone 4S, or Samsung Galaxy 3 which didn’t like the overlapping @media specs defined in some CSS which I think originally came from smashing magazine but so many people quote it that I have no idea where it originated!

So; I suppose seeing as I link baited with the title, you’re wondering what my best practice advice is for responsive design? Here goes:

Get off your adjustable office chair and learn how CSS works, understand what the @media max-width, min-width and pixel-ratio actually do and test it on a good sample of devices!

Leave a Reply