Building a site using Responsive Design involves producing a single set of HTML and CSS which will look good on screens of all sizes.
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.