Transcript Osnove izrade mobilnih web stranica

Osnove izrade mobilnih web
stranica
WEBFESTIVAL 2013
Boris Samardžija, CARNet
[email protected]
Sadržaj
1.
2.
3.
4.
5.
6.
7.
8.
9.
Što su mobilne web stranice
Po čemu se mobilni uređaji razlikuju od osobnih
računala
Što je potrebno napraviti kako bi prilagodili stranice?
Od čega početi?
Na što paziti?
Što čini kvalitetnu mobilnu web stranicu?
Savjeti i trikovi
Alati za izradu mobilnih web stranica
Pitanja
Što su mobilne web stranice?
 Web stranice čiji su dizajn i sadržaj prilagođeni prikazu na
mobilnim uređajima i platformama.
 Mobilni uređaji



Pametni telefoni 3” – 5”
Phableti 5” - 7”
Tableti 7”-13”
 Platforme

iOS (iPhone, iPad), Android, Windows Phone 8, Windows 8
Po čemu se mobilni uređaji razlikuju od osobnih računala
Mobilni uređaji
Osobna računala
 Manji ekran
 Veći ekran
 Manja rezolucija ekrana
 Veća rezolucija ekrana
Drugačiji omjer ekrana
 Sporije procesiranje
 Brže procesiranje
podataka
 Manji diskovni prostor
 Sporiji pristup internetu
podataka
 Veći diskovni prostor
 Brži pristup internetu
Drugačiji način interakcije s korisnikom
Pametni telefon, tablet i osobno računalo
 Drugačiji je način na koji koristimo tj. držimo uređaje
 Tablet
 Pametni telefon
 Portret / pejzaž
 Najćešće portret (portrait)
 Osobno računalo

Izvor: http://developernetwork.conterra.de/content/responsive-web-design-mapapps
Pejzaž (landscape)
Što je potrebno napraviti kako bi prilagodili stranice?
 Treba imati na umu ranije navedene karakteristike
mobilnih uređaja, a posebno:


Manje veličine ekrana
Manje rezolucije ekrana
 Potrebno je izraditi prilagođeni dizajn



Raspored elemenata na stranici
Količina i oblikovanje sadržaja
Tipografija
Od čega početi?
 Kako postići različit prikaz stranice na različitim
uređajima?
Prilagodba sa serverske strane
1.
a)
b)
U sklopu postojeće web stranice
Odvojena web stranica
2. Prilagodba s klijentske strane
 Responzivna web stranica
1) Prilagodba sa serverske strane
 Stranica prikazuje drugačiji sadržaj za mobilne uređaje.
a)
U sklopu postojeće web stranice
Detekcijom uređaja prikazuje sadržaj prilagođen mobilnim uređajima.
npr. http://www.CARNet.hr
b)
Odvojena web stranica
Detekcija uređaja i preusmjeravanje na mobilnu web stranicu
Korisnik može doći i izravno - upisivanjem adrese
Mobilna verzija stranice često se nalazi na odvojenoj domeni
npr. http://www.vecernji.hr >http://m.vecernji.hr
1) Prilagodba sa serverske strane
Dobro
Loše
 Uređaj preuzima samo
 Detekcija mobilnog
onaj sadržaj koji će se
zaista prikazati na stranici

Veća mogućnost
optimizacije
 Veće mogućnosti
 Mobilna verzija stranice
može funkcionirati sasvim
drugačije
uređaja


Tehnički komplicirano
Može biti nepouzdano
 Dvije različite stranice
 Više posla oko održavanja
 Dupli sadržaj – zbunjuje
tražilice
2) Prilagodba s klijentske strane
 Responzivna web stranica
 Prikazuje jednak sadržaj mobilnim uređajima i osobnim
računalima
 Sadržaj se automatski prilagođava veličini (širini) prozora
(ekrana)
 CSS stilovi – elementi mijenjaju izgled ili vidljivost u odnosu
na veličinu ekrana
 Npr. http://www.zimo.co , http://www.netokracija.com
 Kako prepoznati / testirati responzivne stranice?


Na osobnim računalima - mijenjanjem širine prozora!
Sve se mora automatski smanjiti ili povećati
2) Prilagodba s klijentske strane
Dobro
Loše
 Sadržaj i dizajn se
 Preuzima se i onaj sadržaj /
prilagođavaju svakom
uređaju
 Jedan sadržaj
 Nema dupliciranja
sadržaja
resursi koji se možda neće
koristiti

Ponekad neke sadržaje ne
možemo prikazati onako kako
bismo htjeli ili ih želimo sakriti
 Manje mogućnosti
 Mobilna verzija mora
funkcionirati jednako kao i za
osobna računala
Google preporuča prilagodbu stranica za mobilne uređaje na ovaj način
Na što je potrebno paziti?
 S funkcionalne strane:
 Jednostavna za korištenje
 Posjetitelju bitan sadržaj
 Da elementi stranice i tekst budu vidljivi
Bez potrebe za uvećavanjem
 Bez potrebe za horizontalnim klizanjem


Razumna količina sadržaja

Bez potrebe za pretjeranim vertikalnim klizanjem
Na što je potrebno paziti?
 S tehničke strane:
 Tehničke mogućnosti Internet preglednika


iOS, Android, Windows Phone
Izbjegavati zahtjevne operacije
Intenzivna obrada podataka
 Pretjerana uporaba grafičkih elemenata


Izbjegavati tehnologije koje su slabo ili nisu podržane
Napredne CSS mogućnosti (animacije, tranzicije, transformacije,
sjene)
 Platforme kao što su Flash, Shockwave, Silverlight, Java appleti

Što čini kvalitetnu mobilnu web stranicu?
 Brzina učitavanja
 Ispravan rad
 Svi elementi na svom
mjestu
 Bez trzanja
 Prilagođene grafike
 Za prikaz na ekranima
visoke razlučivosti (ikone,
logotipi, …)
 Automatska promjena
veličine slika
 Osjetljivost na dodir
 Omogućuje brzu
navigaciju
 Označavanje odabranih
stavki pri dodiru
 Interakcija s korisnikom
 Označavanje telefonskih
brojeva, e-maila,
mogućnost preuzimanja
kontakata
Što čini kvalitetnu mobilnu web stranicu?
 Bez potrebe za
uvećavanjem sadržaja
 Bez horizontalnog klizača
(scrolla)
 Bez oslanjanja na efekt
prelaska mišem


Hover efekt
Natuknice (tooltips)
 Bez kompliciranih
animacija
 Sav sadržaj mora biti
dostupan
Izbjegavati situacije poput
 „Stranica nije prilagođena za
prikaz na vašem uređaju”
 „Uređaj ima premalen ekran
za prikaz sadržaja”
 „Preuzmite našu aplikaciju
za pregled željenog sadržaja”
Savjeti i trikovi
 Iskoristiti HTML5 mogućnosti
 Internet preglednici na mobilnim platformama dobro
podržavaju HTML5 mogućnosti
 Iskoristiti osjetljivost na dodir (touch events)
 Brži odaziv od klika
 Karte
 Preporuka Google Maps
 Video sadržaj
 Preporuka YouTube
Savjeti i trikovi
 Kontakt informacije (URI schemes)
 Iskoristiti činjenicu da korisnik pregledava sadržaj na mobilnom uređaju
 Označiti brojeve tako da se jednostavno može inicirati poziv. Isto vrijedi i
za SMS i email poruke.



Telefon - <a href="tel:0955088805">Nazovite me</a>
SMS - <a href="sms:0955088805">Pošaljite mi SMS</a>
E-mail - <a href="mailto:[email protected]">Pošaljite mi mail</a>
 Forme (HTML5 custom input types)
 Olakšati unos teksta prilagođenom tipkovnicom, ovisno o tipu podatka
(datum, poštanski broj, broj telefona)
 Ikone (Apple touch icon)
 Posjetitelj može spremiti stranicu u „oznake” (bookmark) pa je u tom
slučaju moguće pripremiti ikonu koja će se postaviti u izbornik mobitela.
Alati za izradu mobilnih web stranica
 Najpoznatiji
 Twitter Bootstrap http://www.getbootstrap.com
 Zurb Foundation - http://foundation.zurb.com
 Groundwork CSS - http://groundwork.sidereel.com
 Initializr - http://www.initializr.com
 Uključuju sve što je potrebno za izradu mobilne web
stranice
 Mnoštvo primjera i vodiča koji se mogu pronaći na
internetu
Kraj
 Hvala na pažnji!
 Pitanja?
Korisni resursi
http://webfestival.carnet.hr/2013/mobilni_web
 http://www.netokracija.com/5-razloga-zasto-vasa-stranica-mora-biti-responzivna40223

http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/
 http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsivewebsite-presidential-smackdown/

http://bradfrostweb.com/blog/post/mobile-web-problems/
 http://wtfmobileweb.com/
 http://wiki.maemo.org/Useful_Mobile_URLs

http://googlewebmastercentral.blogspot.com/2012/06/recommendations-for-buildingsmartphone.html
 http://googlewebmastercentral.blogspot.com/2013/06/changes-in-rankings-ofsmartphone_11.html
 https://developers.google.com/webmasters/smartphone-sites/

Primjeri
 http://www.CARNet.hr
 http://www.vecernji.hr
 http://m.vecernji.hr
 http://www.zimo.co
 http://www.netokracija.com