1,611 reads

Quick Introduction to Responsive Web Design For Beginners

by FabricioNovember 11th, 2019

Too Long; Didn't Read

Responsive web design is a design that adjusts and adapts to any viewport (user’s visible area of the web page) rather than only a specific viewport, irrespective of the visualization device. The viewport is a meta tag located in the <head> of the HTML and is defined as the visible part of a web page that a user can see from their device's screen. A responsive website has a better positioning in search engine results since for example, Google gives preference to those sites able to accommodate all screens.

Companies Mentioned

featured image - Quick Introduction to Responsive Web Design For Beginners

Responsive web design is a design that adjusts and adapts to any viewport (user’s visible area of the web page) rather than only a specific viewport, irrespective of the visualization device.

The idea of web sites able to adapt to different viewports was irrelevant for quite a lot of time mainly because the only way to surf the Internet was through a desktop computer and the size of its screens it is pretty much standard.

With the advent of smartphones and its rapid overcrowding, things changed rapidly, as you know the size of the screen may vary a lot from device to device in this sector and then a problem arose: web sites did not look good on small screens. In today’s world Internet access through mobile devices is increasing each year and according to some sources, more users acceded the when from devices like smartphones and tablets than they did from desktops or laptops.

Developers had to think in new ways to display web content and make it look good in any sort of devices and viewports. The first ideas came up in 2008 when World Wide Web Consortium (W3C) published its Mobile Web Best Practices and it is been evolving since then until what we have today.

But what makes a web design, responsive? The answer may be different depending on who you ask but there is some consent about two required components: the viewport meta tag and media queries.

Viewport meta tag

In a nutshell, the viewport is a meta tag located in the <head> of the HTML and is defined as the visible part of a web page that a user can see from their device’s screen. This tag allows us to set up how a web site should render in a web browser for mobile devices. The following code is an example of a viewport meta tag:

<meta name=”viewport” content=”width=device-width, initial-scale=1">

In the preceding meta tag, we are using the content attribute to specify the width of the viewport to make it responsive we use device-width to indicate the width should match with the viewport of the device. With the initial-scale attribute, we ensure the zoom will not be applied and the layout will always show on a 1:1 scale. Of course, we can have many other variants with the viewport tag but the one shown in this example is widely used for general purposes regarding responsive web design. The next screenshot shows the same website, one with the viewport meta tag added in and the other one without it, so you can see the difference.

Media Queries

While the viewport meta tag is used in HTML, media queries are CSS modules that conditions our style sheet to apply certain properties depending on the different viewports where it is displayed.

In the following example, a set of rules will be in effect if the viewport width is 980px or less.

Final thoughts

A responsive website has a better positioning in search engine results since, for example, Google gives preference to those sites able to accommodate all screens. More importantly, a website needs to have a responsive design because users are increasingly acceding to the web from small devices and this should not be a reason for discomfort to them. Therefore, a responsive web design generates a pleasant user experience and that will make your website more valued.

Image by maratopiadigitalmarketing.co.uk

Image by woorank.com

Image by web designers wall