Introduction to Responsive Web Design

Sitepoint course on by Russ Weakley

Web Design Principles

  • Browsers – IE 9+, Chrome 12+, Firefox 5+, Safari 5.1+, Opera 11.5+
  • Eliminates the need for separate mobile and desktop sites.
  • Key principles – a flexible grid based layout, flexible images and media, CSS3 media queries.
  • Progressive Enhancement – starting with a good foundation and then add improvements depending on what technology is likely to be available.
  • Adaptive layouts could be fixed width layouts designed for specific sizes.
  • Mobile first forces one to prioritise core functionality, easier then to adapt to wide screen layout.
  • Strengths – one site, making it cost effective, easy to maintain.
  • Weakness – delivery of the same content to every device, which means a single image size and resolution.  Cannot customise content delivery to different device types.

Media Types and Media Queries

  • Previously CSS had media types… all, aural, braille, embossed, handheld, print, projection, screen, tty, tv.  An unspecified media type defaults to all. Many of the media types are not supported by the relevant devices, stick to screen, print and all.
  • There are several ways of specifying media types and media queries avoid multiple @import if page load speed is important as files are downloaded sequentially and not in parallel.
    <link rel="stylesheet" href="a.css" media="print, screen /">
    @import in style element 
    @import inside css file
    @media screen inside css file { css }
  • Media Feature (e.g. and (color) ) can be defined with or without a unit value depending on the feature.  Boolean operators – and, not and comma is the same as ‘or’ .  These enable CSS rules to overlap. There is also an ‘only’ keyword which prevents older browsers applying the styles as older browsers understand @media in the context of screen types.
    /* CSS @media rule */
    @media screen and (color) {
       /* CSS rules inside */
  • There are several options for  IE 6 – 8, browsers which don’t support media queries:  1. respond.js  2. CSSS3-mediaqueries.js a simple lightweight javascript solution.  3. simpler CSS files for IE 6-8. a fixed width layout.  As they are only relevant to IE 6-8, place it inside a conditional comment.
    <!--[if lt IE 9]>
        <script> src="assets/js/respond.min.js">
  • Breakpoints – the point where the layout changes from say 2 to 3 columns.  Previously specific screen sizes were used based on typical resolutions, however rather use breakpoints which are relevant to your content and functionality.  Not device based, but rather design based breakpoints. Tools to test break points – responsinator, screen fly, there is no breakpoint.

Leave a Reply

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