Introduction
The objective of this module is to give you the basic knowledge you need to create a simple mobile-friendly web page.
You already have a good idea of what you should avoid doing when creating such a page, but we will now look into looking at a more precise guidance on how to organize and dimension your pages to make them attractive to the user of a mobile device.
In this module, we'll be looking at the following aspects of the design of a mobile-friendly web page:
- Scrolling
- Navigation
- Images
- What device to target?
- Mobile-specific style sheets
Example
To accompany this, let's look at a page designed for a regular computer: point your browser to the associated sample web page; it looks reasonably nice, and you can probably figure pretty quickly what the page is about, and what other pages are accessible from there.
Now, point your mobile web browser to that same page at http://www.w3.org/2007/12/training/assignments/basicdesign/sample.html, (also accessible at http://tinyurl.com/2ypphd) or use an emulator and see the resulting page.
It probably looks like the following screenshot, taken on a reasonably modern PDA:
At a first glance, we can identify the following problems with that page on a mobile device:
- it requires scrolling in both directions, which is quite difficult to do and hides information,
- the navigation menu takes up the whole first screen, making it impossible to see what you're actually looking for when visiting that page, and making it near impossible to see you're on a different page when navigating from one page to the other,
- the big images are slow (and possibly costly) to download, are too big for the screen size,
- generally speaking, the styling of the page was designed with a large screen in mind.
We'll look at each of these aspects in turn, and see what can be done to improve the situation. One of your goals will be to apply what you learn to the sample page.
To that effect, you can download all the files used in that sample page as a ZIP file.