Trendy moderního web designu

1. TNPW2 2010/2011 02 – Moderní webdesign Mgr. Lukáš Vacek lukas.vacek@uhk.cz

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í

11. Obsah webu Musí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 jako komentář, posudek, rada nebo případová studie –> užitečné informace Obsah 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íl Jestliže po uživateli něco chcete, musíte mu za to taky něco nabídnout Nebuďte agresivní – uživatel je Váš důležitý partner Zásadní podmínky pro úspěšný web… * Plnit sliby Budovat vztah s uživatelem Poskytovat služby *) Maria Veloso – Web Copy That Sells… 2nd Editon; AMACOM 2009 4

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í

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?

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í

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í

40. Menší kód

41. Strukturovanější kód

42. Změna na jednom místě

43. Není třeba zasahovat do zdrojového kódu stránek

44. Rozdílné pořadí prvků v kódu a na stránce, logický vzhled v lineárních prohlížečích

45. Dá se tím udělat totéž, co tabulkami

46. Validita

47. Je to módní!http://www.jakpsatweb.cz/clanky/skutecne-vyhody-css-layoutu.html

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

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

51. Výhody CSS layoutu

52. SEO

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

54. Rady a doporučení

56. 16

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

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

60. Výhody CSS layoutu

61. SEO

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

63. Rady a doporučení

65. Není sladěna barva pozadí a písma –> kontrola http://www.checkmycolours.com/

66. Nevhodná písma ve stránce, včetně velikosti – používejte relativní jednotky a dostatečně velké čitelné písmo

67. Velikost stránky, počet obrázků (objektů) – spíše desítky KB, v MB je to špatně i dnes!

68. Chybí alternativní popis obrázků a objektů s obsahem (alt, title)

69. Chybí definice rozměrů obrázků

70. Různé výchozí hodnoty pro vlastnosti prvků v prohlížečích –> řeší to reset CSS

72. Menu na stránkách není na stejném místě

73. Chybí údaj o aktualizaci obsahu (měl by být aspoň na úvodní stránce nebo RSS)

74. Na stránce jsou odkazy se stejným textem, které odkazují na různé dokumenty

75. Chybí šablona pro tisk!

76. Stejný element title na všech stránkách –> má negativní dopad i na SEO

77. Chybně uvedené (nebo neuvedené) kódování stránky

79. Nedostatečná analýza požadavků a cílů

80. Nepoužívají se prototypy

81. Nesleduje se způsob, jak uživatelé používají prototyp – interaktivní designNestandardní ovládací prvky GUI Nedůslednost v používání pojmů – stejné jméno pro stejnou věc na stejném místě Intuitivní použití prvků na stránce – není jasné, co má uživatel dělat Chybí zpětná vazba pro uživatele – ten neví, co se na stránce právě děje Nesrozumitelné chybové zprávy – obecná chyba, null pointer exception apod. Vícenásobné dotazování na stejné informace Nepoužívání výchozích (defaultních) hodnot Přístup uživatelů bez kontextu Nejasnost použití nabízených informací nebo služeb Centristické vlastnosti systémů – vnitřní pohled systému na data neodpovídá potřebám uživatelů dané problémové oblasti

82. 10 nejčastějších chyb web designu – 2005 21 Jakob Nielsen – „TopTen Web Design Mistakes of 2005“ http://www.useit.com/alertbox/designmistakes.html Čitelnost textu Nestandardní odkazy Flash (Flash v navigaci, zbytečná flashováintra) Obsah není psán pro web Špatné vyhledávání Nekompatibilita prohlížečů Těžkopádné a složité formuláře Chybějící informace o firmě, absence kontaktu Layouty s pevnou šířkou Neadekvátní zvětšování fotek http://petr.vaclavek.com/article/293/jakob-nielsen-10-nejvetsich-chyb-webdesignu-2005

83. 10 nejčastějších chyb web designu – 2007 22 http://www.useit.com/alertbox/9605.html Špatné vyhledávání na webu On-line čtení PDF souborů Rozlišení barev u navštívených dotazů Nepřehledný text na stránkách Pevná velikost písma Nevhodné titulky stránek Cokoliv co připomíná reklamu Nedodržování konvencí pro design Otevírání nových oken v prohlížeči Uživatelské dotazy bez odpovědi.

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

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

87. Výhody CSS layoutu

88. SEO

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

90. Rady a doporučení

94. Minimální a maximální šířka elementu Minimální (maximální) šířku elementů lze v CSS definovat pomocí vlastností min-width (resp. max-width). Starší verze prohlížeče Internet Explorer (do verze 6) uvedené vlastnosti nepodporují! Toto omezení je možné obejít vložením elementu s pevnou šířkou (u min-width), stylem v podmíněném komentáři nebo je nutné použít tzv. expressions. 28 min-width: 770px; width:expression(document.body.clientWidth < 800? "770px": "auto" );

95. Definice písma v CSS Při definování písma v CSS je nutné vždy uvést na konci definice tzv. generickou skupinu, která se použije v případě, když na počítači uživatele není k dispozici žádné písmo uvedené v předcházejícím výčtu. Víceslovné názvy písem obalujte do uvozovek nebo apostrofů! 29 font-family: Verdana, "Geneva CE", lucida, sans-serif; http://www.jakpsatweb.cz/css/font-family.html http://www.pixy.cz/pixylophone/2003_06_archiv.html#1054764639 http://www.dgx.cz/tools/fonts/ (fontotéka s náhledy v různých OS)

96. Používání výplňového textu při návrhu Při návrhu layoutu webové stránky je možné použít LoremIpsum – tzv. výplňový text, ve kterém rozložení písmen ve větách zhruba odpovídá psanému textu. Existují generátory pro LoremIpsum, buď v on-line podobě nebo jsou součástí lepších editorů. http://www.pixy.cz/pixylophone/2004_01_archiv.html#1074036428 http://wellstyled.com/tools/dummy-cz/ 30 LoremipsumdolorsitametconsectetuerAliquamPellentesquepretiumporttitorQuisque. Atet ante interdumtristiquejustotinciduntPhasellus elit AeneanCurabitur. Tortor semper Suspendissenibh semper magnaac non dolorscelerisqueNulla. RisusFuscemetussollicitudin id venenatisateulacuscursus In.

99. Horizontální zarovnání bloku na střed CSS vlastnost text-align by měla být prohlížečem použita pouze u řádkových prvků! Internet Explorer (včetně IE7) ji ale chybně aplikuje také na blokové elementy. Horizontální vycentrování blokového elementu se provádí pomocí vlastnosti margin: 0 auto. Vzhledem k tomu, že Internet Explorer (do IE6) tuto vlastnost naopak nepodporuje, je nutné si vypomoci jeho předchozí chybou. 33 Příklad: 02-02-centrovani.html body{ padding: 0; margin: 0; background-color: white; color: black; font: 1em sans-serif; text-align: center; } #page { margin: 0 auto; border: solid 1px black; padding: 0.5em; width: 80%; text-align: left; }

100. Obtékání obrázku Zarovnání obtékaného obrázku k okraji se v CSS provádí pomocí vlastnosti float. Tato vlastnost však vyjme obrázek z normálního toku dokumentu, proto je třeba použít tzv. čistící prvek. 34 Příklad: 02-03-obtekani.html img{float: left;margin: 0.5em;} .clean {clear: both; border: 0; margin: 0; padding: 0; heigh: 1px;} <div id="page"> <h1>Obtékání obrázků na stránce</h1> <p><imgsrc="./images/obrazek.jpg" ... />Loremipsum... </p> <div class="clean" /> </div>

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

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

104. Výhody CSS layoutu

105. SEO

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

109. http://www.blindfriendly.cz/

110. http://www.sovavsiti.cz/cynthia.html - testování přístupnosti

111. http://www.checkmycolours.com/

115. Staníček, Petr a kol. – CSS Hotová řešení, ComputerPress 2006

116. Prokop, Marek – CSS kaskádové styly pro webdesignéry, Mobil Media 2003

117. Krug, Steve – Web design: Nenuťte uživatele přemýšlet!, 2. aktualizované vydání, ComputerPress 2006

118. Špinar, David – Tvoříme přístupné webové stránky, ZonerPress 2004

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

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

122. Výhody CSS layoutu

123. SEO

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

125. Rady a doporučení

126. Internet, doporučená literatura