Responsive Web Design Using CSS

Responsive web design makes web page look good using many different devices: desktops, tablets, and phones. Responsive web design uses only HTML and CSS. It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen.

Before tablets and mobile phones, web pages were designed only for computer screens. Back then, it was common for web pages to have a static design and a fixed size.

1. Viewport

The viewport is the user's visible area of a web page. The viewport varies with the device. It is smaller on a mobile phone and larger on a computer screen. HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.

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

A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen-width of the device which varies depending on the device. The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Viewport and Screen Size

The viewport and screen size are not the same thing. Viewport relates to the content area within the browser window, excluding the toolbars, tabs, and so on. It relates to the area where a website actually displays. Screen size refers to the physical display area of a device.

You can use CSS media queries to apply different styling for small and large screens.

2. Grid View

Grid-view means that the page is divided into columns. Grid-view makes easier to place elements on the page. A responsive grid-view often has 12 columns, and has a total width of 100%, and will shrink and expand as you re-size the browser window.

To use a responsive grid-view with 12 columns, first calculate the percentage for one column: 100% / 12 columns = 8.33%. Then, make one class for each of the 12 columns.

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

All these columns should be floating to the left, and have a padding of 15px. Each row should be wrapped in a <div>. The number of columns inside a row should always add up to 12. The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed as if the columns does not exist.

3. Responsive Web Design Frameworks

You don't need to create CSS file for responsive design. There are many free CSS Frameworks that offer Responsive Design. Bootstrap is one such popular framework. It uses HTML, CSS and jQuery to make responsive web pages.