Responsive Design for Programmers

March 30, 2011 – 16:23

Responsive Design is a term that seems to have risen up around me over the course of the last year. Up to this point I have been largely unaware of what it meant other than had a good deal to do with designing markup and CSS for the mobile platform. Today I thought I would spend a couple of hours researching the topic, I have included some of the best articles and post I could find.

A List Apart’s Responsive Design Article

Key points I took away from this article are; the plethora of screen resolutions and orientations on the web is an advantage not a disadvantage. Mobile continues to rise in both business and the social web. Media queries are a neat implementation for modern browsers (IE9, Chrome, Safari 3+, Firefox 3.5+) with a practicable JavaScript backup for non compliant browsers.

CloudFour’s CSS Media Query for Mobile is Fool’s Gold Blog Post

This is quite a pragmatic stance on using Media Queries for the mobile platform as a direct response the aforementioned article from A List Apart. Key points for me were performance, specifically speed are very important for Mobile. The common use case for a mobile website is to find something quickly, waiting for large images and style sheets affects this performance. There are now low-power smartphones without the CPU power, resizing images in-browser does not work. There is a good response on Quirksmode.

Smashing Magazine’s Guidelines for Responsive Web Design Article

Kayla Knight goes into depth into the techniques and technologies that front end web developers have at their hands. There is a lot to take in in this article, and some great examples of responsive web design out in the wild. Further examples and discussion can be found on Adactio.

Windows Team Blog’s Targeting mobile optimized CSS at Windows Phone 7 Post

This was the article that kicked me off on my research spree this afternoon. I was seriously disappointed by Windows Phone 7′s 19/400 score on HTML5 test so I didn’t hold out much hope for support for CSS3 and Media Queries this article didn’t do much to reassure me. Microsoft advise going down the route of conditional HTML comments to import the correct style sheet for the platform you require.

Conclusion

Not being a “Front End” developer, I may never have to put any of this into practice however now I know more than when I started I can follow along when the design team talks about responsive design. If you know of any other resources or articles, please post them in the comments for me to read. If I find them useful I will update this post.

Be Sociable, Share!
    1. 2 Responses to “Responsive Design for Programmers”

    2. Nice collection of posts, Rich.

      As far as responsive design as an ethos goes, it expands beyond media-queries as a technology (although they are making the interpretation of responsive layouts much easier). I guess from a development point of view these will be the main concern, though.

      Some excellent recent articles below..

      http://unstoppablerobotninja.com/entry/toffee-nosed/

      http://www.markboulton.co.uk/journal/comments/a-richer-canvas

      http://stuffandnonsense.co.uk/blog/about/i_dont_care_about_responsive_web_design/

      http://www.stuffandnonsense.co.uk/blog/about/dig_the_new_breed/

      And of course, any number of journal posts on the subject by Jeremy Keith..

      http://adactio.com/journal/1716/

      By Tom Prior on Mar 30, 2011

    3. Thanks Tom.

      By Richard Slater on Mar 30, 2011

    Post a Comment

    Please leave these two fields as-is: