Responsive Web Design

Responsive web design means a design that can respond to the various screen sizes your visitor could be using, i.e. mobile, tablet, small desktop or large desktop, and serving a design that presents well on that device.

How to Make a Website Responsive

This is done by using CSS Media Queries, which can apply different CSS styles to your layout divs depending on screen size.

Design for mobile first, i.e. a screen size of 320px. This screen size can be simulated on your desktop by decreasing the size of your browser window. With Google Chrome you can press Ctrl+Shift+I and then type in a width of 320 to simulate a mobile device.

As you widen your browser window from 320px, a design can start to look terrible, e.g. the lines of text get very long and therefore difficult to read. This is when you need to set a Media Query Breakpoint, which applies new CSS rules to make things look better on a larger screen size.

Typically breakpoints are set for devices as follows:

Mobile

768px for tablet.

992px to 1024px for small desktop screen.

1200px for large desktop screen.

Note, in time, I hope to expand this article to give all the HTML and CSS to create a responsive website from scratch. For now however, if you need a responsive website template, then take a look at Bootstrap, which is a web design framework that takes care of the responsive design for you.

See also: Media Queries for Standard Devices from CSS-Tricks.

Resources for Responsive Web Design

Bootstrap
A web design framework that allows you to build a responsive website. The advantage of Bootstrap is that the developer community has solved all the hard problems of responsive design for you, and you just have to learn the system.

44 Responsive Web Design Resources: The Ultimate List from the User Testing Blog