Sunday, April 29, 2012
RESPONSIVE WEB DEVELOPMENT TUTORIALS (PART1)
It seems everyone is talking about responsive web design these days, and with good reason; as the number of web-enabled devices continues to grow – each with differing capabilities and features – it’s no longer sensible to build fixed-width websites.
Truth is, it never was. Yet until now it was considered best practice to design experiences that made a number of assumptions, be they around screen resolution, bandwidth or input method. If you’ve ever designed a 960px-wide website, only to view it on a friend’s small screen netbook (and yes, I’m writing from painful experience here), you’ll understand why this wasn’t a particularly clever approach. Now, with smartphones and tablets thrown into the mix, it’s clear that our traditional methods are no longer fit for purpose.
Thankfully, the advent of CSS media queries and a growing acknowledgement that the web is a medium in its own right, means we’re starting to embrace the true nature of the platform, accepting that its universality is a strength, not a weakness.
Over the next five days, I’ll guide you through a technique that recognises this fact:. Developed by , this combines fluid layouts, flexible images and media queries to help us build sites that gracefully adapt to any environment they encounter.
I’ll demonstrate this approach by showing you how to build a simple media gallery. In my examples, I’ll be creating a small website to document a recent road trip I took across the United States, but feel free to customise the code and design to suit your own needs.