Responsive Web Design

We seem to be getting this request a lot lately … “can you design our new site for a mobile phone?” or “will our new site look okay in an iPad?” or “should we re-design our website to be more mobile-friendly?”
It’s a valid line of thought — and these are exactly the kind of questions clients should be asking. Mobile web usage is at an all-time high. Some estimate that mobile Internet usage will overtake desktop Internet usage by 2014. The way your site looks in an iPhone, on a Droid, or in a tablet matter now more than it ever has. The W3C even has a standards section devoted entirely to mobile.
From our vantage point, there are really two viable ways to plan for mobile – Responsive Web Design and Adaptive Web Design. For the moment, our go-to choice is Responsive Design. There is a lot to be said for both approaches, but focusing on Responsive (in this blog post) reveals a type of planning ahead strategy with limited “moving parts.” Essentially Responsive Design involves creating a master graphic design (just like always) from which we then create a set of similar designs but at different sizes (i.e. optimized design for particular devices, i.e. screens). At the same time, when we code those graphic designs, we can operate from the same “playbook” (the same html, the same CSS, and the same PHP). So, rather than creating a separate site for Desktops and a separate site for Mobile Devices, we are creating one site with the same content but variable designs.
When a browser comes to the site, it is “screened” by the site for size and then automatically shown the size most appropriate for the device. In other words, the layout of the website changes automatically to the screen resolution of the device accessing it; thereby giving the user an optimized website experience. Think of it as a site tailored just for your iPad or Desktop, depending on which machine you’re using to view the site.
Using Responsive Web Design, JLB is able to streamline its approach to building websites for our clients, which translates into more modern websites, more flexible websites, more efficient websites, and gives us a cost-effective solution for clients interested in “mobile sites.” For a great visual presentation of Responsive Web Designs, check out Designmodo’s blog post, featuring 50 examples and best practices.