Frameworks – für schnelle Ergebnisse und Prototypen

Der Auf­wand zur Gestal­tung und Pro­gram­mie­rung einer reak­ti­ons­fä­hi­gen Web­sei­te ist hoch, da neben ver­schie­de­nen Dis­play­grö­ßen und Dis­play­for­ma­ten auch unter­schied­li­che Betriebs­sys­te­me und Web­brow­ser, mit teil­wei­se sehr eige­nen Inter­pre­ta­tio­nen von CSS-Eigen­schaf­ten, zum Ein­satz kom­men. Frame­works kön­nen uns die Arbeit dabei zum Teil erleichtern.

istockphoto.com: ©Car­men­Mu­r­il­lo

Jeder Web­ent­wick­ler kennt das Pro­blem: Es gibt etli­che Web­brow­ser am Markt und die­se wer­den von den Anwen­dern häu­fig nicht aktua­li­siert. Dies hat zur Fol­ge, dass für ver­al­te­te Web­brow­ser Rück­fall­lö­sun­gen vor­ge­se­hen wer­den müs­sen, die die Umset­zung von Respon­si­ve Web­de­signs immer kom­ple­xer machen. Abhil­fe schaf­fen Frame­works, die ein bereits vor­ge­fer­tig­tes Grund­ge­rüst zur Erstel­lung reak­ti­ons­fä­hi­ger Web­sei­ten lie­fern. Der Pro­gram­mier­auf­wand wird durch bereits imple­men­tier­te Grund­funk­tio­na­li­tä­ten und zum Teil inte­grier­ter Rück­fall­lö­sun­gen für älte­re Web­brow­ser redu­ziert. Es gibt eine Viel­zahl von Frame­works für unter­schied­li­che Anfor­de­run­gen. Die drei bekann­tes­ten Frame­works für reak­ti­ons­fä­hi­ge Inter­net­sei­ten sind zur Zeit YAML, Foun­da­ti­on und Bootstrap.

YAML

YAML steht für Yet Ano­ther Mul­ti­co­lumn Lay­out und ist ein fle­xi­bles, modu­lar auf­ge­bau­tes CSS-Frame­work, wel­ches der Web­ent­wick­ler Dirk Jes­se ent­wi­ckelt hat. Aktu­ell liegt es in der vier­ten Ver­si­on vor und bie­tet ver­schie­de­ne Grund­ge­rüs­te für Lay­outs und ein Grid Modul. Dar­über hin­aus lie­fert es wei­te­re Modu­le für Navi­ga­tio­nen und For­mu­la­re gleich mit. YAML lässt sich mit gerin­gem Auf­wand in ver­schie­de­ne bekann­te Con­tent-Manage­ment- und Blog-Sys­te­me integrieren.

Foundation

Das respon­si­ve Front­end-Frame­work Foun­da­ti­on wur­de von der Agen­tur Zurb ent­wi­ckelt. Seit der aktu­el­len Ver­si­on 4 basiert Foun­da­ti­on kom­plett auf dem Mobi­le First Ansatz. Hier ist zu beach­ten, dass älte­re Web­brow­ser, wie bei­spiels­wei­se alle Inter­net Explo­rer vor der Ver­si­on 9, von die­sem Frame­work nicht mehr unter­stützt wer­den. Die von Foun­da­ti­on gelie­fer­ten Funk­tio­na­li­tä­ten sind umfas­sen­der als bei YAML. Neben einem fle­xi­blen 12-spal­ti­gem Grid-Sys­tem, einem Navi­ga­ti­ons- und For­mu­lar-Modul, wer­den ein Typo­gra­fie-Modul und vor­de­fi­nier­te CSS-Kom­po­nen­ten wie zum Bei­spiel But­tons und Tabel­len mit­ge­lie­fert. Java­Script ist auch inte­griert und stellt vie­le oft ver­wen­de­te Funk­tio­na­li­tä­ten, wie Gra­fiks­li­der, zur Ver­fü­gung. Foun­da­ti­on ent­hält vie­le ver­schie­de­ne Lay­out­ge­rüs­te, die ohne viel Auf­wand über­nom­men wer­den kön­nen und ist somit ide­al zur Ent­wick­lung von Pro­to­ty­pen nach dem Mobi­le First Ansatz. Die Kom­ple­xi­tät bei der Inte­gra­ti­on in Con­tent-Manage­ment-Sys­te­me ist vom ein­ge­setz­ten Sys­tem abhängig.

Bootstrap

Noch umfas­sen­der als Foun­da­ti­on ist das respon­si­ve Frame­work der Fir­ma Twit­ter. Die­ses basiert auf einem belie­big ska­lier­ba­ren fle­xi­blen Grid-Sys­tem und lie­fert viel­fäl­ti­ge Grund­ge­rüs­te für ver­schie­de­ne Lay­outs. Unter­schied­li­che Modu­le für Navi­ga­tio­nen und Java­Script-Funk­tio­nen sind in das Frame­work inte­griert. Vie­le vor­de­fi­nier­te CSS-Kom­po­nen­ten für Tabel­len, But­tons und For­mu­la­re sind, eben­so wie auch Funk­tio­nen zu Inter­ak­ti­on mit dem Anwen­der, ent­hal­ten. Zusätz­lich gibt es Ober­flä­chen­ele­men­te wie Dia­log­fens­ter, Tool­tipps oder Gra­fiks­li­der. Die Inte­gra­ti­on in Con­tent-Manage­ment-Sys­te­me ist, wie auch schon bei Foun­da­ti­on, nicht immer ein­fach und abhän­gig vom jeweils gewähl­ten Sys­tem. Boot­strap kann sehr indi­vi­du­ell und modu­lar zusam­men­ge­stellt wer­den, so ist es mög­lich bei der Kon­fi­gu­ra­ti­on vie­le Eigen­schaf­ten des Frame­works zu beein­flus­sen und nur benö­tig­te Modu­le zu inte­grie­ren. Soll­ten Modu­le zu einem spä­te­ren Zeit­punkt doch benö­tigt wer­den, las­sen sich die­se pro­blem­los wie­der einbinden.

Frameworks empfehlenswert aber mit Einschränkungen bei Abweichungen vom Standard

Frame­works bie­ten ins­be­son­de­re beim Pro­to­ty­p­ing Vor­tei­le, da sie sehr schnell ers­te Ergeb­nis­se lie­fern. Ein gro­ßer Nach­teil besteht aller­dings dann, wenn von Stan­dard­an­for­de­run­gen abge­wi­chen wer­den soll und indi­vi­du­el­le Anfor­de­run­gen oder Wün­sche vor­lie­gen. Sofern Funk­tio­na­li­tä­ten ander­wei­tig als vom Frame­work vor­ge­se­hen gelöst wer­den sol­len, kann der Auf­wand zur Anpas­sung des Frame­works sehr hoch aus­fal­len. Aus die­sem Grund soll­te ein Frame­work immer anhand kon­kre­ter und even­tu­ell zukünf­ti­ger Anfor­de­run­gen gewählt wer­den. Eine Eigen­ent­wick­lung, wie wir sie bei unse­ren Kun­den­pro­jek­ten ein­set­zen, kann oft­mals die ein­fa­che­re und fle­xi­ble­re Lösung für ein Respon­si­ve Web­de­sign sein.