Využití responzivních CSS frameworků při modernizaci webové prezentace

Martina Pšeničková

Master's thesis

Use of responsive CSS frameworks for the modernization of a website

Abstract:

Práce se zabývá modernizací webové prezentace pomocí responzivních CSS frameworků Twitter Bootstrap a Zurb Foundation. Frameworková řešení byla aplikována na modelový web, jejichž komponenty byly následně porovnávány. Při tvorbě webu byl použit preprocesor Sass a knihovna Compass, u kterých je možné používat proměnných a funkcí. Pro snížení datové velikosti zvolených frameworků je doporučeno konfigurovat soubor config.rb, ve kterém se komprimuje CSS výstup a odstraní komentáře výsledného CSS kódu. Datovou velikost modelového webu dle frameworku Bootstrap bylo možné snížit o 30 % a dle frameworku Foundation o 27 %. Pro zajištění plné responzivity obrázků či dalších externích zdrojů na webu je vhodné použít frameworku Foundation a komponenty Interchange. Tato komponenta zajistila, že obrázky, či jiné externí zdroje, které se nemají na stránce zobrazit, se uživateli také nestahovaly. Vícekriteriální analýzou s užitím pravidel za jistoty, funkcí utility a stanovením vah kritérií dle Saatyho matice byly komponenty obou frameworků srovnány a zvolena optimální varianta v podobě frameworku Zurb Foundation. Na základě výsledků diplomové práce byl vytvořen soubor doporučení k optimalizaci při tvorbě nových a modernizaci stávajících webových prezentaci.

Abstract:

Diploma thesis deals with modernization of a website using two CSS frameworks Twitter Bootstrap and Zurb Foundation. Framework solutions were applied at a model website, while web components were compared with each other. Sass preprocessor and Compass library had been used during the website development, mainly due to the possibility of using variables and functions. In order to reduce size of the chosen framework, it is recommended to configure config.rb file. In this file the CSS output is compressed and comments are removed. Size of model website was possible to be reduced by 30 % in Bootstrap framework and 27 % in Foundation framework. To secure full picture (or other external sources) responsivity in a website it is recommended to apply Foundation framework and its component "Interchange". This component ensures pictures (or other external sources) that are not supposed to appear on website are not downloaded to user's device. Components of both frameworks were compared using multicriterial analysis based on rules under certainty, utility function and criteria rating according to Saaty matrix. Zurb Foundation framework has been chosen as the optimal solution. Set of recommendations for a new or rebuild website has been suggested according diploma thesis results.

Keywords

responzivní design, CSS, framework, web

Keywords

CSS, framework, web, responsive design

Language used: Czech

Date on which the thesis was submitted / produced: 31. 3. 2015

Thesis defence

• Supervisor: Ing. Petr Benda, Ph.D.

Czech University of Life Sciences Prague

Faculty of Economics and Management

Master programme / field:
Systems Engineering and Informatics / Informatics