iPho­ne Op­ti­mie­rung und »mo­bi­le web«

, von Frank Hel­len­kamp

Mo­bi­les In­ter­net

Eben­so wie das Me­di­ums "In­ter­net" in den 90ern durch die Ver­brei­tung von PCs immer wich­ti­ger ge­wor­den ist, tritt heute der mo­bi­le Zu­griff auf das In­ter­net immer stär­ker in der Vor­der­grund. Auch wenn Apple mit dem iPho­ne nur einen recht klei­nen Markt­an­teil an allen Mo­bil­te­le­fo­nen hat, do­mi­niert es doch zu­sam­men mit Goog­le An­dro­id den mo­bi­len In­ter­nett­raf­fic. 

Dies liegt vor allem daran, dass man am iPho­ne und unter An­dro­id dank Web­kit eine recht gute Dar­stel­lung von nor­ma­len, nicht für die mo­bi­le Dar­stel­lung op­ti­mier­ten In­ter­net­sei­ten hat — was unter an­de­ren mo­bi­len Brow­sern nur sehr schlecht ge­löst war.  

depage.​net in der mo­bi­len Dar­stel­lung im iPho­ne 

Da das iPho­ne bis­her noch das wich­tigs­te bzw. be­kann­tes­te Mo­bi­le End­ge­rät ist, haben wir uns ent­schie­den, depage.​net und depagecms.​net für die Dar­stel­lung am iPho­ne zu op­ti­mie­ren. 

Bar­rie­re­frei­heit und Lay­outs auf CSS-Ba­sis

Seit ei­ni­gen Jah­ren set­zen wir Web­sei­ten-Lay­outs mög­lichst bar­rie­re­frei bzw. bar­rie­re­arm um. Zum einen ist die Seite na­tür­lich bes­ser zu­greif­bar, zum an­de­ren macht dies die Ver­wal­tung der Lay­outs, Kor­rek­tu­ren, Up­dates etc. sehr viel ein­fa­cher. 

 

In­ner­halb von de­page::cms be­nut­zen wir meist eine Kom­bi­na­ti­on aus 4 ver­schie­de­nen Sty­le­s­heets: 

  • Ein glo­ba­les Sty­le­s­heet (global.​css), in dem alle über­grei­fen­den De­fi­ni­ti­on, wie Schrift­de­fi­ni­tio­nen, all­ge­mei­ne Pa­ra­me­ter etc. vor­ge­nom­men wer­den.
  • Ein Sty­le­s­heet für die Farb­de­fi­ni­tio­nen, da die­ses in­ner­halb von de­page::cms ein­mal pro Farb­sche­ma ge­ne­riert wird (co­lor_%farb­na­me%.css).
  • Ein Sty­le­s­heet für die Bild­schirm­dar­stel­lung (screen.​css mit media="screen").
  • Und ein Sty­le­s­heet für den Aus­druck (print.​css mit media="print"), in dem bei­spiels­wei­se die Na­vi­ga­ti­on aus­ge­blen­det, die Far­ben und Hin­ter­grund­far­ben an­ge­passt und das Lay­out für den Aus­druck auf A4 bzw. Let­ter an­ge­passt wer­den.

 

Für die Dar­stel­lung am iPho­ne kommt nun noch ein zu­sätz­li­ches Sty­le­s­heet dazu: 

  • Das Sty­le­s­heet für das iPho­ne (mobile.​css).

Die Ein­bin­dung des Sty­le­s­heets

Das Sty­le­s­heet für das iPho­ne wird mit einem spe­zi­el­len me­dia-Typ ein­ge­bun­den: 

<link 
	rel="stylesheet" 
	type="text/css" 
	media="only screen and (max-device-width: 480px)" 
	href="lib/global/css/mobile.css">

Der Me­dia-Typ ist hier: only screen and (max-de­vice-width: 480px). 

Das heißt, nur für die Bild­schirm­dar­stel­lung auf Ge­rä­ten, die eine ma­xi­ma­le Bild­schirm­brei­te von 480px haben. 

 

Da al­ler­dings äl­te­re In­ter­net Ex­plo­rer (sprich Ver­si­on 6 und 7) die­sen Me­dia-Typ noch nicht ver­ste­hen, muss die­ses Sty­le­s­heet vor die­sen Brow­sern "ver­steckt" wer­den. Dies kann man mit "Con­di­tio­nal Com­ments" ma­chen: 

<!--[if !IE]> -->
<link 
	rel="stylesheet" 
	type="text/css" 
	media="only screen and (max-device-width: 480px)" 
	href="lib/global/css/mobile.css">
<!--<![endif]-->

Es gibt noch eine zu­sätz­li­che An­ga­be im Head-Ele­ment der HTML-Da­tei, die man vor­neh­men kann, um die Dar­stel­lung am iPho­ne fest­zu­le­gen: 

<meta name="viewport" content="width=480" />

Damit wird die an­fäng­li­che View­port am iPho­ne auf die an­ge­ge­be­ne Brei­te (im Bei­spiel 480px) ein­ge­stellt. 

Ich muss al­ler­dings sagen, dass ich die Syn­tax hier­für nicht mag — dies ist ei­gent­lich eine Sache der Prä­sen­ta­ti­on (CSS) und nicht des Mar­kups (HTML). In­so­fern haben wir für de­page zu­nächst ver­sucht, die An­ga­be zu um­ge­hen, indem wir die Ska­lie­rung der Seite im CSS ver­grö­ßert haben, so dass der glei­che Ef­fekt in­ner­halb des Stan­dard­view­ports des iPho­nes (980px) er­reicht wird. Dies funk­tio­niert des­halb, da wir alle Grö­ßen in­ner­halb der Sty­le­s­heets in em an­ge­ben an­statt in px, so dass alle Ma­ßan­ga­ben au­to­ma­ti­schen mit der Ska­lie­rung des Bo­dy-Tags an­ge­passt wer­den.  

Al­ler­dings mu­ß­ten wir fest­stel­len, dass sich Ope­ra-Mo­bi­le damit schwer tut, so dass wir die An­ga­be dann doch noch er­gän­zen mu­ß­ten, um eine ein­heit­li­che Dar­stel­lung zu be­kom­men. 

 

Up­date nach einer Reihe von Tests: Um aber auch für An­dro­id und Opera Mo­bi­le eine bes­se­re An­fangs­ska­lie­rung zu be­kom­men, ist es bes­ser fol­gen­de An­ga­be zu ver­wen­den — so ska­liert der View­port auf die Ge­rä­te­b­rei­te und bleibt dabei un­ge­zoomt: 

<meta 
	name="viewport" 
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

 

Da­nach haben wir noch die au­to­ma­ti­sche Text­ska­lie­rung des iPho­nes de­ak­ti­viert, da wir die Text­grö­ßen im Sty­le­s­heet ja kon­kret fest­le­gen wer­den: 

/* {{{ global */
html {
    -webkit-text-size-adjust: none;
}
/* }}} */

Die Um­set­zung

Der Um­set­zung der mo­bi­len Ver­si­on lag kein "of­fi­zi­el­ler" Ent­wurf zu Grun­de, der als Sty­le­s­heet um­ge­setzt wurde. 

 

Im Ge­gen­teil: Auf Basis des nor­ma­len Lay­outs der Seite wur­den Stück für Stück ein­zel­ne Sty­les an­ge­passt, ab­ge­wan­delt und op­ti­miert, so dass die Web­site auf dem klei­nen Bild­schirm gut les­bar ist und sich gut über den Touch­screen be­die­nen läßt. 

 

Dank des iPho­ne Si­mu­la­tors, der dem Apple iPho­ne SDK bei­liegt, ist der Test recht schnell und ein­fach, ohne dass man dafür un­be­dingt ein iPho­ne oder iPod Touch be­sit­zen muss. 

 

Al­ler­dings soll­te man nach der Op­ti­mie­rung das Ganze auch auf einem rea­len Gerät tes­ten, da die Per­for­mance im Si­mu­la­tor eine an­de­re ist — Vor allem aber, da sich die Hand­ha­bung mit dem Fin­ger na­tür­lich von der mit der Maus im Si­mu­la­tor er­heb­lich un­ter­schei­det. 

An­pas­sen des Lay­outs auf das iPho­ne-Dis­play

Als ers­tes haben wir das Lay­out in das iPho­ne-Dis­play ein­ge­passt und die Schrift­grö­ßen so ver­än­dert, dass eine gute Les­bar­keit ge­währ­leis­tet ist. 

Das un­an­ge­pass­te Lay­out 

An­pas­sung der Schrift­grö­ßen 

An­pas­sung der Spal­ten­brei­ten 

Die rich­ti­ge Basis zum Lesen ohne ho­ri­zon­ta­les Scrol­ling 

Über­ar­bei­tung der Na­vi­ga­ti­on

Da­nach haben wir die Na­vi­ga­ti­on über­ar­bei­tet. Da die Na­vi­ga­ti­ons­tie­fe auf depage.​net recht nied­rig ist, konn­ten alle Na­vi­ga­ti­on­punk­te auf ein­mal dar­ge­stellt wer­den. 

Un­an­ge­pass­te Na­vi­ga­ti­on 

Far­ban­pas­sung 

"In­li­ne"-Na­vi­ga­ti­on 

Er­hö­hung der Zei­len­hö­he, zu bes­se­ren Be­dien­bar­keit 

Neu­de­fi­ni­ti­on der Start­sei­te für das iPho­ne

Zu­nächst war für die Start­sei­te ge­plant, die Na­vi­ga­ti­on mit den The­men­be­rei­chen zu be­las­sen. Dies wurde aber aus meh­re­ren Grün­den kom­plett fal­len­ge­las­sen: 

  • Durch die in den Vor­der­grund ge­ho­be­ne Haupt­na­vi­ga­ti­on wür­den sich die The­men­be­rei­che di­rekt un­ter­ein­an­der wie­der­ho­len.
  • Auf der nor­ma­len Start­sei­te wer­den die Zu­satz­tex­te zu den The­men­be­rei­chen auf Mou­se­O­ver sicht­bar. Al­ler­dings gibt es mit dem Touch­Screen kein Ho­ver-Zu­stand bzw. die­ser wird erst mit einem Tap auf das je­wei­li­ge Ele­ment sicht­bar. Das ist für die­sen Zweck aber äu­ßerst schlecht ge­eig­net.
  • Zudem er­wie­sen sich die Teaser-Ele­men­te am iPho­ne als das bes­se­re Na­vi­ga­ti­ons­ele­ment.

 

Die Teaser für die ein­zel­nen Blog­ein­trä­ge sind nun das Haupt­ele­ment auf der mo­bi­len Start­sei­te. 

An­pas­sung der Start­sei­te 

Test der Zu­satz­tex­te der Start­sei­te 

An­pas­sung der Teaser-Ele­men­te 

Das fer­ti­ge Lay­out auf depage.​net 

Fazit

Die Op­ti­mie­rung von Web­sei­ten für das iPho­ne ist in­ge­samt sehr viel an­ge­neh­mer als die Um­set­zung für nor­ma­le Brow­ser. Das liegt aber vor allem daran, dass Web­Kit eines der mo­derns­ten Ren­de­ring-En­gi­nes ist und in­so­fern auch recht ak­tu­el­le CSS-Ei­gen­schaf­ten be­ach­tet. 

Zudem ist es wahn­sin­nig an­ge­nehm für nur ein Gerät und einen Brow­ser zu ent­wi­ckeln, so dass man sich die viel­fa­chen Tests spa­ren kann, die man nor­ma­ler­wei­se vor­neh­men muss (In­ter­net Ex­plo­rer 6, 7, 8 und evtl. noch 9 pre­view, Fi­re­fox 2, 3, 3.5 und 3.6, Sa­fa­ri 3 und 4, Chro­me 4 und 5 und Opera 10.*). 

 

Al­ler­dings wird sich der mo­bi­le Markt in Zu­kunft noch wei­ter öff­nen, so dass dort eben­falls er­wei­ter­te Tests nötig wer­den — und das trotz der hel­den­haf­ten HTML5-Be­stre­bun­gen. 

 

Als nächs­tes ste­hen bei uns also die An­dro­id-Tests auf der Ta­ges­ord­nung. Al­ler­dings habe ich die Hoff­nung, dass sich diese dank Web­Kit als nicht so auf­wen­dig er­wei­sen... ;-)