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 Type CSS 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
Did you find this article helpful?

We value your feedback!

Why was this article not helpful? (Check all that apply)
The article is too difficult or too technical to follow.
There is a step or detail missing from the instructions.
The information is incorrect or out-of-date.
It does not resolve the question/problem I have.
How did you find this article?
Please tell us how we can improve our Support Center:
Email Address
Optional, but our team may contact you for more information.
Like this Article?

Post a Comment

Name:
Email Address:
Comment:
Are you a bot?
Submit

Please note: Your name and comment will be displayed, but we will not show your email address.

Write New!
Do you want to publish a tutorial to our support center?

News / Announcements

SSL Certficate Warnings
Updated 2014-04-14 11:34 am EST
Hits: 2177
Heartbleed 0-day OpenSSL security bug
Updated 2014-04-14 04:43 pm EST
Hits: 5578

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question

Need more Help?

Search

Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail: support@InMotionHosting.com
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!