Pregled stanja ogrodij za izdelavo odzivnih spletnih strani

KOCINA, PRIMOŽ (author), Meža, Marko (mentor)

V diplomskem delu sem se osredotočil na primerjavo treh najbolj priljubljenih ogrodji, ki so namenjeni izdelavi odzivnih spletnih strani. Naj poudarim, da je število mobilnih uporabnikov spletnih strani preseglo število uporabnikov, ki do spletnih strani dostopajo preko stacionarnih računalnikov. Zato je pomembno, da je spletna stran izdelana tako, da je primerna za vse naprave, s katerimi dostopamo do spletnih vsebin. V veliko pomoč so nam ogrodja, s katerimi veliko lažje, hitreje in učinkoviteje izdelamo odzivno spletno stran. Primerjava najbolj popularnih ogrodji je zanimiva, saj lahko tako ugotovimo, kateri je po našem mnenju najboljši. Z raziskovanjem ogrodji ugotovimo, kako so se pri različnih podjetjih spopadli s problemom prikaza podatkov na različnih zaslonih in napravah. V diplomskem delu sem se osredotočil na to, kako so se pri vseh treh ogrodjih soočili z delovanjem in prikazom navigacije, gumbov, tabel in obrazcev na različnih napravah. Te štiri kriterije sem izbral zato, ker se povečini nahajajo na vsaki spletni strani. Naslednja stvar, ki je pomembna za to, da lahko podamo kvalitetno subjektivno oceno, je preizkus implementacije ogrodji v kodo spletne strani in nato preizkus delovanja spletne strani na različnih brskalnikih ter napravah. V kodo spletne strani, katere sem skrbnik, sem dodal kodo vsakega ogrodja posebej in tako izdelal tri verzije spletne strani. Z vsemi tremi sem poskušal izdelati karseda enak izgled spletne strani. Ker niso vsi trije enako obsežni in ker ne rešujejo enakega problema na enak način, se izgled strani malenkost razlikuje. Ob testiranju na različnih brskalnikih in napravah sem pridobil pomembne informacije, katero ogrodje je najbolj podprto s strani brskalnikov. Rezultati so pokazali, da so vsi trije zelo dobro podprti. Poleg tega pa sem s pomočjo Googlove spletne aplikacije, ki je namenjena temu, da testira izgled spletne strani in nam nato pove, ali je spletna stran prijazna za mobilne naprave ali ni, testiral, če je spletna stran postala prijazna manjšim napravam, ko sem v kodo spletne strani dodal kodo ogrodji. Vsi trije so test opravili, kar pomeni, da smo z uporabo kode ogrodja uspešno izdelali odzivno spletno stran.

• Language: Slovenian
• Keywords: slikovni element, ogrodje, vsebnik, mobilniku prijazno, primarno zasnovano za mobilne naprave, Cascading style sheet, Sassy CSS, Syntactically awesome StyleSheet, jezik za označevanje nadbesedil, predloga, stolpec, obloga, razdelek, spustni meni, vrstca, vrsta selektorja, odzivni meni, onemogočeno
• Work type: Bachelor thesis/paper
• Organization: FE - Faculty of Electrical Engineering
• Year: 2016
• PID: 20.500.12556/RUL-87113
• Publication date in RUL: 23.11.2016

Secondary language

• Language: English
• Title: State of the art of responsive web page frameworks

Abstract

In my diploma thesis, I have focused on the comparison of three of the most popular frameworks for responsive web design. It needs to be emphasized that the number of visitors of mobile sites has exceeded that of websites who access them through their desktop computers. For this reason, a website has to be built in order to work properly on different devices with which we access internet contents. Such frameworks are very useful because they make the development of a responsive website much easier, faster and more effective. The comparison of the most popular frameworks can give us the answer regarding which of them suits us better. The inquiry of these frameworks provides us with an insight into how different companies deal with the problem of the display of data on various screens and devices. In my research, I have centred on how these three frameworks tackle the issues of the working and display of navigation, buttons, tables and forms on different devices. I have chosen these four criteria based on the fact that we find them on almost every website. Another important factor for the formulation of a relevant subjective evaluation is the test of implementing a framework into the website's code followed by a test of the working of a website on different web browsers and devices. As administrator of a website, I had inserted the code of each framework into the website's code separately, and thus I created three different website versions. I attempted to create three utmost similar websites. Since the three frameworks are different in size and their logic of solving problems, the appearance of each of the three websites differs a little bit. After I had tested them on different web browsers and devices, I gathered important data on which framework is best supported by different browsers. The results have shown that all three are supported excellently. Besides, with the help of Google's web application for testing website appearances and how mobile-friendly your site is, I tested if the website became more suitable for smaller devices after each of the frameworks' codes had been added to the website's code separately. They all passed the test, meaning that the use the code of each framework successfully helped me in the building a responsive website.

• Keywords: pixle framework container mobile-friendly mobile-first CSS SCSS Sass HTML tamplate column padding div Dropdown (menu) row data-hide-for Responsive navigation disabled