• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Neohýbejte svůj web na mobil, začněte znovu
 

Neohýbejte svůj web na mobil, začněte znovu

on

  • 532 views

O tom, proč se věnovat návrhu pro mobilní zařízení, proč začít od začátku a jaké benefity to bude mít pro vás a pro váš byznys.

O tom, proč se věnovat návrhu pro mobilní zařízení, proč začít od začátku a jaké benefity to bude mít pro vás a pro váš byznys.

Statistics

Views

Total Views
532
Views on SlideShare
522
Embed Views
10

Actions

Likes
0
Downloads
2
Comments
0

1 Embed 10

https://twitter.com 10

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Neohýbejte svůj web na mobil, začněte znovu Neohýbejte svůj web na mobil, začněte znovu Presentation Transcript

    • Neohýbejte svůj web na mobil, začněte znovu Dayilweb SK, 14. 11. 2012 By @soundake
    • http://www.sxc.hu/photo/1394368Dnes bych vám chtěl říct o tom, proč se věnovat návrhu pro mobilní zařízení, proč začít odzačátku a jaké benefity to bude mít pro vás a pro váš byznys.
    • Chtěl bych, abyste si z dnešního večera odnesli tři věci:
    • http://www.sxc.hu/photo/1368747 http://www.sxc.hu/photo/1368746S mobilní verzí začněte znovu, od začátku.
    • “You are great lover!”Návrh pro mobilní zařízení dokáže zlepšit uživatelskou zkušenost i na velkém webu.
    • http://www.flickr.com/photos/94588149@N00/4758676577/Návrh pro mobilní zařízení vám dokáže ušetřit či dokonce vydělat i nějaké peníze.
    • Předpokládám, že nemá cenu se ptát, zda tu někdo z vás má webovou stránku. Ale kolik z vásjí má přizpůsobenou mobilním zařízením?
    • Já začnu lehkou statistikou.
    • 1 038 000 000 chytrých telefonů http://www.comscore.com/Insights/Press_Releases/2012/11/comScore_Reports_September_2012_U.S._Mobile_Subscriber_Market_SharePět let po uvedení iPhonu a Androidu je na celém světě již přes 1 miliardu (1,038) chytrýchtelefonů, což je oproti loňskému roku nárůst o 46 procent.
    • US Smartphone Penetration 100 % 75 % Non-Smartphone Users 50 % 25 % Smartphone Users 0 % Prosinec 09 Červen 20120 Únor 2011 Říjen 2011 Říjen 2012 http://www.asymco.com/2012/11/05/the-late-smartphone-adopter-paradox/Jen v US již počet používaných smartphonů překročil 50 % hranici na společném trhu všechmobilních telefonů.
    • Jen pro porovnání.
    • 371 tisícNa světě se každý den narodí 371 tisíc dětí.
    • 371 tisíc 300 tisícBěhem toho se aktivuje 300 tisíc iOS zařízení
    • 300 tisíc 1,5 milionua 1,5 milionu zařízení s Androidem.
    • 2 000 000 prodáno každý den https://www.idc.com/getdoc.jsp?containerId=prUS23771812Dohromady včetně Windows Phone, Symbianem a Blackberry to dělá 2 miliony zařízeníchprodaných každý den.
    • 22 % Velká BritánieA ještě jedna věc. Možná trochu šokující. Ve Velké Británii 22% uživatelů internetu nikdynepoužilo běžný počítač. V US je to kolem 40 %. V asii a v africe dokonce 50% a více.
    • 22 % 40 % Velká USA BritánieA ještě jedna věc. Možná trochu šokující. Ve Velké Británii 22% uživatelů internetu nikdynepoužilo běžný počítač. V US je to kolem 40 %. V asii a v africe dokonce 50% a více.
    • 22 % < 50 % 40 % Velká Afrika USA Británie AsieA ještě jedna věc. Možná trochu šokující. Ve Velké Británii 22% uživatelů internetu nikdynepoužilo běžný počítač. V US je to kolem 40 %. V asii a v africe dokonce 50% a více.
    • Pojďme na to. Máte web. Každý z vás má jistě nějakou webovou stránku. Za těch několik letco jí máte pěkně narostla.
    • Máte web. Každý z vás má jistě nějakou webovou stránku. Za těch několik let co jí máte pěkněnarostla.
    • A teď jste se ode mě dozvěděli, že spousta uživatelů si jí nejspíš bude chtít prohlížet nanějakém tabletu či nedejbože chytrém telefonu. Co teď s tím?
    • Zaprvé. Necháte svůj web tak jak je, neboť ty telefony si to nějak přeberou.
    • Příkladem budiž sme.sk, kde zatím zřejmě mobilní verzi považují za zbytečnou a mobily zdáse ignorují úplně.
    • Druhým příkladem může být například apple.com, kde sice také nemají nějakou variantu prochytré telefony, ale na druhou stranu celý jejich web je přizpůsoben tak, aby se i na malýchobrazovkách dobře používal.
    • http://www.sxc.hu/photo/513359Druhá varianta. Uděláte speciální mobilní verzi, kde necháte veškerý obsah, jen to trochunamačkáte, aby se to vešlo.
    • Zase jeden příklad ze slovenska - zoznam.sk, kde mají speciální mobilní šablonu, která defacto obsahuje vše co velký web.
    • Ze zahraničí ukážu web Národního divadla v Praze, kde jsme použili tzv. responsivní design.
    • A pak je tu třetí varianta. Ta trochu těžší. Zkusíte se zamyslet a uděláte svůj mobilní webzgruntu znovu.Zkusme si říct, proč bychom to měli dělat znovu. Důvodů je samozřejmě více, ale povězme si odvou:
    • http://www.flickr.com/photos/8269775@N05/4341633116/Prostor.
    • 13” 15” 551 cm² 693 cm²Nejprodávanější monitory dneska jsou monitory o úhlopříčce 13 a 15 palců. Je to prostě proto,že notebooků už se dnes prodává více než desktopů. Displej na mém 13palcovém MacBookumá plochu zhruba 600cm2.
    • 3,5” 47 cm²Ovšem můj iPhone má plochu displeje pouze 47 cm2.
    • 7%To je pouhých 7% plochy obrazovky.
    • Na smartfounu tedy budete řešit jednoduchý problém - moc věcí a málo prostoru.
    • Flickr znáte? Služba pro sdílení fotek.
    • Jen v menu se skrývá přes 60 položek. Jak tohle sakra dostali do mobilu? Udělali jednoduchouvěc. Vyškrtali všechno co není potřeba a nechali jen to, co skutečně potřeba je. Jádro aplikace,to co lidé nejvíce používají, za čím tam chodí.
    • Mají tam těch položek 5.
    • Malý prostor je úžasné omezení pro každého designera, protože malý prostor vás donutízjednodušovat, donutí vás skutečně zapřemýšlet nad tím co prioritu má a co prioritu nemá.Sednout si, přemýšlet, škrtat, zjednodušovat.
    • http://www.flickr.com/photos/19743256@N00/2224073271/Zaměřit se na problém!
    • Antoine de Saint-ExuperyAntoine de Saint-Exupery řekl jednu geniální větu: "Dokonalosti je dosaženo, nikoliv když jižnelze nic víc přidat, ale když není již možné nic odebrat."
    • Vydělává penízePodívejme se na to z pohledu byznysu. Vy se díky tomu, že se při návrhu soustředíte na topodstatné, soustředíte tedy na to co, vám vlastně vydělává peníze. Ta služba, kterou nabízíte,produkt, který prodáváte, to je to co lidí vlastně u vás chtějí. A můžete v klidu zapomenout nabalast kolem. Nevyhazujte peníze za něco, co nikdo moc neocení.
    • Zkusme zajít ještě o kousíček dál. Na velký desktopový web.
    • Statefarm je americká pojišťovna.
    • Ještě v loňském roce vypadal jejich web nějak takto. Velký banner s bílým nečitelným textem,usměvavý pán, hromada divných obdélníků, v menu mraky věcí.
    • Menu Tab 1 Tab 2 Tab 3 Promo Tab 4 Tab 5 Box 1 Box 2 Box 3V SYMBIU toto šablonu nazýváme jako promo a tři boxy.
    • Pak udělali mobilní verzi. Na prvním místě - založení pojištění. Jádro jejich bysnysu. Vdruhém sledu nalezení agenta a hlášení škod.Pomoc v nouzi a pak nabídka dalších pojištění.5 věcí! Tj. nejčastější věci, které u nich uživatelé řeší.
    • A tuhle zkušenost oni aplikovali i na web. Na první místě sjednání po jištění, hned vedlekontakt a hlášení pojistné události. Pod tím nabídka dalších pojištění. Stejný pattern
    • Jeffrey ZeldmanSpíše perlička. Webový designer Jeffrey Zeldman zašel při návrhu svého nového webu ještě okrok dál. Vlastně zůstal v kroku prvním.Jeffrey Zeldman - A List Apart - Designing with Web Standards
    • Udělal svůj web Mobile Only. Taky způsob :)
    • 1:1
    • http://www.flickr.com/photos/73491156@N00/380316678/Důvod druhý - rychlost
    • Druhou věcí, se kterou se musíte na mobilu vypořádat je, krom malé obrazovky, že jsou tozařízení pomalá. Mají pomalejší připojení k Internetu, mají pomalejší vykreslování stránek (nékaždý má rychlý smartfon za 15 000 Kč, 600 Euro), mají pomalejší vykreslování Javascriptuatd. Tudíž, aby byla vaše webová stránka na mobilu použitelná, tak musí být v prvé řaděrychlá. Stránka se musí rychle načíst, musí se rychle vykreslit, všechny prvky, které na ní jsoumusí na uživatele reagovat bleskově.
    • Miller, R. B. (1968). Response time in man-computer conversational transactions. Proc. AFIPS Fall Joint Computer Conference Vol. 33, 267-277Protože použitelnost velmi souvisí s rychlostí, což už je známo přes 40 let.R.B.Miller - 1968 - Response time in man-computer conversational transactions
    • Speed is best feature http://pacepirate.tumblr.com/post/23988387164Dá se říct, že rychlost je ta nejlepší funkce, kterou svým uživatelům můžete dopřát. A jakmiledokážete optimalizovat vaší stránku na mobilním zařízení, představte si, jak úžasně rychlábude na uživatelově notebooku či stolním počítači.
    • http://www.flickr.com/photos/72296542@N00/382441387/Vaši uživatelé budou jednoduše nadšeni. A o to tu jde, ne?
    • “Mobile experiences fill the gaps while we wait. Nobody wants to wait while we wait.” - Mike Krieger, Co-founder InstagramLidé velmi často používají mobilní zařízení, když čekají a nikdo nechce čekat, když čeká.
    • http://www.flickr.com/photos/12836528@N00/6575053747/A zase to má vliv i na byznys.
    • 100ms zpoždění při vypisování výsledků vygeneruje ročně 1% ztrátu. Což je zhruba 200 milionů dolarů ročně. 400ms zpoždění výsledků sníží o 5-9% celkový provoz na stránkách. 500ms zpoždění snižuje provoz ve vyhledávači o 20%. 1s zpoždění výsledků snižuje příjem o 4%. 10% nejrychlejších uživatelů zůstává na stránkách o 50% déle než 10% uživatelů pomalých. Sources: slideshare.net/stubbornella/designing-fast-websites-presentation & slideshare.net/markstanton/speed-matters Studie za studií potvrzují, že nedostatečná rychlost vašeho webu vás může připravit o slušnépříjmy.Amazon - 100ms zpoždění při vypisování výsledků vygeneruje ročně 1% ztrátu. Což jezhruba 200 milionů dolarů ročně.Yahoo - 400ms zpoždění výsledků sníží o 5-9% celkový provoz na stránkáchGoogle - 500ms zpoždění snižuje provoz ve vyhledávači o 20%.Bing - 1s zpoždění výsledků snižuje příjem o 4%AOL 10% nejrychlejších uživatelů zůstává na stránkách o 50% déle než 10% uživatelůpomalých.
    • http://www.flickr.com/photos/92921037@N00/5532840143/Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se dvěma velkýmiproblémy.
    • Moment vlastně se třemi. Jsem na jeden hezký důvod zapomněl.
    • Kde uživatelé nejčastěji používají mobil pro přístup k internetu? Kdy navštíví právě ty vašewebové stránky?
    • Většinou je to v tramvaji, v autobuse či v autě. Tedy když lidé jedou z práce či do práce.
    • http://www.sxc.hu/photo/701461Dalším případem může být situace, kdy člověk někde čeká - na zastávce tramvaje, ve frontěna poště, v čekárně u doktora či na pražské magistrále :) To jsou případy, kdy návštěvnícivašich potřebují specifické informace.
    • http://img7.rajce.idnes.cz/d0701/5/5006/5006399_09658305445135137543d2c6bcdeab1a/images/nuselsky-most_stavka_09.jpgDalším případem může být situace, kdy člověk někde čeká - na zastávce tramvaje, ve frontěna poště, v čekárně u doktora či na pražské magistrále :) To jsou případy, kdy návštěvnícivašich stránek potřebují specifické informace.
    • Thing different!Tudíž, při návrhu webové stránky či aplikace musíte přemýšlet nejen o tom, jaké zařízení vášnávštěvník používá, ale také kde ho používá, za jaké situace. Co právě dělá. Protože né vždyho zajímají vaše tiskové zprávy, né vždy ho zajímá jaké ocenění jste dostali ve webovésoutěži, né vždy ho zajímá hromada flashových bannerů a navíc málokdy je to člověk z vašívlastní firmy.
    • http://www.flickr.com/photos/92921037@N00/5532840143/Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se třemi problémy: maláobrazovka, pomalé načítání stránek a místo. Jsou to dva problémy a zároveň skvělépříležitosti, jak vytvořit příjemnou a svižnou prezentaci či službu.
    • Když navrhujete weby pro mobilní zařízení, tak se musíte vyrovnat se třemi problémy: maláobrazovka, pomalé načítání stránek a místo. Jsou to dva problémy a zároveň skvělépříležitosti, jak vytvořit příjemnou a svižnou prezentaci či službu.
    • http://www.flickr.com/photos/92921037@N00/5532840143/Zapamatujte si tedy, že:
    • “Yes, I am...”Návrh pro mobilní zařízení dokáže zlepšit uživatelskou zkušenost i na velkém webu.Máte méně funkcí, které jsou ale zatraceně rychlé a vymazlené.
    • http://www.flickr.com/photos/94588149@N00/4758676577/Návrh pro mobilní zařízení vám dokáže ušetřit či dokonce vydělat i nějaké peníze.Zaměříte se na to, co vám peníze vydělává a kde jenom utrácíte.
    • http://www.flickr.com/photos/44083360@N00/6157683097/Občas jsou omezení super.Máte prostě méně věcí, o které se musíte starat. A naopak je může vyladit k dokonalosti.
    • http://www.flickr.com/photos/95572727@N00/4317572931/Až zítra ráno přijdete do práce můžete zkusit následující:
    • 1 Představte si svůj web na mobiluKoukněte se na váš web a představte si ho na mobilu.
    • 2 OptimalizujteZačněte ho optimalizovat. Ať hlediska funkcí, tak z hlediska rychlosti.
    • 3 Poznejte kontextZamyslete se nad tím, kdo a v jaké chvíli přistupuje na váš mobilní web.
    • To je vše.Díky
    • @soundakehttp://soundake.cz/ http://symbio.cz/