Definition, background, how to do it and why adapt responsive web design

Like/follow us on Social Media

Posted by John Mwaniki on 12 Sep 2017

Have you been asking yourself, “What is responsive Web design and why on earth should anyone adapt it?”. Well, this article defines RWD, gives a background about it and explains why it is very important.

Background

In the early days, the internet could only be accessed by desktop computers. Thus the websites were built to be viewed using only computers. In the later years, there were advancements in mobile industry and mobile devices could access internet and were used for browsing the web. The websites meant for computers could not fit well in mobile devices and would require much zooming and scrolling right and left to view all the page contents which was very tiresome. For this reason, a trend came for developing mobile sites which were separate entities from the main site. Some websites still have mobile sites (I believe you have seen websites with a domain name such as m.something.com eg m.youtube.com, m.facebook.om etc). While it was easier from a development perspective, there were a significant number of drawbacks. The downsides included increasing maintenance costs, having to promote and maintain separate sites for SEO rankings and even having to build different mobile sites for different types of mobile devices. Building separate sites for every type of device simply wouldn’t be sustainable.

Ethan Marcotte, a web designer is credited for coining the term “responsive design” in 2010 when he published an article discussing the rapidly changing environment of devices, browsers, screen sizes, and orientations. He proposed an alternative concept: responsive design, which calls for building flexible and fluid layouts that adapt to almost any screen.

RWD Definition

Responsive web design is an approach to web design aimed at crafting sites to provide an optimal viewing and interaction experience, easy reading and navigation with a minimum of resizing, panning, and scrolling across a wide range of devices (from desktop computers to tablets and mobile phones). The point is: with responsive design, the website automatically adjusts based on the device the viewer sees it in.

How does responsive web design work?

Responsive web design use fluid grids, media queries and flexible images and media. To work properly, all the three principles need to be implemented.

Flexible Grids

It uses relative sizing/proportion (percentages), rather than pixels to fit all the page contents to the device’s screen size. It accomplishes this by the help of CSS to position the content. Responsive design moves away from the pixel-based approach because a pixel on one device could be eight pixels on another device. By basing text size, widths, and margins on percentages, a fixed size can be turned into a size relative to its display space.

Media Queries

Media queries, also known as breakpoints, are a CSS property that can be used to apply different styles based on the device screen size. The website detects the size of your web browser and correctly displays the page.

Flexible images and media

This feature allows you to adapt images and other media to load differently, depending on the device, either by scaling or using the CSS overflow property.

Scaling in CSS is relatively straightforward—the media element’s max width can be set at 100 percent, and the web browser will make the image shrink and expand depending on its container.

An alternative to scaling media is to crop it with CSS. Applying overflow:hidden allows images to be cropped dynamically so that they fit into their containers.
 

To save on time and money, I encourage you to use front-end frameworks such as Bootstrap or Foundation. Bootstrap is the most popular HTML, CSS, and JavaScript framework for responsive web design which is completely free to download and use!

So, why do your website need to adapt responsive design?

More people are using mobile devices (smart phones and tablets) and the number continue to rise every day. Using Google analytics, check your traffic and you will be shocked at how many visitors are getting to your website through mobile devices. Because Google prioritizes a site’s mobile viewing experience into the factors in its SEO algorithm, responsive design isn’t a choice—it’s essential if you want your site to be visible in search results.

Share this page on Social Media