Izrada mobilnih web stranica nikad nije bila lakša – ni teža

Mobilne stranice su do nedavno bile tek smanjene i ograničene verzije “normalnih” web stranica. Skripta bi detektirala s kojeg uređaja dolazi korisnik (koji preglednik koristi)  te bi mu onda ponudila posebno optimiziranu stranicu koja bi najčešće bila ograničena sadržajem ili funkcionalnošću.

Iako ste već isplanirali mobilnu nativnu ili web aplikaciju uz kvalitetan poslovni plan, korisnici će ipak morati doći na neku web stranicu kako bi je preuzeti.

Vašu web stranicu. Vašu mobilnu web stranicu? Kako bi korisnik bio zadovoljan korištenjem mobilne web stranice, moramo je prilagoditi njegovim željama, ali i uređajima koje koristi.

Serijom članaka o razvoju mobilnih aplikacija za Android, Symbian, iPhone i druge mobilne platforme Netokracija vas uvodi uz vodeće hrvatske stručnjake za mobilne i internetske tehnologije u svijet appova.

Od planiranja i izrade do promocije i slaganja korisničkog sučelja, u tome nas podržava Ovi by Nokia na kojemu možete naći pregršt mobilnih aplikacija kao i objaviti vlastitu.

Traži li neku konkretnu informaciju (npr. radno vrijeme i lokaciju ako je riječ o stranici tvrtke) ili čita novosti dok čeka u redu? Možda samo voli provjeravati forum i pratiti odgovore na thread koji ga zanima. Na nama je da predvidimo potrebu korisnika, te na taj način koncipiramo mobilnu verziju stranice i omogućimo korisniku da uspješno obavi radnju koju je trebao (pronalazak informacije, ugodno čitanje teksta, komentiranje..).

Rezolucije naše svakodnevne

Nekada smo dizajnirali stranice za 800×600 rezolucije, onda smo se prebacili na 1024×768, a laptopi i pristupačni LCD ekrani uveli su 1280×800 i 1680×1050. Unatoč tome nastavili smo dizajnirati za 1024×768 koji se do danas održao kao uvjet za izradu web stranica. Monitori su još jeftiniji, rezolucije su još veće (full HD je skoro pa standard za prosječne monitore), no na pomolu je potpuno novo tržište touchscreen uređaja koje nas tjera da preispitamo ali i prilagodimo pristup dizajnu internet stranica i korisničkih sučelja.

S ovim rastućim trendom odbacivanja numeričkih/qwertz tipkovnica na mobitelima i potpuno oslanjanje na ekran osjetljiv na dodir za korištenje uređaja i svih njegovih funkcija možemo s sigurnošću reći da će nove generacije pametnih telefona nastaviti ovaj trend (uz pojedine iznimke naravno). Iako su i rezolucije na mobitelima veće nego na nekadašnjim monitorima, pristup touchscreen uređajima je potpuno drukčiji i to moramo uzeti u obzir pri izradi mobilnih sučelja. Više nije dovoljno prilagoditi stranice rezolucijama, nego i (touchscreen) uređajima.

Koristeći uređaje osjetljive na dodir nemamo isti feedback kao kod surfanja koristeći miš i tipkovnicu. Nemamo hover stanje, preciznost je manja i stoga je potrebno navigacijske elemente bolje istaknuti – stilizirati kao gumbe, dodati pozadinsku boju, povećati prostor linka…

Mobiteli i tableti su sve brži i u stanju su pokretati grafički zahtjevne igre pa stoga i s lakoćom barataju naprednim funkcijama (mobilnih) preglednika. Osim samih uređaja, povezivanje mobitela na internet je jeftinije i brže. Nismo ograničeni na “lagane” internetske stranice bez slika, već vrlo jednostavno možemo streamati video na mobitel, gledati televiziju u hodu itd. Ne smijemo zaboraviti niti tablet uređaje koji su svakim danom sve zastupljeniji. S toliko različitih rezolucija i veličina ekrana ne možemo predvidjeti sve – Ili možemo?

Trenutno imamo jedan veliki lonac raznovrsnih uređaja i rezolucija. Kako sve to pratiti? Komu prilagođavati stranicu? Hoćemo li jednu verziju stranica servirati posjetiteljima s mobitelima, drugu verziju korisnicima tableta, i treću verziju korisnicima desktop računala s velikim monitorima? Uz novosti koje nam CSS3 nosi to i možemo, no pravo je pitanje je li isplativo.

CSS3 kao alternativa

Uz CSS3 postoji vrlo jednostavan (i široko prihvaćen) način za ciljanje pojedinih uređaja i rezolucija. CSS3 Media Queries (specifikaciju možete već sada pogledati na stranicama W3C-a). omogućuje nam da uz nekoliko linija koda ciljamo određene rezolucije, orijentaciju mobilnih uređaja (portrait/landscape) i serviramo im posebno pripremljen CSS (CSS datoteka brine se za vizualno oblikovanje stranice, definira veličine i boje fontova, poziva pozadinske slike i sl.).

Web Designer Wall koristi CSS3 Media Query metodu za skaliranje stranice na raznim rezolucijama. Navigacija se na manjim rezolucijama prebacuje iz vertikalno stupca u horizontalnu listu na vrh stranice. Reklame su primjerice na iPadu jednako istaknute (neovisno o orijentaciji) dok ih na drugim uređajima manje rezolucije nema.

Ciljajući pojedine skupine uređaja i/ili rezolucija, možemo postojeći generirani HTML kod stilizirati kako nam odgovara (probajte smanjivati i povećavati širinu preglednika na Hicks Designovoj web stranici.

Na najnižim rezolucijama možemo isključiti nepotrebne slike kako bi se korisnik orijentirao na sadržaj, za “tablet korisnike” možemo povećati veličine fontova, kontrast, dok korisnicima stolnih računala serviramo potpuno stiliziranu stranicu. Koristite elektronički čitač knjiga poput Amazon Kindlea koji ima integriran internetski preglednik? Nema problema i njemu možemo ponuditi drukčije stiliziranu stranicu koja će biti prilagođena monokromatskom ekranu.

Jedna od zgodnih primjena Media Query metode je ciljanje orijentacije uređaja. Koristite li iPad ili neki drugi tablet, možemo poseban CSS stil ponuditi kad uređaj držite u portrait ili landscape modu i time maksimalno iskoristiti ograničen prostor.

Skaliranje ili optimizacija?

Budućnost će tek pokazati hoće li developeri/dizajneri prihvatiti ovu metodu skaliranja i prilagodbe web stranica za različite uređaje. Svi noviji preglednici (Safari 3+, Chrome, Firefox 3.5+, Opera 7+, Internet Explorer 9 te mobilne verzije Opera Mini i Mobile Webkit) podržavaju CSS3 Media Queries. Za one koji koriste starije internetske preglednike možemo koristiti jQuery plugin za detekciju širine preglednika te na taj način ponuditi odgovarajući CSS. Tehnologija je spremna već danas, te postoji mnogo primjera i članaka koje možete pročitati. Već postoji i nekoliko grid sistema za razne rezolucije, da bi vidjeli kako to izgleda u praksi pogledajte demo.

Iako je ova metoda zgodna, ona ne predstavlja rješenje svih naših problema s mobilnim internetskim stranicama. Ponekad će biti bolje napraviti posebnu mobilnu stranicu koja je optimizirana isključivo za jednu grupu uređaja i korisnika (npr. korisnici smartphone uređaja) kao što je to trenutna praksa. Interesantno je kako je Facebook pripremio dvije mobilne verzije. Jedna je touch.facebook.com – prilagođena touchscreen uređajima, a druga m.facebook.com – za mobitele s tipkovnicom/kotačićem/kuglicom.

Uz pravilno korištenje, izrada tj. optimizacija stranice za razne rezolucije koristeći samo CSS3 mogla bi se pokazati kao zanimljiva (možda i jeftinija) alternativa u odnosu na klasični način izrade (HTML je isti, a CSS se mijenja).

Ne sumnjam da će vrijeme koje dolazi pokazati još zanimljivih primjera i inovativnih metoda za korištenje CSS3 Media Query na stranicama koje svakodnevno posjećujemo. Jedno je jasno, a to je da će se internetske stranice morati prilagoditi raznim tipovima uređaja, a korisnici će pri tome najviše profitirati. Desktop više nije dovoljan.

Op.ur. Bez brige, s obzirom da razni dodaci krivo očitavaju mobilne uređaje radimo na mobilnoj verziji Netokracije upravo po kriterijima i tehnologijama koje je Lucijan spomenuo. Također, hvala Nikoli Jovanoviću, Luki Kladariću, Krešimiru Dominiću i Hrvoju Mihajlicu na nekim od screenshotova  s uređaja.