Wednesday, January 27, 2010

Viewing a mobile web site

Some web sites automatically adjust for mobile devices. It is possible to see what these look like by using an add-on to a desktop web browser. Apart from previewing mobile pages, this can be useful for slow dial-up and wireless links and for netbooks as the mobile versions of web sites tend to be more compact.

In some cases you enter a different web address for the mobile version of a web site (as an example for the Australian Open). In most cases the same web address is used and a mobile device is detected automatically and different layout and content provided. To get the mobile version your web browser has to pretend to be a mobile device by sending a different user agent string This is described in detail in "How To Emulate A Mobile Web Browser In Firefox?"). The user agent switcher add-on for Firefox comes with an iPhone profile and I was easily able to add one for a Google Android phone.

It should be noted that the mobile pages will not necessarily display exactly the same as they will on a mobile. The version of HTML the browser uses may be different, the screen size is different and some plug-ins the phones have may be missing.

Some web sites provide the same content to the browser but offer a separate set of CSS style sheets intended for mobile phones. These use the CSS media type "handheld". Most desktop web browsers (and Apple iPhone) ignore the style sheets labelled as "handheld". The firefox "Web Developer" addon has option for manually activating it (you can also activate the "print" stylesheet if there is one). Opera has an option for this already built in. As an example, my home page has a handheld stylesheet which puts all the text in one column. Some web site have reduced image sizes and fewer images when using the handheld styles.

You need to be able to switch back to a web profile, as some mobile version of web sites leave out some functions. Some sites allow for this within the web site. As an example the mobile version of the Wikipedia leaves out the edit functions: you can view content but not change it (see the mobile Wikipedia entry for the Bauhaus for example). A footer offers the regular desktop version and also an option to permanently disable the mobile version.

There are specialist programs for emulating different models of mobile phone. But if you just want to see if there is a mobile version of a web site and what is in it, the switcher works okay.

No comments: