1.6K Followers
·
Follow

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.

In the late 90s, it was an easy life for the developers. The internet was fairly new and only two browsers ruled the world wide web. The screens were fixed and small desktops were all that anybody could purchase. There was no choice after all. You either buy this or nothing at all. Today, it looks like a faded world making it hard to imagine how those people functioned. But if I see it from a web developer’s point of view, everything is a mess now.

Image for post
Image for post

When Jack Ma started building websites, he didn’t worry about how it would look on a mobile or tablet because they didn’t exist. There were fewer elements; developers would just put a few hyperlinks, a lot of content, and maybe one poor quality image. Nobody cared about the bandwidth because everyone was working on poor internet network connections. I remember watching an interview when Jack Ma was asked, “How did you convince your team to work on something called the Internet which was fairly new in those days?”and he said, “It was very hard to do. I called my team members into my apartment to show them how the Internet works and a single web page took 20 minutes to load. They were not convinced, not even one.”

Jack Ma’s teammates might have been wary of the internet but that is definitely not the case anymore. As the Internet started to grow wider and wider, building websites became interesting and complicated at the same time. From a basic website to a responsive website, we have come a long long way. The magnitude of the internet and devices accessing it is definitely a little scary. But this responsive web design tutorial will guide you all the way through in creating an impressive mobile view of a website.

What Is A Responsive Website?

Image for post
Image for post

A responsive website will be able to render and function efficiently in each of these devices, regardless of the screen size, operating system, or browser version. This brings us to the question, “How can we adjust our website to any screen that opens it?” This responsive web design tutorial is all about that and will help you convert your website into a responsive one.

Needless to say, designing a responsive website is the most important thing to consider while developing a website today. This responsive web design tutorial will also guide you about overcoming the responsive web design challenges. But before learning the techniques, I should clarify what responsiveness is so that we all are on the same track.

What Is Responsiveness?

Image for post
Image for post

Responsiveness has now been with us for some time and it is the nucleus of research in web development today. But responsiveness does not end here. With everyday improvements and subtle design tactics, we have brought responsiveness to another dimension. Today, a responsive website is not just about adjusting to the screen size but to adjust your elements and design too. A website on the desktop will have an element like “Watch Now on Prime” and it will disappear when the same website is opened on the mobile phone. Not only this, but elements also adjust themselves and create new elements for a better presentation and user experience.

This detailed guide on UI design mistakes that can be avoided for better mobile view of a website will help you understand this responsive web design tutorial more. All in all, creating a mobile view of a website does not happen magically! Developers code it into the website and this is what we are here to learn. Moving on with this responsive web design tutorial, we will discuss every aspect of a responsive website one by one and find out how you, as a developer, can adjust it for the mobile view of the website.

Viewport & Meta Viewport Tag

Isn’t it? Actually, this is partially true. The viewport is not fixed on any of the devices. So, if you are thinking that my laptop will have a fixed viewport then let me resize my browser screen and show you the viewport now. For example, the following code will display the viewport to the user on full-screen mode (Microsoft Edge):

Image for post
Image for post

Notice how the number changes when the same browser window is resized on the same device:

Image for post
Image for post

The code for the above HTML file is as follows:

This defines one more case in our journey of responsive web design tutorials. Not only should the website look great when the user presses Enter on that browser but it should also adjust itself when the user resizes the browser window. I will cover it in the later sections of this responsive web design tutorial.

Setting the viewport is a very easy job and it should always and always be the first thing you do before coding the website. The following tag is used to calculate the viewport and adjust the elements of the website automatically so that the elements scale accordingly.

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

Width = device-width is used to tell the machine to adjust the width of the website according to the width of the browser i.e. a 100% scale. The website will be adjusted (expanded) according to the viewport. This attribute can also have a fixed property such as width = 500. Assigning a fixed value is denoting the minimum viewport value required for the website. If the viewport is larger than that, the responsive website is expanded accordingly.

The initial-scale = 1 denotes the zoom level I am setting in order to match the browser’s pixels. A value of 1 means keep the relationship as 1:1 for the browser’s pixels and the website’s. Increasing the initial scale value to two will zoom to 2x. All of this happens after the webpage has been fetched from the server in its original form. The process of adjusting the webpage happens at the browser’s end. Viewport also supports a few more attributes.

Viewport Attributes

Minimum-scale: This property defines the minimum zoom that a webpage can be done when rendered.

Maximum-scale: Converse to the minimum-scale, this property defines the maximum zoom that a webpage can be done when rendered.

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

User-scalable: The user-scalable property is used for specifying the browser whether to scale the webpage or not. If the user-scalable is set to 0 or “no” then the webpage will not scale on the browser screen.

Viewport Adjustments On Orientations

It often leads to chaos as this process creates a horizontal scroll when elements expand out of the range. To prevent such scenarios, the developer can use the minimum-scale and maximum-scale properties to give a better user experience. The minimum-scale and maximum-scale properties are often not recommended because of their outlandish behavior. If you are 200% sure about the results, they often come handy.

Viewport adjustment is just the baseline for the complete responsive web design tutorial that we need to follow. In practical scenarios, we need to take care of a lot of the things alongside the viewport. Standing out among all the important factors are the media queries which we will discuss in the next section of this responsive web design tutorial.

CSS Media Queries

With CSS3, the media rules saw a little modification and instead of focusing on the type of media, the media rules were converted to media queries focusing on the behavior and specification of the media type keeping intact the media rules of CSS2. These behaviors may include calculating the orientation of the device, the height, and width of the device, viewport’s dimensions, etc.

A media query contains:

Media Type: The media type includes the type of media we are targeting through queries such as a screen, a printer, etc. This field is optional though.

Media Expression: This is the expression we would like to implement once we find the target media type.

Media Types In CSS

  • Speech
  • Screen
  • Print
  • All

These are all self-explanatory media types. When these media types were introduced first in CSS2, they had a lot of their friends such as TV, projection, braille, aural, etc. All of these have been deprecated except the four mentioned above.

A simple media query with media type screen can be written as:

@media only screen and {expressions}//CSS styling

In the above example, you must have noticed the use of the word “and” used for conjunction as done in the English language. This is the operator which is helpful in adding the media type to the media expression and executing both of them together. The CSS code defined in the media rule will be executed only when both of the conditions will be true. For example, the media type is found to be a screen and of width = 320px.

Along with “and”, the other logical operators used in media rules are:

  • Not
  • Only
  • Comma

Similar to the logical operations used in coding, “and” will require to return all the media types to be true whereas while using “comma” only a single media query is enough to be true.

Media Features In CSS

@media screen and (aspect-ratio: 13/6) {….}

This is the main core of our understanding of the responsive web design tutorial. Although we can use a mixture of the media type and features to implement beautiful CSS designs, we need the following attributes of the media feature query:

  • Orientation: Defines the orientation of the viewport.
  • Height: Calculates the height of the viewport.
  • Aspect-Ratio: Width to height aspect ratio of the viewport.

The following media query checks for the height of the viewport through the height attribute. If the height is found to be more than 680px and the orientation being landscape, the expressions/styling is followed.

@media (min-height: 680px) and (orientation: landscape) {…..}

Multiple Stylesheets For Multiple Media Queries

The following code will refer an external sheet for a media type:

Going through such a way produces cleaner and shortcode. Using an external sheet does not mean that the file will be downloaded only when the file is needed. All the files will be downloaded along with the web page to the browser whether the browser uses them or not. Therefore, we would not recommend this method as it increases the load time and utilizes extra bandwidth. But, if you are applying a lot of media queries (which, again, is not recommended) you should clean them by putting in different files paying extra precaution to use as minimum as possible.

Below is an example of using the media queries:

This example changes the color of the background when the screen size decreases.

Image for post
Image for post

CSS Grids

CSS Grids are used to create content divided into multiple rows or columns.

Image for post
Image for post
https://www.creativebloq.com/

Although it is possible to create the Grid like structure with the help of @media queries, this leads to a long and complex code. The same can be done via grids in just a few lines. Grids are responsive in nature. Therefore, the developer need not do any extra work to make it adjust onto different screen sizes. So, the grid boxes will automatically change their sizes i.e. width and the height when the webpage is loaded onto a smaller screen.

Let’s see how to make responsive website grids in CSS.

To make an element into the “grid” structure, you need to specify the grid property in the display attribute.

class_name {display: grid}

A good example of responsive CSS grids is as follows:

Image for post
Image for post

To provide gaps between the elements, you can use grid-row-gap and grid-column-gap property.

Responsive Images

Image for post
Image for post

Dealing with the images while developing or testing the website is a trickier job than applying media rules and coding a CSS grid. There are numerous cases where an image can force the user to press that close button on the tab. For example, an image may be rendered in its original dimension which would look enlarged on the mobile device. Or an image can shrink so much that the subject of the image is not visible clearly. In this section of the responsive web design tutorial, I will highlight the major precautions that a developer should take while placing the image on the website.

For a better mobile view of the website, we need to take care of the image’s dimension and ensure that the dimensions scale down according to the screen size automatically. This can be done by defining the max-width attribute in percentage terms.

max-width: 100%

This is the percentage of the viewport and since the smaller devices have a smaller width, their 100% will be smaller than the desktop. So, the image will scale down accordingly.

This is a very quick fix and makeshift option while trying to make the images responsive. But using this option doesn’t heal where it hurts the most: the bandwidth consumption and the loading time of the webpage.

By rescaling the image, we may be able to show the full image to the user, but it still gets downloaded in its original size and original resolution. Therefore, even though our main content has been loaded seconds earlier on the webpage, a single image can burn the bridge between the user and the developer. To avoid such situations there are a couple of important steps.

  • SRCSET attribute
  • Art direction and the picture element

The SRCSET Attribute

The srcset attribute is written inside the image tag:

<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

Image for post
Image for post

This image is rendered on a desktop. Now when I render the same image on a mobile screen, I am not able to focus on the subject anymore. The subject is too small to be clear.

We can deal with such cases not by providing multiple copies of the same image but by providing the same image altogether. By saying “same image” I mean the same image but with multiple cropped versions. For this, we go with the picture element.

The picture element is not an attribute as “srcset” but is a new tag like img. The picture element has the following syntax:

<picture><source/><source/>……..<img/></picture>

The source tag specifies the multiple files and the resolution for which they should be selected. The “< img >" tag is very important in the picture tag otherwise the image is not loaded. So, as an example, I have saved multiple copies of the same image I displayed above and rendered using the picture element. To display on to a tablet and a mobile screen, I have used the LT Browser.

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

The browser support for both of these elements is really good and you can use any one according to your requirements. For a detailed guide on using these elements and a few more responsive design tactics, you can learn how to make Responsive Images.

CSS Flexbox

Flex-direction has four attributes:

  • Row
  • Row-reverse
  • Column
  • Column-reverse

Another great thing is that you won’t have to worry about the CSS writing modes in the flexbox. They are set according to the language you are using. To create a flex, create a container in which we will design the flexbox. This is done easily by setting the display property to flex.

display: flex

The following code designs a flexbox in the row-reverse direction i.e. it starts in the reverse direction of the row (right to left).

Image for post
Image for post

Responsive With Other Web Languages

Responsiveness With JavaScript and jQuery

With the following code you can easily calculate the viewport width:

<script>
var w = window.innerWidth;
var h = window.innerHeight;
</script>

With the following code, you can select the element from the HTML and apply any function to it.

const selctimg= document.querySelectorAll(“img”);selctimg.forEach(elem => elem.addEventListener(“click”, shrinkSize));

You can then use this element to shrink in size and place it on the website.

Developer Tools In Responsive Web Design Tutorial

All the major browsers provide these amazing features of developer tools which will log and display each and everything your website is doing. Developer tools also provide breakpoints into the JS code so that you can even check the variable values that the variable possesses at that stage.

Developer tools have so many features that it is just impossible to mention them here. We have a detailed post on Google Chrome Developer Tools that you can go through to learn more. Although the post is specific to the Google Chrome browser, it actually does not matter what developer tool you use based on this responsive web design tutorial. These features are present in every major browser with the same name or sometimes with a different name.

Webpage Optimization For Better Responsiveness

Use Visibility: Hidden very carefully: A lot of the times I have noticed that the developer just hides the element they do not want to show on the smaller screen devices. This is alright if the element is a lighter one (such as one paragraph etc) but when the same practice is applied to multiple heavy elements on the website, we are practically fetching everything from the server and just hiding it on the client-side. This method is of no use and increases the load time.

Always apply threshold points after experimentations: What if I say to you that I need this image to be of max-size as of a tablet. Does that clearly indicate what size I want? No! But still, developers have a practice of just memorizing certain pixel values and use them as they develop the website. For example, 640px for mobiles becomes a standard for most of the developers. This number should always be applied after the experimentations and applying the breakpoints while testing. A breakpoint is a threshold value up to which the element is giving us no trouble. The best practice is to keep experimenting with the number for the same element in the browser’s developer tool and then conclude on a threshold number.

Optimize the written content: So, it is obvious as a developer that if the width of the screen is getting reduced, so does the font-size and the words written per line. But how much should we reduce it? If we make the font-size too small then the user might not get interested in reading the content. If we make it too big, the user does not want to scroll so much. Optimum size is having 8 to 10 words in a line. This will scale according to the screen size but the research shows that 8 to 10 words are a perfect size for anyone who is interested in reading.

Alternatives To Responsive Web Design

Bootstrap

Templates Designed for Responsiveness

Perform Cross-Browser Testing

Testing a website for such scenarios is called cross browser testing and there are a number of ways to do it. You can choose the manual path which although is never recommended seeing the time constraints and the number of browsers available. The automated cross browser testing path contains two major roads, one is the device labs and the other is cloud-based cross browser testing. Both of these options are equally efficient and equally good. It depends completely on the tester’s choice. Personally, I prefer cloud-based testing because it is pocket friendly, faster, and more detailed than the device labs.

Also, some cloud-based cross-browser testing platforms like LambdaTest have created a separate section for responsive testing. Therefore, it gives a better idea towards our product i.e. the website. Some key features Of Responsive Testing that you can try out on LambdaTest, which allows you to test cross browser compatibility on 2000+ browsers and operating systems.

As an option to cross-browser testing, you can also choose cross-browser testing specific browsers. These browsers are really great! They are meant to perform cross-browser testing and hence contain specific features such as opening the website on two devices together to compare how they are rendered.

Conclusion

Image for post
Image for post

The market has changed today and so has the products. In a race to attract more and more customers, engineers and researchers are coming up with a huge number of variations in the product and constantly improving the ones that already exist. This has flooded the market with mobile devices which are so similar yet so different, making it harder for developers to create responsive websites. It is impossible to create a version for each device of a particular size hence we go with the responsiveness of the device. This responsive web design tutorial has touched every aspect of responsiveness which can help create responsive websites. Once the website is created, a must do the task in the checklist is the cross browser testing of the website to be sure before anything falls apart.

I hope this responsive web design tutorial helped you in understanding all the necessary steps to create the best mobile view of the website. If you have some other ideas and methods of responsiveness, please do share in the comment sections and we will try to take it up in our next post. Hope you enjoyed the post.

Happy testing!

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