perpetuum mobile
I’m just about finishing up on the mobile version of ronvalstar.nl and thought I’d share some things. Especially since a lot of people don’t seem to have their shit act together.
Of course we’ve come a long way from the text-only WAP sites we used to have. But even though mobile devices are getting better and better a few things stay the same. People use their phones while walking and the screens are rather small. Designing a mobile website basicly boils down to two things: the user and the device.
Someone visiting your site through a mobile phone is most likely doing other stuff at the same time (driving, walking or talking to someone), and probably looking for a phone number or an address (depending on the nature of the site of course). The bottom line is that the content for a mobile website should be different from that of its desktop equivalent because the mindset of the user visiting that site is different.
The same goes for the amount of content. The screen resolution of mobile phones will increase but not the size of our pockets. So the amount of information you can inmediately show is very limited (at least it will be untill we have phones that project right onto our retina’s or into our brains). This also means that solely relying on a mobile stylesheet is not the way to go. It is best to use server side scripting to check where you’re at (HTTP_USER_AGENT).
Scrolling pages is also more of a hassle. This means the content has to be differently structured, often over multiple pages. And the use of the old #hash for internal page links come in very handy here.
Then there’s bandwidth, little of it. So it’s important to keep things small. Resizing images to a minimum and minifyimg all ASCII files is a good start.
A server request is a time consuming matter. You can check this yourself with Firebug for Firefox or the resource tracker in Chrome. A simple check on the Google website shows that receiving the actual HTML only takes up about 5% of the time. Mobile networks are even slower. What you can do instead of requesting several files is combine these files into one big one and cache that on the server. This goes for CSS files and JavaScript files but you can even do this with images.
If an external resource is unique for that page you can also choose to embed it into the HTML. This is easy for CSS and JavaScript but it is also possible for images (like so <img src=”data:image/png;base64gibberish…” />), and also for images linked from within CSS (regexp: /(?< =url()(.[^)]*)(?=))/g). But only do this if the file is not used in any other place, otherwise caching is your friend.
Caching is important. Don’t let your user wait for a time consuming server side calculation especially if you’re doing the same calculation over and over again.
A trick I hacked into my own site is not to load any content images first but embed a binary placeholder of a tiny resized image. Then when the load event has fired JavaScript comes in and replaces them with the normal-sized ones.
But the worst of all… we used to complain about IE vs Firefox and PC vs Mac. Well, we’ve seen nothing yet. There are numerous mobile browsers and even more devices that run them. So a mobile website has to be so liquid it practically drips off your screen.
This also means installing numerous emulators (well the big four are currently Blackberry, iPhone, Windows Mobile and Android).
… so have fun
ps: jQuery mobile beta just got released