Ko sem neko popoldne poležaval na plaži, mi je šinilo v glavo, da bi bilo dobro malce revidirati mojo spletno stran - še posebej izgled na mobilnih brskalnikih. Zakaj? Ker sem bil na dopustu in nisem imel kaj počet!

Že sem se hotel lotiti tipkanja, ko sem prvič v svoji karieri začutil, da bi bilo stvari dobro najprej spraviti na papir. Seveda sem se sam pri sebi najprej upiral, a ni pomagalo. Vzel sem papir in začel malce surfati. In to z iPhoneom. Zabeležil sem si vse spletne strani, ki so izgledale dobro in konsistentno. Hkrati sem tudi v glavi začel dobivati osnutke, kako naj bi moja prenovljena stran izgledala.

Prvi poskus prenosa misli na papir je spodletel, bil pa je odlična osnova in v drugo mi je ratalo.

Odločil sem se, da bo cela spletna stran podobna (novemu) blogu, kjer bo na seznamu le naslov in povzetek besedila, ob kliku (ali pritisku s prstom) pa se bo odprlo celo besedilo. Do te ideje sem prišel po daljšem razmišljanju in eksperimentiranju, saj hitrost nalaganja polnih strani ni bila najboljša (doma imam samo 4/1Mbps link). Čakanje pa ubija. Poleg tega je prenos količinsko zmanjšan, kar pri mobilnem internetu lahko odločilno vpliva na zadovoljsto ob pogledu na račun.

Začel sem z glavo in nogo (v katero sem dodal iskalnik, ki ga prej na mobilni strani ni bilo) strani in nato razvil izgled celotnega bloga, vključno s prehodi med posameznimi segmenti (po novem se npr. galerija v sporočilu izriše samo delno in s klikom na sliko pridemo do celotne). Povečal sem tudi gumba za naslednjo in predhodno stran, saj sta bila prej neobvladljivo majhna na mobilnikih. Čeprav v resnici niti ne bi bilo zares potrebno sem dodal gumbe za "Nazaj", ki v galeriji delujejo pametno in ne naredijo zgolj history.back().

Osnovno idejo sem na papirju pilil nekako 2 dni, in ko je bila zrela, sem se končno lotil spreminjanja kode. Ker sem nočni ptič, se je to odvijalo med 11. in 3. uro zjutraj. Ko je bilo dopusta konec, je bila večina končana in tako sem se odločil, da spremembe iz svojega meka preselim na strežnik.

Seveda sem kmalu ugotovil, da sem pozabil na marsikatero stvar, še posebej, če je pred tem nisem preveril na iPhonu. Ker pa ima po novem Matevž Samsunga z Androidom, sem preizkusil, kako zgleda spletna stran na njem. No ja, še kar! Vgrajeni brskalnik ne stisne oz. pomanjša strani, kot to zna početi Safari na iPhone-u, in kljub meta direktivi v headerju spletne strani, da je širina prikaza 640 pikslov in brez spreminjati velikosti (resize-a in zoom-a).

<meta name="viewport" content="user-scalable=no, width=640">

Še najlepše in najbolj pravilno je bila stran prikazana na mobilni lisički (Mobile Firefox), ki pa je na iPhone-u (žal) ni.

Odločil sem se, da tega, da se na Androidu spletna stran ne pokaže čisto tako, kot sem predvidel, ne bom popravljal, saj bodo slej-ko-prej tudi to na Androidu poštimali (Firefox je že!).

Zanimivo pri vsej stvari pa je, da sedaj uporabljam eno CSS style datoteko, ki se generira s pomočjo PHP kode. Ker pa PHP privzeto nastavi Content-type na text/html, sem moral uporabiti malo zvijačo, ko s funkcijo header() spremenim tip prenešene vsebine na text/css.

header("Content-type:text/css");

Hkrati sem CSS pripravil tako, da se podatki o barvah vzamejo iz podatkovne baze, kot je bilo to v primeru strani, še preden sem se jo lotil predelati v PHP.

Ker sem se tokrat lotil predelave strani celovito in z željo, da čimbolj poenotim prikaz v klasičnem in mobilnem brskalniku, se je na koncu izkazalo, da je razlika v CSS zares minimalna. Predvsem vnosna polja morajo imeti font večje velikosti, ostalo je večinoma enako.