Re­spon­si­ve De­sign

Ein Text, vie­le Ziel­grup­pen

Smart­pho­nes ha­ben das In­ter­net um­ge­krem­pelt! Neue Brow­ser und klei­ne­re Dis­plays ha­ben da­zu ge­führt, dass In­ter­netsei­ten heu­te an­ders ge­stal­tet sein müs­sen als frü­her. Die auf 50% ver­klei­ner­ten Bil­der auf die­ser Sei­te ge­ben den «vor­her/nach­her» Ein­druck wie­der: Rief man frü­her un­se­re Sei­ten mit dem Smart­pho­ne auf, er­hielt man die für den PC op­ti­mier­te Sei­te in vol­ler Schön­heit in­klu­si­ve Rand­me­nü aber mit un­les­bar klei­ner Schrift.

17 Jah­re nach den ers­ten Zei­len stel­le ich nun den ori­gi­na­len Text so um, dass er beim La­den vom Brow­ser ziel­ge­recht for­ma­tiert wird, so­dass er auf Smart­pho­nes, Ta­blets und PCs glei­cher­ma­ßen gut les­bar ist. Die­se Fä­hig­keit ei­ner Web­sei­te be­zeich­net man als «re­spon­si­ve de­sign».

Ei­ne Aus­nah­me stel­len zur­zeit noch die Bil­der­ga­le­ri­en zwei­er Rad­tou­ren dar, für die ich noch kei­ne be­frie­di­gen­de Lö­sung ge­fun­den ha­be. Ak­tu­ell muss man das Smart­pho­ne ins Qu­er­for­mat dre­hen. Zu­dem kann der Sa­fa­ri der iPhones kei­ne Frames ver­ar­bei­ten. Aber das ist ein Pro­blem von Apple. Al­le an­de­ren Ga­le­ri­en wur­den an­ge­passt.

Es gibt ver­schie­de­ne Lö­sun­gen, Tex­te für un­ter­schied­li­che Auf­lö­sun­gen ei­nes Bild­schirms zu op­ti­mie­ren. Aber für ei­ne pri­va­te Home­page kommt we­gen des da­mit ver­bun­de­nen ho­hen Auf­wands prak­tisch nur die Va­ri­an­te in Fra­ge, die den Text al­lein mit­tels CSS for­ma­tiert. Über 1400 HTML-Sei­ten auf ein neu­es For­mat um­zu­stel­len, ist ei­ne ech­te Her­aus­for­de­rung. Ich muss­te ein Pro­gramm schrei­ben, das die Be­son­der­hei­ten un­se­rer Sei­ten be­rück­sich­tigt. Den­noch er­for­der­te je­de Ge­schich­te ei­nen hän­di­schen Auf­wand von 1-2 Stun­den, was ei­ner schnel­len Um­set­zung der Sei­ten nicht ge­ra­de ent­ge­gen kam. 9 Mo­na­te hat die Um­set­zung letzt­lich ge­dau­ert.

Wer ei­ne Home­page sein ei­gen nennt ist gut be­ra­ten, ei­ne Ver­sion im Sin­ne von Re­spon­si­ve De­sign zu er­zeu­gen. Die CSS-Datei stel­le ich für die pri­va­te Nut­zung als Tem­pla­te zur frei­en Ver­fü­gung. Aus­gangs­punkt al­ler Ak­tio­nen ist die Zei­le:

<meta name="viewport" content="width=device-width, initial-scale=1">

Die­se sagt dem Brow­ser, dass er es mit ei­ner für ver­schie­de­ne Auf­lö­sun­gen kon­zi­pier­ten Da­tei zu tun hat. Da­bei wird als un­mit­tel­bar sicht­ba­res Zei­chen zu­nächst die Schrift­grö­ße an­ge­passt, wo­durch der Text län­ger und schma­ler wird. Wer die Sei­ten­brei­ten mit­tels Ta­bel­len for­ma­tiert hat­te, muss jetzt um­den­ken.

Rich­tig gut wird der Text aber erst durch Sil­ben­tren­nung. Ich ha­be mich da­zu ent­schie­den, die Sil­ben­tren­nung über die NHun­spell-Biblio­thek zu ma­chen und den Text mit be­ding­ten Trenn­zei­chen zu er­stel­len. Da­durch be­kommt der Text zwar ein selt­sa­mes Aus­se­hen, weil er von eben die­sen Trenn­stri­chen durch­zo­gen ist, al­ler­dings kann ich falsche oder un­er­wünsch­te Tren­ner von Hand nach­be­ar­bei­ten. Für Block­satz ist ei­ne Sil­ben­tren­nung ab­so­lut not­wen­dig, aber auch bei Flat­ter­rand lie­fert sie op­tisch un­be­streit­bar gu­te Er­geb­nis­se!

Das Bild zeigt deut­lich den Un­ter­schied, den die Sil­ben­tren­nung macht: Streut man Bil­der in den Text ein, so­dass der Text die­se um­flie­ßen soll, funk­tio­niert das auf klei­nen Dis­plays nur dann, wenn die Wör­ter kurz sind. Aus­drücke wie be­kannt­lich oder Fa­mi­li­en­ge­schich­te sind so lang, dass sie ent­we­der mit­ten im Wort oder in die ers­te Zei­le un­ter­halb des Bil­des um­ge­bro­chen wer­den. Aber auch auf dem PC sieht ei­ne Sei­te mit Sil­ben­tren­nung schi­cker aus. Ein­zi­ger Nach­teil ist, dass man nun nicht mehr so ein­fach im HTML-Quell­text su­chen kann.

Die­se Sei­te wur­de nach­träg­lich mit dem Sil­ben­tren­nungs­ver­fah­ren be­ar­bei­tet. Ein selbst ge­schrie­be­nes Pro­gramm sorgt da­für, dass nur der Text er­fasst und nicht in­ner­halb von HTML-Aus­drücken ge­trennt wird. Da­zu muss die HTML-Sei­te for­mal feh­ler­frei sein. Unab­ding­ba­re Grund­kennt­nis­se in HTML und CSS ver­mit­telt die Sei­te self­html.org. Sie setzt die von Ste­fan Münz 1995 be­gon­ne­ne Ar­beit fort, bei dem ich mich hier­mit aus­drück­lich be­dan­ke!