Responsive Webdesign – Auswirkungen auf die Gestaltung

Die Gestal­tung einer reak­ti­ons­fä­hi­gen Web­sei­te für ver­schie­de­ne mobi­le und nicht mobi­le End­ge­rä­te beginnt mit einer Kon­zep­ti­ons­pha­se. Die­se fällt wesent­lich umfas­sen­der als bei einer nor­ma­len, nicht reak­ti­ons­fä­hi­gen Web­sei­te aus. Mit die­sem Arti­kel möch­ten wir die Unter­schie­de zum bis­he­ri­gen Kon­zep­ti­ons- und Gestal­tungs­pro­zess vorstellen.

Die­ser Bei­trag basiert auf dem vor­an­ge­gan­ge­nen Arti­kel der sich mit Respon­si­ve Web­de­sign, der opti­ma­len Dar­stel­lung von Web­sei­ten auf mobi­len End­ge­rä­ten, befasst.

Gesteigerter Gestaltungsaufwand durch verschiedene Layouts

Bei der Gestal­tung von Respon­si­ve Web­de­signs sind min­des­tens drei ver­schie­de­ne Dis­play­grö­ßen und Anord­nun­gen durch unter­schied­li­che Lay­outs zu berück­sich­ti­gen. Es wer­den Smart­phones, Tablets und nor­ma­le Rech­ner jeweils mit einem eige­nen Lay­out bedacht. Für die­se drei Grund­lay­outs haben sich Pixel­brei­ten von 480px, 768px und 960px eta­bliert. Die­se Pixel­brei­ten sind durch die Dis­play­auf­lö­sun­gen aktu­el­ler End­ge­rä­te bedingt, sie sind aber nicht fest vor­ge­schrie­ben und kön­nen auch belie­big vari­iert wer­den. Die gän­gi­gen Dis­play­brei­ten mobi­ler und nicht mobi­ler End­ge­rä­te wer­den dabei immer beach­tet. Zusätz­lich kön­nen wei­te­re Zwi­schen­lay­outs defi­niert wer­den. Wir ach­ten bei der Umset­zung von reak­ti­ons­fä­hi­gen Web­sei­ten auch auf höhe­re Auf­lö­sun­gen moder­ner Moni­to­re, dazu wird ein vier­tes Lay­out mit einer Pixel­brei­te von 1200px erstellt.

Umdenken bei der Navigation erforderlich

Neben der Dis­play­grö­ße muss bei der Gestal­tung von reak­ti­ons­fä­hi­gen Web­sei­ten auch die Bedie­nung der Web­sei­te berück­sich­tigt wer­den. Auf mobi­len End­ge­rä­ten muss die Menü- bzw. Navi­ga­ti­ons­struk­tur, wie in der nach­fol­gen­den Abbil­dung gezeigt, ange­passt wer­den. Der zur Ver­fü­gung ste­hen­de Platz auf den Dis­plays der Smart­phones ist sehr begrenzt, sodass eine Dar­stel­lung, wie auf nor­ma­len Desk­top-Rech­nern nicht benut­zer­freund­lich ist.

Die Navi­ga­ti­on auf Web­sei­ten erfolgt in der Regel über Hyper­links, But­tons und Navi­ga­ti­ons­me­nüs. Bei der Gestal­tung die­ser Ele­men­te für die mobi­len End­ge­rä­te soll­te auf eine aus­rei­chend gro­ße Gestal­tung geach­tet wer­den, da die Treff­si­cher­heit mit dem Fin­ger auf einem Touch­screen­dis­play nicht so hoch und prä­zi­se ist wie am Rech­ner mit einer Maus oder dem Touch­pad. Aus die­sem Grund wer­den But­tons und Navi­ga­tio­nen immer in einer dem Anwen­dungs­fall ent­spre­chen­den Grö­ße gestal­tet. Dabei kön­nen sich die Lay­outs zwi­schen den ver­schie­de­nen Aus­ga­be­grö­ßen bei der Prä­sen­ta­ti­on des glei­chen Inhalts in der Dar­stel­lung deut­lich unter­schei­den. Dies trifft eben­so auf Tex­te sowie deren Les­bar­keit durch die Schrift­grö­ße und die Her­vor­he­bung dar­in ent­hal­te­ner Hyper­links zu.

Gestaltungsraster auch für Webseiten

Grid Sys­te­me, wie sie bei der Gestal­tung von Druck­lay­outs zum Ein­satz kom­men, wur­den bereits seit eini­ger Zeit auch von Web­de­si­gnern ange­wen­det. Bei­spie­le lie­fern hier Sys­te­me wie das Grid Sys­tem 960.gs. Die vor­ge­ge­be­nen Ras­ter­grö­ßen von Gestal­tungs­ras­tern erleich­tern beim reak­ti­ons­fä­hi­gen Web­de­sign die Kon­zep­ti­on und Gestal­tung. Die­se Ras­ter machen es ein­fa­cher die glei­chen Inhal­te, ent­spre­chend der Anfor­de­run­gen des jewei­li­gen End­ge­rä­tes, zu ver­grö­ßern, zu ver­klei­nern, neu zu posi­tio­nie­ren oder gege­be­nen­falls auch ein­fach auszublenden.

Gestaltung und Entwicklung von Websites wird zum iterativen Prozess

Neben der eigent­li­chen Nut­zung des Inter­nets durch die Anwen­der, hat sich auch die Gestal­tung und Umset­zung von Web­sei­ten für Gra­fi­ker und Web­de­si­gner grund­le­gend ver­än­dert. Reak­ti­ons­fä­hi­ge Web­sei­ten wer­den nun in einem ite­ra­ti­ven Pro­zess erstellt, bei dem Gestal­ter mit Pro­gram­mie­rern koope­ra­tiv zusam­men arbei­ten müs­sen. Denn eine Tren­nung zwi­schen Kon­zep­ti­on, Gestal­tung und Pro­gram­mie­rung, wie dies bis­her oft der Fall war, ist beim Respon­si­ve Web­de­sign nicht mehr mög­lich. Die­ser Umstand führ­te zu neu­en Her­an­ge­hens­wei­sen, zu denen der in die­sem Arti­kel vor­ge­stell­te Ansatz, basie­rend auf der Umset­zung ver­schie­de­ner Lay­outs, gehört.

Ein wei­te­rer Ansatz wird als Mobi­le First bezeich­net, die­sen stel­len wir dem­nächst in einem eige­nen Blog­ar­ti­kel vor.