Responsive Web Design

Imagine a website that performs on a desktop but runs an errand on the mobile screen,obviously your user experience undergoes a big turn off.

In the last few years, the number of mobile users and devices has grown exponentially. As a result of this, providing a seamless, high-quality user experience on desktop, tablet, and mobile is more important than ever.

Fixed Width design

Until the last few years, website was specifically designed to fit well on most desktop screens because the overwhelming majority of internet users surfed the web on desktop devices. Most monitors were 800 or 1024 pixels wide and as a result, websites were designed to fit those sizes. However, eventually other size screens began flooding the market, and web designers wanted their sites to look exactly the same no matter which screen users viewed them on

The Mobile Revolution

For the first time, cell phones had the ability to display websites the exact same way as desktops, but there was still one problem, they weren’t very navigable for the user. Mobile users had to pinch and zoom to do anything and load times were incredibly slow, especially when smart phones were still running on 3G speed.

The Godfather of Responsive Web Design

Web designers and coders may or may not know the name Ethan Marcotte, the man who coined the term “Responsive Web Design” in a paper on A List Apart. In the paper, he described how the design landscape was rapidly changing due to the exponential increase in mobile users. He then proposed that the only way to move forward was to respond to these changes with flexible and fluid web design.

The ways to achieve a responsive fluid website are many in this day of expanding horizons of technology with Media Queries being the most customizable and handy, going forward we would explain some of its basic methodology.

Media Queries

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the “Applies to” line), and all expressions in the media query are true.

3 basic ways to declare Media Queries

@media all and (min-width: 480px) {…}

It’s the most popular approach and it usually works fine.

But sometimes it’s necessary to split big CSS file and extract CSS rules for phone, tablet and desktop into separate files. In such case the following ways are reasonable…

Include into HTML page as a <link>

<link rel=”stylesheet” href=”tablet.css” media=”all and (min-width: 480px)” /> Embed into CSS file through @import

@import url(“tablet.css”) all and (min-width: 480px);

Please note that if you increase quantity of included files you’ll increase quantity of requests to the server and server load accordingly.

So use this possibility wisely.

The principle of Media Queries works fairly simply which involves calling the defined Div and arranging the width according to the size of the screen.

Bootstrap

Twitter Bootstrap is the most popular CSS framework to build mobile friendly websites with a responsive design. It was created in 2010, however it wasn’t officially released until August 2011. Since then there have been a number of releases and it is currently in version 3, with version 4 soon to be made.

The library focuses on a mobile first approach, i.e. websites are designed and built targeting mobile platforms and then made to work on desktops and larger devices. The same can be said about Materialize, however, as outlined above, majority of the framework focuses on how things look and respond when interacted with and as a result there is not a lot in regards to prescribing a responsive user experience (although the flow-text class in Materialize is nice – text and line height adjusts depending on the screen size).

Bootstrap provides a specific framework for constructing responsive user experience using a set of HTML classes, CSS styles and behaviors, i.e. rather than focusing on how things look, it aims to provide a consistent and customizable underlying structure to the HTML.

Whilst Bootstrap provides a default theme, visual presentation and style is not the focus of the framework. As it has been designed heavily using CSS classes, the visual presentation can be easily customized using style sheets. As a result there are a wide variety of themes available for Bootstrap to change the visual presentation and style of your website.

Currently, bootstrap CSS is compiled from Less, though an officially supported Sass port is available.  Future versions of bootstrap (from v4) are compiled from Sass.

Bootstrap also utilizes a 12 column grid system. The grid system for Bootstrap 3 has 4 intervals (< 768px, >=768px, >=992px and > =1200px). The functionality available via the inbuilt classes is much more comprehensive in Bootstrap compared to Materialize allowing more freedom and flexibility in how the site adapts to changes in screen sizes and devices.

Bootstrap is a mature framework that is much more fully fleshed out than Materialize. For example:

Basic capability to use classes to hide or show elements when printed is natively provided.

The documentation is far more comprehensive (and has more fleshed out usage examples).

Helper classes are available to assist with accessibility compliance, e.g. for screen readers and keyboard navigation

Browser compatibility is extensive, working with IE9+ and in some ways IE8

Responsiveness is a typical feature in the Web Development world and knowledge of it is imperative, be it using a framework or a easily customization media queries.