Web dizajn za mobilneplatforme

Web dizajn za mobilne platforme

Web dizajn za mobilne platforme

Ako pratite moderne trendove u web dizajnu, pre svega princip prvo mobilni (eng. mobile first) dizajn, vaš web sajt ili web aplikacija vrlo brzo može da ima više posetilaca, a samim tim i vaš biznis može da posluje mnogo bolje.

Da li izrada mobilne verzije sata može unaprediti vaš biznis i doneti vam nove klijente? Šta podrazumeva mobilni web sajt?

Mobilni Web dizajn

• Mobilne platforme - sledeća (ili već sad glavna) arena za razvoj aplikacija i web sajtova

• Smart uređaji

• Uređaji različitih dimenzija (inicijalno telefoni,sve veći ekrani, sada i tableti)

Mobilni Web dizajn

Da li znate da, u nekim radovima istraživači tvde da: 71% korisnika pristupa internetu preko mobilnog telefona?Ovo je ogroman procenat koji morate ozbiljno uzeti u obzir.

To znači da Izrada mobilne verzije sajta treba da vam bude prioritet.

Mobilni Web dizajn

Šta je princip prvo mobilni?Prvo mobilni dizajn je princip u web dizajnu podrazumeva da svoj sajt gradite pre svega za korisnike mobilnih telefona i tableta. Naravno, ovaj princip ne isključuje dizajniranje sajta za korisnike desktop računara i laptopova, već fokus stavlja na prikaz vašeg sajta na mobilnim uređajima. Izrada web sajta po ovom principu počinje izradom stranica za prikaz na mobilnim telefonima, a zatim se dodaju funkcionalnosti koje su bitne za prikaz na desktop računarima.

Mobilni Web dizajn

• Izvršni direktor Google-a je još 2010. godine izjavio da „Google razume da je novo pravilo mobile first“ i da „smatra da je zajednički projekat svih da mobilni uređaji postanu rešenje za sve“.

• Google je predstavio mobile-first index, jos 2011 godine

Mobilni Web dizajn

• Responsive dizajn podrazumeva izradu sajta sa fokusom na desktop verziju.

• Dakle, dizajn sajta primarno za desktop računare, a zatim pravljenje proporcionalno umanjenih verzija za druge, mobilne uređaje.

• Ako sajt nije optimizovan za mobilne uređaje gubi mnogo, jer prema poslednjim podacima oko 70% pretraga na Google pretraživaču se vrši upravo na mobilnim telefonima, tabletima i ostalim uređajima.

Šta se podrazumeva pod “mobilni”

• Mnogo toga– Na prvi pogled razvoj “mobilnih” web aplikacija ne

razlikuje se mnogo od klasičnog, uz nešto optimizacije za mobilne uređaje i manje ekrane, ali...

– Postoji ipak dosta stvari o kojima vredi detaljnije razmisliti

• Često se preterano fokusiramo na tipove uređaja i njihove mogućnosti

• Ipak, ovde se prvenstveno radi o mobilnosti samih korisnika

• Mobilni korisnici koriste svoje uređaje da pristupe sadržajima iz potpuno drugačijeg konteksta nego kada se to radi sa desktop računara

Šta to znači za razvoj• Upravo ta sveopšta dostupnost čini

mobilne web aplikacije toliko korisnim, ali i zahtevnijim za razvoj

• Zašto je razvoj “mobilnih” web sadržaja uopšte bitan?

• Jer web sajt koji se ne vidi dobro namobilnom telefonu izaziva frustracijukorisnika, koji zbog toga ne žele da se tuzadržavaju i odlaze kod vaše konkurencije.

Šta to znači za razvoj

• Gubitak velikog broja potencijalnih klijenata i kupaca

• Mobilni uredjaji sve više koriste i za posetu društvenim mrežama

• On line kupovina• Optimizacija web sajtova.

Osnovna dilema

• Native aplikacija ili web aplikacija?

– Web aplikacijama se pristupa kroz browser

– Native aplikacije se razvijaju za ciljanu platformu iOS, Android, ( nekad za BlackBerry, Simbian,... i instalira se slično kao desktop aplikacija na računaru. Dostupne su preko posebnog sistema za preuzimanje aplikacija za svaku platformu

Prednosti i mane oba pristupa

• Native aplikacije se razvijaju, optimizuju i kompajliraju baš za određenu ciljanu platformu

• Web aplikacije se interpretiraju unutar browsera, čiji rendering engine mora isprocesirati HTML, CSS i JavaScript (WebKit engine u većini slučajeva)– Ovaj dodatni sloj za izvršavanje jednostavno

uslovljava da su performanse niže nego kod native

aplikacija

Prednosti i mane oba pristupa (2)

• Web aplikacije su ograničene sposobnostima i opcijama koje im na raspolaganje stavlja rendering engine

• Native aplikacije mogu da pristupe punom skupu metoda koje OS stavlja na raspolaganje (npr. pristup kameri, adresaru, mikrofonu...)

• Ipak razlika u mogućnostima se smanjuje (izweb aplikacija je moguće pristupiti sistemugeolociranja, žiroskopu, inicirati poziv i sl.)


• Pošto su native aplikacije ciljane za određene platforme, postavlja se pitanje za koju se opredeliti

• Ako se želi dostupnost na više platformi - razvija se za svaku ponaosob, radi se na više programskih jezika, zahteva se više razvojnih timova, na kraju se obično izbor svodi na to – koju platformu ćemo zapostaviti (fragmentacija)

• Kod web aplikacija stvar je jednostavnija, sve dok uređaji poseduju browser moći će i pokrenuti aplikaciju (i ovde postoje razlike između browsera, ali one su ipak manje i na njih su web developeri već naviknuti)


• Brzina razvoja je na strani web aplikacija

– Vrlo često je potrebno naći vrlo dobro objašnjenje (za menadžment) zašto je neophodno razvijati n native aplikacija uz povećane troškove

– Uposlednje vreme čak i vrlo velike kompanije nakon analize optiraju za web aplikacije

– Čak i Facebook, sa ogromnim brojem programera na raspolaganju teško drži korak sa fragmentacijom na različite platforme

Kako se odlučiti kakav mobilni razvojvam odgovara

• “moramo imati iPhone (ili Android - svejedno) aplikaciju – svi je imaju” – pogrešan pristup –analizirajte da li mobilnim korisnicima možete zaista ponuditi neku novu uslugu na ovaj način ili ne

• Najverovatnije ćete ionako morati donekle prilagođavati web aplikaciju jer mobilni korisnici očekuju da sajt prihvatljivo dobro radi I na mobilnim uređajima

Opcije za razvoj mobilnih aplikacija

• Opcija 1 – ne raditi ništa

• Opcija 2 – responsive dizajn – primena CSS-a i media query-ja kako bi se sadržaj prilagodio različitim rezolucijama uređaja

– Ipak ima i ozbiljna ograničenja jer samo prilagođava izgled ne i celokupno korisničko iskustvo

– Jedna od preporuka – krenuti od layouta za mobilne uređaje pa skalirati ka višim rezolucijama

Opcije za razvoj mobilnih aplikacija (2)

• Opcija 3 – potpuno odvojiti verziju za mobilne uređaje

– Ovakav izbor omogućava da se verzija za mobilne uređaje u potpunosti prilagodi njihovim specifičnostima

– I ova opcija ima svoje nedostatke – pretpostavlja da će se tačno utvrditi kakav klijent pristupa aplikaciji i shodno tome izabrati odgovarajuću verziju

– Ovo se, srećom, lako rešava postavljanjem i eksplicitinih linkova na obe verzije

Upotreba framework-a

• Postoje različiti – u principu svi JavaScript bazirani

• Neki upotpunosti zavise od JavaScript engine-a za korektno funkcionisanje (SenchaTouch), ali nudi bolje performanse

• Drugi koriste JavaScript da “pojačaju” korisničko iskustvo, sve se kompletno realizuje u HTML-u, pa se pomoću JavaScript-a dodaje ponašanje “kao aplikacije”

• U oba slučaja cilj je da se postigne interfejs kao kodnative aplikacija

Dizajniranje mobilne aplikacije

• Mobilnost je ključna specifičnost naših dana: biti u

mogućnosti pristupiti podacima, preko aplikacija i

uređaja bez obzira gde se nalazimo.

• Neki imaju pogrečan pristup i smatraju da je dizajn

korisničkog interfejsa na mobilnim aplikacijama

gubljenje vremena, a vremenom će uvideti da je to

pogrešan pristup, itekako je BITAN.

• Sve je više kompanija koje konstantno menjaju svoj

dizajn i menjaju pravac u korisničkom interfejsu. Cilj

je izdvojiti se od konkurencije


• Izrada vizuelnog rešenja za mobilne iOS i Android

aplikacije prilagođene korisniku

• Puno vremena je potrebno

• HIBRIDNE APLIKACIJE

• Jedna aplikacija za više mobilnih operativnih

sistema istovremeno, opet potrebno vreme


• PUSH NOTIFIKACIJE

• MOBILNI BANERI

• GOOGLE ANALITIKA


• Dizajn mora da komunicira sa korisnikom i da obezbedi da može da KORISTI aplikaciju

• Ključna stvar je kontekst u kome će korisnik koristiti aplikaciju (kada, kako i gde)

– desktop korisnik obično sedi, koristi veliki monitor, ima na raspolaganju tastaturu i miš

– mobilni korisnici mogu čekati u redu, sedeti u prevozu, u hodu – ima na raspolaganju obično mali ekran, a od pointer “uređaja” samo svoj prst

Obratite pažnju na “miš”

• Mnogi mobilni danas koriste ekrane osetljive na dodir– Prsti su idealni uređaji za pokazivanje, ali nisu ni

izbliza precizni kao strelica miša

– Apple Human Interface Guidelines for iOS2 preporučuje da “aktivne” zone budu barem 44 x 44 piksela

– To ne znači da je ovaj gubitak preciznosti korak nazad, iako smo izgubili na preciznosti - dobili smo na intuitivnosti same interakcije

Obratite pažnju na “miš” (2)

• Interfejs koji ne radi dobro sa ekranim aosetljivim na dodir, ne radi najčešće jer je sadržaj prenatrpan– Ovaj efekat je dodatno pogoršan time što sam čin

pritiskanja prstom najčešće u potpunosti zaklanja od pogleda posmatranu ciljnu zonu

• Nikada se ne smaju zaboraviti ni korisnici koji nemaju uređaje sa ekranima osetljivim na dodir, interfejs za njih ne sme postati potpuno neprilagođen

• Iz svega gore navedenog – treba težiti jednostavnosti

Obratite pažnju na “miš” (3)

• hover

– Mora se voditi računa da na uređajima sa ekranima osetljivim na dodir ovakav efekat nema smisla

• Učinite linkove i tastere jasno vidljivim i bez njega

• Izbegavajte sadržaj čija vidljivost zavisi od ovog efekta

• Izbegavajte padajuće menije koji nemaju jasno uočljivu vizuelnu sugestiju

Veličina ekrana

• Činjenicu da se radi o malim ekranima treba uvek imati u vidu,

• Treba sve testirati na manjim uređajima

• Ovo može predstavljati i priliku za dobar layout, ne samo ograničenje

– Treba naći balans, previše infromacija čini interfejs prenatrpanim i teškim za korišćenje

– Premalo informacija na jednoj stranici i preterana jednostavnost mogu dovesti do toga da kroisnik mora da traži gde se korisne informacije nalaze

Veličina ekrana

• Prvi komercijalni telefon sa Android operativnim

sistemom bio je HTC Dream ili poznatiji kao T-

Mobile G1 koji je imao HVGA ekran dimenzija

320x480 piksela.

• NEKAD

Veličina ekrana

• PRIMER – današnjih ekrana

Kognitivno opterećenje

Informaciona usklađenost kompjuterskog sistema i korisnika, kao predmet kognitivne ergonomije, počiva na dobro osmišljenom korisničkom interfejsu koji strukturom i informacionim obimom treba da omogući optimalnu interakciju u složenom sistemu čovek-računar.

Ukoliko težimo efikasnosti (većoj brzini rada), insistiraćemo na jednostavnijim ili pak postupno usložnjavajućim interfejsima. Ukoliko težimo efektivnosti (većoj tačnosti rada), rešenja ćemo tražiti u personalizaciji korisničkih interfejsa.

Kognitivno opterećenje

• Jednostavan interfejs smanjuje kognitivno opterećenje korisnika

• Kod uređaja sa ekranom osetljivim na dodir treba voditi računa o najčešćem položaju ruke (samim tim i prstiju) kad ase uređaj drži u rukama

• Potrebno je analizirati položaj komandi u obe orijentacije

• Analizirati da li isti položaj komandi odgovara i za veće uređaje (tablete)

Šabloni koji se često koriste

• Karusel• Dobro:

– Jednostavan za upotrebu

– Koristi ceo ekran za prikaz sadržaja

– Koristi prirodne pokrete za navigaciju

• Loše:– Oslanja se na pomeranje prstom – može

biti teže uočljivo nego dugme

– Sve informacije o jednom enitetu moraju stati na jedan ekran

– Svaka stranica mora biti konceptualno ista

– Ne postoji mogućnost “preskakanja”


• Tab Bar• Dobro:

– Vrsta navigacije na koju su korisnici navikli

– Dozvoljava prabcacivanje prikaza

– Jasno pokazuje trenutno stanje

• Loše:– Nema hijerarhije tj. teško je ugraditi u

ovaj koncept

– Uvek je vidljiva na ekranu, zauzima koristan prostor

– Ograničena primena (do 5 stavki se lako “uklopi”)


• Liste – verovatno najkorišćeniji element interfejsa

• Dobro:– Dovoljno su fleksibilne da mogu da prime

veliku količinu podataka

– Lako se razume kako se koriste

• Loše:– Inherentno su hijerarhijse

– Korisnik mora da se vrati unazad po nivoima da bi izabrao drugu putanju

Napravite nacrt

• Nacrt tipičnih stranica je odličan način da se osmisli sadržaj ekrana

• Nije lako napraviti sam nacrt, potrebno vreme

• Uraditi nekoliko verzija

Kreirajte stil

• Kreirajte stil koji se primenjuje na celu mobilnu aplikaciju– Paleta boja

– “3d” interfejs – ako se već koristi dodir, elementi interfejsa bi trebalo i da izgledaju kao stvarni objekti (efekat odsjaja, senki i sl) – ovo je danas već promenjeno u „flat” interfejs sa 3d „efektom”

– Pronađite odgovarajući set ikonica za aplikaciju

– Tipografija – mobilni uređaji dolaze sa vrlo ogrnaičenim brojem fontova

Obratite pažnju na performanse

• Mobilni uređaji koriste često javne GSM mreže –propusni opseg može biti znatno niži nego kod ADSL, kablovske, optičke mreže

• Ne “takmičite” se sa native aplikacijama koje veliki deo vizuelnih komponenti imaju “ugrađene”

• Izbegavajte preterano zahtevan HTML i CSS stilove koji za korektan prikaz zahtevaju mnogo slika

• Minimizujte sve što može (JavaScript, CSS)

Testirajte aplikaciju

• Tokom razvoja može se koristiti i simulator, ali se obavezno mora proveravati i na stvarno mobilnom uređaju (poželjno ne samo jednom tipu)

• Testirati i samo testirati,

Markup za mobilne web aplikacije

• Koristi se HTML5

• A s njim i CSS (podrška na mobilnim uređajima je nešto lošija nego na desktop browserima) i JavaScript

• Preporučuje se

– CSS organizovati u zasebnim fajlovima

– Pišite kod za standardne browsere, tek na kraju dodajte izuzetke za “problematične” browsere

Viewport

• Na mobilnim uređajima neophodno je shvatiti koncept viewport-a

• Visual viewport, layout viewport

– Na desktop su oni jedno te isto, na mobilnim uređajima layout viewport je veći od vidljivog

– Može se postaviti veličina viewporta

• <meta name="viewport" content="width=500">

• <meta name="viewport" content="width=device-width">

Pazite na postavljene limite

• Svi sistemi imaju neke podrazumevane limite

– Koliko slika može biti velika u MB

– Koja je maksimalna veličina pojedinačnih resursnih fajlova koja je dozvoljena (HTML strnaice, JavaScript fajla, CSS fajla)

– Ograničenje na dužinu izvršavanja JavaScript koda

Progresivno “unapređivanje” korisničkog iskustva

• Koncept suprotan “gracefull degradation”

• Polazi se od postavke osnovnog interfejsa, koji se “unapređuje” ukoliko korisnički browser podržava

Skalabilne slike kao deo interfejsa

• Za mobilne uređaje se preporučuje da sve veličine navedene u CSS-u izraze u relativnim merama

• Kada su slike deo interfejsa, često su to pozadinske slike

• Preporučuje se upotreba svg slika koje omogućavaju skaliranje bez gubitka kvaliteta

Korišćenje mogućnosti uređaja izokruženja web aplikacije

• Lokacija

• Orijentacija (portret, landscape)

• Akcelerometri

• Pokreti (gestures) na ekranima osetljivim na dodir

– Swipe

– Pinch and zoom

Ugrađivanje web aplikacije u native

aplikaciju

• PhoneGap

– Obezbeđuje pristup uređajima koji inače nisu direktno dostupni web aplikaciji

– “Pakuje” web aplikaciju u native aplikaciju.

– Aplikacija mor abiti u potpunosti realizovana kao “čist” HTML+JavaScript+CSS, nikakvi skriptleti (PHP, C#, JSP ili bilo koji drugi) nisu dozvoljeni (svi podaci se moraju “provući” AJAX-om u stranice).

Cordova

2011 Adobe kupuje firmu Nitobi. Pošto je PhoneGap u trenutku kupovine bio besplatan a njegov soTver je već koristilo više proizvođača u

svojim softverskim proizvodima (Oracle, IBM…),

da bi zaštitili dugovečnost projekta PhoneGap,

Nitobi je pre prodaje donirao PhoneGap

“Apache Softvare” fondaciji.

Cordova

Pošto je sa kupovinom firme Nitobi Adobe kupio

pravo i na ime “PhoneGap”, stoga je Apache fondacija generisala novo ime, pa naziv “Apache Cordova” predstavlja open source project a “PhoneGap” je Adobeova distribucija istog proizvoda. U medjuvremenu je Adobe dodao nove funkcionalnostima (uglavnom vezane za olakšavanje developmenta), kao što je PhoneGap Build Service, PhoneGap Developer App i Adobe PhoneGap Enterprise.

Cordova

Apache Cordova sistem omogućuje dve stvari hibridnim mobilnim aplikacijama:

• Funkcije za komunikaciju sa sistemskim komponentama direktno iz JavaScripta

• Kompajliranje web aplikacije u native code

Cordova

Cordova obezbeđuje i treću komponentu – način

da iz JavaScript koda pristupate resursima

uređaja. To praktično znači da na raspolaganje dobijate API pomoću koga iz web aplikacije možete da pozovete listu kontakata, očitate GPS koordinate, pokrenete fotografisanje kamerom telefona, postavite notifikaciju u zaglavlje operativnog sistema............

React Native

React Native je varijacija React-a prilagođena razvoju nativnih aplikacija.Web developeri, koji su upoznati sa JavaScriptom, mogu kroz React Native da se bave nativnim projektima bez potrebe da ponovo uče sve. Upravo iz ovog razloga je Facebook prvobitno i razvio React Native. Cilj je bio da omoguće svojim developerima da uz oslanjanje na isti jezik (JavaScript) razvijaju nativne aplikacije.

Documents

Web dizajn za mobilneplatforme