Going mobile

Following my recent discovery of Opera Mini I fiddled around with stylesheets trying to make the site presentable on mobile phones (well ones running Opera at least). And I seem to have success. The image on the left is how it the page appears in Opera’s small screen mode using the “handheld” stylesheet I defined. That’s about 240px wide but it displays okay at anything down to 176px (the screen width of the Nokia N70). Since the modifications are only to the stylesheet the page is still the same size as before (which is rather bloated) Of course if you use Opera Mini this isn’t a problem since it formats and compresses the page before it gets to your phone. For anyone wanting to do something similar, here are some of the things I did specifically:

• Lower the font size. I’m not sure whether proportional fonts are ideal here - I just set body { font-size: 10px }.
• Remove the adverts. Most of the adverts are fixed sizes that are too big for mobile phones. Large ad networks probably won’t pay for mobile visitors anyway. Remove them by giving them a display: none CSS attribute.
• Set a maximum size for images. All the images have max-width: 95% to stop them needing to scroll.
• Cut down the margin and padding for basically everything. Especially lists.
• Hide redundant navigation. Most sites have multiple menus that aren’t necessary and a pain to scroll through. In my case I scrapped the calendar.
• Resize form elements especially textareas. I’m not sure whether it’s practical to try and post from a mobile phone but I don’t want it to be impossible.
• Use a sans-serif font - they’re more readable at small sizes. More subjective and only an issue really if you can’t read the serif font.

A final note (in case you didn’t guess): the page is using normal XHTML. Not XHTML Basic, cHTML or WML. Although I haven’t tested it on a real phone Opera claims it will display it fine (which could mean it only works in Opera Mini - but it’s free and apparently better than any other mobile browser out there). cellphones, mobile phones, mobile browsing, browsers