Recenze knihy – Flexibilní webdesign
Ladislav Suchanek
Kniha flexibilní webdesign může pomoci začínajícím webdesigneru, aby získali nové informace a tipy pro návrh flexibilnější layoutu webových stránek. Poskytuje praktické rady pro přípravu webových prezentací, které budou připraveny pro nejhorší scénáře při prohlížení. Témata, které jsou obsahem knihy i této prezentace jsou:
- Řešení velikosti textu pomocí klíčových slov a procent a umožnění jeho zvětšení uživatelem
- Techniky tvorby navigace, jež se přizpůsobí jakékoli velikosti či množství textu nebo jiného obsahu
- Design flexibilních řádků na stránce, které se roztáhnou či stáhnou dle velikosti či množství vloženého obsahu
- Vytvoření přizpůsobitelných bloků s obrázky a texty pomocí plovoucího umístění
- Tvorba nezničitelného bloku, jenž se vždy přizpůsobí svému obsahu
- Uzpůsobení čitelnosti obsahu stránky i bez zobrazení obrázků nebo CSS
- Design tabulek pomocí CSS a prezentace tabulkových dat
Autor: Dan Cederholm
- zakladatel společnosti SimpleBits
- expert v oblasti tvorby webových stránek a webových standardů
- autor článku na A List Apart a SimpleBits
Flexibilní text
- nastavení velikosti textu pomocí klíčových slov
xx-small, x-small, small, medium, large, x-large, xx-large - podle standardu by měla být velikost
large1,5x větší nežmediumap.smallje 1,5x menší nežmedium - další úprava velikosti textu pro daný element pomocí procent
- některé prohlížeče však rozpoznají pouze rozdíly
v řádu desítek procent - použití jednotek px znemožní měnit velikost textu v IE
Příklad flexibilního formátování textu
body{
font-size: small; /* odpovídá přibližně 12px */
}
h1{
font-size: 150%;
}
#uzaviraci{
font-size: 95%;
}
Přizpůsobitelná navigace
- není pevně definovaná šířka a výška elementu navigace, aby bylo možné změnit velikost textu
- pokud je použit obrázek s přechodem na pozadí, tak umožnit při roztažení vykreslení jednobarevného pozadí
- použití triku "posuvných dveří" - Sliding Doors in CSS
- příklad: www.mozilla.org
Rozšiřitelné řádky
- není vhodné používat fixní výšku elementu s textem (pozůstatek tabulkových layoutů)
- umožňuje lepé se vyrovnat s pozdějším větším množstvím obsahu
- používejte pozadí, které umožňuje zvětšení a smrštění elementu
Kulaté rohy pro boxy pevné šířky (tip)
- lze použít pouze při fixní šířce
- vytvoříme v grafickém editoru dva průhledné obrázky (nejlépe gif) pevné šířky, odpovídající šířce boxu, ve kterých obarvíme pouze rohy
- jeden pro horní rohy a druhý pro dolní rohy
- tyto pak použijeme na pozadí elementů boxů
Tvořivé plovoucí umístění
- použijte vlastnosti
floatpro vytvoření síťové struktury nebo pro změnu pořadí vykreslení elementů oproti html kódu
Desetivteřinový test použitelnosti
- bez obrázků
- bez CSS
- validace HTML a CSS
- rozšíření - vyzkoušet zvětšení a zmenšení písma v IE
Tipy
- používejte "desetivteřinový test použitelnosti"
- specifikujte barvu pozadí ekvivalentní obrázkům na pozadí
- používejte nástroje urychlující tyto kroky
- např. Web developer pro FF, Web developer toolbar pro Operu nebo Internet Explorer Developer Toolbar pro IE7
Přizpůsobitelné tabulky
- u elementu
thpoužijeme atributscope="col"pro sloupce neboscope="row"pro řádky, který usnadňuje orientaci v tabulce pomocí čtečky - rozestup buněk nastavíme buď v html kódu
<table cellspacing="0">nebo pomocí CSSborder-collapse:collapse; - titulek tabulky přidáme pomocí elementu
caption - barvu pozadí řádkům přiřaďte pomocí elementu
tr
Přizpůsobitelné tabulky - okraje
- nastavení okrajů
table {
border: 1px solid #000;
}
table th, table td {
margin:0;
border: 1px solid #000;
}