srijeda, 4. studenoga 2015.

Prilagodba za mobitel

Preko deset godina sam prisutan na mreži kao webmaster; slijedeće godine će ustvari biti 20 godina od kako sam se prvi puta spojio na Internet. Trenutno se osjećam lagano iscrpljen i zasićen ovim poslom. Ono što me je svih ovih godina držalo u sedlu i davalo potrebni entuzijazam je bio novac; zaraditi ga što je više moguće. Iako nisam znao što bih s njim, moje ekonomske potrebe su doista niske, to me je zabavljalo. Bio sam neka vrsta kolekcionara koji je stavljao pare na stranu, skupljao ih, kao hrčak. Uz taj glavni motiv bilo je i puno zadovoljstava u samom radu. Neopisivo je dobar osjećaj kada si za neku važnu riječ prvi na glavnoj tražilici. To je potvrđivalo moje sposobnosti, ili sreću koju sam imao, a ona nije nikada za zanemariti. Uspio sam već staviti dobru hrpicu sa strane kada su stigla teška vremena. Pojavila se jaka konkurencija, iz razloga koje sam naveo u prethodnim postovima, stigli su i oni mlađi, kreativniji, s više stimulansa. S isprikom da sam već dostigao financijski cilj, to je bila isprika za opuštanje, za sve manje vremena posvećenog mojim site-ovima, za zanemarivanje svakodnevnog informiranja i obrazovanja, dva elementa neophodno za postizanje visokih ciljeva. Jer je znanje osnova svega, a ja zadnjih godina radim na osnovu onoga što sam tada naučio, bez potrebnog truda da se redovno ažuriram.

Prije nekih pola godine, stizalo je proljeće, gospodin G mi je poslao jednu automatsku poruku s kojom me informira da neki moji site-ovi nisu prilagođeni za navigaciju preko mobitela nove generacije, onih koji više nalikuju na kompjuter koji ima i funkciju telefona. Nekako paralelno s tim je izašlo na vidjelo i istraživanje prema kojem već više od pola korisnika koristi smartphone za surfanje, umjesto tradicionalnog računala. Tako sam odlučio da prilagodim mojih par sit-ova, u nadi da će se tako poboljšati i prihod. Jako dobro mi je došla slijedeća adresa https://developers.google.com/speed/pagespeed/insights/ za provjeru rezultata mog rada. Dovoljno je u kućicu upisati adresu stranice koja se želi provjeriti i dobiju se korisne informacije o tome kako je pretraživać vidi. Ako je stranica korektno postavljena za mobitele, ocjena, koja se kreće od 1 do 100, jeste u zelenom polju. Signalizira se žutom bojom kada stranica sve u svemu nije loša, ali ima pokoji ozbiljan problem. Crvena boja je alarmantna, kao i na semaforu. U slučaju žute i crvene boje, Google smanjuje vrijednost stranice i ona nazaduje u rezultatima pretrage preko posvećenog App-a na mobitelu. U normalnoj pretrazi preko browser-a, to nema nikakvog utjecaja.

Sve moje su bile crvene. To me je uzbunilo i pokrenulo na rad. Budući i u standardnoj pretrazi nisam bio dobro plasiran, to je značilo da me preko mobitela praktično nitko ne može pronaći. Došlo je vrijeme da se prilagodi novim tehnologijama, barem optimizirajući stranice. Odati ću vam jednu stvar: nemam mobitel i nikada ga nisam posjedovao. Imam averziju prema toj stvarćici. Početni korak prema optimiziranju stranice, jeste dodati slijedeći kod:

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

Ako nemate toga, mobitel jednostavno prilagodi stranicu kako bi izgledala na velikom ekranu kompjutera, na svoj mali ekran. To stvara dva glavna, uobičajena problema: premala slova i premali razmak između linkova (prst je širi od prostora koji je na raspolaganju i dodiruje oba linka) i stranica najvjerojatnije završava u crvenom polju. Gornji kod prilagođava stranicu koliko je to moguće, stiščući tekst. Ako je stranica napravljena s tabelama koje nemaju fiksnu širinu i ako nema većih grafičkih elemenata, sve je u redu. Jedini je problem što danas više nitko ne kodira tako i gotovo da nema stranice koja će proći ovaj ispit. Ako koristite tabele s fiksnom širinom, fiksne blokove u CSS i veće grafičke elemente, u vidno polje mobitela će ući samo jedan dio i opet ćete biti u crvenom polju. Treba u biti prilagoditi cijelu koncepciju site, što se može napraviti na razne načine.

Na kraju cijele ove priče, prilagodio sam tri moja site-a. Na svima sam primjenio varijabilne tabele, eventuano fiksirajući odnos između raznih stupaca u postotcima. Za prilagodbu fotografija i video snimaka stvar je kompliciranija i zahtjeva korištenje javascript koda da bi se prilagodila širina uređaju na kojem su projecirane. Kod koji sam pronašao je odlično funkcionirao na svim browser-ima, osim na Internet Explorer-u 8; znam da je to stara verzija ali je ja i dalje koristim upravo da bih mogao garantirati kompatibilnost za sve korisnike, uključujući i one koji su lijeni da ažuriraju software. Nakon bezbrojnih pokušaja sam uspio riješiti problem umečući slijedeći tag kao prvi red na stranici: .
Možda će ovo nekome pomoći.

Kao što vidite, konačno sam počeo koristiti domaću tipkovnicu pa će tako svima biti lakše čitati moje postove.