Responsive Web Designing – RWD

Article by Janani Dabare    1 Comment

Responsive web designing is an approach where a website is built with fluid grids which fluidly change its layout to fit any screen size or device with a layout suited to that device.

With the continuous growth of smartphones and tablet usage and the improvements of networks like 3G and 4G, browsing the Internet is now available for almost all the people around the world. As more people are beginning to use mobile devices and latest technologies for every task that used to be only capable on desktop machines, it is clear that mobile is taking over the Internet surfing. And it is not just surfing; it is everything from browsing social media, checking emails, checking train schedules, weather reports and also to do online shopping.

Since mobile Internet usage is increasing rapidly, many businesses realized the need to cater for the mobile users, and recently many decided to support for a separate “mobile” version of their website. Therefore, this has led web designers on how to make their websites look better and user friendly for mobile devices. Basically, there are two different approaches for the same purpose,

• Responsive web designing
• Adaptive web designing

Both of these methods can fix the website for the mobile use, but with very different approaches. Here is a basic breakdown of the differences between Responsive and Adaptive web designing.

Responsive web design is an approach where a website is built with fluid grids which fluidly change its layout to fit any screen size or device with a layout suited to that device. Websites built with a responsive approach are made to support all screen sizes. This responsive approach reacts the way as the liquid does when you poured into a container, by expanding its width or contracting to fit with the available space. This is what responsive websites does, it expands and contracts its layout while the various elements of the page change their placement as needed to display the content properly on the current screen size.

Adaptive web design is an approach where a website is built for predetermined set of screen sizes and devices using a set of predefine layouts. Adaptive web design differs from responsive web design, that there is not one layout that always changes; there are several distinct layouts for multiple screen sizes. As an example, there could be a specific layout for mobile phones, tablets and desktop users. The site detects the type of the device and delivers the preset of layouts for that device.

Adaptive and responsive web design can prepare the site for mobile use, but with two different approaches. It is important to select the most suitable approach by concerning the budget, goals and network bandwidth. Considering the different screen sizes of the mobile devices, the below content of the article is focused on responsive web design approach.

Responsive Web designing (RWD) is the approach that emphasis, the design and development should respond to the user’s behavior and environment based on screen size, platform and orientation.

According to ‘Ethan Marcotte’,
“Responsive design is not about ‘designing for mobile’. But it’s not about ‘designing for the desktop’, either. Rather, it’s about adopting a more flexible, device-agnostic approach”

As the user switches from their laptop to iPad, the website should automatically adjustment to accommodate the resolution, image size and scripting abilities. In other words, the website should have the technology to automatically respond to the user’s preferences.

The Concept of  Responsive Web Designing

Responsive web designing works with three techniques that all work in conjunction:

1. Flexible grids and layouts
2. Flexible images and videos
3. CSS media queries

Flexible grids and layouts

Flexible grid is a concept of building a layout of the website with a flexible grid which is capable of dynamically resizing to any width. These grids are built using relative length units. Instead of designing a layout based on fixed pixel values or random percentage values, fluid grids are more carefully designed in terms of proportions.

Instead of setting widths and heights in fixed pixels, it sets widths and heights in percentages or ems values. These relative values are then used to declare common grid properties such as width, height, margin, or padding. Finally this will give you a flexible design, which will automatically respond depending on their relative bounding box.

Flexible layouts do not support the use of fixed measurements such as pixels or inches, because the viewport height and width can vary depending on the device. Fortunately Ethan introduced an easy formula to help identifying the proportions of a flexible layout using relative values. This formula is based on taking the target width of an element and divides it by the width of its parent element. The result then is the relative width of the target element.

Target / Context = Result

By dividing the target element by its context, it is possible to get the specific width or the height of that container.

The value should not be rounded up as the browsers themselves will automatically round up those values to a suitable size according to their mathematical precisions.

Applying the flexible layout concept and the formula to all the parts of the gird will create a completely dynamic website by managing the viewport size. By adjusting the min-width, max-width, min-height, and max-height properties it is possible to have more control within a flexible layout.

Media Queries

In some cases even scaling the layout proportionally will not effectively display the content in a browser viewport. Especially when the layout gets too small or too large the text may become unreadable and the layout may begin to break. To avoid this situation media queries can be a better solution.

Media queries were built as an extension to the commonly used media types. It has ability to specify different styles for different browsers and devices by changing the width of the view port, device orientation…etc.
There are different ways to use media queries in a project;

1. Using the @media rule inside an existing style sheet

   @media only screen and (max-width: 768px) { /* your css goes here */ }

2. Importing a new style sheet using the @import rule

   @import url("css/tablet.css") only screen and (max-width: 768px);

3. Linking to a separate style sheet within a HTML document

   <link media="only screen and (max-width: 768px)“ href="css/tablet.css"rel="stylesheet">

Logical Operators in Media Queries

There are three different logical operations in media queries

1. and– Allows to add an extra condition to the query

   @media all and (min-width: 800px) and (max-width: 1024px) {...}

2. not– Disproves the query, specifying any query but the one identified

   @media not screen and (color) {...}

3. only– New operator and is not recognized by user agents using the HTML4 algorithm, therefore it is used to hide the styles from devices or browsers that don’t support media queries

   @media only screen and (orientation: portrait) {...}

Understanding a media query

One of the most commonly used media feature is the height or width of the device or the browser viewport. The height and the width can be found by using the height, width, device-height, and device-width media features.

body { background: red; }
@media only screen and (max-width: 320px) {body { background: orange; } }

According to the above query,
Screens 0 to 320px:
body’s background will be orange instead of red
(overrides the first rule)

Screens larger than 320px:
body’s background will be red

Media Query Browser Support
Unfortunately media queries does not work for Internet Explorer 8 and below as well as other legacy browser. To fix that issue there are few polyfills written in javascript.

Respond.js
A fast & lightweight polyfill which only looks for min/max-width media types which supports for for IE 6-8, and more.

CSS3-MediaQueries.js
More developed version and heavier polyfill. Offer support for a larger array of more complex media queries.

Flexible media
When the viewports begin to change their sizes, media will not always accommodate the container size. Images, videos and other media types need to be scalable by changing their size as the viewport changes in order to achieve a responsive website.

The most advisable way to make media scalable is by using the max-width property with a value of 100%. By doing like that when the viewport gets smaller most of the media types will scale down according to the container width.

img, video, canvas {
	max-width: 100%; }

But max-width property does not work well for all instances of media, specifically around iframes and embedded media. To fix that

• The embedded media element needs to be absolutely positioned within a parent element
• The parent element need to have a width of 100% so that it may scale based on the width of the viewport.

Previewing and testing

Testing is a critical part in responsive web design process. Purpose of responsive design is to make the website useful on any type of device; therefore it requires extensive testing in order to make sure your site is behaving perfectly in different browsers and devices. Fortunately now there are number of different tools and resources available online to test the responsive design.

Best practices

An effective responsive website is designed with more than one thing in mind, it is not designed only to adapt to different screen sizes, it is designed to offer a best possible user experience to the users. There is no specific way to approach responsive design, but by applying the main responsive web design tips and best practices will help to go the extra mile to make the website mobile friendly. Tips and tricks to approach accurate responsive web design.

• Mobile first approach
• Give buttons and links large, clickable areas
• Test your responsive design on physical mobile devices
• Use web fonts for icons
• Optimize the site for speed
• Make Use of HTML5 Input Types
• Use a Proven Responsive Framework
• Make the content modular

References:

• Learn to Code HTML and CSS By Shay Howe
• Responsive Web Design By Ethan Marcotte
• Treehouse Web Design and Development Learning Site – teamtreehouse.com
• Image courtesy: smashbrand.com