How to make Responsive website for Iphone Ipad , Blackberry , Android and Tablets ?

Today , More than 2.5 Billion users are having Iphone, Ipads, Blackberry, Android Phones and Smartphones. Now they like to see your website on Smartphones rather than on Desktop , which takes time. In Todays Life .
Every person is busy and have most of time in work so they decided to use smartphones to surfing net and for other purposes.

Increasing Popularity of Iphone , Ipads and Smartphones made people addictive and now for this reason every website is now made into responsive design .

Responsive Design: It means any website design which change its layout according to the viewport and resolution of device in which it is viewed.

Responsive Menus : To make website more user friendly in smartphones , the top nav menu in website changes into a dropdown of menus which make sense in responsive.

For nav menus read this article 

How to Create Responsive Design ?

Requirements for Responsive Theme :

1.We can use WordPress Roots Theme for a Responsive design

2.HTML5 Boilerplate

3.LessCSS &

4.Bootstrap from Twitter.

How you website Looks in Desktop:

How you website Looks in Iphone , Mobiles , Tabs , Smartphones.

What is roots Theme ?

Roots is a starting WordPress theme based on HTML5 Boilerplate & Bootstrap from Twitter.

For more information You can read Documentation.

Download Link to roots theme click here.

What is HTML5 Boilerplate ?

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.

Watch this Video for more info .

It provides you CSS which is very well written supports all browsers ,w3 validated.

Who uses HTML5 Boilerplate?

To determine its popularity most of big companies are using this CSS Jquery Normalized Icons. and more Features.

Google 

Microsoft, 

NASA, 

Nike, 

Barack Obama, 

Mercedes-Benz, 

ITV News, 

BAE Systems, 

Creative Commons,

Australia Post, 

Entertainment Weekly, 

Racing Green, and many more.

What is LessCSS Framework ?

Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.

How It Works ?

Every layout in Less Framework is based on a single grid, composed of 68 px columns with 24 px gutters. The only measures that change from layout to layout are the amount of columns and the width of the outer margins.

The three sets of typography pre­sets are aligned to a 24 px baseline grid; one is based on 16 px body text, one on 17 px, and one on 18 px. Both sets contain several harmonious type sizes calculated using the Golden Ratio.

Read More ...

What is Bootstrap ? Do You Know ?

Bootstrap is Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Features :

1. Made for everyone :

Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!), but in tablet and smartphone browsers via responsive CSS as well.

2. By nerds, for nerds :

Built at Twitter by @mdo and @fat, Bootstrap utilizes LESS CSS, is compiled via Node, and is managed through GitHub to help nerds do awesome stuff on the web.

3. Packed with features :

A 12-column responsive grid, dozens of components, javascript plugins, typography, form controls, and even a web-based Customizer to make Bootstrap your own.

You can Download Bootsrap from twitter here.
Read Documentation

To test your Theme in Iphone , Tablets and Smartphones use below link:

http://www.responinator.com

Reference & Tutorials

• http://speckyboy.com/2012/08/19/making-advanced-customizations-to-the-wordpress-roots-theme-on-a-production-website
• http://chrisburbridge.com/roots-theme
• http://alittlecode.com/reposition-the-navbar-in-the-roots-theme-for-wordpress
• http://alittlecode.com/wordpress/roots-theme
• http://imdev.in/twitter-bootstrap-multi-level-dropdown-menu-system
• http://wordpress.org/support/topic/url-rewrites-and-the-roots-theme
• https://groups.google.com/forum/?fromgroups#!forum/roots-theme
  

Pls share this post with Your Friends if you Like it .

PS: If You want to hire a Web Developer to design Responsive Theme , You can contact us 
at  srana977 at gmail.com