Loňský rok byl rokem velkých změn v systému návrhů webů, které umožnila zejména větší podpora nových technologií a rozšíření nových verzí prohlížečů. Nemalou zásluhu na možnost využití nových postupů má i výrazné rozšíření tzv. chytrých telefonů a tabletů. Nejen pokročilí, ale i běžní uživatelé si zvykli na komfort mít informace stále u sebe a pracovat s nimi. Uživatelé se stávají více náročnějšími. Nestačí jim pouze obsah zobrazit, ale chtějí ho mít i skvěle vypadající, dobře čitelný a snadno ovladatelný. Moderní trendy a techniky se nám ve WDT daří úspěšně aplikovat.
Responzivní rozvržení grafiky
Rok 2013 s sebou přinesl nejen rozšíření využívání techniky responzivního designu na většinu našich projektů, ale je zejména rokem sjednocování chování na rozmanitých zařízeních a standardizace a optimalizace obslužných kódů. Hlavní důraz se letos klade na UX (tzv. uživatelský prožitek), kdy se důsledně pracuje na optimalizaci nejen vzhledu a přehlednosti, ale i na logice celkového ovládání a snadné navigaci na webu. Samozřejmostí je provedení této optimalizace pro každý typ zařízení. V zásadě pracujeme s klasickým desktopovým vzhledem, tabletem, telefonem a úzkou verzí telefonu (starší zařízení).
Jak poznáte kvalitní responzivní layout? Snadno. Na všech dostupných zařízeních uvidíte konzistentní grafický vzhled, který se dynamicky mění podle toho, co je schopné dané zařízení zobrazit. Ruku v ruce se změnou vzhledu se mění i logika ovládání, aby korespondovalo s co nejsnadnějším ovládáním na daném zařízení (se zvyklostmi ovládání zařízení).
Podívejte se na naše responzivní projekty
Cílení na obsah
Na každém webovém projektu je nejdůležitější jeho obsah a až na druhém místě forma. Bez kvalitního a kvalitně prezentovaného obsahu (typografie) by celá koncepce padla a stala se nepoužitelnou. Proto v návrzích upřednostňujeme jednoduchost a cílíme uživatelovu pozornost na nejdůležitější prvky stránky. V úzké vazbě na jednoduché a přehledné podání obsahu je i návrh rozložení jednotlivých prvků, tak aby byl uživatel proveden webem bez nutnosti přemýšlet, co má dělat, kam klikat.
Podívejte se na www.tonak.cz
Podpora displejů typu Retina
Displeje typu Retina jsou displeje s vysokou denzitou (hustotou pixelů na palec). Jako první s těmito superjemnými displeji přišla na trh společnost Apple a dnes se již rozšířily i do ostatních zařízení a tedy i mezi značně větší počet uživatelů. Kouzlo jejich dokonalého zobrazování spočívá v dvojnásobném a vyšším počtu obrazových bodů na shodné ploše, než má klasický kancelářský LCD monitor. Aby na těchto displejích vypadaly ostře nejen písma, ale i fotografie a použitá grafika, musí být připraveny dvě sady grafických souborů. Jedna pro klasické monitory a levnější mobilní zařízení, druhá potom dvojnásobně velká pro zařízení s moderními displeji typu Retina.
V České republice není rozšíření těchto typů displejů velké, proto jsme upustily od striktní tvorby duplicitních grafik a na naše projekty aplikujeme kompromisní řešení. Retina ready obrázky připravujeme pouze pro kritická místa, jako jsou pomocné navigační prvky a místa, kde by softwarová interpolace prohlížečů neposkytla potřebně kvalitní výsledek. Aplikaci správných obrázků provádíme pomocí CSS a v případě komplexnější práce nasazujeme knihovnu retina.js.
Čistá typografie
I nejkvalitnější návrh responzivního vzhledu by byl k ničemu, pokud by se texty nedaly bezproblémově číst a orientace v textu by vázla. Proto klademe velký důraz na kvalitní zpracování návrhu typografie pro každý typ zařízení. Při použití nestandardních písem (hezkých a osobitých) samozřejmě nastávají problémy se zobrazením. Tato písma se dokonale zobrazují na displejích typu Retina, ale jsou zoufale čitelná na starších telefonech a desktopech. Při optimalizaci návrhů tedy musíme počítat nejen s různou velikostí písma, řádkového prokladu, ale i s nutnou změnou písmové rodiny, úpravy prokladu mezi písmeny a to dle typu zařízení.
Fixní záhlaví a pomocné navigační prvky
Používání fixních elementů, tedy první držících se na stejném místě je velmi mocným nástrojem k podpoření jednoduchosti orientace a práce s obsahem webu. Pokud se špatně použije, může napáchat značné škody a v krajních případech udělat web téměř nepoužitelným.
Nám se skvěle osvědčilo použití hlavního (horního) menu v okamžiku, kdy uživatel posune stránku níže. Menu se tak zastaví na hraně okna prohlížeče a obsah se posouvá dál. Uživatel tak má stále na očích hlavní kategorie webu. S úspěchem se také setkala drobnost v podobě grafického odkazu směrujícího na začátek stránky. Protože tento odkaz bývá výrazný a často mimo hlavní obsah webu, odpoutával by zbytečně pozornost, a proto ho zobrazujeme až v okamžiku, kdy uživatel posune stránku nahoru a odkaz by tedy upotřebil.
Podívejte se www.austria-email.cz
Speciální navigace pro mobily
Mobilní telefony jsou specifické svou malou zobrazovací plochou a ovládáním jedním prstem. Pro se pro ně nehodí použití klasického menu jako je na desktopu nebo tabletu, které zabírá příliš mnoho místa. Proto využíváme speciálního rozbalovacího menu, které se zobrazí výhradně na telefonu a svou koncepcí poskytuje možnost rychlého pohybu po webu. Samozřejmě se přizpůsobí různým rozměrům displejů telefonů, vždyť je responzivní :-)
CSS3 animace × JS animace
Třetí verze formátovacího jazyka CSS sice již několik let umožňuje provádět různé animace a obohacovat tak web na nejzákladnější technické úrovni, ale poměrně široká paleta námi podporovaných verzí prohlížečů by nás nutila duplikovat animaci napsanou pomocí CSS ještě do JavaScriptu respektive do jQuery. Proto jsme se rozhodli nadále využívat vlastností a knihoven jQuery.
Výrazné grafické prvky
Velké plochy dobře přitahují pozornost a zejména pak kruhy nebo víceúhelníky. Chceme-li něco extra vypíchnout, dejme tomu prostor nebo vymezme do jiného než čtyřhranného tvaru.
Podívejte se na www.boki.cz
Závěr
Rok 2013 přináší nejen větší volnost a velkorysost v designu, ale i jednodušší a komplexnější práci na úrovni návrhu konstrukčního kódu. Celý responzivní projekt musí působit jednotně a přehledně a to na všech zařízeních.
—
Zdroje:
