Introduction to Creating a Responsive Web Design

You can create your own Responsive Web Design (RWD) using HTML and CSS. Before we get started, we will need to get an idea of what we need to do to create the Responsive Template. First we need to understand CSS Media Types. Then you will need to have an idea of what mobile devices display sizes are, then you can follow the steps to create your own Responsive Web Design site.

CSS Media Types

A CSS Media type is a CSS rule that allows the website to detect the type of media (For Example, browser size, screen resolution) and display specific CSS code accordingly. There are many different device types that can access the web. Below is a table of the possible device types. We will only be working with the “screen” CSS Media type. The other types are for coding your site for Access ability.

Common Display Resolutions for Devices

Before you create your website, you will want to get an idea of what size your site should be on any given device. Below are lists of popular, mobile Phone, Tablet, and Desktop computer display sizes.

Common Mobile phone sizes.

There are countless mobile devices with different sizes for a display. The following are a few popular devices size and resolution to give you an idea of what size you will want to make your website.

• iPhone 4S: 3.5 inches 640 x 960px
• Samsung Galaxy Nexus: 4.65 inches 720 x 1280px
• Sony Ericsson: 4 inches 480 x 854px
• Nokia Lumia 800: 4.5 inches 480 x 800px
• Motorola Photon 4g/ELECTRIFY: 4.3 inches 540 x 960px

Common Tablet screen sizes.

Like mobile phones, tablets can vary between brands and types on the size of the display. Below are examples of some popular tablet display sizes.

• Apple iPad: 9.7 inches 1024 x 768px
• Kindle Fire HD 8.9: 8.9 inches 801 x 533px
• Samsung Galaxy Tab 10.1: 10.1 inches 1280 x 800px
• Nexus 7: 7 inches 966 x 603px
• Windows Surface Pro: 10.6 inches 1920 x 1080px

Common Desktop screen sizes.

Display size for desktop monitors ar more difficult to list by brand because desktop computers can have any type of display hooked up to them. The most common size range for desktop computer screen resolution is between 1280 x 700 and 1920x 1080. If you design your main CSS styles for this display range, you should have a nice looking site any any Desktop computer.

Steps to create a Responsive Template using CSS and HTML

Now we will start walking through the design steps. You can download the complete files of the finished tutorial at the following link:

responsive-template.rar

Once you have the files downloaded, you can unpack them on your local computer and look at them. The Below steps will explain how we developed the responsive template you downloaded.

1. Add the HTML to the Responsive Template
2. Add the CSS to the Responsive Template
3. Link to the stylesheet for the Responsive Template
4. Add the viewpoint Meta tag to the Responsive Template