iPhone optimization and »mobile web«
mobile internet
Similar to the development in the nineties, when the internet became more and more important due to the spread of PC`s, mobile access to the internet is now coming to the fore. Even though Apple`s iPhone only enjoys a relatively small share of the market, it does -along with Google`s Android- dominate mobile internet traffic.
This is because the iPhone and Android achieve a fairly good display of regular internet sites that are not optimized for mobile internet thanks to Webkit. That is not the case with a lot of other browsers.
depage.net displayed on the iphone
Because the iPhone is currently the most important and best known mobile device we have decided to optimize depage.net and depagecms.net for display on the iPhone.
accessability and layouts using CSS
For some years now we have been designing websites that are as accessible as possible. On the one hand the site is more easily accessible, on the other hand the maintenance of layouts, corrections, updates etc. is much simpler.
Within depage::cms we normally use a combination of 4 style sheets:
A global style sheet (global.css ) in which all global definitions such as font definitions, general parameters etc. are implemented.
A style sheet for color definitions as this is generated for each color scheme within depage::cms (color_%farbname%.css).
A style sheet for screen display (screen.css with media="screen" ).
And a style sheet for printing (print.css with media="print" ), in which e.g. the navigation is faded out and colors and background colors or the layout for printing in A4 or letter are adjusted.
For display on the iPhone an extra style sheet is needed:
Style Sheet for the iPhone (mobile.css ):
Integration of the style sheet
The iPhone style sheet is integrated with a special type of media:
<link
rel="stylesheet"
type="text/css"
media="only screen and (max-device-width: 480px)"
href="lib/global/css/mobile.css">
The type of media here is: only screen and (max-device-width: 480px) meaning it's only for devices that have a maximum display width of 480px.
However, due to the fact that older versions of Internet Explorer (versions 6 and 7) don't understand this media type, the style sheet has to be “hidden” from this browser. This can be done with “conditional comments”:
<!--[if !IE]> -->
<link
rel="stylesheet"
type="text/css"
media="only screen and (max-device-width: 480px)"
href="lib/global/css/mobile.css">
<!--<![endif]-->
There is an additional parameter in the head element of the HTML file that can be adjusted to configure the display on the iPhone:
<meta name="viewport" content="width=480" />
Thereby the initial viewport on the iPhone is set to the indicated width (in the example 480px).
I have to say though that I'm not so fond of the syntax that is used here. It should really be a matter of presentation (CSS) not markup (HTML). That's why we tried to find a way around this parameter by increasing the scaling in the CSS and thereby achieving the same effect within the standard viewport of the iPhone (980px). This works because we indicated all sizes in em and not in px so that all dimensions are automatically configured when scaling the body tag.
We discovered, however, that opera-mobile has difficulties with this, so that we had to make some additional adjustments to achieve a consistent display.
Update after lots of testing: To get a better initial scaling for android devices and opera mobile, it is better to use the following viewport — it scales the viewport to the device width and practically keeps the view in an unzoomed state:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
After that we deactivated the iPhone's automatic text scaling, because we are going to configure the text sizes in the style sheet.
/* {{{ global */
html {
-webkit-text-size-adjust: none;
}
/* }}} */
The implementation
There was no “official” layout that we used as the basis of the style sheet.
On the contrary: On the basis of the original layout of the site, styles were adjusted, modified and optimized bit by bit, so that the website is well readable on the small screen and can be handled well via touchscreen.
Thanks to the iPhone simulator that is a part of Apples iPhone SDK the test is fairly quick and easy without you necessarily having to own an iPhone.
However, after optimizing the style sheet, one should try it out on a real device as performance is different on a simulator. In addition handling a touch screen with your finger is a whole different thing to operating the simulator with your computer mouse.
Adjusting the layout for iPhone display
First of all we fitted the layout into the iPhone's display und adjusted the font sizes to ensure good readability.
The unadjusted layout
Adjusting the font sizes
Adjusting the width of the columns
Making the text readable without having to scroll horizontally
Reworking the navigation
After that we reworked the navigation. Because the navigational depth on depage.net is relatively low, all navigation points can be displayed simulaneously.
Unadjusted navigation
colour adjustement
"Inline" navigation
Increasing the line height to ensure easier handling
Redefining the homepage for the iPhone
At the beginning we intended to keep the original navigation through subject areas. But for various reasons we had to drop this idea:
If the main navigation come to the fore, the subject areas would appear twice, one below the other. On the normal home page the additional texts become visible through MouseOver. However there is no hover state with the touch screen, or rather it only becomes visible with a tap on the respective element. This is really impractical for our purpose.
Moreover the teaser elements on the iPhone have proved to be more suitable for navigation.
The teaser for blog articles are now the main element of the mobile home page.
Adjusting the home page
Testing the additional texts of the hme page
Adjusting the teaser elements
The finished layout of depage.net
Conclusion
On the whole optimizing websites for the iPhone is far more pleasant than the implementation for normal browsers. This is mainly due to the fact that WebKit is one of the most modern rendering engines and respectively pays attention to current CSS specifications.
Moreover it is great only to develop a site for one device and one browser. As a result we are spared the many tests that one normally has to conduct (Internet Explorer 6, 7, 8 and possibly 9 preview, Firefox 2, 3, 3.5 and 3.6, Safari 3 and 4, Chrome 4 and 5 and Opera 10.*).
However the mobile market will also expand, so that tests will become necessary in the future- despite the heroic HTML5 efforts.
Android tests will be next on the agenda. But I am hopeful that, owing to WebKit, these tests won't be quite as time-consuming... ;-)
.third div {
position: relative;
top: 0;
left: 0;
border-right-width: 1px;
border-right-style: solid;
border-color: #000000;
width: 66.6666%;
height: 100%;
}
.third div:hover {
border-color: #ff0000;
}
.staircase div {
position: relative;
top: 5em;
left: 5em;
border-width: 1px;
border-style: solid;
border-color: #000000;
width: 5em;
height: 5em;
}
.staircase div:hover {
border-color: #ff0000;
}
.rotation div {
position: relative;
top: 50%;
left: 45%;
border-width: 1px;
border-style: solid;
border-color: #000000;
background: #dddddd;
width: 5em;
height: 5em;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.rotation div div {
top: 5em;
left: 5em;
}
.rotation div:hover {
border-color: #ff0000;
}
.rotation2 div {
position: relative;
top: 50%;
left: -10%;
border-width: 1px;
border-style: solid;
border-color: #000000;
background: #dddddd;
width: 72em;
height: 12em;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-border-radius: 6em;
-moz-border-radius: 6em;
-o-border-radius: 6em;
border-radius: 6em;
}
.rotation2 div div {
top: 5em;
left: 5em;
}
.rotation2 div:hover {
border-color: #ff0000;
}
.rotation3 div {
position: relative;
top: 50%;
left: -10%;
border-width: 1px;
border-style: solid;
border-color: #000000;
background: #dddddd;
width: 72em;
height: 2em;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-border-radius: 6em;
-moz-border-radius: 6em;
-o-border-radius: 6em;
border-radius: 6em;
}
.rotation3 div div {
top: 5em;
left: 5em;
}
.rotation3 div:hover {
border-color: #ff0000;
}
