Osnove izrade mobilnih web stranica

1. Osnove izrade mobilnih web stranica Webfestival 2013 Boris Samardžija, CARNet Boris.Samardzija@CARNet.hr

2. Sadržaj Š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

3. Što su mobilne web stranice? • Web stranice čiji su dizajn i sadržaj prilagođeni prikazu na mobilnimuređ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

4. Po čemu se mobilni uređaji razlikuju od osobnih računala Mobilni uređaji Osobna računala Drugačiji omjer ekrana Drugačiji način interakcije s korisnikom Manji ekran Manja rezolucija ekrana Sporije procesiranje podataka Manji diskovni prostor Sporiji pristup internetu Veći ekran Veća rezolucija ekrana Brže procesiranjepodataka Veći diskovni prostor Brži pristup internetu

5. Pametni telefon, tablet i osobno računalo Drugačiji je način na koji koristimo tj. držimo uređaje • Pametni telefon • Najćešće portret (portrait) • Tablet • Portret / pejzaž • Osobno računalo • Pejzaž (landscape) Izvor: http://developernetwork.conterra.de/content/responsive-web-design-mapapps

6. Š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

7. Od čega početi? • Kako postići različit prikaz stranice na različitim uređajima? • Prilagodba sa serverske strane • U sklopu postojeće web stranice • Odvojena web stranica • Prilagodba s klijentske strane • Responzivna web stranica

8. 1) Prilagodba sa serverske strane Stranica prikazuje drugačiji sadržaj za mobilne uređaje. U sklopu postojeće web stranice Detekcijom uređaja prikazuje sadržaj prilagođen mobilnim uređajima. npr. http://www.CARNet.hr Odvojena web stranica Detekcijauređ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

9. 1) Prilagodba sa serverske strane Dobro Loše • Uređaj preuzima samo 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 • Detekcija mobilnog 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

10. 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

11. 2) Prilagodba s klijentske strane Dobro Loše Google preporuča prilagodbu stranica za mobilne uređaje na ovaj način • Sadržaj i dizajn se prilagođavaju svakom uređaju • Jedan sadržaj • Nema dupliciranja sadržaja • Preuzima se i onaj sadržaj / 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

12. 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

13. 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

14. Š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

15. Š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”

16. Savjeti i trikovi • Iskoristiti HTML5 mogućnosti • Internet preglednici na mobilnim platformama dobro podržavaju HTML5 mogućnosti • Iskoristiti osjetljivost na dodir (touchevents) • Brži odaziv od klika • Karte • Preporuka GoogleMaps • Video sadržaj • Preporuka YouTube

17. 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:Boris.Samardzija@CARNet.hr">Pošaljite mi mail</a> • Forme (HTML5 custominputtypes) • Olakšati unos teksta prilagođenom tipkovnicom, ovisno o tipu podatka (datum, poštanski broj, broj telefona) • Ikone (Appletouchicon) • 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.

18. Alati za izradu mobilnih web stranica • Najpoznatiji • Twitter Bootstrap http://www.getbootstrap.com • ZurbFoundation - 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

19. Kraj Hvala na pažnji! Pitanja?

20. Korisni resursi http://webfestival.carnet.hr/2013/mobilni_web http://www.netokracija.com/5-razloga-zasto-vasa-stranica-mora-biti-responzivna-40223 http://mobile.smashingmagazine.com/2010/11/03/how-to-build-a-mobile-website/ http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-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-building-smartphone.html http://googlewebmastercentral.blogspot.com/2013/06/changes-in-rankings-of-smartphone_11.html https://developers.google.com/webmasters/smartphone-sites/

21. Primjeri http://www.CARNet.hr http://www.vecernji.hr http://m.vecernji.hr http://www.zimo.co http://www.netokracija.com