Introduction: 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 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: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.
Creating Responsive Templates
Introduction to Responsive Web Design
|1.||Introduction: Creating a Responsive Web Design|
Creating a Custom Responsive Template
|2.||Step 1: Adding HTML to the Responsive Template|
|3.||Step 2: Adding CSS styles to a Responsive Template|
|4.||Step 3: Links to the stylesheets in Responsive Templates|
|5.||Step 4: Adding the Viewpoint Meta Tag to the Responsive Template|
Customize the look of your Responsive Template
|6.||Responsive template design with the jQuery Theme Roller|
|7.||Styling a Responsive Template with jQuery Theme Roller|
|8.||Custom CSS Styles with the Bootstrap Theme Roller|
|9.||Adding the Bootstrap files to your Responsive Template|
|10.||Adding the Bootstrap Menu Buttons to your Responsive Template|
|11.||Twitter Bootstrap Common classes and HTML styles|
Free Responsive Web Design Themes
|12.||Free Responsive Templates with jQuery Theme Roller styles|