+ All Categories
Home > Retail > Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Date post: 09-Jan-2017
Category:
Upload: jan-kvasnicka
View: 7,369 times
Download: 2 times
Share this document with a friend
161
Nejčastější chyby při návrhu mobilního a responzivního webu Kvasnička Jan kvasnickajan.cz [email protected] @Jan_Kvasnicka
Transcript
Page 1: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Nejčastější chyby při návrhu mobilního a responzivního

webu

Kvasnička Jan

kvasnickajan.cz [email protected] @Jan_Kvasnicka

Page 2: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 3: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 4: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Bez praktického poznání by to nešlo

13 rozhovorů s developery

Více než 30 účastníků uživatelských testů

Rozhovory s odborníky v oboru

Zpětná vazba na Twitteru

Page 5: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

„Než začnete jakoukoliv optimalizaci webu, je nutné si uvědomit chování uživatelů“

Page 6: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 7: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 8: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

A nyní prakticky

Page 9: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

A nyní prakticky

Všechny ukázky jsou z českých webů

_______

Page 10: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

„Fakt, že se jedná o velkou firmu, nezaručuje, že jejich web je vytvořen bez chyb“

Page 11: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 12: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 13: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 14: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 15: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 16: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 17: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 18: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 19: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Zpracování navigace

Page 20: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 21: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 22: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 23: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

„Neřiďte se obecnými poučkami, ale opravdu měřte a testujte“

Page 24: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Navigace na pravé nebo levé straně?

Page 25: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 26: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 27: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Navigace a styl zobrazení

Page 28: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 29: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 30: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 31: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 32: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 33: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 34: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 35: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 36: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 37: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Dvě navigace na jednom webu

Page 38: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 39: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 40: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 41: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 42: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 43: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 44: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 45: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 46: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 47: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 48: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 49: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 50: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Pozor na orientaci v navigaci

Page 51: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 52: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 53: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 54: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Snažte se pochopit chování a potřeby zákazníků

Page 55: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 56: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

„Kde je k...a vyhledávání?“

Page 57: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 58: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 59: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 60: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 61: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 62: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 63: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 64: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 65: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Možnosti vyhledávání

Page 66: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 67: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 68: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 69: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 70: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 71: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Nezapomeňte na volání

Page 72: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 73: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 74: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 75: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Lákání na aplikaci

Page 76: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 77: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 78: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 79: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Pop-up okna

Page 80: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 81: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 82: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Ponechte možnost zobrazení desktopové verze

Page 83: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 84: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 85: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Pozor na jednoznačnost aktivních prvků

Page 86: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 87: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 88: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 89: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 90: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 91: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 92: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 93: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Pozor na používání štítků

Page 94: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 95: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Pozor na navyšování počtu kusů

Page 96: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 97: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 98: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 99: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 100: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 101: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 102: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Řazení

Page 103: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 104: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 105: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 106: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 107: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 108: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 109: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 110: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Stránkování

Page 111: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 112: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 113: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Jednoznačná konverze

Page 114: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 115: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 116: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 117: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Detail produktu a schovávání informací

Page 118: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 119: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 120: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 121: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 122: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 123: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 124: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 125: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Nejčastější výmluvy developerů

„Nevypadalo to pěkně, tak jsme to vypustili“

„Nevíme, jak to udělat, tak jsme to vypustili“

„Přišlo nám to zbytečné“

„Na mobilu se člověk chová jinak než na desktopu“

Page 126: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Nejčastější výmluvy developerů

„Nevypadalo to pěkně, tak jsme to vypustili“

„Nevíme, jak to udělat, tak jsme to vypustili“

„Přišlo nám to zbytečné“

„Na mobilu se člověk chová jinak než na desktopu“

„Pokud to nemá být na mobilu, mělo by to být na desktopu?“

Page 127: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Pozor, kam co schováte

Page 128: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 129: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Volba velikosti

Page 130: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 131: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 132: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 133: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Pozor na zpracování předkošíku

Page 134: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 135: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 136: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 137: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 138: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 139: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 140: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Copy má obrovský vliv

Page 141: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 142: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 143: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Chybová stránka

Page 144: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 145: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 146: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Jak spolehlivě zahltit návštěvníka

Page 147: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 148: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Co opravdu nepotěší

Page 149: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 150: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Vliv rychlosti načítání webu

Page 151: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 152: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Úkol pro vás

Page 153: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Odměna

Page 154: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

E-shop s dvěma hlavními kategoriemi

Cyklistika

Fitness

In-line bruslení

Outdoor a camping

Raketové sporty

Vodní sporty

Ostatní sporty

Sport

Domky a chaty

Grilování

Kamna

Nábytek a relax

Sekání a údržba trávníku

Skleníky

Ostatní

Bydlení

Page 155: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Závěrem

Page 156: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Shrnutí

Testujte a měřte

Nespoléhejte se jen na aplikace

Optimalizujte rychlost načítání webu

Neschovávejte obsah bezdůvodně

Nezapomínejte na neustálý vývoj a kontrolu

Page 157: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Doporučené nástroje pro optimalizaci

browserstack.com

saucelabs.com

xamarin.com

Page 158: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 159: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016
Page 160: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

„Rozšířené slide a další ukázky naleznete na mém blogu blog.kvasnickajan.cz“ Sledujte: @Jan_Kvasnicka

Page 161: Nejčastější chyby při návrhu mobilního a responzivního webu prakticky | WebExpo | 23.9.2016

Nenuťte uživatele přemýšlet!

kvasnickajan.cz [email protected] @Jan_Kvasnicka

Kvasnička Jan


Recommended