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 |
| 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:
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.
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.
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.