Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

M. Čevelíček Zlepší svůj web! - Jak optimalizujeme weby

29 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

M. Čevelíček Zlepší svůj web! - Jak optimalizujeme weby

  1. 1. Zlepši svůj web! Jak optimalizujeme weby Marek Čevelíček @mcevel (twitter)
  2. 2. Víc přemýšlet. Méně tvořit.
  3. 3. Základní potřeby ve webdesignu
  4. 4. Základní potřeby ve webdesignu
  5. 5. Je to špatně! Potřebujeme nový web.
  6. 6. Redesign × Optimalizace Jaký je v tom rozdíl?
  7. 7. 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.
  8. 8. 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í.
  9. 9. Lidi redesignují weby protože...
  10. 10. ● 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 :)
  11. 11. Jak postupovat při optimalizaci?
  12. 12. ● 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?
  13. 13. Co můžeme optimalizovat?
  14. 14. 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
  15. 15. Formátování
  16. 16. Formátování
  17. 17. Formátování
  18. 18. Font – řez, veliksot
  19. 19. Font – řez, veliksot
  20. 20. O nás
  21. 21. Struktura – obsah, rozsah
  22. 22. Struktura – obsah, rozsah
  23. 23. Výzva k akci
  24. 24. Výzva k akci
  25. 25. Testimony
  26. 26. Ukázky
  27. 27. Výhody
  28. 28. Výhody
  29. 29. BULLSHIT!
  30. 30. Hodnocení
  31. 31. Garance, ocenění, ujištění
  32. 32. 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í
  33. 33. Správné umístění skriptů
  34. 34. Analýza kódu
  35. 35. Analýza kódu
  36. 36. Analýza kódu
  37. 37. Velikost obrázků, komprese 3199 × 1975 px
  38. 38. Informační architektura ● Změna struktury podstránek v rámci webu ● Interní prolinkování (SEO boost) ● Menu – srozumitelnost, pravidla pro menu
  39. 39. Informační architektura
  40. 40. Informační architektura
  41. 41. Informační architektura
  42. 42. Menu
  43. 43. SEO (on-page) ● Titulky stránky ● H1 nadpisy - existence, obsah ● Meta tagy (description) ● Duplicitní obsah na webu ● Strukturovaná data
  44. 44. SEO (on-page)
  45. 45. SEO (on-page)
  46. 46. Filtrace produktů ● Srozumitelnost ● Správné volby filtrace, smysluplnost ● Inxedovatelnost (SEO)
  47. 47. Filtrace - srozumitelnost
  48. 48. Filtrace – správné volby
  49. 49. Skladem… nebo ne?
  50. 50. 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
  51. 51. Co vy vůbec potřebujete v těch datech?
  52. 52. Rozlišení obrazovky
  53. 53. Vstupní stránky
  54. 54. 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
  55. 55. Redesign × Optimalizace Nerozhodnete to sami. Nedává smysl poptávat redesign nebo optimalizaci - poptávejte řešení problému
  56. 56. „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.“
  57. 57. „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.
  58. 58. „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.“
  59. 59. 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.
  60. 60. 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
  61. 61. Vybrat si dobře dodavatele svého webu na poprvé.
  62. 62. Problém správný postup→
  63. 63. 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í
  64. 64. 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!
  65. 65. Web lze téměř vždy optimalizovat.
  66. 66. Weby, na které budete hrdí!

×