Hlavně ten web nedělej znovu! Leda že by ses chtěl zbavit peněz. 100% praktická přednáška, ze které odejdete s webem na steroidech. A ani vás to nebude moc bolet. Pro lidi, kteří mají weby nebo plánují nový web.

1. Zlepši svůj web!
Jak optimalizujeme weby
Marek Čevelíček
@mcevel (twitter)

2. Víc přemýšlet.
Méně tvořit.

5. Základní potřeby
ve webdesignu

6. Základní potřeby
ve webdesignu

7. Je to špatně!
Potřebujeme nový web.

8. Redesign × Optimalizace
Jaký je v tom rozdíl?

9. Redesign
→ Jdeme dělat úplně nový web
Redesign bude stát logicky zásadně víc.
Děláte to vše znovu.
Nemáte jistotu, že se to povede udělat líp.

10. Optimalizace
→ Jdeme pracovat se současným webem
Analyzujete kritická místa a jdete je zlepšit.
Je to levnější.
Rychle si ověříte, jestli změny fungují.

11. Lidi redesignují weby protože...

12. ●
Nelíbí se nám grafika
●
Dělal to předchozí markeťák, všechno je tam špatně
●
Je to pomalé
●
Špatně se to ovládá
●
Je tam starý obsah
●
Neprodává nám to
●
Změnil se náš byznys a jsme teď jinde
●
Navrhl nám to programátor ve firmě
●
Technická nekompatibilita, nemožnost napojení
●
Měníme dodavatele webu
●
Potřebujeme utratit peníze :)

13. Jak postupovat při optimalizaci?

14. ●
Pochopit, co je špatně
●
Hypotézy - možné problémy
●
Ověříme si fakta - data, mousetracking, dotazník, ...
●
Možná řešení Rizika × Dopad→
●
Prioritizace Náročnost × Důležitost→
●
Plán práce - čím začneme, jaký je postup
●
Jak vyhodnotíme, jestli řešení funguje
●
Je to vůbec řešitelné pomocí webu?

15. Co můžeme optimalizovat?

16. Obsah webu
●
Formátování - nadpisy, struktura, odkazy, font, řádkování
●
Změny obsahu - výzva k akci, redukce obsahu (20 %),
přeskupení obsahu
●
Doplnění obsahu - testimony, reference, ukázky, záruky a
garance

17. Formátování

18. Formátování

19. Formátování

20. Font – řez, veliksot

21. Font – řez, veliksot

22. O nás

23. Struktura – obsah, rozsah

24. Struktura – obsah, rozsah

25. Výzva k akci

26. Výzva k akci

27. Testimony

28. Ukázky

29. Výhody

30. Výhody

31. BULLSHIT!

32. Hodnocení

33. Garance, ocenění, ujištění

34. Rychlost webu
●
Optimalizace kódu (frontend) - správné umístění skriptů,
neblokující načítání zdrojů, komprese kódu
●
Odstranění nepotřebných pluginů (Wordpress je tím
pověstný)
●
Optimalizace obrázků - zmenšení, komprese, odstranění

35. Správné umístění skriptů

36. Analýza kódu

37. Analýza kódu

38. Analýza kódu

39. Velikost obrázků, komprese
3199 × 1975 px

40. Informační architektura
●
Změna struktury podstránek v rámci webu
●
Interní prolinkování (SEO boost)
●
Menu – srozumitelnost, pravidla pro menu

41. Informační architektura

42. Informační architektura

43. Informační architektura

44. Menu

45. SEO (on-page)
●
Titulky stránky
●
H1 nadpisy - existence, obsah
●
Meta tagy (description)
●
Duplicitní obsah na webu
●
Strukturovaná data

46. SEO (on-page)

47. SEO (on-page)

48. Filtrace produktů
●
Srozumitelnost
●
Správné volby filtrace, smysluplnost
●
Inxedovatelnost (SEO)

49. Filtrace - srozumitelnost

50. Filtrace – správné volby

51. Skladem… nebo ne?

52. Responzivita
●
Kolik lidí máte z mobilu?
●
Rozlišení obrazovek
●
Kontrola veškerého obsahu na mobilu
●
Co bude vidět a co skryjeme
●
Mobile first přístup – výhody
●
Rychlost na mobilu – animace, výkon CPU
●
Použitelnost na mobilu
●
Menu – ovládání a srozumitelnost

53. Co vy vůbec potřebujete
v těch datech?

54. Rozlišení obrazovky

55. Vstupní stránky

56. Redesign volíme když
●
Web má problémy v mnoha oblastech současně
●
Blokující problém - není jej možné vyřešit optimalizací a
je zásadní
●
Technické řešení - vícejazyčnost, nemožnost propojení
webu na důležitý systém
●
Cena redesignu se blíží ceně za optimalizaci
●
Už to nemůže být horší velmi špatný stav kódu,→
neumožňuje optimalizaci, bezpečnostní díry, špatný kód a
programátor zdrhnul

57. Redesign × Optimalizace
Nerozhodnete to sami.
Nedává smysl poptávat redesign nebo optimalizaci -
poptávejte řešení problému

58. „Chtěli bychom redesign webu XY. Priority jsou zlepšit
grafiku, použít open-source CMS, mít web responzivní.
Jinak to bude stejné, jako ten současný včetně obsahu
a fotek. Prosím o cenovou nabídku.“

59. „Chtěli bychom redesign webu XY. Priority jsou zlepšit
grafiku, použít open-source CMS, mít web responzivní.
Jinak to bude stejné, jako ten současný včetně obsahu
a fotek. Prosím o cenovou nabídku.“
Ale jistě, beze všeho.
Vždycky se najde někdo, kdo vám nabídne
přesně to, co poptáváte.

60. „Web nám nepřináší objednávky. Máme nějaké
domněnky, kde by mohl být problém. Rádi bychom
s vámi probrali, co můžeme zlepšit.“

61. Změna dodavatele webu
●
Nikdo nechce pracovat s cizím kódem
●
Neznámé riziko poruch, ručení za úpravy, výpadky, opravy,
ztrátu objednávek, únik dat
●
Týká se větších webů na míru, e-shopy, aplikace, ...
●
Změna dodavatele u velkého webu je největší hrůza, jakou
si můžete představit.

62. Open-source?!
●
Wordpress a jiné free redakční systémy
●
Každý kód můžete napsat tak, že se v něm nikdo nevyzná
●
Nehodí se pro všechny projekty
●
Nutno zvážit

63. Vybrat si dobře dodavatele svého
webu na poprvé.

64. Problém správný postup→

65. Problém správný postup→
●
Nelíbí se nám vzhled – změna šablony, úpravy grafiky
●
Předchozí markeťák to dělal špatně - co je tam špatně? Lze to
změnit? Jak závažný je to problém?
●
Je to pomalé - optimalizace kódu
●
Špatně se to ovládá - návrh změny, náročnost zpracování

66. Problém správný postup→
●
Obsahové změny – můžeme lépe formátovat obsah?
●
Neprodává nám to - kde je problém a jak to vyřešit?
●
Náš byznys se změnil - můžeme provést odpovídající změny na
současném webu?
●
Technická nekompatibilita - pravděpodobně redesign
●
Navrhl nám to programátor ve firmě – Oh, God!
●
Měníme dodavatele webu - jak kdy
●
Máme na to a chceme to – Bon voyage!

67. Web lze téměř vždy
optimalizovat.

68. Weby, na které budete hrdí!