Responsive Web Design: All You Need To Know

Image for post
Image for post

Note: The code samples may be displayed improperly because of markdown. I recommend continuing to read the original article on our blog to make sure all the examples are displayed properly.

Image for post
Image for post

What Is A Responsive Website?

If you go to a store to purchase a mobile phone, the salesman floods you with so many devices and all of them differ from tip to toe physically. The “number of inches” has become a common parameter for a person to judge his phone. Devices are available in any size you want with any specification loaded onto them. Desktops are no different. The following example will show you how diverse these products have become. In my own house, I can open a website on my mobile (6.1 inches), on my father’s mobile (5.5 inches), my laptop (15.6 inches), my tablet (13 inches) and my TV (42 inches). Obviously this is just a small portion of the devices available in the market today. Take a look at the global stats (from July 2019- July 2020) according to GS StatCounter

Image for post
Image for post

What Is Responsiveness?

Responsiveness is a website’s ability to adjust or adapt to the browser’s viewport automatically. In layman’s terms, a responsive website “responds” to the browser’s viewport dimensions. A responsive website will automatically shrink on my mobile phone to preview a mobile view of the website and will automatically expand on my desktop. Whereas a non-responsive website just ignores the viewport dimensions and the result is something like this:

Image for post
Image for post

Viewport & Meta Viewport Tag

First things first, websites are not humans. They won’t adjust automatically to the browser window. It is a comfortable guess that first to shrink or expand our website, we need to calculate the viewport of the browser and take it as a reference for our calculations. A viewport is an area that is visible to the user on the browser window. A bigger screen will have a larger viewport and a smaller screen will have a viewport less in number.

Image for post
Image for post
Image for post
Image for post
<meta name=”viewport” content=”width=device-width, initial-scale=1.0">

Viewport Attributes

There are other attributes available for the adjustment of the viewport:

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

Viewport Adjustments On Orientations

It is clear by now that the browser will fetch the webpage in its original form. The browser will then calculate the viewport and the webpage will be adjusted accordingly. But the orientation part comes under special cases when we refer to this responsive web design tutorial. The webpage will adjust normally if the website was fetched keeping the mobile in the landscape orientation or portrait orientation. But, if the user changes the orientation, the browser will zoom the page in order to make it look like the webpage adjusted according to the viewport.

CSS Media Queries

Media rules were introduced with CSS2 with an aim to provide different styles for different media types such as mobiles or desktops or even printers. With @media rules, a developer could provide different style sheets for printers, a different one for mobiles, etc. But, instead of unwinding the complexities of the @media rules, the developers chose the path of ignoring these rules. This was also forced by the fact that at that time, these media were not so popular, and investing the time in developing a separate stylesheet was not worth it.

Media Types In CSS

The CSS media query rules include four types of media types:

  • Screen
  • Print
  • All
@media only screen and {expressions}//CSS styling
  • Only
  • Comma

Media Features In CSS

Once the developer is done with deciding the media type he wants to target (although he can skip that part), next comes an important and compulsory part of media query which is writing the features. Media features describe the changes you would want to make once the query is executed. For example, look at the following media query which is written for the screen and targets an aspect ratio of 13/6.

@media screen and (aspect-ratio: 13/6) {….}
  • Height: Calculates the height of the viewport.
  • Aspect-Ratio: Width to height aspect ratio of the viewport.
@media (min-height: 680px) and (orientation: landscape) {…..}

Multiple Stylesheets For Multiple Media Queries

Apart from defining everything into the main HTML source code, the developer can also prefer using multiple media queries for multiple media types and just link them on the main page by defining these queries in different stylesheets. For example, creating a separate stylesheet for the screen devices, a separate one for the printers, etc.

Image for post
Image for post

CSS Grids

In the development of a website, we often fill the page with multiple columns. Look at the current page on which you are reading this responsive web design tutorial. A left column contains the sharing options. The right columns contain the category of articles and the middle column contains the main article content. This is a multi-column strategy that is very common and you would find it in almost every other website. The requirement of a helpful technique for the development of responsive website content was most requested by the developers all around the world and this led to the introduction of CSS Grids.

Image for post
Image for post
https://www.creativebloq.com/
class_name {display: grid}
Image for post
Image for post

Responsive Images

A website’s integral parts are images. Images constitute a good portion of the size of the viewport as well a good size of the total web page’s size. A study found out that 50% of a webpage’s size is that of images. Images that are not responsive can mess up the whole alignment of the website. Non-responsive images are also unable to deliver the meaning on the mobile view of the website that they were delivering on the desktops.

Image for post
Image for post
  • Art direction and the picture element

The SRCSET Attribute

The “srcset” is an attribute of the image tag that takes the reference of multiple images as an input and provides an appropriate image to the browser. Appropriate here refers to an image that will most closely resemble the resolution of the screen. For a bigger screen, the same image but with bigger resolution is fetched from the server and vice-versa. For a developer, it makes sense to provide a user with lower bandwidth with a considerably smaller sized image. But on the downside, we need to save multiple image copies on the server. This increases our server resource usage.

<img srcset=”boat-480.jpg 480w, boat-800.jpg 800w” sizes=”(max-width: 600px) 480px, 800px” src=”boat-800w.jpg” alt=”Boat Landscape”>

Picture Element For Image Responsiveness

Using srcset attribute is good but it poses one major non-technical problem. If an image is having a subject such as a man, the same image when rendered on the smaller screens will make the subject so small that the beauty of the image is disturbed. For example, look at the following image:

Image for post
Image for post
<picture><source/><source/>……..<img/></picture>
<picture><source media = “(max-width: 799px)” srcset = “kutch-480.jpg”><source media= “(min-width: 800px)” srcset = “kutch-800.jpg”><img src= “kutch.jpg” alt= “Rann Of Kutch Landscape” /></picture>

CSS Flexbox

The flexbox module is short for a flexible box which is quite similar to the CSS Grids. Both of the modules focus on adjustments of the different elements on the webpage. But there is a very slight difference. Flexbox is a one-dimensional module whereas CSS Grids is a two-dimensional module. By one-dimensional module, I mean that at one time while designing the box, we can focus on only one dimension. But as you have noticed in the grid section of this responsive web design tutorial, we focussed on two axes at that time. This axis on which we focus in Flexbox is called the main axis and is defined by the attribute flex-direction.

  • Row-reverse
  • Column
  • Column-reverse
Image for post
Image for post

Responsive With Other Web Languages

If you have developed a website, preferably the front-end, or are aiming to develop one, you must be knowing the combination of languages we use during development. Apart from CSS, the most popular languages for front-end web development are JavaScript and jQuery and they are equipped with a lot of interesting features for mobile view of website.

Responsiveness With JavaScript and jQuery

JavaScript and jQuery can be used to do the same stuff that we did in the above section of the responsive web design tutorial. For example, using CSS for calculating the width of the viewport or image responsiveness, etc. JavaScript and jQuery provide extra features and functions which would help you to provide something more than what you were provided with the CSS base functions.

<script>
var w = window.innerWidth;
var h = window.innerHeight;
</script>
const selctimg= document.querySelectorAll(“img”);selctimg.forEach(elem => elem.addEventListener(“click”, shrinkSize));

Developer Tools In Responsive Web Design Tutorial

While developing a website, no matter how hard we work to design it perfectly there are very high chances that one or the other element will break. A website contains a lot of elements that work with each other synchronously. Even a single misalignment may result in another element’s misalignment and the chain reaction follows. So, if we have coded everything according to the responsive web design standards and still something breaks, should we recheck the code manually? No, that’s a really bad idea. A better option is using the browser’s developer tools.

Webpage Optimization For Better Responsiveness

By following the above methods and processes, we have successfully done our part to convert the website to a responsive website. In this section of the responsive web design tutorial, I would like to mention the three most common mistakes that a new or experienced web developer makes while developing the website. These mistakes can shake the elements in the view of responsiveness, but not always. So, we always recommend developers to be cautious while designing the mobile view of the website rather than making huge efforts later on. I am listing down a few pointers to keep in mind while designing a responsive website-

Alternatives To Responsive Web Design

Everything that I discussed above in this responsive web design tutorial basically revolves around coding. By coding, I mean analyzing and writing the logic from the scratch. For example, writing the media queries to suit the screen size and calculating the threshold sizes, etc. But there are other alternatives that I would like to discuss before wrapping up this responsive web design tutorial.

Bootstrap

Bootstrap is a framework that is made purely for responsive website design. Bootstrap is very helpful for each and every developer as it has everything optimized beforehand for responsiveness. So, when I am making an input field for the registration forms, it automatically shrinks to the appropriate size if I am using Bootstrap methods. They are inbuilt methods and the developer need not worry much about the responsiveness. Although Bootstrap is not 100% effective. Since bootstrap will contain only a few methods for different purposes such as forms and images etc, for other elements like div, you need to do the hard work. So, a combination of both is much better.

Templates Designed for Responsiveness

Templates are available all over the internet which are already optimized for responsiveness and you just need to change the data. It works much like WordPress templates. Using a template is generally not recommended because it restricts the freedom of a developer and bounds him into restraints. It is alright to use a responsive template when the time is less for the project, otherwise, ignore this method.

Perform Cross-Browser Testing

The above-stated practices are meant for the development of the website. Once that is achieved by applying everything mentioned in this responsive web design tutorial, it is time to act like an end-user and perform testing on the website. Testing a website for multiple browsers is very important since till now you were focused onto your own browser. There are a lot and lots of options for the end-user and he can open your website on any of the browser, operating system, resolution, and version of his choice. Therefore, it is better to test before publishing.

Conclusion

Image for post
Image for post

Author Harish Rajora

Written by

Product Growth at @lambdatesting (www.lambdatest.com)

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store