engleski

Responsive Design by Bootstrap

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.

Responsive design ; layouts ; fluid grids ; flexible images ; CSS media queries ; screen resolution ; web application ; user interface ; Bootstrap ; ASP .NET MVC

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 Boo