Optimizing TheLadders Website for the iPhone
It sounds like additional work for the UI and Design teams at TheLadders but with a little bit of tweaks and following some guidelines, we can optimize our website to look good on a small screen on the iPhone or any cell phone.
The iPhone uses the Safari browser which itself uses the Web Kit engine. I am not going to talk about designing and testing pages for the Safari browser in addition to the debugging for IE6. But by following good development standards, we can ensure that the site will work and look good on a small screen.
Here are iPhone specific issues in a small browser:
- There is no input device except fingers.
- Web pages are designed to receive mouse events not finger events.
- Fingers pinch. Mouse clicks.
- Because of the smaller screen, the text size is much smaller as compared to the standard screen so the links will appear too close to each other. The links should not be too close to each other.
- There is no scrollbar in the browser.
- Tapping on a webpage, iPhone centers on the block of the element <div> <img> etc. Avoid wide blocks of texts and use columns that organize content into small sections.
- The iPhone does not render WML. It does support XHTML mobile doctype or sites at .mobi domains.
Even though this support requires a website to be 100% styled and optimized for mobile phone, as well as a desktop browser, a site still can be optimized to look good on a mobile bowser. In addition to rendering as a standard webpage, an iPhone specific style sheet can be used.
Specifying an iPhone Style Sheet:
The following code can be used only for iPhone and wont affect other devices.
<link media=”only and (max-device-width: 480px)”
href=”iPhone.css” type=”text/css” rel=”stylesheet” />
The iPhone Safari browser supports GIF up to 2 MB. JPEG up to 128MB. For larger images, the iPhone alters the layout of the page to fit them.
Surprisingly, the Safari browser on the iPhone does not support:
Window.showModalDialog()
Mouse-over events
Hover styles
Tooltips
Java applets
Flash
So we need to design the pages with smooth degradation.
Regarding security, Safari on the iPhone uses the same SSL implementation that it uses on desktop. So encryption is secure to prevent the information from being listened to on the wire.
These were few simple suggestions that if followed by the Product, Design and UI teams, can make TheLadders website look good in iPhone browser.
Comments
Great stuff here, Imran. I am completely behind any and all supported expansion of media types for the website and that includes cellphones, PDAs and all other mobile devices. Sweet XHTML will save us all.
Posted by: Tom Sunshine | July 24, 2007 09:23 AM