U ovoj temi ćemo vas upoznati sa pojmovima responzivnih stranica i responzivnog web dizajna. Kroz naš članak istražit ćemo zašto je važno da vaša web stranica bude prilagođena različitim uređajima i kako to može utjecati na vašu prisutnost na mreži. Osim toga, predstavit ćemo vam jedinstvene prednosti koje donosi responzivni dizajn, zajedno s praktičnim savjetima kako osigurati da vaša web stranica bude optimizirana za svaku vrstu uređaja. Pripremite se za dublje zaranjanje u svijet responzivnog dizajna i saznajte zašto je Lanterna IT vaš idealni partner za stvaranje web stranica koje će se istaknuti na svim platformama.
Što je, zapravo, responzivni dizajn web stranica?
Termin responzivnog web dizajna osmislio je Ethan Marcotte 2010 godine u svom članku, nazvanom Responsive web design (https://alistapart.com/article/responsive-web-design/), izdanom nekoliko godina nakon pojave prvih pametnih telefona. Već se tada pojavila potreba za redizajnom postojećih web stranica. Naime, uređaji za pregled web stranica postajali su sve manji i manji, dok je izgled web stranica ostao na temeljima kakvima su se radile za kućne PC-jeve. Smatralo se kako će pregled web stranica na mobilnim uređajima premašiti desktop uređaje u sljedećih tri do pet godina. Iako se g. Marcotte preračunao za nešto više od godinu dana, bio je u pravu. Pretraživanje web stranica s mobilnih telefona je krajem 2016. godine po prvi put premašilo pregled web stranica desktop uređajima. (prema https://gs.statcounter.com/platform-market-share/desktop-mobile/worldwide/#monthly-201005-201705) To je označilo revoluciju u izrade web stranica. Ako želite biti konkurentni, morate imati web stranicu koja će dobro izgledati na svim uređajima: mobilnim, desktop, tablet, čak i na web pretraživačima gaming konzola (nintendo). Za to je zaslužan responzivni web dizajn.
Ali, što to sve znači? Što je uopće responzivan web dizajn i kada web stranice izgledaju dobro, a kada manje dobro?
Responzivan web dizajn nema klasičnu definiciju, a opet je vrlo bitan web pojam, pa pokušajmo ga definirati. Responzivan web dizajn je ona vrsta dizajna koja vrlo brzo reagira na novonastalu situaciju. Npr., ukoliko neku web stranicu pretražujemo sa desktop računala, onda ćemo vidjeti sve one osnovne web elemente koje jedna web stranica treba sadržavati. Biti će tu izbornik (menu) koji će imati nekoliko linkova na ostale web stranice tog web sjedišta, imati ćemo i neke članke teksta koji će biti razdijeljeni u više stupaca, razvučene fotografije i sl. Ako tu istu web stranicu, sa iste web domene pregledavamo na pametnom telefonu, koji ima manji ekran od desktop ili laptop računala, tada će ta web stranica biti „nespretna“ za snalaženje na njoj. Morati ćemo „scrollati“ lijevo-desno kako bismo vidjeli sav sadržaj.
Kako ne bi došlo do takvog „nespretnog“ pregleda navedene web stranice, našu web stranicu dizajniramo kako bi brzo reagirala (prilagodila se) mobilnim uređajima kao što su tablet ili pametni telefoni. Tada ćemo umjesto izbornika uglavnom vidjeti tzv. „hamburger menu“, najčešće tri vodoravne crte postavljene jednu ispod druge koje, kada pritisnemo, prikazuju izbornik na potpuno drugačiji način nego što se prikazuje na desktop računalu. Pokušajte ovaj blog čitati na desktop računalu ili na laptopu, pa zatim na mobitelu. Uočavate li razlike na stranici? Upravo je to responzivni web dizajn. Mogućnost prilagodbe web stranice svakom uređaju s kojeg pretražujemo web stranicu.
U redu, sada kada smo dali kakvu takvu definiciju responzivnog (odnosno prilagodljivog) web dizajna, možemo odgovoriti na pitanje kada je web stranice izgledaju dobro, a kada manje dobro.
Odgovor nije toliko jednostavan. Osim neprilagodljivog dizajna prema uređaju na kojem se web stranica pretražuje, loš web dizajn će imati previše boja na web sjedištu ili loš odabir tipografije (fonta), lošu navigaciju ili će imati postavljen autoplay nekog videa (https://www.youtube.com/watch?v=8p-SBwcGpX8). Sve su to loši primjeri izrade web stranica, a kada k tome pridodamo i neprilagodljive stranice uređaju s kojem im pristupamo, onda dobijemo web stranicu koja ne izgleda dobro.
Primjer lošeg web dizajna prikazan je u primjeru statične web stranice pri „deque University“, online learning platforma (koju ne sponzoriram, već samo dajem primjer lože kreirane web stranice). Primjer je u sljedećem linku: https://dequeuniversity.com/library/responsive/1-non-responsive
U tom primjeru vidimo upravo o čemu je napisano u prethodnom paragrafu, pogotovo ako linku pristupate putem mobilnog uređaja. Uočiti ćete kako je potrebno „scrollati“ lijevo-desno da bi ste vidjeli cijeli sadržaj stranice. Linkovi u izborniku nisu vidljivi na cijelom prikazu te je također potreban lijevo-desno scroll po stranici kako bismo vidjeli što se sve na njoj nalazi. Uglavnom, vrlo dobar primjer kako responzivni dizajn ne izgleda, tj. nema ga.
Dakle, web stranice izgledaju dobro kada su prilagođene svim uređajima s kojih im pristupate. Takvi uređaji su desktop računala, prijenosna računala (notebook/laptop), tableti i pametni telefoni. Na svakom od njih bi stranica trebala izgledati malo drugačije, prema mogućnostima i veličini ekrana s kojeg joj se pristupa. Kad kažem malo drugačije, mislim na dizajn. Tema i sadržaj stranice moraju ostati jednaki bez obzira s kojeg se uređaja pristupa određenoj web stranici.
Sada kada su postavljeni teorijski temelji responzivnog dizajna, okrenuti ćemo se više tehničkim stvarima. Sljedećih nekoliko odlomaka odnositi će se na preporučene veličine ekrana za uređaje, veličine fotografija, prijelomne točke i sl.
Prijelomne točke, odnosno media queries su filteri koji se implementiraju unutar CSS dokumenta. Potrebni su za ispravan prikaz sadržaja na određenom uređaju. U dokument CSS-a unose se svojstvom @media kojim se definira vrsta medijske prijelomne točke. Postoje dvije vrste prijelomnih točaka: print i screen. Screen ima puno veću funkcionalnost od opcije print te ćemo njega detaljnije prikazati.
Ukratko, print se koristi za prikaz sadržaja koji se može ispisati s web stranice. Iako se svaka web stranica može ispisati u svom izvornom obliku, upravo prijelomna točka print daje mogućnost poravnanja sadržaja kako bi bio optimalno ispisan. Dobra praksa korištenja takve prijelomne točke su recepti, kojima će se jednostavnije strukturirati sadržaj kako bi ispao bolje (responzivnije) na papiru.
Prijelomna točka screen, kako je već kazano, ima veću funkcionalnost od opcije print kojom prikazujemo izgled stranice za ispis. Screen-om će se prikazati kako će određena web stranica izgledati na kojem uređaju, bilo to desktop računalu, prijenosnom računalu ili na mobilnim računalima, odnosno tabletima ili mobilnim telefonima. Postavlja se na način da se unese minimalna širina ekrana traženog uređaja (ukoliko krećemo s pretpostavkom mobile-first, koja postaje standard u dizajniranju web stranica).
U praksi to izgleda ovako: @media screen and (min-width: 1440px). Ova linija kôda označava da će postavke dizajna postavljene unutar nje biti optimizirane za desktop uređaje. Pokušajmo je secirati:
- @media je svojstvo kojim se definira prijelomna točka za određenu vrstu izgleda ekrana. Potrebno ga je ugraditi nakon CSS selektora kojeg želimo promijeniti u određenim situacijama. Dobra praksa je uvrstiti ga odmah ispod selektora, ali se sve prijelomne točke mogu popisati na kraju CSS dokumenta.
- Nakon svojstva @media kojim definiramo prijelomnu točku, svojstvom screen definiramo vrstu prijelomne točke. Kako je već navedeno, vrste prijelomnih točaka su screen i print.
- Logički operator slijedi nakon vrste prijelomne točke. U slučaju navedenog kôda to je and, ali postoje još i not, only i or. Mogu se i kombinirati kako bi se dobio kompleksni logički operator.
- U zagradama se obično nalazi svojstvo prijelomne točke. Najčešće se koristi width, za širinu određenog uređaja. U ovom slučaju upisan je min-width: 1440px što će prikazati opcije sadržaja na uređajima čija je širina ekrana od 1440px i više, što je optimalno za desktop uređaje.
Svojstva se mogu koristiti i za ostale svrhe, a ne samo za širinu sadržaja web stranice. Mogu se podijeliti na karakteristiku veličine medija (ekrana) s kojeg se prikazuje web stranica, prema kvaliteti prikaza, prema boji medija te prema interakciji medija.
Karakteristika veličine ekrana s kojeg se prikazuje web stranica ima svojstva width, height, aspect-ratio i orientation. Najčešće se koristi, kako je već napisano, width i to svojstvo min-width (ukoliko je polazište dobre prakse dizajna mobile first) odnosno max-width (ukoliko je polazište dizajna desktop first). Height se koristi za prikaz visine određenog medija. Aspect-ratio je karakteristika kojom se uzimaju u obzir i širina i veličina ekrana, dok je orientation karakteristika za prikaz sadržaja na mobilnim uređajima koji imaju mogućnost prikazivanja sadržaja u portretnom ili pejzažnom načinu (kada mobitel okrenete vodoravno).
Prema kvaliteti prikaza, svojstva su resolution, scan, grid, update, overflow-block i overflow-inline. Ovdje valja navesti resolution kao jedno od zanimljivijih svojstava za mobilne uređaje koji svake godine imaju sve manju rezoluciju ekrana. Ona se također često koristi u prijelomnoj točki vrste print da definira rezoluciju ispisa na papir. Ostala svojstva se koriste rjeđe.
Svojstva boja prijelomne točke su color, color-index, monochrome, color-gamut. Vrijedi izdvojiti svojstvo monochrome koje provjerava ima li uređaj monokromatska svojstva. Najčešće se koristi za prikaz web stranica na uređajima za čitanje e-knjiga kao što je Amazonov Kindle.
Interakcija medija svojstvo je prijelomne točke koje odražavaju različite aspekte interakcije korisnika sa stranicom. Sastoji se od pointer, hover, any-pointer i any-hover značajki.
Koji browseri podržavaju prijelomne točke?
Gotovo svi moderni web preglednici podržavaju prijelomne točke. Svojstva podrške se proširuju svakim novim ažuriranjem web preglednika, pa gotovo da ne postoji svojstvo koje se ne može prikazati u nekom od web preglednika. Izuzetak je Internet Explorer koji njegovim izostankom podrške više ne bi trebalo niti upotrebljavati.
Kao što smo vidjeli, responzivni dizajn je ključan za prilagodbu vaše web stranice različitim uređajima i veličinama zaslona. S obzirom na raznolikost uređaja koje ljudi koriste za pregled interneta, važno je osigurati da vaša web stranica izgleda dobro i funkcionira besprijekorno bez obzira na to koriste li posjetitelji desktop računala, tablete ili pametne telefone.
U tom kontekstu, Lanterna IT nudi ne samo vrhunski responzivni dizajn, već i sigurnost da će vaša web stranica biti optimizirana za sve uređaje. Kroz našu stručnost i iskustvo, možete biti sigurni da će vaša web stranica pružiti korisnicima dosljedno visoku razinu korisničkog iskustva, bez obzira na to kako pristupaju.
Dakle, ako želite biti sigurni da vaša web stranica ostavlja pozitivan dojam na sve vaše posjetitelje, ne oklijevajte koristiti usluge Lanterna IT. Obratite nam se danas i zajedno ćemo osigurati da vaša web stranica bude spremna za sve izazove digitalnog svijeta. Kreirajmo zajedno Internet put modernih i pristupačnih web stranica.