So you think your site is mobile web ready?
So you think the website you built for your important client or your site is mobile web ready because it looks good in your iPhone or iPod? Don’t be delusional like we did.
Testing our first Mobile Web Best Practices’ assignment we discovered Opera Mini on iPhone/iPod. Despite a number of rendering issues related to table (for tabular data) and px vs %/em for div wrapper (e.g. #container), our first impression was that it offers a better user experience based on the test we did for the assignment’s site, and that it was largely due to the fact that we are still not a fan for Pinch-to-zoom multitouch that iPhone/iPod users are so used to and embraced.
Below screen shot shows you how our assignment’s site rendered in Opera Mini compare with Safari Mini and Andriod, and that we thought it offers better user experience because it doesn’t required zooming action; as a matter of fact, the zooming does not work at all.
Reality crashes in!
The first good impression has distorted after we visited a number of sites, made a number of tests in attempt to find out the inconsistency of rendering and zooming issues (some sites we visited are zoomable and some are not). We think we have nailed it.
Before we tell you how, let us show you what special treatment we did for our assignment’s site:
- XHTML Basic 1.1 Doctype is used. See Comparison of XHTML Mobile Profile and XHTML Basic
- Media Queries is used
Now let us tell you our “inconclusive” finding. Inconclusive because we recognize that we may not fully understand what we thought we understood from the sites we visited. The tests performed are based on Andriod’s browser, Safari Mini and Opera Mini, we would love to test on other devices but thus far we have not been able to find RIM and Palm emulators for Mac.
The true mobile web optimized site:
Site that looks gorgeous in all 3 mobile browsers and not zoom-able in all of them.
From below screen shot you can see clearly that m.twitter renders very much the same for Andriod, Opera Mini and Safari Mini browsers, the reason for that is it has optimized for mobile devices. Similar to our assignment’s site, we believe the mobile twitter also use a mobile doctype and it’s not zoom-able, we are however not able to confirm it unless the mobile.twitter (which seems to be a strip off version) is the same for m.twitter.
In the mobile.twitter’s source code we saw “viewport” meta tag is used and the purpose of this meta tag appears to be preventing zooming in Safari (and maybe Andriod’s browser too):
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
However there is no style sheet nor doctype used so we are not 100% sure how exactly the optimization for mobile web browsers is done for m.twitter, but we have a fine guess based from the experience we’d just had working on our assignment’s site:
- Mobile Profile or XHTML Basic 1.1 is used
- Media Queries is used
- Meta Name is used
The semi-mobile web optimized site:
Site that looks gorgeous in Andriod’s browser and Safari mini but not Opera mini
The “viewport” meta tag from mobile.twitter gave us a fuzzy idea; a google search landed us on this article from Element Fusion which the site is optimized for iPhone.
First let’s see how the mobile optimized site of Element Fusion shows up in the 3 browsers.
You can see that it’s not optimized for the true mobile web; it’s zoom-able in Opera Mini, not “pinch-to-zoom” in Andriod’s browser and Safari Mini because of viewport meta tag; none of the care made for iPhone picked up by Opera Mini hence it’s not Mobile web OK.
The site used Media Queries to target iPhone and other mobile devices, we thought it should be picked up by Opera Mini. XHTML Transitional doctype is used for all browsers and our guess is that this has resulted Opera Mini ignores the Media Queries.
<link media="only screen and (max-device-width: 480px) and (min-device-width: 320px)" href="mobile.css" type="text/css" rel="stylesheet" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- XHTML 1.0 Transitional
- Media Queries is used
- viewport Meta Name is used
Your delusion: (million of) sites that are not mobile web optimized.
Below screen shots showed Apple store and NYTimes.
Our delusion: lotus seeds design blog and all the websites we built:
So we decided to use our blog as an example by first running various tests using different doctypes, with/without media queries and with/without viewport meta tag. In the next follow up article we will show you how we transform our blog to mobile web compliant, before that, bear with us, let’s just see the screen shots from the tests we did. In the above tests, we mentioned that m.twitter and Element Fusion used the “viewport” meta tag to prevent zooming in Safari, the use of the meta tag has no impact whichever doctype is used.
a) XHTML Basic 1.1 doctype, NO media queries, with “viewport” meta tag for the 3 browsers.
From the screenshots taken above, you can see that “viewport” meta tag is not recommended unless you make optimization for iPhone/Andriod or you are delivering a Mobile Web compliant site.
b) XHTML 1.0 Strict doctype, no media queries, no viewport meta tag.
c) XHTML 1.0 Strict doctype, media queries (#container: width:100%) for the 3 browsers.
d) XHTML Basic 1.1 doctype. no media queries for the 3 browsers, not zoom-able for Opera Mini, and the Andriod isn’t rendered as close as Safari Mini.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">
Notice that when no media queries is served and with XHTML Basic 1.1, Opera Mini tried to re-adjust the layout, and it did a terrible job. This should be remediable if we serve a Viewport meta tag in conjunction with media queries . Opera Mobile 10 added the support for viewport, and in this “developer’s introduction” it shows a Media Queries + viewport example. We will reserve this topic for the follow up article, but here is a quick note, according to W3C Mobile Web Application Best Practices, the viewport example showed above for iPhone, is the standard setting, yet Opera Mobile simplifies it (see below) which “makes one CSS pixel equal to one device pixel”:
<meta name="viewport" content="width=device-width" />
The Media Queries + viewport example shows that Andriod and Safari rendered the simplify version of viewport just fine.
e) XHTML Basic 1.1 doctype, media queries (#container: width:100%) for the 3 browsers, not zoom-able for Opera Mini, and the Andriod isn’t rendered as close as Safari Mini.
Closing though
The way we see it, it’s a blessing and curse for the three browsers rendered differently, in which Safari and Andriod are more in sync with each other. As a web developer and website’s owner point of view, it would be really nice if Opera Mini renders very closely as the other two do, because it means less development time and cost. Yet the “pinch to zoom” feature offers a less user experience however we look at it; Opera Mini has a “Mobile View” feature that will disable all floated elements, and this might be a not-so-perfect compromise for sites that do not optimized for Mobile Web, but the question lies here: can we expect Opera Mini users switch on the “Mobile Web” setting?
Site like m.twitter that has made effort delivering a mobile web compliant site likely doesn’t like the idea that its mobile users turn on the “Mobile View” setting.
Sites that have not made effort delivering a mobile web compliant site will appreciate their mobile users turn on the “Mobile View” setting.
Cynical us think that one day when mobile web design becomes mainstream, Andriod’s browser, Safari and Opera Mini are the 3 major browsers, Opera Mini might become a browser like IE 6/7 that web developers constantly curse on.