Pushing Mobile Safari’s Limits (and Buttons)

After writing the post about finally taking time for blogging again, I had a go at a Mobile Safari problem I’ve noticed since changing the blog layout.

Mobile Safari was not displaying the green overlay images properly, and I hadn’t a clue why. Eventually after some trial and error I found out that Mobile Safari cannot handle images of three megapixels or higher (which isn’t that strange, since the screen resolution isn’t even 5% of that)

After finding that out, I made sure that the image I used for the overlay was less than three megapixels, which worked fine.. up until I tried to do the jQuery navigation animations. This got my internal optimization train a-rollin’ and eventually I ended up with an overlay file 10% the size of the original.

The original file was 6000 pixels wide and 600 pixels high. The version that seemed to work was 5120 pixels wide (two 30” cinema displays in landscape model) and 600 pixels high. The ‘optimized version’ being used at this point is 3840 pixels wide (two 1080p displays in landscape mode) and around 300 pixels high. In this current design that still seems to do fine, and people can stretch the page across two 1080p screens if they want to. You lucky lot that can stretch it across two 30” cinema displays, just shouldn’t push their luck.

Lesson learnt: Even though we are finally getting rid of IE6 and mobile devices are getting proper browsers too, even though we have the opportunity to use and create tons of semi-transparent files, layer them on top of eachother and make extremely beautiful designs, we should always keep a sensible mind towards site optimization.

The sky is the limit, the world is not enough..