Adapting pages for mobile browsers
Published: Thursday 2005-08-11.
With mobile web browsers gaining ground I am trying to make my pages easy to read also for those reading from a mobile phone or palmtop computer with a small screen. A good place to start is to ensure that the page works fine without styling information and pictures, for instance by testing the page in a text based browsers such as Lynx. When that is done I add a style sheet for the handheld media type, which at least Opera uses to display pages in its small screen mode. If you are running Opera you can press Shift+F11 to see the page in handheld mode — if the page lacks specific handheld styling you will get a generic styling which not always looks as you would expect it.
For some pages I do, however, feel like I need to do more adjustments, for instance this blog can be a bit heavy at times for a mobile browser, since the front page shows the five last posts in their entirety, plus that the calendar requires a wide screen to look good. To alleviate that I have written the script that drives my blog to try to detect mobile browsers and send slightly different code when using those. The front page shows the last two entries and the calendar instead is a list.
To detect mobile browsers I enlisted the aid of a
a very good page at ZyTrax
detailing how they announce themselves.
With that information I came up with the following regular expression that I
use against the
string to enable the changes in the page code:
/Symbian|EPOC|Opera Mini|MIDP|Windows CE|EudoraWeb|CHTML|PalmSource|Net[Ff]ront|Xiino|Reqwireless|Elaine/
Please note that I only simplify the content somewhat, the mobile web browsers do receive the same content as everyone else. That is, after all, what you want from a mobile phone, to be able to access exactly the same things as with a regular computer — it was by inventing a “new web” that WAP dug its own grave.
Read more about designing for mobile devices at My Opera.
The article is older than a fortnight and has been closed for new comments.
Disclaimer: The comments are copyrighted by their respective authors. The web site owner takes no responsibility for the contents of the comments. Improper comments will be deleted.