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

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...

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.

Pravila ponašanja

Na Netokraciji za vas stvaramo kvalitetan, autorski potpisan sadržaj i zaista se veselimo vašim kvalitetnim, kontruktivnim komentarima. Poštujmo stoga jedni druge prilikom komentiranja držeći se sljedećih pravila ponašanja:

  • Ne budite 💩: Nema vrijeđanja, diskriminiranja, ni psovanja (osim ako nije osobni izričaj, ali onda neka psovka bude općenita, a ne usmjerena prema nekome)
  • Samo kvalitetna rasprava, manje trolanja: Ne morate se ni sa kim slagati, ali budite konstruktivni i doprinesite raspravi! Svako trolanje, flameanje, koliko god "plesalo" na granici, leti van.
  • Imenom i prezimenom, nismo Anonymous 👤: Autor sadržaja stoji iza svog sadržaja, stoga stojite i vi iza svog komentara. Koristimo ime i prezime (Hrvoje Lončar) ili barem ime i inicijala (Hrvoje L.) te pravu email adresu. Kako koristimo podatke koje tamo ostavljate? Bacite oko na našu izjavu o privatnosti.

Sve ostale komentare ćemo s guštom spaliti, jer ne zaslužuju svoje mjesto na internetu.

Komentari

  1. Frano Šašvari

    Frano Šašvari

    25. 03. 2011. u 10:12 am Odgovori

    Link “pogledajte demo”, ne radi.. fali h kod http://

    Inače, super serija članaka o izradi aplikacija za mobitele. Baš se i sam ovih dana bavim razvojem “okrlještene” verzije web stranice za mobitele, tako da će mi sve ovo biti od velike pomoći 😉

  2. Kresimir Katusic

    Kresimir Katusic

    25. 03. 2011. u 10:36 am Odgovori

    Jedva čekam vidjeti u budučnosti 10-ak Media Query-ia unutar css-a, koliko li će izrada toga samo trajati?
    Postavlja se pitanje ako je sami web site za desktop nekako kompliciran, težak, dosta tagova i sl., da li ćemo biti primorani raditi drugi web za mobilni i/ili tablet?

    U bivšoj firmi di sam radio, radili su neku mobilnu aplikaciju, tribalo ju je prilagođavati za različite mobitele, modele, os-ove itd. Toga je bilo dosta, zahtjevalo je puno ljudskog resursa i puno uređaja. Kako ćemo mi to developeri sve to pratiti?

    Ali eto u krajnoj liniji tko nas išta pita, otvorimo oglasnike, kupujmo redom sve IN tablete i uređaje ili pak da otvorimo udrugu i tražimo od renomiranih proizvođaća da šalju svoje modele developerima 🙂

    lp

    P.S. Dobar članak.

    • Lucijan Blagonić

      Lucijan Blagonić

      25. 03. 2011. u 10:50 am Odgovori

      Naravno, ovisi sve o tipu stranice. Nije bitno da ih bude 10. Dovoljno je da ih bude par i da budu fleksibilni za veći broj uređaja. Pogledaj ovaj jednostavna query koji sam radio kao primjer za WebUG. http://www.blagonic.com/goodies/webug/ odnosno direktno link na css http://www.blagonic.com/goodies/webug/css/style.css

      Ima desetak linija, i jednostavno disablea floatove i custom fontove, smanjuje whitespace, povećava buttone, i sl. Ovo je ultrajednostavan primjer, ali uz pravilnu organizaciju pri sliceanju, dalo bi se izvesti i kod “težih” stranica.

      Morati ćemo paziti da si ne zakompliciramo život, no negdje će sigurno naći dobru primjenu. Možda danas/sutra bude nekakav PokretO HTML5 magazin, s svim tim fancy featurima. Vidjeti ćemo.

      • Kresimir Katusic

        Kresimir Katusic

        25. 03. 2011. u 3:45 pm Odgovori

        U pravu si što se tiće dobre organizacije, i ovo tvoje rješenje a koje si mi dao link je super.
        Nadam se, ali i biti će dobrih rješenja u budučnosti za ovo, tu smo da ih podržimo 😉

Odgovori

Tvoja e-mail adresa neće biti objavljena.

Popularno

Startupi i poslovanje

Dvije strane Porscheovog ulaganja u Greyp: Mali ulagači ljuti i nezadovoljni dok se Neufund hvali povijesnim exitom

Iza najave da Porsche preuzima većinski udio u Greyp Bikes krije se priča malih ulagača koji su 2019. u Greyp uložili kroz Equity Token Offering i sad se osjećaju - izigrano i izgurano.

Novost

Developeri, recite što doista želite: šareni ured, pivo petkom, veliku plaću, dobrog šefa….

Traženi, maženi, paženi i razmaženi. Tako mediji i društvo u zadnje vrijeme doživljavaju developere. Zagrebačka IT tvrtka odlučila je provjeriti jesu li doista takvi te pitati developere što oni doista žele.

Društvene mreže

Stiže Huuk. Nova globalna društvena mreža iz Rijeke?

Gradski autobus veselih boja s pitanjem "What the Huuk are we doing tonight" koji u zadnje vrijeme vozi Rijekom i obećanje da ćete od danas, 1. prosinca moći "Proširiti svoje pleme" najavili su lansiranje nove aplikacije u tom gradu. Kakve točno saznali smo u razgovoru sa suosnivačem Mateom Starčevićem Filipovićem.

Što ste propustili

Kultura 2.0

30 godina od prvog SMS-a: 6 stvari koji su obilježile način kako komuniciramo putem poruka

SMS je zagazio u svoju 30. godinu i kako nam se čini, neće još tako lako izumrijeti. Osim toga, svaki danom nas iznenađuju novi načini komuniciranja putem poruka. Tehnologija je divna, ali što je s korisnicma koji su ključni u definiranju "kulture dopisivanja". Postoji li "online bonton"?

Startupi i poslovanje

Jedan je po struci pravnik, drugi programer. Dijele ljubav prema računalnoj sigurnosti i – humoru

Evo priče o tome kako tehnologija povezuje različite ljude, kako se nose s izazovima koje pred njih tehnologija postavlja i što je presudno važno za uspješne projekte.

Startupi i poslovanje

1 dijete, 1 robot: CircuitMess i UBIK pokreću humanitarnu akciju za djecu u domovima

Humanitarna akcija traje do 22. prosinca, a trebala bi omogućiti da svako dijete u domovima za nezbrinutu djecu u Hrvatskoj dobije barem jednog robota.

Intervju

Može li Osijek zamijeniti Irsku? Siniši se dogodilo upravo to

Hrvatsku je zbog odlaska u inozemstvo radi potrage za (boljim) poslom napustio ogroman broj ljudi. Među njima je i nemali broj IT stručnjaka. Ipak, moguć je i drugačiji scenarij ako je prilika prava…

Startupi i poslovanje

Konzum je prvi trgovački lanac u Hrvatskoj u kojem se može plaćati kriptovalutama

Konzum je uz pomoć hrvatske tvrtke Electrocoin i njihovog sustava PayCek postao prvi trgovački lanac u Hrvatskoj u kojem možete plaćati kriptovalutama.

Startupi i poslovanje

Hrvatski BE-ON za pomoć blokiranim građanima osigurao 1,3 milijuna eura od Feelsgood fonda

Prema najnovijim dostupnim podacima u Hrvatskoj je preko 240.000 ovršenih potrošača. Hrvatski BE-ON želi im pomoći financijskim savjetovanjem.