| Sažetak | Svakim danom na tržištu se pojavljuje sve više uređaja kojima korisnici imaju mogućnost pristupa Internetu. Korisnici posjeduju nekolicinu raznolikih uređaja u različitim oblicima i veličinama, no pred programere web-stranica postavlja se veliki izazov, kako pružiti vrhunsko korisničko iskustvo na različitim veličinama zaslona?
Web-stranice koje nisu prilagođene za sve vrste uređaja, kao npr. za pametne telefone, pri pregledavanju, raspored s fiksnom širinom se skuplja kako bi stao na zaslon. Sadržaj postaje premalen za čitanje, pa se javlja potreba za zumiranjem sadržaja kao i pojava vodoravnog klizača. Još jedna mana također je dugo učitavanje velikih slika kada se prikazuju na pametnim telefonima. Bilo koji korisnik pametnog telefona s ograničenim podatkovnim paketom mogao bi napustiti stranicu koja nije prilagođena za pametne telefone.
Odgovor leži u prilagodljivom dizajnu. Primarni način za postizanje prilagodljivog dizajna jest pomoću upita o korisničkom mediju (engl. CSS media queries), što je glavna tema ovog rada.
Prilagodljivi web dizajn se mijenja prema veličini zaslona na kojem je prikazan; ne izgleda identično na svakom ekranu. Prilagodljivi dizajn prikazuje optimalnu inačicu korisničkog sučelja u skladu sa svojstvima zaslona koji ima na raspolaganju za korištenje. Uz pomoć media queries, moguće je pisati CSS koji automatski mijenja dizajn u svrhu isporuke optimalnog korisničkog sučelja za različite veličine zaslona.
U svijetu web dizajna, radni okvir je definiran kao paket koji se sastoji od strukturiranih datoteka i mapa sačinjenih od standardiziranog koda (HTML, CSS, JS), koji može koristiti kao osnova za početak izgradnje i razvoja web-stranice. Jedni od najpoznatijih kompletnih radnih okvira u današnje vrijeme, s podesivim značajkama kao što su tipografija, setovi formi, gumbi, ikone itd., su Bootstrap i Foundation, koji pojednostavljuju izradu prilagodljivih web-stranica. |
| Sažetak (engleski) | Every day, there are more devices appearing on the market. Users have a number of diverse devices in different shapes and sizes, but website developers are facing great challenge, how to provide the ultimate user experience on all of the different screen sizes?
Web sites that are not optimized for all device types, such as smart phones, when viewing, a fixed width layout shrinks to fit the screen. The content becomes too small to read, user needs to zoom content and the horizontal slider appears. Another disadvantage is too long loading of large images when displayed on smartphones. Any smartphone user with a limited data plan may leave a page that is not optimized for smartphones.
The answer lies in the responsive design. The primary way to achieve responsive design is by using CSS media queries, which is the main theme of this work.
Responsive web design is changing by the size of the screen on which is displayed; it does not look identical on each screen. Responsive design shows an optimum user interface in accordance with the characteristics of the screen, which is available for use. With the help of media queries, it is possible to write CSS that automatically changes the design to deliver optimal user interface for different screen sizes.
In the world of web design, the framework is defined as a package consisting of structured files and folders composed of standardized code (HTML, CSS, JS), which can be used as the basis for the beginning of construction and development sites. Some of the most complete frameworks nowadays, with adjustable features such as typography, form sets, buttons, icons, etc., are Bootstrap and Foundation that simplify the development of responsive web page. |
