Build mobile friendly websites

Build mobile friendly websites

The difference between mobiles and desktop is the size of the screens. ipad width 768px, iphone 480 px.  Just simply resize the browser to the ipad or iphone size  to see how websites look.

We can use responsive web design, i.e.  the same HTML codes to all devices but  using different CSS for iphone or ipads using media queries.

Google official website for Building Smartphone-Optimized Websites:
https://developers.google.com/webmasters/smartphone-sites/details

If you have a website  on blogger, you just need to simple select mobile template in design mode while you old template will be kept the same in desktop. For Wordpress, plugins  DudaMobile Website Builder can do a quick conversion.

Demo of responsive web design:
http://download.macromedia.com/pub/developer/html5/template_13_Publish/index.html
reference:
http://www.adobe.com/devnet/dreamweaver/articles/dw-template-responsive-jquery-marquee.html

To convert your websites to mobile friendly, example add in HTML or PHP:

<link rel="stylesheet" type="text/css" 

media="only screen and (min-device-width:50px) and (max-device-width:550px)"  href="screen_small.css">

 <link rel="stylesheet" type="text/css" 

media="only screen and (min-device-width:551px) and (max-device-width:800px)" href="screen_medium.css">

under

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

It is also possible to  directly add in CSS using @media, example

.login-text{
   height: 235px;
   padding: 5px;
   }
 @media (min-device-width:50px) and (max-device-width:550px){
 .login-text{
   height: 580px;
   padding: 5px;
   }
 }      

 Setup screen_small.css for iphones, screen_medium.css for ipads.

To more precise test the responsive web design, you can test it on mobiles or in emulators. such as

using MobiOne studio, 15 days free trial
http://www.genuitec.com/mobile/ 

Free online 

 http://www.mobilephoneemulator.com/

 http://www.howtogomo.com/en/d/test-your-site/#gomo-meter

Opera mobile emulator (free)

 http://www.opera.com/developer/tools/mobile/