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

Digitalni marketing

Stiže Nielsen ONE, Sveti gral mjerenja digitalnog i linearnog videa. Što to znači za agencije i klijente?

Ako ste dio marketinške industrije, vjerojatno znate da su digitalni i linearni svijet u potpunosti odvojeni - mjeriti ih i potom uspoređivati je trenutno doslovno nemoguće. Hoće li Nielsen svojim analitičkim alatom donijeti dugo iščekivano rješenje?

Društvene mreže

Rangiramo 5 najvećih komunikacijskih failova za kraj 2020. i početak 2021.

U kriznim situacijama veća je šansa da ćete pogriješiti u komunikaciji, ali veća je i šansa da će tu grešku netko primijetiti. Evo koje smo mi primijetili posljednjih tjedana…

Tehnologija

Može i bez tvornica: Hrvatska kao “meka” za R&D automobilske industrije!

2020. je za domaći IT donijela mnogo dobrih vijesti, a kakav potencijal naši stručnjaci donose za industriju automobila u 2021. i narednim godinama otkrili su nam Tomislav Car (Porsche Digital Croatia) i predstavnici dSPACE Engineeringa.

Što ste propustili

Novost

Denis Jašarević novi je predsjednik uprave tvrtke IN2

Dosadašnji Izvršni direktor IN2 grupe za Zdravstvo i javnu upravu Denis Jašarević postaje predsjednik Uprave ove domaće tehnološke tvrtke.

Startupi i poslovanje

AI: 2020. smo pokazali: “može se i iz Hrvatske”, 2021. to trebamo i dokazati!

Na početku 2020. pitali smo se može li se hrvatska AI priča pomaknuti s mrtve točke... Danas možemo reći da bez sumnje jest! Ali treba nam još bolja suradnja - i zajednice i akademije i države - kako se ne bi vratili na staro.

Digitalni marketing

Stiže Nielsen ONE, Sveti gral mjerenja digitalnog i linearnog videa. Što to znači za agencije i klijente?

Ako ste dio marketinške industrije, vjerojatno znate da su digitalni i linearni svijet u potpunosti odvojeni - mjeriti ih i potom uspoređivati je trenutno doslovno nemoguće. Hoće li Nielsen svojim analitičkim alatom donijeti dugo iščekivano rješenje?

Digitalni mediji

Facebook, Airbnb i druge platforme stisnule Trumpove pristaše pred inauguraciju

Donald Trump od danas više nije predsjednik SAD-a, a već danima prije leđa su njemu i njegovim pristašama okrenule gotovo sve tehnološke tvrtke i platforme.

Startupi i poslovanje

LAUNCHub je već investirao u hrvatske startupe, a sad su zatvorili fond od minimalno 44 milijuna eura!

LAUNCHub, bugarski VC koji je svojevremeno uz Eleven bio jedini early stage fond u Hrvatskoj i Srbiji, vraća se s podebljanim fondom za startupe u SEE i široj CEE regiji.

Kultura 2.0

Staro računalo i oprema vam skupljaju prašinu? Donirajte ih učenicima iz potresom pogođenih područja

Imate starije računalo koje još uvijek radi, ali baš pikirate nabaviti novo? Donirajte staro za školarce koji su zbog potresa ostali bez svojih školskih računala!