Since I released my blog, I was wondering how it works on mobile devices such as iPod touch/iPhone. As an owner of iPod touch I took that opportunity and did some testings.
Testing was done using mobile version of Safari which comes with Mac OS X for iPhone and iPod touch. At the beginning I knew that some functions will not work because of some limitations that has Safari (and whole platform):
- no Flash support
The first thing that I spotted is an issue with top red border. No matter what is an orientation of iPod (horizontal or vertical), top red border is not stretched to full width. I have tried to apply 100% width for html and body by adjusting CSS, but it didn't help:
The other important thing is that large blocks of text (i.e. main text for entries) is much more larger that originally defined. Currently font-size for text is set to 12px but it looks like, that large text blocks are recognised and font size is automatically increased to improve readability:
Safari has been known for adding its own fancy look&feel for form elements. Here is the same story: input fields and text areas get rounded corners and internal shadow. Once any field is tapped, it gets zoomed and keyboard appears for typing:
Lack of Flash support means that font replacement done with sIFR and any embedded flash players will be not available unless it is youtube video. Because Apple developed dedicated youtube api for iPhone, embedded youtube clips are available via that application:
Once video is clicked, youtube api is open with the clip. After playback youtube api is closed and browser appears again.
Main navigation is based on nested lists. Description underneath of each item (lighter blue) is a nested list item based on suckerfish drop-down menu. If item is tapped, styling for :hover state is applied and drop-down becomes visible, but no page is loaded. Once tapped second time, Safari opens selected location. For any other hyperlinks,:hover styling appears once element gets :focus state - that means :hover state is triggered on hyperlink is tapped:
The list of events and how they behave on iPhone/iPod touch can be found on QuirksMode.org.
I was surprised that I couldn't find documentation on Apple website (maybe it doesn't exist yet).
What needs to be done?
If sIFR is in use, styling for flash-replaced elements needs to be added, but this is not only related to mobile platforms. If some users on standard PCs have flash disabled (for example flashblock plugin) or not installed at all, they will see text elements that follow styling similar for sIFR. For other flash elements (like animations), alternative version needs to be added. For example, adding background image (based on still image from flash) to the div containing flash is a good idea.
Got some comments or something to say? Feel free to express your thoughts on twitter, facebook, your blog or somewhere else...