Trendy moderního web designu

1. TNPW22010/201102 – Moderní webdesignMgr. Lukáš Vaceklukas.vacek@uhk.cz

2. 2Agenda2Trendy moderního web designu

3. Co by měly splňovat WWW stránky?

4. Používání webových standardů

5. Výhody CSS layoutu

6. SEO

7. Nejčastější chyby při návrhu WWW stránek

8. Rady a doporučení

9. Internet, doporučená literaturaTrendy moderního web designuInformační architektura Hledání takových uspořádání a forem informací, které umožňují jejich nejefektivnější využití.Použitelnost (usability)Přímo podmiňuje úspěšnost, s jakou uživatel dosáhne svého cíle.Přístupnost (accessibility)Správná funkčnost stránek v různých zařízeních na různých platformách,

10. Bezbariérový přístup pro osoby s různou povahou i mírou zdravotního postižení.Důraz na ekonomickou návratnost a efektivituModerní metody tvorby založené na maximálně jednoduchém, standardizovaném a modulárním kódu stránek (striktní XHTML, CSS, DOM).3

11. Obsah webuMusíte návštěvníky zaujmout! Teprve potom z nich budou uživatelé… Naprostá většina návštěvníků Vašeho webu (až 95 %) Vám stejně uteče jinam Obsah NESMÍ vypadat jako reklama, ale jakokomentář, posudek, rada nebo případová studie –> užitečné informaceObsah MUSÍ být přehledný!Použijte jednoduchý, přehledný design s intuitivní navigací bez slepých uliček…Dejte jasně najevo, co nabízíte! Každá stránka musí mít svůj cílJestliže po uživateli něco chcete, musíte mu za to taky něco nabídnoutNebuďte agresivní – uživatel je Váš důležitý partnerZásadní podmínky pro úspěšný web… *Plnit slibyBudovat vztah s uživatelemPoskytovat služby*) Maria Veloso – Web Copy That Sells… 2nd Editon; AMACOM 20094

12. 5Agenda2Trendy moderního web designu

13. Co by měly splňovat WWW stránky?

14. Používání webových standardů

15. Výhody CSS layoutu

16. SEO

17. Nejčastější chyby při návrhu WWW stránek

18. Rady a doporučení

19. Internet, doporučená literaturaCo by měly splňovat WWW stránky?Existuje celá řada různých úhlů pohledu na tuto problematiku. Nejčastěji se zohledňují:Použité technologie a standardyPřístupnost, použitelnostInformační architekturaAktuální „módní“ trendy (např. barevné palety, Flash, Ajax, vše co je in)Jakékoliv jiné metodiky, které se zrovna někomu hodí Tyto různé pohledy se velmi často prolínají.V žádném případě se nedá říct, že existuje jediný všeobecně uznávaný standard!Hodně populární jsou dnes např. pohledy z hlediska:Uživatele a jeho potřeb (Steve Krug)Používání webových standardů (Russ Weakly)6

20. Co by měly splňovat WWW stránky? (SteveKrug) – I.7SteveKrug – Web design – Nenuťte uživatele přemýšlet, ComputerPress 2003, 2006Vytvořte jasnou vizuální hierarchiiVztah mezi objekty na stránce, jejich souvislost a význam… Uživatelé stránky nečtou, většinou je pouze prohlížejí. Umožněte jim to!Rozdělte stránky na jasně definované oblastiUmožněte uživateli rychle se zorientovat (menu, novinky, titulek…)Dejte jasně najevo, na co lze na stránce klepnoutBarevné a jednoznačné odlišení URL odkazů od ostatních prvků.Potlačte informační šumPřílišné zahlcení uživatele informacemi je kontraproduktivní.Vynechejte zbytečná slova!Co by měly splňovat WWW stránky? (SteveKrug) – II.8Vytvořte jasnou a srozumitelnou navigaciUživatel musí mít na každé stránce možnost poznat, kde se právě nachází a kam se odtud může dostat.Odpovězte návrhem WWW stránek uživateli na jeho nejčastější otázky:Co to je?

21. Co mi nabízejí?

22. Co tady můžu dělat?

23. Proč bych zde měl zůstat a nejít někam jinam?

24. Kde mám začít?9Agenda2Trendy moderního web designu

25. Co by měly splňovat WWW stránky?

26. Používání webových standardů

27. Výhody CSS layoutu

28. SEO

29. Nejčastější chyby při návrhu WWW stránek

30. Rady a doporučení

31. Internet, doporučená literaturaPoužívání webových standardů – I.10Dodržování standardů není cíl, ale prostředek k jeho dosažení…

32. Jejich dodržením se vyhnete celé řadě možných problémůRussWeakley – Web standards – more than just 'table-free sites'http://www.maxdesign.com.au/presentation/checklist.cfmKvalita kódu Korektní Doctype, kódování, validita, strukturovaný kód, funkční odkazy, rychlost stahování/načítání, chyby v JavaScriptu...Stupeň oddělení formy od obsahuPoužití CSS pro prezentační prvky...Přístupnost pro uživateleAlternativní popisky, relativní jednotky, možnost zvětšení, přístupné formuláře a tabulky, kontrastní barvy, popisné odkazy...Používání webových standardů – II.11Přístupnost pro zařízeníFunkčnost v moderních i starších verzích prohlížečů, přístupnost při vypnuté podpoře CSS, obrázků, skriptů, podpora pro tisk, další zařízení, velikost okna prohlížeče... Základní použitelnostJasná vizuální hierarchie, srozumitelná a konzistentní navigace, kontaktní stránka, mapa webu, podtržené a barevně odlišené odkazy, možnosti vyhledávání, odkaz na titulní stránku...Správa webuPodoba URL, chybová stránka...12Agenda2Trendy moderního web designu

33. Co by měly splňovat WWW stránky?

34. Používání webových standardů

35. Výhody CSS layoutu

36. SEO

37. Nejčastější chyby při návrhu WWW stránek

38. Rady a doporučení