Building a site using Responsive Design involves producing a single set of HTML and CSS which will look good on screens of all sizes.
Brand Loyalty
The site in question is a white label brand-loyalty site where people can collect tokens from packets, redeem them online and claim rewards.
White Label or Red, Green or Blue Label
The aim was to create the graphics and styles in a way which could easily be re-skinned for different clients. By keeping all the accent colour styles in a single section and using a sprite for the graphics, I created a site which could change colour just by adding a different colour class to the body tag.
Media Queries, HTML5 and CSS3
The key to responsive design are CSS media queries. These allow you to target styles to specific device screen sizes.
By defining all the page element with percentage widths rather than absolute widths, the page shrinks down neatly. You can then start to define some breakpoints at which columns collapse in to a single column, menus shrink and non-essential page elements disappear leaving a much lighter-weight version for small sized mobile screens.
New Techniques, Same Old IE Problems
Working with new HTML tags and CSS3 tricks is all very exciting (really, that’s the kind of thing that I find exciting!) but the problems of supporting old versions of internet explorer remain the bane of front-end development.
There are Javascript solutions which can help out with this, like response.js and htmlsiv.js which allow legacy browsers to understand new HTML5 tags but there isn’t really a good way of getting them to understand media queries. My preferred solution is to create a single small screen set of styles for ie7&8 then use Javascript to determine the screen size and add a body class to let the document know when to employ these styles. It’s not as flexible as full media query support, but in my opinion legacy support should be more about allowing features to degrade gracefully than getting sites to look exactly alike in ie7.
