Testing ffffrozen* on iPod Touch/iPhone

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):

  • different interpretation of JavaScript DOM events
  • no Flash support

Layout

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:

blog screen shot

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:

blog entry - enlarged text

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:

contact from

zoomed form and keybord for typing

Flash

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:

embedded youtube clip

Once video is clicked, youtube api is open with the clip. After playback youtube api is closed and browser appears again.

Javascript and DOM events

This is area with significant differences. JavaScript events work different because there is no mouse movement. Basic events like onmouseover, onmousedown and :hover state work once an element is tapped by the user. In this case, if I want to see pop-up elements in header, I need to tap one of them. In standard browser once mouse moves out from the visible element, it fades out, meanwhile on iPod touch, it stays visible unless other element is tapped:

visible pop-up element

visible pop-up elements

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:

main navigation - drop-down menu

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.

What about JavaScript? That's a good question. If I want to keep my look and feel similar to standalone version, my JavaScript needs to be changed. Because onmouseover and onmouseout events work on iPhone/iPod touch in a different way, I should consider onfocus as a key event. But it would just work for iPhone/iPod touch. I haven't tested my blog on other mobile platforms such as Palm or Blackberry and I don't know how JavaScript is implemented. On the other hand, removing JavaScript effects would be the safest way to get similar effect across the mobile platforms and alternative layout for mobile version would be a good solution. Because of popularity of iPhone and iPod touch some websites are iPhone/iPod touch optimised where content is scrolled horizontal. Here is a showcase of websites following that trend.

Got some comments or something to say? Feel free to express your thoughts on twitter, facebook, your blog or somewhere else...