Responsive Webdesign für die optimale mobile Ansicht

Das Inter­net ist ein schnell­le­bi­ges Medi­um des­sen Nut­zung sich durch die Anwen­der ste­tig ändert. Die Ver­brei­tung von tech­ni­schen Neue­run­gen wie Smart-TVs, Smart­phones und Tablets führt dazu, dass der Desk­top-Rech­ner, zumin­dest im Pri­vat­ge­brauch, sehr bald aus­ge­dient haben wird. Die Nut­zung des Inter­nets wird zuneh­mend orts- und geräteunabhängig.

istockphoto.com: ©NicoElN­i­no

Dies erfor­dert ein Umden­ken bei der Kon­zep­ti­on und Erstel­lung von Web­sei­ten. Inter­net­sei­ten, die auf den Pixel genau in Pho­to­shop erstellt wer­den, gehö­ren der Ver­gan­gen­heit an. Statt­dess­sen sind fle­xi­ble, reak­ti­ons­fä­hi­ge Web­sei­ten gefragt, die sich an ver­schie­de­ne Anwen­dungs­fäl­le und End­ge­rä­te anpas­sen. Infor­ma­tio­nen kön­nen so für ver­schie­de­ne Dis­play­grö­ßen und Dis­play­for­ma­te auf­be­rei­tet wer­den, damit eine opti­ma­le Dar­stel­lung gewähr­leis­tet ist.

Betrach­ten wir die glei­che Web­sei­te wie in der oben gezeig­ten Abbil­dung auf einem mobi­len End­ge­rät, wie z. B. einem Smart­phone (mit­tig) oder Tablet (links), wer­den die Infor­ma­tio­nen anders dar­ge­stellt als auf einem nor­ma­len Desk­top-Rech­ner oder Note­book (rechts). Dies fällt beson­ders bei der Anord­nung des Lay­outs und der Navi­ga­ti­on auf.

Die Nutzung des Internets auf mobilen Endgeräten

Mit der Markt­ein­füh­rung des ers­ten iPho­nes begann im Jahr 2007 die zuneh­men­de Nut­zung von Web­sei­ten auf mobi­len End­ge­rä­ten. All das, was vor­her den Anwen­dern von Rech­nern, Note­books und Net­books vor­be­hal­ten war, konn­te nun auch auf dem Mobil­te­le­fon genutzt wer­den. Aller­dings gab es ein gro­ßes Pro­blem: die meis­ten Web­sei­ten waren nicht auf die­se Art der Dar­stel­lung vor­be­rei­tet. Da die Smart­phone­dis­plays ver­gleichs­wei­se klein und Web­sei­ten auf die jeweils gän­gi­gen Moni­tor­auf­lö­sun­gen aus­ge­rich­tet waren, muss­ten die Inhal­te zum Lesen durch umständ­li­ches ver­grö­ßern und ver­schie­ben erst pas­send ska­liert und posi­tio­niert wer­den. Das Betrach­ten von Web­sei­ten war auf Smart­phones weder ergo­no­misch noch war die Navi­ga­ti­on sehr benutzerfreundlich.

Tablet Computer und Smartphones ermöglichen mobiles Internet

Die Ver­brei­tung des iPho­nes und ver­gleich­ba­rer Smart­phones schritt rasant vor­an. Im Jahr 2010 sorg­te Apple mit der Vor­stel­lung des iPads für einen nach­hal­tig stei­gen­den Absatz mobi­ler End­ge­rä­te, mit denen die mobi­le Nut­zung von Web­sei­ten ermög­licht wur­de. Aus einer Pres­se­infor­ma­ti­on der Gesell­schaft für Unter­hal­tungs- und Kom­mu­ni­ka­ti­ons­elek­tro­nik (gfu) geht her­vor, dass Smart TVs, Smart­phones und Tablet Com­pu­ter im Jahr 2012 signi­fi­kan­te Stei­ge­run­gen sowohl beim Absatz als auch beim Umsatz auf­wei­sen. Inzwi­schen über­tref­fen in Deutsch­land die Aus­ga­ben für Smart­phones den Umsatz von Fernsehern.

Evolution der Internetnutzung

Laut einer Stu­die der Initia­ti­ve D21 aus dem Jahr 2013 besa­ßen 13 % der deut­schen Bevöl­ke­rung einen inter­net­fä­hi­gen Tablet Com­pu­ter, im Jahr zuvor waren es noch 5 %. Ein inter­net­fä­hi­ges Smart­phone besa­ßen 2013 bereits 37 % der deut­schen Bevöl­ke­rung, im Jahr 2012 waren es 24 %. Die­se Stei­ge­rung um 8 % bezie­hungs­wei­se 13 % ist beson­ders im Zusam­men­hang mit dem Rück­gang der Ver­brei­tung von sta­tio­nä­ren Rech­ner um 8 % im glei­chen Zeit­raum bemer­kens­wert. Eine wei­te­re inter­es­san­te Erkennt­nis der glei­chen Stu­die ist, dass “Mobi­le End­ge­rä­te zu einer höhe­ren Inter­net­nut­zung – ins­be­son­de­re bei Tablet-Besit­zern” führen.

Responsive Webdesign (RWD) - reaktionsfähige Webseiten

Neue Tech­no­lo­gien wie HTML5 und CSS3 bie­ten neue Mög­lich­kei­ten, um den geän­der­ten Anfor­de­run­gen in der Web­ent­wick­lung gerecht zu wer­den. Mit die­sen Tech­no­lo­gien zur Erstel­lung von Web­sei­ten befass­te sich 2011 der Web­ent­wick­ler Ethan Mar­cot­te und präg­te dabei den Begriff Respon­si­ve Webdesign.

Die Popu­la­ri­tät und Ver­brei­tung von Respon­si­ve Web­de­sign hat im Bereich der Web­ent­wick­lung in den letz­ten Jah­ren ste­tig zuge­nom­men. Auf Deutsch wird Respon­si­ve Web­de­sign oft als reak­ti­ons­fä­hi­ges Web­de­sign bezeich­net, da es auf Ver­än­de­run­gen der Dar­stel­lungs­be­din­gun­gen von Web­sei­ten situa­ti­ons­be­dingt reagie­ren kann. Die­se Ver­än­de­run­gen kön­nen neben der Grö­ße des Web­brow­ser­fens­ters auch das zur Betrach­tung der Web­sei­te gewähl­te End­ge­rät betreffen.

Eine Webseite muss nicht immer auf den Pixel genau gleich aussehen

Respon­si­ve Web­de­sign ist für sich genom­men kei­ne neue Erfin­dung, so genann­te Flu­id Lay­outs gab es in der Web­ent­wick­lung schon immer. Die­se, sich an die Grö­ße eines Web­brow­sers anpas­sen­den Lay­outs, wur­den lan­ge Zeit nicht beach­tet, da ver­sucht wur­de Design­prin­zi­pi­en aus den Print­me­di­en auch bei Web­sites anzu­wen­den. Dazu gehör­ten fes­te, auf den Pixel genaue Lay­outs, die in jedem Web­brow­ser exakt gleich aus­se­hen soll­ten. Lay­outs die sich in der Brei­te an die Grö­ße des Web­brow­sers anpass­ten, wohl­mög­lich über den gesam­ten Bild­schirm, waren nicht ange­sagt. Die­se Sicht­wei­se änder­te sich mit HTML5 und CSS3. Man ent­fern­te sich von den Gesetz­mä­ßig­kei­ten des Print­de­sign und akzep­tier­te, dass Web­sei­ten nicht in jedem Web­brow­ser und auf jedem End­ge­rät iden­tisch aus­se­hen müssen.

Neue Anforderungen an Webseiten

Bei der Erstel­lung von Inter­net­sei­ten für mobi­le End­ge­rä­te ist zu beach­ten, dass unter­schied­li­che Anwen­der mit dif­fe­ren­zier­ten Anfor­de­run­gen ange­spro­chen wer­den. Neben der Dis­play­grö­ße unter­schei­den sich mobi­le End­ge­rä­te in der Bedie­nung von her­kömm­li­chen Rech­nern. Die­se erfolgt nicht wie gewohnt über eine Maus oder ein Touch­pad, son­dern über Touchscreens.

Vie­le Eigen­hei­ten in der Bedie­nung von Web­sei­ten müs­sen beach­tet und für mobi­le End­ge­rä­te anders als bis­her gelöst wer­den. Touch­screen­dis­plays ermög­li­chen zum Bei­spiel kei­ne Hover­ef­fek­te. Dafür bie­ten die­se Dis­plays neue Mög­lich­kei­ten zur Steue­rung in Form von Ges­ten­funk­tio­nen. Die­se Unter­schie­de in der Hand­ha­bung einer Web­site müs­sen bereits wäh­rend der Kon­zep­ti­ons- und Gestal­tung­pha­se berück­sich­tigt werden.

Im nächs­ten Arti­kel die­ser Serie zum Respon­si­ve Web­de­sign stel­len wir euch die geän­der­ten Anfor­de­run­gen an die Kon­zep­ti­on und Gestal­tung von reak­ti­ons­fä­hi­gen Web­sei­ten vor.