Designing website for mobile, tablet and web browsers

Designing website for mobile, iPhone,  iPad, tablet and all web browsers

The big question is:

Can a website perfectly view on iPhone, other mobile devices, iPad and on the web?

The answer is yes and no.

iphone and ipad size

It depends on content.

Using fluid CSS with all div tags are percentage , the website can be seen in all browsers correctly.

Having a separate iPhone or smart phone CSS enable site withing the possibilities.

If you have heavy text content , you probably will be OK showing in all browsers and iPhone, smart phones, iPad, tablet devices .However reading a long text in the phone surely not suitable for everyone.

If you have a lot of graphic on your website and you like to display them large sizes, you should use separate mobile enable version of the website. It is good idea to reduce to images sizes for the phones.

If you have a small websites lets say 5 to 10 static pages, your website as long as it is not flash, it can be view fine with all browsers online as well as mobile devices, if there is right CSS and JavaScript coding used.

Commonly used display resolutions:

Screen size for iPhone: Portrait Orientation 320×480 and Landscape Orientation 480×320

Screen size for iPad: Portrait Orientation 768×1024 and Landscape Orientation 1024×768

Average web  visitors PC or MAC are using a screen resolution higher than 1024×768 pixels online browsers.

Browser Sizes PC and MAC:

  • 1024 x 768 (most popular)
  • 800 x 600 (obsolete)
  • 1400 x 800 (increasing)
  • 1024×600 ( most netbooks use)
  • 640×480 (less common)

You may use this code for mobile enable sites:

/* Smartphones (portrait and landscape)*/
@media only screen
(min-device-width : 320px)
(max-device-width : 480px)

/* Smartphones (landscape)*/
@media only screen
and (min-width : 321px)

* Smartphones (portrait) */
@media only screen
(max-width : 320px)