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
User-Agent
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.
Comments
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.
- Datum: 2005-08-11 10.52.29 CEST
- Namn: Peter Karlsson
- Sänt från: *******.opera.com
Standardspråket är svenska, så om du inte har ställt in ett språk (dvs. vävläsaren inte skickar Accept-Language) så får du sidor på svenska. Om du aktivt valt ett språk, eller din vävläsare har en förinställning, så följs den.
- Datum: 2005-08-11 21.35.12 CEST
- Namn: Peter Korkala
- Vävplats: http://peter.korkala.se
- Sänt från: **************.telia.com
Mycket intressant!
Måste ta och sätta mig in i det här, och börja anpassa en del siter för mobila enheter.
Synd förresten att Opera för mobiler inte kan hämtas av vem som helst. Vad är anledningen till det? Har det att göra med att Opera kanske säljer klienten till en kund som kan erbjuda sina besökare läsaren, eller är det några andra motiv bakom?
Går det att besöka vilka platser som helst med den, eller är den begränsad till platsen som man fick den ifrån?
- Datum: 2005-08-11 23.57.36 CEST
- Namn: Peter Karlsson
- Sänt från: ************.customer.alfanett.no
Opera säljer tjänsten via innehållsleverantörer eller operatörer (just nu bara norska TV2) eftersom det både är en serverdel och en klientdel, och det kostar en del att drifta serverdelen. Dessutom är klienten "branded", dvs. det står TV2 på klienten och den inbyggda startsidan innehåller länkar till TV2-sidor.
Det går däremot att besöka precis vilka adresser som helst och det som visas motsvarar i stort sett det du ser i en vanlig skrivbordsversion av Opera om du trycker Skift+F11.
- Datum: 2005-08-11 23.58.53 CEST
- Namn: Peter Karlsson
- Sänt från: ************.customer.alfanett.no
Observera att det alltså är skillnad mellan Opera Mini och Opera för mobiltelefoner. Den sistnämnda finns i versioner för bl.a Symbian och kan hämtas på www.opera.com, det är en full vävläsare som du installerar på telefonen och som inte kräver någon serverdel.
![[Opera browser]](../pics/opera94x15.png "Opera browser"){kind=small}
Fungerar språkigenkänningen för mobila enheter? Jag provade med min Sony Ericsson K700i och fick upp sidan på svenska. (Eller är det standardspråket?)