The task is to develop 1 universal mobile template that will be supported by most smart phones as well as an iPad. Having done some research to see how well 'Big Brands' do when it comes to mobile optimisation, there are couple of comments I'd like to make and present what I've found :)

Targets

http://m.cheapflights.com

  • Top navigation - mix of text and fixed-size graphic assets, limited CMS control (4 items only).
  • 100% wrapper width.

https://schiphol.mobi/

  • Max width is set to 480px - won't be supported by the iPad.
  • Top-banner graphic - width 100% (file dimensions - 480 width) - good approach for graphic display.
  • Full textual top navigation.

http://m.dominionhomes.com/

  • Wrapper width is set to 100% - will fit any device.
  • Top navigation - 4 items - mix of text and graphic.

http://www.uab.ae/mobile/

  • Min width set to 310 and max to 474px - what about iPad?! or screens with <310px screen widths?
  • Features row - layout - pretty generic, often used by mobile websites.

http://www.denongraphic.com/mobile/

  • Max width of the wrapper - 319px.
  • Full graphical top navigation - fixed number of items; looks good on iPhone on 320px width screen however HTC scales it up and navigation looses the quality.

http://m.dfs.co.uk/sofas/sofa-beds/

  • Sofa Listing - pretty generic, lots of mobile website I created at some point use similar-layout.
  • 100% width for all elements that go full width.
  • Textual navigation - greater CMS control.
  • Images size is declared in % and actual file width is between 420 - 470px -  this approach ensures the graphic/images are acceptable quality on iPad, Android, HTC and iPad.

DFS mobile website isn't probably the most visually-attractive website I've come accross, however as far as the structure and cross-platform support is concerned - it's probably my no. 1. So now, let's summarise...

Things to remember...

Following are the comments and recommendations I made for developing iPhone/iPad/HTC(Windows 7)/Blackberry/IPad compatible websites:

Avoid using graphic in top navigation

CMS user has full control over how many and what navigation items to display, http://www.denongraphic.com/mobile/ - is an example of full graphical nav - looks good on 320px width devices, however HTC scales the graphic up and navigation becomes really poor in terms of quality; if we can't avoid using graphic in the top navigation, we need to make sure we only save the smallest bit of graphic asset as possible - see http://m.cheapflights.com or http://m.dominionhomes.com/  - only the icon is a fixed size graphic asset with its position set to center within 25% width navigation element.

100% wrapper width

...will look good on any device including iPad - see DFS, however I'd recommend to set a min width of the wrapper to 280 - 320px, in case we need to use a fixed size graphic asset - see http://m.dfs.co.uk/sofas/leather-sofas/primo/ (Have this sofa for as little as...).

Scale images/graphic in % (the actual files dimensions may vary between 320 - 480px width or even more...)

We can use higher resolution images and scale them down if needed to match 320px or less screen width. The main benefit is that the images will look good on both 320px, 480px and iPad - see DFS sofas lisitng. I'd recommend to save all our full-width graphic files/images in 480px width. For background elements styling - use css/background repeat. Avoid using fixed size graphic assets, if something is not achievable using css - use background repeat instead - see top nav background on DFS. If the graphic element cover ~ 50% width of total width - calculation is pretty simple - 0.5 X 480px = 240px.

View Port

Set to <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">  so we get nicely aligned page with appropiately sized text that won't be scrollable on sides.

Attached is a sample template that you can use as a base!

Tagged: browser  htc  html  iPad  iPhone  mobile  mobile development  mobile website  template