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.

Sukladno članku 94. Zakona o elektroničkim medijima, komentiranje članaka na Netokraciji dopušteno je samo korisnicima koji ostave svoje ime i prezime te mail adresu i prihvate pravila ponašanja.

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, kao i Zakon, 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). Također, upoznajte se sa stavkom 2. članka 94. Zakona o elektroničkim medijima prije no što ostavite komentar.
  • 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 te pravu email adresu.

Kako koristimo podatke koje 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

Umjetna inteligencija

Najvažniji dio Rimčevog Vernea nije robotaksi, već iskustvo?

Ovaj tjedan rebrendirana u Verne, Project 3 Mobility, tvrtka koju su 2019. godine osnovali Mate Rimac, Adriano Mudri te Marko Pejković, danas napokon ima prvo “opipljivo” predstavljanje onog što su razvijali. No, je li robotaksi usluga zbilja najvažnije što mogu ponuditi?

Pametni automobili

Direktor Vernea tvrdi da su granice između 4. i 5. razine autonomije nejasne – što kažu stručnjaci?

Peta razina autonomnosti vozila svojevrstan je sveti gral industrije, no je li uopće dostižna i potrebna?

Tvrtke i poslovanje

Istraživanje korisničkog iskustva: Jeste li spremni čuti što trebate napraviti?

Ako se pravilno postavi, kao ključna poslovna funkcija, UX istraživanje može pomoći u diverzifikaciji portfelja proizvoda, usluga i korisnika, otkrivanju različitih vrijednosti vaše ponude, implementiranju novih trendova i strategija, a mogao bi vam ukazati i na neiskorištene prilike za širenje i inoviranje. Ako vam to nije dovoljno, čitajte dalje, i otkrijte kako to rade najveće tvrtke na svijetu...

Što ste propustili

Veliki intervjui

Platformski rad u Hrvatskoj: Na 4 digitalne platforme i 1500 agregatora rasporedilo se 16 tisuća “gigera”

Od početka godine u sustavu JEER evidentirano je 16.000 osoba koje su u nekom razdoblju radile putem digitalnih radnih platformi i 1500 agregatora koji su ih zapošljavali. Nijednoj od tih osoba neka od 4 aktivne platforme nije direktno dala ugovor o radu.

Prikaz

Book&Zvook: Jeste probali audioknjige na hrvatskom?

...bolje nego da trčimo za njima i vičemo: „Pa vi ništa ne čitate!“, kažu Ljubica Letinić i Lana Deban iz Book&Zvooka koje su nam objasnile kako nastaju audioknjige - na hrvatskom.

Novost

Euromoney proglasio RBA najboljom digitalnom bankom u Hrvatskoj

Jedan od vodećih europskih časopisa u području financija i bankarstva Euromoney, proglasio je Raiffeisenbank Hrvatska najboljom digitalnom bankom u Hrvatskoj. Ova se nagrada svake godine dodjeljuje banci s vodećom ponudom digitalnih proizvoda i usluga.

Pametni automobili

Direktor Vernea tvrdi da su granice između 4. i 5. razine autonomije nejasne – što kažu stručnjaci?

Peta razina autonomnosti vozila svojevrstan je sveti gral industrije, no je li uopće dostižna i potrebna?

Društvene mreže

Andrej Plenković i Možemo razvaljuju TikTok

Do kraja parlamentarnih izbora premijer Plenković lajkaniji je bio od Pernara, a Možemo najpraćenija stranka.

Novost

Cijeli svijet zahvatio “plavi ekran smrti”: Što do sada znamo

Aviokompanije otkazuju letove, televizije su prestale s emitiranjem, poslovanje su prekinule mnoge banke, pa i Londonska burza. U Hrvatskoj probleme ima CEZIH, televizije, pa i kontrola leta.