Catering to different platforms

At this point, you may hopefully be asking yourself, "What about mobile devices?"—it's a good question after all: the whole point of responsive design is to cater to mobile devices! Most of the tips and tricks we will encounter throughout this chapter will work on a mobile platform, although there are some useful guidelines that are worth noting:

• Shrink the images. Use any online service such as TinyPNG or XnConvert; they need to be made as small as possible without sacrificing too much quality.
• Be careful with retina images. Memory usage for these can vary dramatically between different mobile devices, so ensure you set your media queries appropriately.
• If you're using jQuery to provide fallback support, then consider using conditional loading to only call jQuery when needed and not by default.
• Make sure that different sized versions of the same image have been created. There is no point in forcing a mobile user to download a huge file when a small one will do! To get help with this, look online for tools such as Andi Smith's Responsive Images tool at http://www.andismith.com/grunt-responsive-images/, which can help automate the process.
• Test in an online applet such as the Responsive tool available at http://coolestguidesontheplanet.com/responsive/, as there is no substitute for testing! It is much better to test thoroughly now and fix errors before going live than to suffer the embarrassment at a later date.
• Work in a mobile first capacity. Mobile devices need to be set to download the smallest images first; browsers will handle the replacement with larger images automatically if the media queries have been created within the site.
• Consider using something similar to the Network API (http://code.tutsplus.com/tutorials/html5-network-information-api--cms-21598) or Modernizr (http://www.modernizr.com) to determine whether the visitor is using a mobile platform; we can link these to jQuery/JavaScript based media queries if required to determine which image should be served.
• Don't use display: none to hide images, serve them in media queries. Using the former approach still downloads them even if they are hidden.

  Tip

  Remember this sentence from RevUnit's Seth Waite: "1 in 4 people abandon a web page that takes more than four seconds to load." This becomes more critical with mobile devices; loading a large image will blow this straight out of the water! You can see his original article at http://sethwaite.com/2012/08/how-slow-website-speed-destroys-your-conversion-rates/.

Now that the theory is out of the way, let's get coding! We're going to begin with one of the key elements of working with responsive media—catering to high-resolution (hi-res) or retina-based images.