OPC IT. Managed services and web development in Canberra.

Consider making websites responsive

Date: 
14 July 2014
Authored by: 
Le Tong

Responsive web design, adaptive web design, progressive enhancement, mobile first, media queries...have you been keeping up with latest in trends and terminologies in the wonderful world wide web (WWWW)? It is a little confusing when similar meaning words are used to name the latest techniques, disciplines, phrases and  but do they mean the same thing? Here is a bit of information and some further reading to gain a better understanding of what it is all about. All in all they strive to achieve the same goals of making our lives much easier and our user experience a little less frustrating on the latest and greatest in technologies (talking about smart phones and tablets here) as we navigate through the information super-highway. These devices have become an essential tool in our business and in our everyday life and they are only ever increasing with a multitude of uses and application...such as checking in to airports, for use as our TV remote control, transfer money, tweet, facetime and so on....

Responsive and adaptive web designs

Both terms aim to achieve the same objective of rendering gracefully a website on various devices, desktops, mobile phones and tablet devices.

Responsive web design involves the use of media queries to serve different CSS files to allow a site to change its appearance when viewed on different size screens. The term was first coined by Ethan Marcotte in his article and is achieved using fluid grids, flexible images and media queries. In essence HTML and CSS is all that is needed to achieve this.

Adaptive web designs is sited as including CSS media queries from responsive designs but also makes use of Javascript to change the site’s HTML markup and provide additional enhancements. It is also known as “Progressive Enhancement”.

Media queries

The magic that makes responsive/adaptive web designs possible are media queries. Media queries incorporate a query into a linked stylesheet’s media attribute  to serve tailored stylesheets to a specific range of output devices without changing the content. Such as changing the display on an iphone in landscape at 480px or portrait at 320px as well as a ipad at 1024px by 768px. With each view, menu links and content can be re positioned that best fits the screen site. Media queries comprise of:

  • A media type (print, screen)
  • Condition for a media feature (device height and width)

Use of media queries has become a popular technique to allow websites to rendering gracefully on the various mobile devices and enhance user experience.

Mobile first

This term was first coined by Luke Wroblewski due to the emergence of and ever increasing use of mobile devices. As people shift to using their phones or tablets rather than PCs or working out of the office, there are opportunities to develop sites and applications to capture this market.

The strategy for mobile first is to develop sites and applications that work from the smallest screen resolution first (hence mobile first), to tablet, to laptop then to desktop and beyond. Designing for mobile requires evaluating what content and functionality is necessary and stripping everything else away. Mobile devices are small in screen size so there is not much screen real estate to fit everything in as you would for a desktop so it forces the designer to focus on the most important information to fit within the mobile constraints but still aim to achieve ease-of-use and intuitiveness for good user experience.

Responsive web design examples

A couple of websites that are on the responsive, adaptive or is it mobile first path, use the Responsinator website to view these links or try resizing your browser if you are are on a big screen.

If you are working in Drupal, these themes can be used to achieve responsive designs in your websites, try them out:

Further reading