Rozložení obsahu
- Rozložení neboli layout webu – je závislý na koncepci celé soustavy webové stránky, organizaci a dělení užitečných informací do jednotlivých souborů. Smyslem rozložení obsahu je polohové členění jednotlivých prvků stránky.
- Rozlišujeme společné prvky webu – vyskytují se v každém souboru a často se nacházejí na stejných pozicích.
- Identita webu – obsahuje často logo, název webu, popis webu, ilustrativní obrázek tématu
- Navigace – blok s odkazy na jednotlivé stránky. Může být vodorovné menu (nevýhoda: omezený počet do řádku, výhoda: zvyšuje přehlednost) nebo svislé menu (nevýhoda: snižuje čitelnost všech odkazů, výhod: neomezený počet prvků); menu může být hierarchické s vyskakovacími roletkami (dropdown menu); často se využívá drobečková (breadcrump) navigace (zobrazuje aktuální pozici návštěvníka u hierarchicky členěného webu – systému podstránek)
- Postranní bloky (widgety) – obsahují často místo pro upozornění, informační kontext, reklamní bannery, svislou navigaci
- Blok hlavního webového obsahu dané stránky
- Stránkování obsahu – používá se především u blogů, aktualit, galerie … smyslem je navigace mezi početným obsahem rozděleným na více stránek.
- Tiráž – informace o autorství, datum vytvoření či aktualizace, rychlost vygenerování webu apod.
- Hlavní blokové prvky rozložení
- Záhlaví (header) – obsahuje často identitu, navigaci
- Obsahový blok (content) – hlavní webový obsah, může obsahovat drobečkovou navigaci, stránkování obsahu …
- Postranní blok (sidebar) – může obsahovat navigaci i různé widgety
- Zápatí (footer) – může obsahovat tiráž, navigaci, ale i widgety
- Obálka (wrapper, conteiner) – výše uvedené bloky zapouzdřuje, zapouzdření je nutné u všech layoutů užších, než je šíře prohlížeče (viewport), což se nejčastěji stává na desktopu
- Typy layoutu
- Podle počtu sloupců – jedno-sloupcový (řádkový), dvou-sloupcový (sidebar levý nebo pravý), tří-sloupcový (dva sidebary a uprostřed content) …
- Podle nastavení šířky – fixní (šířka je absolutní, má smysl u širokých monitorů a obsah je často centrován do ohniska pozornosti – vzniknou tak prázdná místa po stranách, kde je zvykem umístit vhodné obrázkové pozadí), fluidní (šířka se přizpůsobuje šířce okna prohlížeče, šířka je vždy relativní), responzivní (principiálně vychází z fluidního rozložení, vícesloupcové fluidní rozložení musí však být doplněno o Media Queries, které v určitých zlomech (breakpointech) snižuje počet sloupců)
- Techniky polohování webového obsahu
- Tabulkový layout – technika z období, kdy se dosud nepoužívaly kaskádové styly, ale stylování bylo možné pouze řádkově pomocí HTML atributu … použití prvků table, tr, td.
- Rámcový layout – technika rozložení často používaná v období statických webů, kdy bylo možné odděleně načítat stále se opakující prvky umístěné v jednom souboru. Prvky frameset, frame, noframes. Např. menu se opakovalo ve všech souborech webu, ale v momentu, kdy bylo třeba menu aktualizovat, by bylo náročné každý soubor upravovat. To právě řešily rámy. Dnes jsou rámy zavrženy a web je skládán dynamicky na straně serveru pomocí skriptů.
- Blokový layout – využívá prvku oddílů (div). Prvky jsou označeny patřičnými identifikátory či třídami. Blokové elementy byly nejčastěji relativně polohovány. Méně se využívalo absolutní polohování – kvůli proměnlivosti webového obsahu.
- Využití HTML5 prvků – princip blokového elementu byl použit u sémantických značek header, section, article, aside, footer, nav. Stylování je však obdobné jako u klasických bloků. Relativita bloků je však mnohem častěji nastavena pomocí nových CSS3 vlastností (grid nebo flexbox).
- Důležité CSS vlastnosti používané pro layout
- CSS2 – position, float, clear, margin, padding, text-align, display, height, width, overflow – nejčastějším problémem byly různé výšky sloupců, které se daly srovnat pomocí různých řešení viz https://css-tricks.com/fluid-width-equal-height-columns/
- CSS3 – display, overflow, flex, order, … flexbox má i další vlastnosti, stejně tak grid systém a protože jich je větší množství odkazuji vás na tyto dva linky: průvodce flexboxem, průvodce grid systémem
Webová typografie
- Na webu se nastavuje styl následovně pro
- nastavení globální pro celý prvek body (kořenový prvek)
- styl odstavců
- styl nadpisů
- styl odkazů
- lze stylovat odlišně text v záhlaví či zápatí webu
- vytvoření zvláštních tříd textu např. popisky obrázků
- Rodina písma – skupina řezů odvozená z jednoho písma
- Řez písma – kresebná varianta (kurzíva, tučnost)
- Zásady webdesignu pro webovou typografii
- Používat optimálně max. 2 různé rodiny písem.
- Pokud chceme text výraznější (bold, ultra bold), stále používáme písmo ze stejné rodiny (např. Gill Sans Ultra Bold).
- Kombinujeme písmo efektně, některá písma se vedle sebe moc nehodí (patkové písmo vedle bezpatkového).
- Používáme český font, který obsahuje všechny definované glyfy (i pro české znaky ř,š,č,ž, ň, ť …). Proto hledáme subset Latin Extended. A vždy pečlivě vyzkoušíme na známých frázích např. “Žluťoučký kůň úpěl ďábelské ódy”, kde se vyskytují všechny problematické znaky.
- Čitelnost při menší velikosti se může u běžných rodin písma snížit, u malého textu (pod 10px) se doporučuje použití pixelového písma – ukázky: http://pixelfonts.style-force.net/
- Webové fonty
- Systémová písma – vhodné pouze pokud využíváme standardní fonty např. Times New Roman, Arial apod., ale ani těmito fonty si nemůžeme být jisti. Uživatel mohl byť i nelogicky daný font odebrat z operačního systému.
- Jistota řešení je načítat dynamické fonty z webového adresáře případně pomocí CDN z Google serverů.
- Vlastní dynamické fonty – je třeba dbát na fakt, že kvůli rozdílné kompatibilitě jednotlivých vykreslovacích jader webových prohlížečů, je třeba ve stylových řadách adresovat všechny formáty soubory popisující definice písma. Propojení s CSS souborem se provádí pomocí modulu @font-face{src:’url-souboru’;font-family:’nazev’;}
- TTF (True Type Font) – starší standard z 80. let 20. století pro popis vektorových počítačových písem.
- OTF (Open Type Font) – novější formát, který zahrnuje lepší lokalizaci národních abeced (založen na Unicode). Umožňuje definovat cca 65 tisíc glyfů a jiné vylepšení.
- WOFF (The Web Open Font Format) – původní OTF vylepšený o kompresi a další metainformace.
- SVG – definice vektorového písma pomocí formátu SVG.
- EOT (Embedded OpenType Fonts) – původní OTF přizpůsobený Microsoftem pro své prohlížeče Internet Explorer.
- CDN fonty – Google Fonts – propojení se provádí pomocí modulu @import url(‘https://fonts.googleapis.com/css2?family=Lato&display=swap’); a vlastnosti font-family: ‘Lato’, sans-serif;
- Obrázkové fonty a ikonky – Font Awesome – propojení se provádí pomocí CDN linku nebo lze stáhnout celou knihovnu vektorových definičních souborů. Umístění ikony se pak provádí použitím stylové třídy např. <i class=”fas fa-camera”></i>.
Barevné schémata
- Barevné modely – matematické modely popisující jednotlivé barevné odstíny, které lze definovat pomocí stanovených parametrů. Typy modelů se liší nejen způsobem míchání (aditivním či subtraktivním), ale liší se také významem jednotlivých parametrů barvy. Jednotlivé barevné prostory lze modelovat různým typem diagramu.
- RGB, CMY(K) – barvy jsou definovány podílem složky – barevného kanálu. Pro diagramy se používá pravoúhlý souřadný systém.
- HSV, HSB, HSL – barvy definovány parametry – tón, sytost a jas či světlost. Podobné modely jsou YUV a CIE xyz, kdy je potřeba pracovat odděleně s chromatickou a jasovou složkou (např. u kompresních algoritmů). Pro diagramy se používá
- Způsoby vyjádření barvy na webu – obvykle tedy závislé na barevném modelu.
- Anglický název – 140 barev viz W3Sschools
- RGB – rgb(x,x,x) … každé x je číselná hodnota (0-255).
- CMYK – cmyk(x%,x%,x%,x%) … každé x v rozmězí (0-100%)
- Hexadecimálně – #RRGGBB … každá cifra (0-F), lze zapisovat i redukovaně bezpečné barvy (např. #C9F).
- HSL – hsl(hue, saturation, lightness) … hue = hodnota v úhlové míře 0-360, saturation a lightness = hodnoty 0-100%.
- Barvy mnemotechnicky
- Bílá – 255 hodnoty u RGB, 0 hodnoty u CMYK, 100% u jasové složky v HSL.
- Odstíny šedivé – všechny barevné kanály stejné hodnoty u RGB a CMYK. V HSL je sytost na 0%.
- Černá – opak hodnot bílé.
- Vliv gamutu – každé grafické zařízení zobrazuje odlišně množinu barev v daném barevném prostoru. Starší HW zařízení disponovala s mnohem více omezenějším barevným prostorem. U moderních zařízení se rozdíl mezi plným barevným prostorem a gamutem snižuje, ale nástupem mobilních zařízení se rozdíl opět začíná projevovat. Navíc kvůli tomu, že se lišily barevné prostory různých vývojářů grafických systémů, bylo třeba zavést standardizovaný prostor sRGB.
- Bezpečné barvy (Web Safe Colors) – v 90. letech 20. století byla stanovena tzv. Netscape Color Cube – sada 216 barev, u kterých byly rozdíly v zobrazování na různých HW minimalizovány. Byly vybrány hodnoty odpovídající 0-20-40-60-80-100% jednotlivých barevných kanálů. 6x6x6=216. V šestnáctkovém vyjádření to odpovídalo hodnotám 00-33-66-99-CC-FF. Takže např. kombinace #CC99FF je bezpečná barva.
- Estetická pravidla – teorie barev
- Psychologie barvy – barvy u návštěvníka webu vyvolávají určité asociace a mohou ovlivňovat jeho chování, vnímání, chutě či atraktivitu objektu. Např. žlutá – štěstí, modrá – inteligence, zelená – uklidňující … viz Psychologie barev
- Barevný kruh – umožňuje dvourozměrné uspořádání a znázornění 12 odstínů barev. Běžně používané jsou RGB (web), CMYK (tisk) a RYB (hlavně v umění). Při výběru barev je barevný kruh používán jako podklad k určení funkční závislosti mezi odstíny … viz Barevné kruhy
- Barvy barevného kruhu např. RYB – primární barvy (červená, žlutá, modrá), sekundární barvy (vznikají mícháním mezi třemi primárními, tj. oranžová, purpurová, zelená), terciální barvy (smícháním primárních a sekundárních barev, které vedle sebe sousedí v barevném kruhu, vzniká 6 dalších terciálních barev).
- Základní barevná schémata – funkční vztahy v jednotlivých barevných schématech, mohou zvýšit soulad nebo poutavost (kontrast). Obecně platí to, že čím jsou dvě barvy od sebe v barevném kruhu dál, působí více kontrastně a naopak.
- Monochromatické schéma – je založeno na jedné barvě a všech jejích odstínech. Barevné schéma působí v kompozici uklidňujícím dojmem.
- Analogické schéma – vzniká, kombinují-li se v kompozici dvě barvy sousedící vedle sebe v barevném kruhu.
- Komplementární schéma – výběr dvou barev, které jsou umístěny proti sobě na barevném kruhu – vztah dvou barev, který umožňuje nejvyšší kontrast.
- Triadické schéma – výběr tří barev, které mají mezi sebou stejné vzdálenosti na barevném kruhu – vztah tří barev, který umožňuje pokud možno nejvyšší vzájemný kontrast.
- Existují další funkční závislosti např. jednu komplementární barvu nahradit dvěma sousedníma apod. Používáním většího počtu barev pro různé prvky webu popředí (linky, nadpisy, ohraničení …) či pozadí ztrácí barevné schéma smysl a web se jeví jako “cirkus”.
Pozadí vs. popředí
- Styl pozadí
- Opakování pozadí – U malých obrázků je třeba si uvědomit, zda je vhodné, aby se opakoval a pokud ano, tak má se opakovat pouze vodorovně? Vlastnost background-repeat.
- Pozice pozadí – Pokud obrázky na pozadí neopakujeme, tak je vhodné nastavit umístění. Vlastnost background-position.
- Spritované pozadí – používalo se pro posouvání obrázků na pozadí např. tlačítek. Smysl byl ten, že pokud tlačítko bylo obrázkové a chtěli jsme při najetí myši změnit variantu obrázku, stačilo obrázek na pozadí přepozicovat. Více zde: CSS Image Sprites
- Velikost pozadí – provádí se vlastností background-size a lze ji nastavovat pomocí procent, absolutních jednotek, cover (pokryje celé pozadí prvku), contain (zmenší se tak, aby byl obrázek vidět v objektu celý).
- Více obrázků v pozadí – jednotlivé obrázky lze oddělovat čárkou CSS Multiple Backgrounds
- Přichycování pozadí – provádí se vlastností background-attachment – lze natavit klasicky scrollované nebo fixed – přichycené na jednom místě.
- Barevné přechody – provádí se pomocí vlastnost background-image – typy přechodu mohou být lineární (down/up/left/right/diagonally), radiální (s definicí středu), opakované lineární
- Průhlednost a poloprůhlednost – lze provést dvěma způsoby. 1) vlastností o-pacity nebo 2) vlastností background s využitím barevného modelu RGBA
- Efekty – často jde o navození určité iluze např. pohybu v prostoru
- Parallax – lze vytvořit pomocí jQuery, kdy se v průběhu scrollování liší rychlost posunu pozadí a popředí nebo dvou vztažných objektů, ukázka efektu: http://boy-coy.com/
- Lightbox – často používané pro zobrazení detailu (galerie, video, mapa …), který překryje ostatní webový obsah. Je to lepší řešení, než přesun na jinou URL a pak být nucen se vracet zpět. Ukázka efektu: http://fancybox.net/
- Video na pozadí – kombinace CSS a Javascriptu lze docílit toho, že video na webu hraje roli pozadí – ukázka: https://www.jqueryscript.net/demo/youtube-video-fullscreen-background/
- Další trendy ovlivňující vztah pozadí a popředí:
- Minimalismus – koncepce designu se zaměřuje na minimální množství a velikost webového obsahu v popředí. Často tak může vyniknout pozadí.
- Hero text / Hero image – silný důraz na slogan či obrázek, který zaujímá přední pozici ve vizuální hierarchii. Snahou je, aby si tohoto obsahu návštěvník všiml jako první.
- Jednostránkové weby – jsou tvořeny webovým obsahem umístěným do jednotlivých sekcí za sebou na jedné stránce. Na sekce vedou kotvy a přesun může být s plynulým přechodem (jQuery). Každá sekce má 100% velikost viewportu a je často rozlišena odlišným pozadím. Jednostránkové weby mají velmi výhodné SEO, jelikož crawler nemusí opouštět soubor při jeho indexování.
UI vs. UX
- UI (User Interface) – na první pohled viditelný, návrh jednotlivých prvků, animací a interakcí vedoucí k naplnění UX, zabývá se především:
- funkčností ovládacích prvků
- technickým řešením (HTML, CSS, PHP, SQL, …)
- kompatibilitou
- responzivitou
- bezpečností aplikace
- UI designer – grafik, kodér, programátor aplikací
- UX (User Experience) – na první pohled neviditelný, návrh služby či produktu webu, zabývá se především:
- strategií produktu či služby
- zabývá se chováním návštěvníků webu (emoce, motivace)
- psychologií potřeb
- uživatelským výzkumem (neuromarketing)
- informační architekturou
- prototypováním a modelováním (wireframe)
- obsahem (copywriting, branding, instrukce)
- principy vizuálního designu (barevná schémata, layouty)
- UX designer – umělecký grafik, marketér, manager, reklamní analytik
- Paralela UI vs. UX a stavitelství – pracovník zabývající se UX je architekt a projektant, pracovník zabývající se UI je stavbyvedoucí, zedník, instalatér apod.
- UX designer, který neumí UI, využívá raději připravená řešení (WordPress). Technicky to nemusí být ideální, ale dobře to vypadá.
- UI designer, který neumí UX, naprogramuje svůj vlastní redakční systém s minimalistickým přístupem. Nevypadá to dokonale, ale funguje to.
Souhrn
Klíčové pojmy
layout, identita webu, navigace, dropdown, breadcrump, widgety, content, header, footer, sidebar, stránkování, wrapper, sloupcový layout, fixní, fluidní, responzivní, tabulkový, rámce, bloky, sémantické prvky, rodina písma, řez písma, subset písma, glyf, Latin Extended, pixelové písmo, systémové písmo, dynamický font, TTF, OTF, WOFF, SVG, EOT, CDN, obrázkové fonty, barevný model, barevný prostor, gamut, bezpečné barvy, barevný kruh, barevné schéma, analogická barva, komplementární barva, spritované pozadí, barevný gradient, Parallax, Lightbox, Hero, UI, UX
Studijní materiály
- https://www.w3schools.com/css/css_website_layout.asp
- http://info.spsnome.cz/WebDesign/HTML-Layout
- https://css-tricks.com/fluid-width-equal-height-columns/
- https://cs.wikipedia.org/wiki/Rodina_p%C3%ADsma
- https://www.w3schools.com/css/css3_fonts.asp
- https://www.jakpsatweb.cz/css/font-face.html
- https://cs.wikipedia.org/wiki/TrueType
- https://cs.wikipedia.org/wiki/OpenType
- https://cs.wikipedia.org/wiki/Font_Awesome
- https://css-tricks.com/nerds-guide-color-web/
- https://cs.wikipedia.org/wiki/Barevn%C3%BD_model
- https://www.w3schools.com/colors/colors_wheels.asp
- https://www.w3schools.com/colors/colors_psychology.asp
- https://cs.wikipedia.org/wiki/Bezpe%C4%8Dn%C3%A9_barvy
- https://www.justinmind.com/blog/10-inspiring-hero-image-websites/
- https://en.wikipedia.org/wiki/Lightbox_(JavaScript)
- https://www.jqueryscript.net/other/youtube-video-fullscreen-background.html
- http://cojeuxui.cz/