Responsive Web Design

Responsive Website

Responsive Web Design (RWD) is an approach to building websites that automatically adapt to different screen sizes and devices, including desktops, laptops, tablets, and smartphones. A responsive website provides a better user experience by adjusting layouts, images, text, and navigation according to the available screen space. In CSS, responsive web design is commonly created using flexible layouts, relative units, media queries, and responsive images.

Desktop vs Mobile vs Tablet Users

Users access websites from a wide range of devices and screen sizes. Therefore, instead of designing for a few specific devices, modern responsive web design focuses on creating layouts that adapt naturally to the available space.

Mobile Users resolution

Source: Stat Counter

Responsive Website Requirement

• Viewport
• Media Queries

Viewport

Viewport or meta viewport is a meta tag used in head. By using meta viewport, we can build a responsive website using media queries and the website will display properly on all screen devices.

Meta Viewport was introduced in HTML5 only. This means HTML5 based website with meta viewport can be mobile friendly.

Viewport Example

This will enable proper rendering of content with zooming.

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

Viewport with user scalable no

This viewport will enable proper rendering on mobile devices, but no zooming allowed on touch devices.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    

Full Viewport on Iphone Landscape

This viewport will cover full landscape mode of iphones 10 and above with notch or pill in Iphone 14Pro, 15, 15 pro and above.

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

Media Queries

Media queries are used in css using @media rule to specify the type of media we are using. Like screen, print etc. See example

Media Types

Media Type mean the type of media device, like screen based devices, print for printers, all or speech based devices ( for disabled persons, like blind).

• all ( Default media )
• screen
• print
• speech

Media Features

Media Feature means the feature of media type. For example, screen means any screen, laptop or mobiles. So with screen, we use media feature like max-width, orientation etc to choose particular type of screen.

• Width
• Height
• min-width
• min-height
• max-width
• max-height
• aspect-ratio
• orientation

@media screen

@media screen enable css rule for screen devices only. For example, Desktops, Laptops, Smart TVs, Tabs , Ipads, Smartphones etc.

<style>                    
    @media screen{
        body{ font-family: sans-serif;}
    }
</style>                    
                

@media screen with features

Using media screen with feature is best recommended way for responsive web design. We can use various features like min-width or max-width for different different screens or devices.

Using min-width or max-width

<style> 
    html{ font-size: 15px; }

    @media screen and (max-width:1000px){   
        html{ font-size: 13px; }
    }
</style>

<style> 
html{ font-size: 15px; }
    
@media screen and (width<=1000px){   
    html{ font-size: 13px; }
}
</style>

@media print

@media print rule works only for printing devices. For example, laser printers, inkjet printers, dot matrix printers etc.

<style>                    
    @media print{
        body{ font-family: serif;}
    }
</style>                    
                

Media query Break Points

Break Points are defined using @media feature to set condition for css selector. The CSS code inside @media will works only if condition is matched. Else it will not work. Based on current available devices, we are defining some break points for media queries.

The preffered break points are:

How to build Responsive Website

To build a responsive website, we use media queries with media features. This combination can target css for a particular device based on media type and feature. See examples below.

If .container is our parent class having width 1200px, this fixed width will works only for screen size greater than 1200px, i.e. desktops, laptops, smart TVs etc.

For devices less than 1220px(break point), we are using media rules to change width of.container as per screen size.

Responsive columns for Desktop, Tablets and mobile

<style> 
    *{ 
        margin:0; 
        box-sizing:border-box;
    } 
    
    .container{ 
        width:1200px; 
        margin:auto; 
        display:flex; 
        flex-flow:row wrap;
    }
    .col{ 
        flex: 1 0 25%; 
        max-width:25%;
    }
   
    @media screen and (max-width:1220px){
        .container{ width:960px;}
    }
    
    @media screen and (max-width:980px){
        .container{ width:760px}
        .col{ 
            flex: 1 0 50%; 
            max-width:50%;
         }
    }
                      
    @media screen and (max-width:767px){
        .container{ width:100%}
    }
    
    @media screen and (max-width:460px){
        .col{ 
            flex: 1 0 100%;
            max-width:100% 
        }
    }
</style>                     
                

Responsive Images

By default, images are not responsive, they take full width of own or value of width attribute. For high resolution image, prefer picture tag. For low resolution images, we can use css max-width property.

Image without width and height attribute

    <style>
        .img-resp{
            max-width:100%;
        }
    </style>

    <img src="img/banner.webp" alt="banner" class="img-resp">

Image with width and height attribute

    <style>
        .img-resp{
            max-width:100%;
            height:auto;
        }
    </style>
    
    <img src="img/banner.webp" alt="banner" width="600" height="300" class="img-resp">

Responsive Font Size

For responsive font sizes, use relative units like em or rem instead of absolute units like px.

We can also use CSS clamp() function for more control. clamp(minimum, preferred, maximum) is a CSS function that allows you to set a font size that scales between a minimum and maximum value based on the viewport width. See example:

    <style>
        html{
            font-size: clamp(14px, 2vw, 18px);
        }
    </style>

This will set the font size to a minimum of 14px, a preferred size of 2% of the viewport width, and a maximum of 18px. On large screens, the font size will scale up to the maximum value, while on small screens, it will scale down to the minimum value.

Responsive h1 font size

    <style>
        h1{
            font-size: clamp(24px, 4vw, 36px);
        }
    </style>