Responsive web design services in Gauteng sounds incredibly simple. Opt for flexible grids for the layout, use flexible media (images, video, iframes), and apply media queries to update these measurements to best arrange content on any viewport. In practice, we’ve learnt it is not really that easy. Tiny issues that crop up during every project keep us scratching our heads, and occasionally even carving fingernail trenches on our desks. Since I began curating the Responsive Design Weekly newsletter I’ve been fortunate enough to speak with many members of the web community and hear their experiences. I wanted to find out exactly what the community really wanted to learn, so I circulated a survey to readers. Here are the top results:

  1. Responsive images
  2. Improving performance
  3. Responsive typography
  4. Media queries in JavaScript
  5. Progressive Enhancement
  6. Layout

With those topics in mind, I ran a series of podcasts asking some of our industry leaders for their thoughts. In their responses, one point was unanimous: focus upon getting the basics right before you start worrying about exciting and advanced techniques. By taking things back to the basics, we are able to build a robust interface for everyone, layering on features when the device or user’s context allows. ‘So … what about these advanced techniques?’ I hear you ask. I think Stephen Hay summed it up best when he said: ‘The ultimate RWD technique is to start off by not using any advanced RWD techniques. Start with structured content and build your way up. Only add a breakpoint when the design breaks and the content dictates it and … that’s it.’ In this article, I’ll begin with the basics and add layers of complexity as the situation allows, to build up to those advanced techniques. Let’s get started.


Responsive images

Fluid media was a key part of RWD when it was first defined by Ethan Marcotte. width: 100%; , max-width: 100%; still works today, but the responsive image landscape has become a lot more complicated. With increasing numbers of screen sizes, pixel density and devices to support we crave greater control. The three main concerns were defined by the Responsive Images Community Group (RICG): The kilobyte size of the image we are sending over the wire The physical size of the image we are sending to high DPI devices The image crop in the form of art direction for the particular size of the viewport Yoav Weiss, with help from Indiegogo, has done the majority of the work on the Blink implementation – Google’s fork of WebKit, and by the time you’re reading this it will be shipped in Chrome and Firefox. Safari 8 will ship srcset, however the sizes attribute is only in nightly builds and <picture> is not yet implemented. With the arrival of anything new to our web development process, it can be difficult to get started. Let’s run through an example step by step.

From a performance point of view it doesn’t matter if you use min-width or max-width in the sizes attribute – but the source order does matter. The browser will always use the first matching size.

Also, remember we are hard-coding the sizes attribute to be directly defined against our design. This may cause issues moving forwards. For example, if you redesign your site, you’ll need to revisit all of the <img> or <picture>s and redefine the sizes. If you are using a CMS, this can be overcome as part of your build process.

WordPress already has a plugin to help. It defines the srcset on WP standard image varieties and allows you to declare sizes in a central location. When the page is generated from the database, it swaps out any mentions on <img> and replaces them with the picture markup.



  • Think about whether you really need to include an image. Is the image core content, or is it decorative? One less image will mean a faster load time.
  • Optimise the images you do need to include using ImageOptim.
  • Set expire headers for your images on your server or .htaccess file (see details under ‘Performance’).
  • PictureFill provides polyfill support for pictures.


  • Lazy load your images using jQuery’s Lazy Load plugin.
  • Use HTMLImageElement.Sizes and HTMLPictureElement for feature detection.
  • The advanced PictureFill WP plugin, found on Github, will allow you to define custom imag