TNPW22010/201102 – Moderní webdesign

Mgr. Lukáš Vaceklukas.vacek@uhk.cz

2

• Trendy moderního web designu• Co by měly splňovat WWW stránky?• Používání webových standardů• Výhody CSS layoutu• SEO• Nejčastější chyby při návrhu WWW stránek• Rady a doporučení• Internet, doporučená literatura

Agenda

2

3

Trendy moderního web designu

1. Informační architektura • Hledání takových uspořádání a forem informací, které umožňují jejich nejefektivnější

využití.

2. Použitelnost (usability)• Přímo podmiňuje úspěšnost, s jakou uživatel dosáhne svého cíle.

3. Přístupnost (accessibility)• Správná funkčnost stránek v různých zařízeních na různých platformách,• Bezbariérový přístup pro osoby s různou povahou i mírou zdravotního postižení.

4. Důraz na ekonomickou návratnost a efektivitu• Moderní metody tvorby založené na maximálně jednoduchém, standardizovaném

a modulárním kódu stránek (striktní XHTML, CSS, DOM).

4

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

5

Trendy moderního web designu• Co by měly splňovat WWW stránky?• Používání webových standardů• Výhody CSS layoutu• SEO• Nejčastější chyby při návrhu WWW stránek• Rady a doporučení• Internet, doporučená literatura

Agenda

2

6

Co 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 standardy▫ Přístupnost, použitelnost▫ Informační architektura▫ Aktuá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)

7

Co by měly splňovat WWW stránky? (Steve Krug) – I.

1. Vytvořte jasnou vizuální hierarchii• Vztah 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!

2. Rozdělte stránky na jasně definované oblasti• Umožněte uživateli rychle se zorientovat (menu, novinky, titulek…)

3. Dejte jasně najevo, na co lze na stránce klepnout• Barevné a jednoznačné odlišení URL odkazů od ostatních prvků.

4. Potlačte informační šum• Přílišné zahlcení uživatele informacemi je kontraproduktivní.

Vynechejte zbytečná slova!

Steve Krug – Web design – Nenuťte uživatele přemýšlet, Computer Press 2003, 2006

8

Co by měly splňovat WWW stránky? (Steve Krug) – II.

5. Vytvořte jasnou a srozumitelnou navigaci• Už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.

6. Odpovězte návrhem WWW stránek uživateli na jeho nejčastější otázky:

• Co to je?• Co mi nabízejí?• Co tady můžu dělat?• Proč bych zde měl zůstat a nejít někam jinam?• Kde mám začít?

9

Trendy moderního web designu Co by měly splňovat WWW stránky?• Používání webových standardů• Výhody CSS layoutu• SEO• Nejčastější chyby při návrhu WWW stránek• Rady a doporučení• Internet, doporučená literatura

Agenda

2

10

Používání webových standardů – I.• Dodržování standardů není cíl, ale prostředek k jeho dosažení…• Jejich dodržením se vyhnete celé řadě možných problémů

Russ Weakley – Web standards – more than just 'table-free sites' http://www.maxdesign.com.au/presentation/checklist.cfm

1. Kvalita kódu • Korektní Doctype, kódování, validita, strukturovaný kód, funkční odkazy, rychlost

stahování/načítání, chyby v JavaScriptu...

2. Stupeň oddělení formy od obsahu• Použití CSS pro prezentační prvky...

3. Přístupnost pro uživatele• Alternativní popisky, relativní jednotky, možnost zvětšení, přístupné formuláře

a tabulky, kontrastní barvy, popisné odkazy...

11

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

4. Pří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...

5. Základní použitelnost• Jasná 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...

6. Správa webu• Podoba URL, chybová stránka...

12

Trendy moderního web designu Co by měly splňovat WWW stránky? Používání webových standardů• Výhody CSS layoutu• SEO• Nejčastější chyby při návrhu WWW stránek• Rady a doporučení• Internet, doporučená literatura

Agenda

2

13

Výhody CSS layoutu

• Stránky se zobrazují rychleji (u tabulek se čeká na celý obsah!)• Menší kód• Strukturovanější kód• Změna na jednom místě• Není třeba zasahovat do zdrojového kódu stránek• Rozdílné pořadí prvků v kódu a na stránce, logický vzhled v lineárních prohlížečích• Dá se tím udělat totéž, co tabulkami• Validita• Je to módní!

http://www.jakpsatweb.cz/clanky/skutecne-vyhody-css-layoutu.html

14

Trendy moderního web designu Co by měly splňovat WWW stránky? Používání webových standardů Výhody CSS layoutu• SEO• Nejčastější chyby při návrhu WWW stránek• Rady a doporučení• Internet, doporučená literatura

Agenda

2

15

SEO (Search Engine Optimalization)

SEO – Optimalizace stránek pro vyhledávače (Google, ...)

1. Oddělte obsah od formy2. Nepodceňujte sílu tagu title3. Vhodné nadpisy, polovina úspěchu4. Mapa webu, pastva pro vyhledavače5. Inteligentní odkazy, tahák pro návštěvníky6. Uvítací text s klíčovými slovy, dvě mouchy jednou ranou! 7. Přívětivé adresy mají rádi návštěvníci i vyhledavače8. Návštěvník je důležitější, než optimalizace9. Lež má krátké nohy

Článek 9 tipů k vylepšení on-page faktorů (Vít Dlouhý, DlouhýWeb, 18. 1. 2004)

http://seo-servis.cz/source-zdrojovy-kod/ http://seo.webber.cz/ http://wiki.tvorime.net/Základy_SEO

16

17

Trendy moderního web designu Co by měly splňovat WWW stránky? Používání webových standardů Výhody CSS layoutu SEO• Nejčastější chyby při návrhu WWW stránek• Rady a doporučení• Internet, doporučená literatura

Agenda

2

18

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

• Použita nevhodná barva pozadí, resp. není definována vůbec• Není sladěna barva pozadí a písma –> kontrola http://www.checkmycolours.com/ • Nevhodná písma ve stránce, včetně velikosti – používejte relativní jednotky a dostatečně

velké čitelné písmo• Velikost stránky, počet obrázků (objektů) – spíše desítky KB, v MB je to špatně i dnes!• Chybí alternativní popis obrázků a objektů s obsahem (alt, title)• Chybí definice rozměrů obrázků• Různé výchozí hodnoty pro vlastnosti prvků v prohlížečích –> řeší to reset CSS• Rozlišení stránky 800*600, resp. 1024*768 –> dnes čím dál vyšší rozlišení

19

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

• Chybí alternativní navigace, mapa webu, drobečková navigace apod.• Menu na stránkách není na stejném místě• Chybí údaj o aktualizaci obsahu (měl by být aspoň na úvodní stránce nebo RSS)• Na stránce jsou odkazy se stejným textem, které odkazují na různé dokumenty• Chybí šablona pro tisk!• Stejný element title na všech stránkách –> má negativní dopad i na SEO• Chybně uvedené (nebo neuvedené) kódování stránky• U CSS vlastností definujících rozměry chybí jednotky

20

Nejčastějších chyby v designu webových aplikacíhttp://www.useit.com/alertbox/application-mistakes.html (Jakob Nielsen)• Obecné chyby ve fázi návrhu designu webu

▫ Nedostatečná analýza požadavků a cílů▫ Nepoužívají se prototypy▫ Nesleduje se způsob, jak uživatelé používají prototyp – interaktivní design

1. Nestandardní ovládací prvky GUI 2. Nedůslednost v používání pojmů – stejné jméno pro stejnou věc na stejném místě3. Intuitivní použití prvků na stránce – není jasné, co má uživatel dělat4. Chybí zpětná vazba pro uživatele – ten neví, co se na stránce právě děje5. Nesrozumitelné chybové zprávy – obecná chyba, null pointer exception apod.6. Vícenásobné dotazování na stejné informace7. Nepoužívání výchozích (defaultních) hodnot8. Přístup uživatelů bez kontextu9. Nejasnost použití nabízených informací nebo služeb10. Centristické vlastnosti systémů – vnitřní pohled systému na data neodpovídá potřebám

uživatelů dané problémové oblasti

21

10 nejčastějších chyb web designu – 2005Jakob Nielsen – „Top Ten Web Design Mistakes of 2005“http://www.useit.com/alertbox/designmistakes.html

1. Čitelnost textu2. Nestandardní odkazy3. Flash (Flash v navigaci, zbytečná flashová intra)4. Obsah není psán pro web5. Špatné vyhledávání6. Nekompatibilita prohlížečů7. Těžkopádné a složité formuláře8. Chybějící informace o firmě, absence kontaktu9. Layouty s pevnou šířkou10. Neadekvátní zvětšování fotek

http://petr.vaclavek.com/article/293/jakob-nielsen-10-nejvetsich-chyb-webdesignu-2005

22

10 nejčastějších chyb web designu – 2007http://www.useit.com/alertbox/9605.html

1. Špatné vyhledávání na webu2. On-line čtení PDF souborů3. Rozlišení barev u navštívených dotazů4. Nepřehledný text na stránkách5. Pevná velikost písma6. Nevhodné titulky stránek7. Cokoliv co připomíná reklamu8. Nedodržování konvencí pro design9. Otevírání nových oken v prohlížeči10. Uživatelské dotazy bez odpovědi.

23

Trendy moderního web designu Co by měly splňovat WWW stránky? Používání webových standardů Výhody CSS layoutu SEO Nejčastější chyby při návrhu WWW stránek• Rady a doporučení• Internet, doporučená literatura

Agenda

2

24

Pojmenování souborů

• Základní věc!• V názvech souborů nepoužívejte diakritiku a mezery!• Dejte si pozor na velikost písmen v názvech, na straně web serveru jsou některé

platformy Case Sensitive!• V relativních odkazech je vhodné používat unixovou konvenci...

<link rel="stylesheet" href="test.css" type="text/css" />

<link rel="stylesheet" href="./test.css" type="text/css" />

25

Režimy zobrazování stránek v prohlížeči

• Webové prohlížeče určují podle nastavení parametrů DTD a DOCTYPE způsob, jakým budou zobrazovat různé verze (X)HTML.

• Jsou dva režimy zobrazení – standardní a tzv. quirk režim.▫ Standardní režim – snaha o maximální dodržování standardů,▫ Quirk režim – snaha o kompatibilitu.

• Pokud chcete u aktuálně zobrazované stránky zjistit, v jakém režimu je renderována, vložte do adresní řádky prohlížeče následující příkaz v JavaScriptu:

javascript:alert(document.compatMode)

• Pomůcka: Rozšíření Web Developer Toolbar (pro Mozilla Firefox) má ikonu detekující režim renderování přímo v hlavním panelu.

http://wellstyled.com/html-doctype-and-browser-mode.html http://www.jakpsatweb.cz/css/mody-prohlizecu.html

26

Odsazení obsahu stránky

• Různé prohlížeče mají různé výchozí hodnoty pro odsazení obsahu stránky od okraje prohlížeče.

• Lze řešit použitím blokového elementu div, do kterého se vloží celý obsah stránky.• Uvedenému elementu div se pak v CSS nadefinují příslušné hodnoty pro odsazení

obsahu – margin a padding.

Příklad: 02-01-odsazeni.html<body> <div id="page"> obsah... </div></body>

• Komplexně řeší problematiku výchozích nastavení CSS vlastností v prohlížečích různé frameworky… http://zdrojak.root.cz/clanky/css-frameworky-pro-masy-dil-prvni/

27

Alternativní styly pro různé prohlížeče

• V případě, že prohlížeč nepodporuje některou z vlastností CSS, je možné to obejít použitím alternativního stylu, který to bude ošetřovat.

• K tomu se hodí použít podmíněné komentáře, je to validní řešení bez nutnosti používat CSS hacky!

<link rel="stylesheet" type="text/css" href="./default.css" /><!--[if IE]> <link rel="stylesheet" type="text/css" href="./default-ie.css"/> <![endif]-->

http://www1.mraveniste.org/weblog/2006/03/16-msie-komentare.htmlhttp://www.dgx.cz/trine/item/kouzlo-s-podminenym-komentarem

28

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.

min-width: 770px;width:expression(document.body.clientWidth < 800? "770px": "auto" );

29

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ů!

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)

30

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 Lorem Ipsum – 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 Lorem Ipsum, buď v on-line podobě nebo jsou součástí lepších editorů.

http://www.pixy.cz/pixylophone/2004_01_archiv.html#1074036428http://wellstyled.com/tools/dummy-cz/

Lorem ipsum dolor sit amet consectetuer Aliquam Pellentesque pretium porttitor Quisque. At et ante interdum tristique justo tincidunt Phasellus elit Aenean Curabitur. Tortor semper Suspendisse nibh semper magna ac non dolor scelerisque Nulla. Risus Fusce metus sollicitudin id venenatis at eu lacus cursus In.

31

Matrjoška, boxmodel

• Prohlížeč Internet Explorer někdy chybně interpretuje vlastnost width u blokových elementů!

http://www.pixy.cz/pixylophone/2003_08_archiv.html

obsahwidth

Internet Explorer

• Řešením je použití obalovacího elementu div, který bude mít definovaný požadovaný rozměr width a hodnoty padding a border budou nastaveny na 0.

• Do tohoto elementu pak vložte element s obsahem, kterému už můžete nastavit padding a border podle potřeby.

32

100% šířka tabulky

• V některých prohlížečích je u tabulek problematicky implementována vlastnostwidth: 100%;

• Lze to vyřešit použitím obalovacího elementu div pro tabulku, který má uvedenou vlastnost definovanou.

.div-table {margin:0; padding:0; width: 100%; border: 0;}table {width: 100%; ... }

<div class="div-table"> <table> <tr><td>aaaa</td><td>bbbb</td></tr> <tr><td>cccc</td><td>dddd</td></tr> </table></div>

33

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.

Příklad: 02-02-centrovani.htmlbody { 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; }

34

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.

Příklad: 02-03-obtekani.htmlimg {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><img src="./images/obrazek.jpg" ... />Lorem ipsum... </p> <div class="clean" /></div>

35

Trendy moderního web designu Co by měly splňovat WWW stránky? Používání webových standardů Výhody CSS layoutu SEO Nejčastější chyby při návrhu WWW stránek• Internet, doporučená literatura

Agenda

2

36

Odkazy na Internetu

Validátory (X)HTML• http://validator.w3.org• http://www.htmlhelp.com/tools/validator/

Validátor CSS• http://jigsaw.w3.org/css-validator/

Přístupnost• http://pristupnost.nawebu.cz/weblog/ • http://www.blindfriendly.cz/• http://www.sovavsiti.cz/cynthia.html - testování přístupnosti• http://www.checkmycolours.com/ • http://zdrojak.root.cz/clanky/pochopil-by-einstein-vas-web/

SEO• http://seo.webber.cz/ • http://seo-servis.cz/source-zdrojovy-kod/

Ukázky CSS designu• http://www.csszengarden.com/ • http://www.cssbeauty.com/

37

Doporučená literatura

• Staníček, Petr – CSS Kaskádové styly Kompletní průvodce, Computer Press 2003• Staníček, Petr a kol. – CSS Hotová řešení, Computer Press 2006• Prokop, Marek – CSS kaskádové styly pro webdesignéry, Mobil Media 2003• Krug, Steve – Web design: Nenuťte uživatele přemýšlet!, 2. aktualizované vydání,

Computer Press 2006• Špinar, David – Tvoříme přístupné webové stránky, Zoner Press 2004 • Zeldman, Jeffrey – Tvorba webu podle standardů, CP Books 2005

38

Trendy moderního web designu Co by měly splňovat WWW stránky? Používání webových standardů Výhody CSS layoutu SEO Nejčastější chyby při návrhu WWW stránek Rady a doporučení Internet, doporučená literatura

Souhrn

2