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
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
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/