Prilagodba stranica za mobilne uređaje

Pregled sadržaja

Činjenica je da danas više od polovice posjete web stranicama dolazi s mobilnih uređaja. Ako ignoriramo takvu publiku propuštamo velik dio posjete i potencijalnih kupaca. Upotreba mobitela posljednjih godina je eksplodirala, tražilice ocjenjuju stranicu na temelju toga i bitan je faktor za uspjeh poslovanja. Stoga, izrada responzivnih stranica danas nije samo želja i odabir već je nužda.

Google je 2015. algoritmom Mobilegeddon postavio prekretnicu rangiranja, počeo je davati prioritet web stranicama koje se dobro prikazuju na mobilnim uređajima.

Mobilni uređaji najbrže rastući oblik tehnologije u povijesti, premašili su po popularnosti i stolna računala. Svatko ih uvijek ima pri ruci te je internet svakome nadohvat ruke. Tableti su također prisutni, ali u jako malom postotku. Razliku u popularnosti između mobitela, tableta i stolnih računala možemo vidjeti preko Statcounter statistike. U Google Analytics možemo vidjeti detaljne podatke za svaku web stranicu koliko korisnika dolaze s kojih veličina ekrana, podaci će vjerojatno bili otprilike isti.

Kada je stranica responzivna? Kada se sadržaj i funkcionalnost potpuno prilagođava svim uređajima bez obzira na veličinu ekrana, kada korisnici ne trebaju ščipati i zumirati ekran te kada ima dovoljno prostora da se svaki link i gumb može kliknuti.

Responzivnost stranica utječe na:

  1. Bolje korisničko iskustvo
  2. Bolje rangiranje na tražilicama

Ako stranice nisu prilagođene mobilnim uređajima, korisniku se neće moći prikazati cijela stranica na ekranu, zbog toga će tekst biti presitan i potrebno je pomicati ekran lijevo-desno za čitanje ili ga povećavati. Korisničko iskustvo je frustrirajuće i korisnici u čas trena napuštaju web stranicu. Ako web stranica ne zadovoljava kriterije mobilne responzivnosti, Google i druge tražilice je srozaju do zaborava. Posjeta drastično pada i trebat će proći vrijeme kad se stranica prilagodi da se prethodne pozicije vrate.

Koraci prilagodbe stranice mobilnim uređajima

Podešavanje viewporta

First things first, potrebno je prvo podesiti viewport, tj. područje prikaza web stranice. HTML nudi <meta> oznaku kojom možemo podesiti da je područje prikaza web stranice onoliko široko koliko je sam uređaj, a početno povećanje (zoom) resetiramo na početnu poziciju.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Korisnik ako poželi može ščipnuti ekran kako bi ga povećao, ovo su samo potrebne početne postavke.

Namještanje navigacije i internog pretraživanja

Kako je header element obično velik i kompleksan na stolnim računalima, na mobitelima ne može sve stati na malu širinu. Zbog toga je nužno postaviti gumb navigacije koji će tek na klik korisnika prikazati sve navigacijske stavke. Slična je situacija s opcijom internog pretraživanja koja uvijek treba biti dostupna tijekom pregleda stranice jer je često vrlo važan element.

Prilagođavanje glavnog sadržaja

Prilagodbu stranica radimo pomoću Media Queries, tj. CSS pravilima koje je potrebno podešavati za sve moguće verzije uređaja i veličine ekrana. To je ono što oduzima najviše vremena. Ovisno o kompleksnosti dizajna i veličini projekta, tj. količini različitih predložaka koje je potrebno prilagođavati ovaj dio posla zahtijeva najviše vremena.

Ako koristimo neki CSS framework kao Bootstrap, posao ide brže i dosljedno se stilovi prožimaju kroz projekt.

Potrebno je prilagoditi sav sadržaj, ogromne slike percipiraju se drugačije i traže manje fokusa. Korekcijama stranice pokušavamo zadržati prepoznatljivost dizajna stolnih računala i korisničko iskustvo. Što se tiče glavnog sadržaja, sam početak sadržaja bi trebao na mobitelu odmah početi bez prethodnog obavenog skrolanja.

Ako se koriste reklame na stranicama treba paziti da se korisnika ne izludi sa previše reklama i skočnih prozora.

Prilagodba interaktivnih elemenata

Svi interaktivni elementi poput gumba i linkova trebaju biti dovoljno veliki, da imaju dovoljno prostora oko sebe kako ih korisnik ne bi mogao lako pritisnuti bez slučajnog preklapanja s drugim elementima. Takve korekcije pogoduju svim korisnicima, premda najviše onima s motoričkim poteškoćama. Ako se radi o gumbu koji ima ikonu ili tekst, njih nije potrebno povećavati već je potrebno samo okolni prostor (padding) korigirati na potrebnu minimalnu veličinu.

Minimalna preporučena veličina je 48 piksela širine i dužine što je negdje oko 9 mm a to je otprilike veličina površine vrška prsta. Studije Nielsen grupe pokazuju da element treba imati barem 1 cm veličinu da bi se izbjegle greške i frustracije koje se događaju jer su elementi inače na dodir previše blizu jedan drugome.

Optimizacija slika

S obzirom na to da se radi o manjim ekranima, nužno je prilagoditi slike da se ne učitavaju pune rezolucije kao što bi se učitavale na stolnim računalima. Time efikasno smanjimo njihovu težinu. HTML kodom možemo definirati različite veličine slike ovisno o ekranu koristeći nove atribute srcset i sizes.

Na prvi pogled kôd je kompliciraniji od klasične upotrebe “src” atributa ali stvar je poprilično jednostavna. Ako se radi o uređajima maksimalne širine 600 piksela, tada će preglednik preuzeti sliku “bicikl-480w.jpg”. Ekrani veći od te veličine uzet će drugu sliku veće rezolucije.

<img srcset="bicikl-480w.jpg 480w,
             bicikl-800w.jpg 800w"
     sizes="(max-width: 600px) 480px,
            800px"
     src="bicikl-800w.jpg"
     alt="Bicikl">

Još jedna bitna stvar je koristiti moderne tipove formata slika, danas je standard definirati WEBP format na samom serveru. Pruža vrhunsku kompresiju bez gubitaka, 25-35% bolje od PNG ili JPG. A baš kao i PNG format, WEBP također podržava transparentnu pozadinu.

Brzina učitavanja

Brzina kojom se stranice učitavaju iznimno je bitna. Mobiteli nemaju luksuz brzih internet veza a moraju u kratkom vremenu prezentirati korisnicima sadržaj. Brzina učitavanja sama po sebi zaslužuje članak jer puno toga ovisi o samom sustavu na kojem je stranica rađena i kodirana. Ali da spomenemo važne stvari:

  • predmemoriranje stranice (cache)
  • sažimanje datoteka
  • konkatenizacija datoteka – spajanje svih istih formata datoteka u jednu (CSS ili JS datoteke)

Amp tehnologija za mobilne stranice

Kao kratku alternativu, možemo postaviti AMP tehnologiju kako bi dodatno stranice prilagođene za mobitel ubrzali do daske. AMP stranice su posebno prilagođene za mobilne ekrane, okružene posebnim HTML kodom i ogoljene toliko da imaju samo najbitniji sadržaj bez ičega drugoga. Takve web stranice su ultra brze, Google i stavlja u predmemoriju na svoje servere što rezultira time da se otvaraju iznimno brzo a ne zahtijevaju potrošnju resursa vlastitog hostinga jer ih poslužuje Google.

Mana je jedino što se ogoljelost stranica neće dopasti svima. Od AMP tehnologije mogu profitirati najviše portali kojima je najbitnije imati tekst i slike za članak.

Testiranje vaše web stranice

Testiranje pomoću DevTools

Svaki moderni preglednik (Chrome, Firefox…) omogućuje nam da na stolnom računalu istražimo način rada same stranice pomoću seta alata poznatih kao Developer Tools. Potrebno je bilogdje na stranici kliknuti desnim klikom miša i odabrati “Provjeri” (ili Inspect ako nam je preglednik postavljen na engleski jezik). Otvori nam se sučelje na kojem potražimo ikonu koja izgleda kao kombinacija mobitela i tableta. Time nam se prikaže stranica baš onako kako smo postavili širinu. Isto ćemo dobiti ako koristimo kratice CTRL+SHIFT+I i potom CTRL+SHIFT+M.

U padajućem izborniku možemo odabrati kako želimo pogledati stranicu, kao iPhone, iPad, nešto treće… ili samo širinu prozora pomičemo lijevo-desno. Ako smo dobro podesili responzivnost stranice, ona će se dostojanstveno prilagođavati kako povećavamo ili smanjujemo prozor bez obzira na dužinu točno za svaki piksel.

Google mobile test

Mobilnu prilagođenost možemo testirati uz pomoć Google Mobile-Friendly testa. Samo unesemo URL web stranice i nakon kratkog vremena Google nam javi je li stranica dobro prilagođena mobitelima. Ako je naišao na probleme, možemo istražiti o kojoj greški se radi.

Testirajte pravim uređajima

Otvorite web stranicu na vašem mobitelu ili tabletu i testirajte responzivnost. Takva prava testiranja su realistična, osjećaj je stvarni te možete imate bolju prosudbu kako se stranica ponaša, za razliku od prethodnih generiranih i vidljivih u sklopu računalnog ekrana.

Sažetak

Jesu li vaše web stranice prilagođene svim uređajima? Imate li zastarjele stranice kojima nužno treba osvježenje? Stranice na tražilicama imaju loše pozicije zbog manjka responzivnosti? Bavimo se izradom web stranica i iza nas je više od desetljeće iskustva te nekoliko stotina projekta. Javite nam se kako bi vam prilagodili stranicu prema modernim standardima.