Naslov
Responzivni dizajn uz Bootstrap
(Responsive Design by Bootstrap)

Autori
Čvrk, Matija

Vrsta, podvrsta i kategorija rada
Ocjenski radovi, diplomski rad, diplomski

Fakultet
Prirodoslovno-matematički fakultet

Mjesto
Split

Datum
25.09

Godina
2015

Stranica
34

Mentor
Granić, Andrina

Neposredni voditelj
Nakić, Jelena

Ključne riječi
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
(Responsive design ; layouts ; fluid grids ; flexible images ; CSS media queries ; screen resolution ; web application ; user interface ; Bootstrap ; ASP .NET MVC)

Sažetak
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.

Izvorni jezik
Engleski

Znanstvena područja
Računarstvo

Napomena
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.

POVEZANOST RADA