Bharati Subramanian

Posted on Jun 16, 2021

Introduction to Responsive Design

#css #webdev #html #design

A good website should be readable and appealing when used across all devices of any size.
Such a website must fit and scale automatically to screens of different sizes.

What is this blog about?

In this blog we will be focusing on some of the techniques used to make a website responsive and create best user experiences.

Prerequisites for this blog

This blog assumes that you are familiar with the basics of HTML and CSS.

What is Responsive Design?

Responsive web design is the concept of using HTML and CSS to build layouts that adapt to all screen sizes, resolutions, and devices.

Responsive Design Techniques

Three techniques are discussed in this blog that are used to make websites and pages more responsive:

Setting Viewport
Fluid widths and layouts
Media Queries

Check out the website and code shown in the blog here.

1. Setting the viewport

What is Viewport?
- A viewport is the area of the screen that is visible to the user.
- This area is smaller in devices such as mobile phones or tablets when compared to a PC.

Why should you set the viewport?
- The viewport gives instructions to the browser on how to set the width of the screen such that it scales to the width of the device
- It also informs to zoom the content such that it's intended for the device at hand.
- This ensures that the content does not appear zoomed out and does not appear as it does on a desktop layout.

How do you set the viewport?

The viewport is set inside the <head> using the <meta> tag.

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

What does the above code mean?
- width=device-width: sets the width of the screen to the width of the device.
- initial-scale=1.0: sets the initial zoom/ scale to 1

Look at the images below, and see the difference in screen width (in mobile browsers) and content size

Without viewport tag
- Notice how the content is zoomed out and the image does not adjust to the screen size and width of the device.
With viewport tag
- Although the image does scale to the size of the screen, the image is not responsive. To handle this, we use Fluid Widths.

2. Fluid Widths

What is fluid width?
- Fluid-widths are relative measurements, that are responsive to change in screen size and viewports.
- This is in contrast to fixed-layouts, which are static measurements and are non-responsive.
- Fluid widths use the entire width of the browser, and such a layout is called liquid layout or fluid layout.

Why should we use fluid width?
- Take the example of a sample page in the image below.
- Notice how when the size of the browser shrinks, a horizontal tab appears to view the entire image.
- This is definitely not looking good, and does not provide a good user experience.
- Since the image is not responsive, it does not shrink in size when the browser width (or viewport width) reduces. This is where fluid width comes into play.

How can we use fluid-widths?
- Instead of using pixels (px), use percentages (%) , viewport height (vh) and viewport width (vw).
- Image in the example website above uses 500px as it's width.
- To make this a fluid image, we can use percentages or vw to set a width.
```
 img {
     width: 80% | 50vw;
 }
```
- Percentages occupy space relative to width or height of the parent element. Whereas vw / vh take up space relative to width or height of the viewport.
- Now, as the size of viewport decreases, the image also shrinks relatively.
- There comes a point when the image shrinks and ends up becoming very small.
- To tackle this, we can set a minimum height or width, below which, the image should not be shrunk.
```
 img {
    min-width: 300px;
 }
```
- Now the image will not shrink below 300px even if the viewport size becomes smaller than this.
Fluid widths and layouts are incredibly useful when you have to handle multimedia content in your site.
Another simple use of fluid width is when you set a max-width for a container in the body and center the content within it.
- max-width ensures that the content will not overflow beyond this width, and will be shrunk if it becomes greater than the specified width.

3. Media Queries

What are media queries?
- Media queries are series of CSS styles applied to elements in the page for a particular viewport or screen size.
- Multiple media queries can be added to the same style sheet each focusing on viewport or device of a particular size.
- The size of screen at which a media query is added are called breakpoints.
- You can create web pages initially for mobile devices with minimal content, and then extend the same page to devices of larger size.
  - This is called mobile-first design and is highly common among developers.

Why do we need media-queries?
- Let's take the sample webpage in the image below, and try to introduce media queries.
- Obviously there is nothing wrong with the image or text in the image above.
- But when you view this page in a smaller device (a tablet or mobile), the image and text shrink to become so small that it looks unappealing.
- Situations like these can easily be handled using media queries.

How do we add media queries?
```
 @media screen and (max-width: 768px) {
     .flex-container {
         flex-direction: column;
     }
 }
```
- What does the above code mean?
  - The above code targets all devices whose width is less than 768px (mobile devices).
  - Then applies styling to the flex-container such that the image and text are displayed vertically instead of horizontally.
  - NOTE: This style is applied to the flex-container class only if the web page is displayed as screen (not printed document) AND the width of the viewport is at most 768px (width <= 768px).
  - Once the breakpoint is crossed (769px), the image and text are displayed horizontally.

CONCLUSION

We have seen three highly used techniques for creating a good responsive website.
Viewports and liquid layouts are highly useful when breakpoints in a website are not continuous.
That is when there is a gap between in the viewport size where media query is introduced.
Although all styles and media queries can be added to the same stylesheet, it is a good practice to support media queries and generic styles.

There are modern techniques such as grid and flexbox layout, which are also gaining popularity.
They handle gaps between breakpoints better than the above mentioned technology.

But nevertheless, the 3 discussed techniques are not obsolete. They are still practiced by developers, and are often used along with the modern techniques.

In conclusion, responsive design does not end here.

There are many resources available on the internet that are helpful in mastering responsive design.
I suggest doing a Google search to explore more about this topic.

Lastly, I would also recommend using the best of both worlds! The 3 technologies discussed here as well as the modern techniques.

Be responsible and make your sites responsive!

Hope you had a good read. Do leave a heart, pin or save it, and share this among your dev friends!

Top comments (5)

Gerrit Weiermann • Jun 18 '21

Does the "|" have actually a meaning in css, or did you want to say: either % or vw?

Bharati Subramanian • Jun 20 '21

Although the "|" symbol is used in css as an attribute selector, in this context it means either % or vw. This is just a way of saying that you could use a width as a percentage or viewport width.

Hope this helps. ☺️