A beginner’s guide to Responsive Web Design

responsive web design featured image

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 an 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 a responsive web design can be incorporated in 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%.

Fluid grid in responsive web design example

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.

flexible images in responsive web design example

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’/>

media queries in responsive web design example

The use of media queries allows us to think outside of the constraints of a 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 a 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 a 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 custom experience for everyone.

4 comments On A beginner’s guide to Responsive Web Design

Leave a reply:

Your email address will not be published.

Site Footer