Mobile web development-General guide

Development with google chrome

Before you test your page in real device, you can test in chrome since they're all webkit based, it covers 80+% compatibility issues, besides it ships a handy mobile emulation tool to simulate UA/resolution/touch events
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Use
Viewport meta tag

?
otherwise it assume page is designed for desktop and give a width of 980
pixels and presented it zoomed out.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

Use fluid
layout

Don't give a fixed width for layout because you can't predict screen
width.

use fluid layout instead.
http://www.onextrapixel.com/examples/responsive-design/example1_fluid.php

Use
media query to give different layouts for phone/tablet and orientation

Phone device usually has single column layout, but tablet may have more room
for extra column,
Here's a nice tutorial for media queries. http://www.onextrapixel.com/2012/04/23/responsive-web-design-layouts-and-media-queries

Don't use
scrollbar in DIV

which is not supported well in mobile.
if you really need it, use a scroll
plugin like iscroll plugin http://cubiq.org/iscroll-4 or
nicescroll
http://areaaperta.com/nicescroll/

Keep the scrollable content simple otherwise the performance would be
bad in android.

Don't use
iframe

Slow and buggy in android

CSS3 can
make your life easier

If you need gradient or rounded corner, you can safely use css3 without
worrying about IE compatibility
here's nice tools to generate css for round
corner/gradient

http://www.cssportal.com/css3-rounded-corner/

http://www.cssportal.com/css3-rounded-corner/http://www.colorzilla.com/gradient-editor/

Encode
your images in Base64 to save http roundtrips

base64 are supported by ios/android.
https://en.wikipedia.org/wiki/Base64

Leverage
flex box for flexible layout

here's a nice tutorial
http://www.html5rocks.com/en/tutorials/flexbox/quick
http://optimo.com/ http://www.mynameischris.co.uk/
http://www.youthedesigner.com/ http://bradleyhaynes.com/ http://www.carlobarberis.com/ http://www.rook.is/ http://curtsspecialrecipe.com/ http://lifeaccordingtosam.com/#/home/ http://www.cedricvella.com/