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.

CSS TypeCSS Type Description
all Detects all device media types
aural Detects speech and sound devices for Accessibility
braille Detects braille tactile feedback devices for Accessibility
embossed Detects paged braille printers for Accessibility
handheld Detects devices that are handheld
print Detects if its a printer
projection Detects projected slide presentations
screen Detects computer screens
tty Detects fixed-pitch character grids found in terminals
tv Detects if the device is a television

 

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

0 thoughts on “Introduction to Creating a Responsive Web Design

  1. I see that more than 80% of my website views are from smart phones.  But, my site looks terrible on a cell phone.  I have a responsive WP theme, but I may have changed setting to make it look bad on a phone.  Can I hire Inmotion to look at my settings?  I have read your tutorials, but I am new to this and am worried about screwing things up even more.

    1. We don’t have a group that goes through old sites, but we do have the InMotion Web Design team. They may be able to work with you to build a new site that works best on multiple devices.

Was this article helpful? Join the conversation!

Server Madness Sale
Score Big with Savings up to 99% Off

X