A Crash Course on Responsive Web Design

Responsive Design






Responsive Layout

Worldwide Browser usage statistics show that for the first time, mobile devices now make up around twenty percent of traffic.

2013 is the first year that Mobile Browser usage has exceeded fifteen percent, no doubt buoyed by the uptake of tablets and “phablets”. Australia and North America both sit at around sixteen percent but the Asian market has exploded to over thirty percent.

Mobile vs Desktop (worldwide)In September leading technology blogs highlighted that tablet shipments would top total PC shipments in the fourth quarter of 2013 and annually by 2015, this was based on figures forecast by IDC.

These figures are speculative and depending on your source and the type of content your website provides, the usage will vary but most sites will indicate a heavy swing to mobile devices.

What does this mean for your Organisation?

In the past few years as mobile devices have gained popularity, many mobile apps popped up mirroring websites requiring companies to trust the clairvoyant powers of developers to predict what the market would dictate as the dominant device. That was reasonably easy with Apple popularising the mobile device and cornering the market, (until the release of the larger-screened iPhone 5), but then add Google and even Microsoft, to a lesser part, to the mix and it’s not as easy to pick the flavour of app to become your proverbial basket.

At the same time basic HTML techniques allowed developers to create mobile and desktop variants of a site and redirect the user to a the appropriate variant based on the user-agent string that your device’s browser uses to identify itself. i.e. if mobile, then load the mobile site.

Companies could again be the master of their digital domain, or could they? Separate sites means separate content; creating higher maintenance costs and leading to out of date and inconsistent content. In most cases the new and shiny mobile platform will be the one to be neglected.

It is a clear trend that more users are mobile and expect information in a format that is digestible by devices that have divergent: resolutions; gestures; and bandwidth. Does your web site provide a usable and effective interface across the multiple devices on which your users are most active?

“Day by day, the number of devices, platforms, and browsers that need to work with your site grows. Responsive web design represents a fundamental shift in how we’ll build websites for the decade to come.”

– Jeffrey Veen

The Responsive Revolution

Mashable predicted that 2013 would be the Year of Responsive Web Design. So what is it? Responsive web sites employ newer web technologies like CSS 3 and HTML 5 to try and provide catch all solutions for web sites. They employ Media Queries to change the layout and information displayed based on the resolution of the device to which the content is served.

By utilising a fluid grid layout based on relative units like percentages rather than fixed units like pixels for element and image sizing, a web site can grow and shrink with the device. This means that one website can provide completely different layouts and functionality, purely in response to the device resolution. When new devices or browsers go to market they will be caught by the appropriate thresholds and not require new custom filters to identify the device and display the appropriate version of the website.

If you are viewing this site in a desktop browser, try making your browser window smaller and notice how the images and content change size, position and flow.

In the following example a page with four columns in a desktop browser would become two rows of two columns in a tablet browser and four rows of one column on a phone. The numbers indicate the pixel width threshold where the rule will be applied.

Mobile

1
2
3
4

Tablet (>=768px)

1 2
3 4

Desktop (>=992px)

1 2 3 4

Pimp My Site

So now that you’ve decided that you need a mobile presence and that developing an app or maintaining a separate mobile website isn’t the way forward, how do you complete a Responsive makeover and transform your web site? You could roll your own and do it all by hand or use an existing framework like Twitter Bootstrap.

Bootstrap is based on a fluid grid layout like many responsive frameworks allowing you to easily implement your existing site’s layout and get a responsive site to boot! It handles the widths, padding and margins of the common HTML elements that are used in web sites ensuring that users can not only navigate and view content consistently but also complete forms online.

Bootstrap also comes out of the box with responsive implementations of popular client side interactive components including: tabs, collapsible panels, carousels and modal windows.

To save design time the framework includes a free to use version of Glyphicons Halflings, giving you scalable vector based icons that are font based and can be scaled seamlessly in your site. It is also very easy to integrate other font icon libraries like Font Awesome, giving you highly customisable and scalable vector icons — size, colour, drop shadow, and anything that can be done with the power of CSS.

Mobile First

Matryoska Dolls

The Twitter Bootstrap has been recently rewritten to be Mobile First. Originally the framework provided a responsive solution with the desktop version of your web site as the standard with tablet and mobile versions as neglected bloated add-ons. Why bloated? Generally the smaller versions still included the desktop content and hid the non-compliant elements of the site.

Now the framework is written like an HTML version of a Matryoshka doll, by implementing an additive rather than subtractive design, the developer can start with the Lowest Common Denominator and add information and functionality as the device allows.

More Information

Please take some time to have a look at some of the responsive sites that we’ve built or converted for our clients over the last twelve months and leave a comment or email me, if you have questions or would like more information on how we can help your organisation meet the growing demand of mobile consumers.

Also the following authors and websites were extremely useful in gathering information for this post:




Leave a Reply