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 :)
- Top navigation - mix of text and fixed-size graphic assets,
limited CMS control (4 items only).
- 100% wrapper width.
- Max width is set to 480px - won't be supported by the
- Top-banner graphic - width 100% (file dimensions - 480 width) -
good approach for graphic display.
- Full textual top navigation.
- Wrapper width is set to 100% - will fit any device.
- Top navigation - 4 items - mix of text and graphic.
- 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
- 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.
- 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
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
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.
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
Attached is a sample template that you can use as a base!