Title Responzivni dizajn uz Bootstrap
Title (english) Responsive design by Bootstrap
Author Matija Čvrk
Mentor Andrina Granić (mentor)
Committee member Andrina Granić (predsjednik povjerenstva)
Committee member Jelena Nakić (član povjerenstva)
Committee member Nikola Marangunić (član povjerenstva)
Granter University of Split Faculty of Science (Department of Informatics) Split
Defense date and country 2015-09-25, Croatia
Scientific / art field, discipline and subdiscipline TECHNICAL SCIENCES Computing
Abstract Rad se bavi problematikom prilagodbe dizajna sučelja internetskih stranica na različitim zaslonima uređaja, odnosno responzivnim dizajnom. Responzivni dizajn je konvencija među dizajnerima, realizirana upotrebom fluidnih tablica, prilagodljivih vizualnih sadržaja, CSS medijskih upita za karakteristike uređaja i uvažavanjem različitih dimenzija zaslona definiranjem relativnih veličina elemenata stranice. U praktičnom dijelu je predočen postupak realizacije responzivnog dizajna, upotrebom svega navedenog, na primjeru internetske aplikacije složenijeg sučelja. Dakle, u praktičnom dijelu su rađene vlastite prilagodbe sadržaja u skladu s konvencijama. Međutim, postoji mnogo alata i postojećih rješenja dostupnih na internetu koji omogućuju dizajnerima ili običnim programerima internetskih aplikacija, izraditi stranicu potpuno u skladu sa konvencijama responzivnog dizajna. U radu je opisan i u praktičnom dijelu korišten Bootstrap, jedan od najpoznatijih alata za izvedbu responzivnog dizajna, ali su u radu navedeni i mnogi drugi alati, među kojima valja posebno istaknuti Wordpress, Drupal, Joomlu i Foundation. Kako je internetski promet putem mobilnih uređaja u stalnom porastu, raste i potreba za prilagodbom internetskog sadržaja za uređaje manje rezolucije zaslona. Zbog toga, je sigurno da će se responzivni dizajn nastaviti razvijati i za očekivati je kako će se pojaviti još mnogo uzbudljivih rješenja u tom području dizajna.
Abstract (english) The topic of this paper is the problem of spanning a single web design across multiple devices with diffrent screen resolutions, in other words, responsive web design. Responsive web design is a convetion among designers, realised using fluid layouts, flexible images, CSS media queries and support for different screen resolutions by defining size of elements in relative units. In the corresponding practical part of the research, an example web application was made using responsive web design concept, with the procedure documented and later on explained in the paper. Therefore, in the practical part of research for the paper, methods of custom design were made, according to the proposed responsive concept. On the other hand, an abundance of versatile tools and existing solutions for the responsive design implementation are accessible on the web, which provide web designers or common developers to build a fully responsive web site. The main tool for building responsive websites described in this paper is Bootstrap framework, which was also used for the practical part of the research. Bootstrap is one of numerous responsive webkit tools for responsive design available, but besides Bootstrap among most frequently used tools are certainly Wordpress, Drupal, Joomla, Foundation which were also further described in the paper. As Internet traffic over mobile phones continues to increase, so does the need for adjusting web content for devices of smaller screen resolutions. As a result, it is safe to say that responsive web design will surely continue to evolve and many exciting solutions are expected to emerge from that area of design.
Keywords
Responzivni dizajn
predlošci
fluidne tablice
prilagodljivi vizualni sadržaj
CSS medijski upiti
rezolucija zaslona
internetska aplikacije
sučelje internetske aplikacije
Bootstrap
ASP .NET MVC
Keywords (english)
Responsive design
layouts
fluid grids
flexible images
CSS media queries
screen resolution
web application
user interface
Bootstrap
ASP .NET MVC
Language croatian
URN:NBN urn:nbn:hr:166:824574
Study programme Title: Computer Science and Technics Study programme type: university Study level: undergraduate Academic / professional title: sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) informatike i tehnike (sveučilišni/a prvostupnik/prvostupnica (baccalaureus/baccalaurea) informatike i tehnike)
Type of resource Text
File origin Born digital
Access conditions Access restricted to students and staff of home institution
Terms of use
Created on 2017-05-22 15:42:00