Designing for Mobile & Responsive Design

Designing for Mobile & Responsive Design

I’m very excited about an upcoming web redesign project, because one of the chief directives is to take a ‘mobile first’ approach. In considering the best way to approach this we needed to decide, do we build a separate mobile site, or do we take the ‘responsive design’ route. I believe the best choice for this project is responsive design.

For those who still may not know, responsive design is (as explained succinctly here at Google Mobile Ads blog) a “website design technique that allows you to create a single website that will adapt to the device on which it’s being viewed, whether it’s a laptop, smartphone or tablet.” Because this technique allows content to be hidden or displayed according to various screen widths, we can essentially control the content being delivered to the user based on the device with which they are browsing. And because this is more of a branding, information and portfolio based site – vs. something like an e-commerce site, a hotel site with a booking engine, etc – we do not need to worry excessively about in depth web application deployment, but we can still adapt content as needed. (This very website uses a responsive design – try resizing your browser window to see it in action).

On other sites I have recently completed such as the Thomas E Lamb Architecture site or the Pinnacle Automotive Hospitality site, both projects developed in conjunction with Ideate Interactive, I deployed separate mobile optimized templates. The reason being, these sites were designed in full according to very specific design comps, and the mobile templates were based off of these. I think it is much more reasonable to assume that a responsive design needs to be concepted from the very beginning stages of the design phase. (Thankfully, because we used WordPress as a CMS in both cases, there are readily available plugins that allow for easy mobile detection and theme switching).

Finally, a new approach that we will take for this project will be to design the mobile friendly layout first, and work our way up through the various device sizes in a technique called progressive enhancement. The skinny on this is to design to the lowest common denominator first, with an emphasis on speed and simplicity, and progressively add bells and whistles, more content, higher resolution images, etc for larger screen sizes.

Once the project is complete, I will post another blog detailing the process further and reporting on success and challenges. I will also post on a related subject, which is the use of the Bones WordPress starter theme – which is a responsive theme that in addition, uses the LESS CSS preprocessor – which I am very excited about. I have used Bones several times in the past and have been very happy with it; this will be my first time using LESS however, although I have had a chance to play with it a bit and it seems very promising.

And, for some inspiration and fun browsing, check out this gallery page of responsive design based websites.

Submit a Comment

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>