designMay 15, 2018

A beginner’s guide to Responsive Web Design

Nikita Roy

You’ve probably heard about Responsive Web Design a lot. Back in the day, web developers used to design websites that were viewed only on desktop devices. As technology advanced, the attention span of internet users kept on shrinking as did the size of the devices they used and users began looking for information at the tip of their fingers. Quite literally!

With all these drastic developments, having a single website fit only for an individual device obviously made little sense. The immediate solution was to have multiple versions of the same website to cater to the various devices. While at first glance, having mobile websites did solve the problem of having to cater to multiple devices, it could only go so far. First, you have to take the additional trouble of having to manage two websites. The mobile version of your website is basically a copy of your main website minus certain features that a mobile device does not support. Which means, in turn, cutting down on content for the mobile users. Secondly, having a mobile website would eventually mean you would also have to have a tablet website or a palmtop website because, well, the number of devices in the market is only going to increase.

This is when the genius of responsive web designing comes to the rescue. Coined by Ethan Marcotte in 2010, responsive web design (RWD) basically means that all your web pages will adapt well across a variety of devices and window or screen sizes. The layout of the webpages, as well as the content, is adapted and optimized to fit multiple screen sizes to give the user optimal viewing experience, whether on an android phone or a cinema display.

So how exactly does responsive web design work? There are four key elements through which responsive web design can be incorporated into your website:

Fluid Grids: Using percentages instead of pixels

The first part towards the implementation of responsive design is incorporating fluid grids. Earlier, each element of a webpage was made up of fixed pixel sizes. With flexible grids, we do away with pixels and deal with percentages and EM units for measurements. This way the webpage scales itself to fill a set percentage of the screen and the elements within the design change their size as the size of the device or browser changes, while all the time remaining in proportion. To achieve this, the process is to find the relative percentage width of each element. This can be done by dividing the fixed width of the element with the width of its container element. So say, if the width of an element is fixed at 300px and the width of its container element is 960 px, using our formula, we get

300px/960px = 0.315.

Now in order to get the relative width, we just multiply it by 100 ie,

0.315*100 = 31.25%.

Hence, now even if we resize the browser or use devices with different resolutions, the relative width of our element will always remain at 31.25% of its container element.

Flexible Images: Max-width and <picture> tag

Similar to fluid grid elements, we can also create flexible images. One method is using the width and max-width properties. Using the max-width property for images, we can prevent the images from exceeding the width of their containers.

Eg: img {

Max-width: 100%;

}

This simple rule renders a really handy constraint to images on our webpages. With this, our img element will render at whatever size it wants as long as it is narrower than its container element. Once it starts to cross the width of its container, the max width enforces it to match the size of the container.

The second method is using the <picture> tag. This tag helps us specify different images for differing circumstances. It allows us to place multiple <source> tags, each specifying different image filenames along with the conditions under which they should be loaded.

Here’s a basic example which checks whether the viewport is smaller than 500px, if so it loads a smaller image:

<picture>

<source srcset=”small.jpg” media=”(max-width: 500px)”>

<source srcset=”default.jpg”>

<img srcset=”default.jpg” alt=”default image”>

</picture>

CSS Media Queries: Selective rules to stylesheets

With CSS media queries, we can specify as to when to apply certain CSS rules. It allows us to build multiple layouts using the same HTML document by serving the stylesheets selectively based on browser window size, screen orientation (landscape or portrait), screen resolution, color etc. Media queries can be called like this:

<link rel = ‘stylesheet’ media = ‘(max-device-width:320px)’
href = ‘mobile.css’ />

<link rel = ‘stylesheet’ media = ‘(min-device-width: 1600px)’

href = ‘widescreen.css’/>

The use of media queries allows us to think outside of the constraints of screen size or resolution and start building websites which adapt flexibly to different media.

Hamburger Navigation: Minimalist design

The set of three lines found at the top corner of most websites? Yes, that’s what we call the hamburger icon, sometimes also called the Sandwich icon. The hamburger icon is a solid part of responsive design. It was initially designed to cater to only mobile devices where there was a space crunch and a lot of menu items to incorporate. The use of the hamburger icon was kind of revolutionary in the design space since it addressed the large menu- small space issue perfectly and also rendered a beautiful minimalist approach to design. The hamburger menu makes your global menu and header clean and uncluttered, something which is primary to design aesthetics. Before long, the icon shifted from mobiles to universal websites. And now you can see all major websites using the hamburger.

Responsive web design not only saves a lot of frustration but also makes for great user experience. Using responsive design, we can create custom solutions for a wide range of audience across multiple devices. And it proves to be a good customer experience for everyone.

Share this Blog

Uncategorized Dec 28,2017

45 analytical terms that will improve your understanding of website analytics.

Nikita Roy

design May 15,2018

5 tips to choose the best web agency for your business

Nikita Roy


Thanks a lot for this tutorial, wonderful guide for website designing!

Nikita Roy says:

We are glad it could be of help!

Your email address will not be published. Required fields are marked *