Introduction to Responsive Web Design

By now you might have heard the term “responsive” being used in describing an aspect of web design. Don’t worry if you haven’t, because I’ll bring you up to speed on what it is and how you can make the most of it.

Here at Mogul I’ve been working on a number of responsive websites over the last year or so. One of the first ones was the new Massey site.

Responsive web design in its essence is the practice of using fluid grids, flexible images and media queries to progressively enhance a website on various screen resolutions. This means that the same website is served up for your phone, tablet, netbook and desktop computers.

Media queries consist of a media type and expressions to check for certain conditions of a media feature. The most common feature used is “width” as this pertains to the screen size of a device.

For example, if we’re using a mobile media query, we’ll put our mobile styles within its tags to ensure these are adhered to when viewing on a mobile device.

With more and more tablets and smartphones coming on to the market, and all of them having different screen sizes it’s a smarter bet to have your website flex and respond, than to serve up a separate site or different theme just for that device.

If you’re reading this on the Mogul blog on a desktop or laptop, try resizing your browser to see how this blog resizes; the menu shrinks then turns into a drop down navigation, and the sidebar shrinks then drops down below the content even the H2 headings scale and respond to the screen size.

If the website wasn’t responsive and you were viewing it on a smartphone, it might look zoomed out to fit on the screen, and you would have to zoom in on the content to read it. Worst case scenario: you might only see a portion of the page and have to scroll around to see the rest of the site. *shudder*

If you want to futureproof your website, responsive is the way to go. You might need to add in the odd media query once Apple releases its holographic 10x retina display but it beats making costly separate sites to cater for different devices. As always, it also depends on your website, company, and budget. Going responsive might not be the golden goose for every case.

To learn more about responsive web design, have a browse.

If you’re interested in developing a future proof website with mogul, get in touch.