Introduction: Creating a Responsive Web Design and Template

Responsive templates are necessary to have a website display correctly on every device. To begin creating your own Responsive Template, you will need to understand the CSS media property and what type of screens mobile phones, tablets and desktop computers are. Designing Mobile Responsive Templates has become a trending topic in web today. Mobile Technology and Mobile Traffic has evolved massively from 2011 to 2013, People now prefer reading articles on their Tablet, IPhone, Smart Phone. 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. We are releasing the first ever complete step by step Tutorial Guide on Responsive Blogger Templates to the Google Blogger Community.

 

CSS Media Type Detail

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 type

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 presentation

screen                     Detects computer screens

 

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. You can also read briefly  article on Wikipedia.

Device resolutions can actually range from 320px - 1,920px! Unfortunately this large of a range brings complexity so let's break down the good, the bad, and the ugly.

Good:
Each device has a min and max-device width or 'trigger' point in portrait and landscape view. In other words, if you use a media query with a given conditional statement in your email, it will respond to that breakpoint.

Bad:

1. Some devices trigger the same min and max-dimensions in portrait AND landscape view
2. Android users can define a 'zoom' setting which changes the resolution of the display
3. The introduction of Apple's Retina Display and the HD quality resolutions supported on several new Android devices use a pre-set 'zoom' multiplier to display your email.

 

Mobile phone sizes.

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. Understanding Screen Densities.

 

• 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

 

Tablet screen sizes.

Mobile phones, tablets can vary between brands and types on the size of the display.

• 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

 

How to design Responsive Layouts?

If you have some know how about CSS and HTML it will b very easy for you to design responsive layout for your webpage and when you will yourself design it then trust me you will b having great passion for design responsive webpage.

You would love to play with your layout columns using just your browser.

Before 2 years CSS3 has introduced  new techniques of reaching some frequently used functions. It is no more limited to just styles but it now supports some really interesting front-end programming functions. The most popular amongst them are Media Queries (@media ) that acts like conditional IF statements used in blogger. You must be familiar that how difficult it is to click a web link in IPhone unless you zoom it.. In order to tell the browser to detect the screen size we will add a META viewport tag inside <head> section of your layout.

 

The viewport Meta tag alters the behavior of a mobile browser by modifying the "virtual viewport" of the device. The virtual viewport is the view of a mobile device screen that is other than the default view; therefore being deemed "virtual". This allows the screen on devices to have specified zoom behaviors. Below is the code snippet we will use.

 

<meta name="viewport" content="width=device-width">

 

This Meta tag tells the mobile device to not zoom. This allows the Responsive Template for mobile devices to be loaded in the scripts. Below is a table of different properties that can be used for the viewpoint Meta Tag.

 

Using CSS media queries to target different devices

iPhones, IPads, Android Tablets, TVs, and oh yes, the PC. Just a few years ago it was hard to imagine anything other than your bulky desktop or laptop at best travelling the information highway, but nowadays, those devices seems to be more and more in the minority. CSS media queries lets you quickly target different devices in your CSS, primarily through the window/screen dimensions of these devices.

Targeting "small screen" devices

To kick things off, you can use the below to target "small screen" devices:

 

/* target mobile devices with max device width 480px  */
@media screen and (max-device-width: 480px) {
/* CSS Properties for Smart Phones */
}

 

In our next part we will teach you how to design responsive Template for your website or blogger blog.

 

Any Trouble

If you are facing confusion in any part just  leave your valuable comment in the comment box below. Please let me know how useful was this tutorial for you and did it help answering most of your questions…?