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.

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

Društvene mreže

I porečki restoran i TikTok influencerica su u krivu

Iako je javnost brzo osudila influencericu Doris Stanković, s obje strane se pokazalo nepoznavanje profesionalne komunikacije, a i influencer marketinga.

Tehnologija

“Tata, jesi li baš morao kupiti električni auto?”

Napravio sam grešku: kupio sam električni automobil. Svi članci o električnim vozilima (EV) koje sam čitao na Hacker Newsu i Redditu nisu me pripremili za desetak EV infrastrukturnih problema u Hrvatskoj i okolici. Anegdote u nastavku objašnjavaju lekcije koje sam naučio na teži način.

Izrada web stranica

Da HTZ zna promovirati slavonski turizam u doba krize, ne bi pokrenuo Slavonia.travel

Slavonija je zanemarena već dugo, ali imamo što za ponuditi. Zašto onda reklamiramo samo kulen, rakiju i fiš?!

Što ste propustili

Kolumna

Microsoftova akvizicija ZeniMaxa samo je jedan korak u transformaciji Xboxa u “gaming Netflix”

Možda vam je Microsoft poznat po Windowsima, Officeu i cloud infrastrukturi, ali ovaj PC mastodont jučer je uložio u studio video igara 8 milijardi dolara! A ima itekako dobar razlog...

Tehnologija

Sezona je gotova. Može li ‘proptech’ pomoći s neiskorištenim apartmanima, ali i radnim prostorima?

Fizičko distanciranje stvorilo je krizu bez presedana za industriju nekretnina jer se po prvi put u modernom sjećanju potražnja za mnogim prostorima smanjila. Proptech industrija pokušava riješiti taj problem.

Startupi i poslovanje

Marko Štajcer: Kad već imamo ogromne količine podataka, idemo ih iskoristiti!

U 2020. nikada nije bilo jasnije koliku vrijednost nosi tehnologija za normalno funkcioniranje društva, a koliko još bi nam značila kada bi sve podatke koje imamo upogonili da rade za nas. Zanimaju li vas otvoreni podaci i rješavanje velikih analitički problema na njima, Open Data Hackathon dobra je prilika za iskušati svoje vještine i povezati se s ključnim mentorima i investitorima.

Društvene mreže

Hrvatski influenceri ne čekaju rasplet situacije s TikTokom: Već su spremni za selidbu na Reels

Tijekom vikenda bilo je neizvjesno hoće li TikTok biti izbačen iz američkih trgovina aplikacijama ili ne, ali čini se da postoji svjetlo na kraju tunela. No, sve je to uzburkalo i domaće i globalne kreatore sadržaja, a Vlatko Tutić iz JoomBoosa, koji okuplja 13 TikTokera, otkriva kako su došli na ovu društvenu mrežu, a i kako će s nje otići na Reels ili negdje drugdje, ako bude potrebno.

Netokracija Podcast

Tko je tko u hrvatskoj digitalnoj industriji? Slavimo 50. epizodu Netokracija Podcasta!

Povodom 50. epizode Netokracija Podcasta odlučili smo se na malo drugačiji format: igru! Pogađat ćemo neka od najistaknutijih lica hrvatske digitalne industrije, od osnivača tehnoloških tvrtki do freelancera i marketingaša!

Tehnologija

Hrvatska kripto poštanska marka rasprodana je u nekoliko sati, ali što je to uopće

Uz pomoć Belme Gutlić iz tvrtke NodeFactory i Tina Galetovića iz tvrtke BitX te filatelista Emila Drkušića otkrivamo u čemu je stvar kod blockchain marke Hrvatske Pošte.