Webdesignové trendy v roce 2012
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Webdesignové trendy v roce 2012Webdesignové trendy v roce 2012

 
Hledat
Moderní platforma pro vytvoření vašeho nového webu – Wix.com.
Nyní už můžete mít web zdarma.
Vybavení pro Laser Game
Spuštěn Filmový magazín
Laser Game Brno

Webdesignové trendy v roce 2012

Google       Google       18. 1. 2012       18 211×

Zrovna začal nový rok a bude určitě zajímavé podívat se trochu do budoucnosti a shrnout si, co za novinky nás čekají na webu. Nutno podotknout, že mnoho z níže vyjmenovaných věcí se začalo aplikovat již v roce 2011, ale podle všech předpokladů a také větší dostupnosti se rozšíří v tomto roce ještě mnohem více.

Reklama
Reklama

Responsivní design

Asi jedno z největších očekávání tohoto roku. Web se stal multiplatformní záležitostí – dnes již není výjimkou, že potkáte člověka v tramvaji, který je na webu pomocí svého telefonu, nebo že v kavárně místo lidí s notebookem vidíte někoho s tabletem.

Navíc ale musíme brát v potaz i velké monitory, kde se rozlišení pohybuje ve velkých číslech. Proto se čím dál častěji můžeme setkávat s weby, které na různé šířky zobrazovacích zařízení reagují a snaží se svůj vzhled uzpůsobit tak, aby se návštěvník cítil na webu dobře, ať už si web prohlíží z mobilního zařízení nebo doma v teple, na stolním PC.

Po nástupu CSS3 je nyní možné velmi snadno nastavit web pro různá rozlišení a vývojáři a grafici toho začínají využívat. Mnoho pěkných příkladů responsivního designu najdete na webu www.mediaqueri.es.

HTML5 & CSS3

Ano, obojího se hojně užívá již dne. Bohužel se však mnoho vývojářů drží toho starého dobrého, které už umí, a nové trendy přehlíží. Jejich hlavní výmluvou bylo, že je u prohlížečů podpora technologií jako HTML5 nebo CSS3 naprosto mizivá. Buďme ale rádi za to, že se prohlížeče v minulém roce hodně posunuly – minimálně jsme se převážně zbavili stařičkého IE6 a na kahánku již má i IE7.

Dobrou zprávou je i to, že čím dál více prohlížečů nespoléhá na technickou zdatnost svých uživatelů a aktualizace na nové verze si řeší již samy, na pozadí a bez zásahu běžného uživatele. To je rozhodně krok dopředu. Pokud se tedy chcete příští rok naučit něco nového, určitě nevynechejte CSS3 ani HTML5. Neměli byste toho litovat.

Nová písma

Všimli jste si toho taky? Na webu se čím dál více používají nesystémové fonty. Grafici jásají, protože vývojáři již dnes v ruce nemají to kouzelné „to je složité udělat“. V dnešní době totiž už opravdu není složité implementovat různé fonty pro svůj web – nemusí se to dělat ani JavaScriptem, ani pomocí Flashe.

Dvě největší databáze, které nabízejí fonty, jsou asi TypekitGoogle Web Fonts. Typekit prozatím nabízí mnohem více fontů než Web Fonts – a také si za to nechá zaplatit. Google Web Fonts je zdarma a jeho velká výhoda je i ta, že hodně fontů obsahuje české znaky. A implementace do webu? Naprostá hračka. A je jedno, zda využijete Typekit nebo Web Fonts. A myslím, že právě tento faktor bude důležitý v tom, že se začne objevovat mnohem více stránek, které nepoužívají běžný Arial či Verdanu.

Mobilní verze webů

Mnoho webů s mobilní verzí se objevovalo již loni, to je nutno uznat. Přesto vždy chvíli trvá, než se něco stane běžnou záležitostí. Já věřím tomu, že letos to tak již bude. Velký důraz se dnes klade na rychlost webu a se stránkami, kdy se velikost úvodní stránky nedostane pod 1 MB, je potřeba uzpůsobit stránku tak, aby prohlížení bylo příjemné i na pomalejším připojení.

Zvyšující se počty čtenářů z mobilů nutí vývojáře řešit i tvorbu datově menších stránek a zde nejspíš nepomůže pouze upravit CSS tak, aby reagovalo na velikost rozlišení. Pokud máte na stránkách mnoho různých prvků, tak se nevyhnete speciální verzi upravené přímo pro mobilní zařízení. Touto cestou se vydal i web Programujte.com, na jehož mobilní verzi se můžete podívat sami.

Speciální mobilní verze však má i své výhody – čtenáři většinou na mobilu ani neočekávají plnou funkcionalitu webu. Důležitější je rychlý přístup k obsahu.

Grafické prvky

Zde jsem se rozhodl shrnout pár bodů do jednoho. Budeme opět vycházet hlavně z konce loňského roku. Takže za prvé – stuhyprapory, je jich čím dál více. Nevšimli jste si? Několik ukázek ze stále častějšího grafického prvku.

Dalším trendem jsou kruhy. Kulaté rohy už jsou notoricky známé, přesto stále neomrzely. Ale kruhy se začínají objevovat i na pozadí stránek, fotografie jsou aranžovány do kruhů, obsah taktéž. Opět nějaká ta ukázka. Ostatně, jednu z nich můžeme vidět už u předchozího příkladu – půlkruhy u navigace.

   

A třetím, co bych rád zmínil a co si získává větší a větší oblibu ať už u grafiků nebo u návštěvníků webu, jsou vektorové kresby. Nejspíš to způsobuje přesycenost šťastných tváří z fotobank a také to, že vektorový maskot je více zapamatovatelný. Zase několik ukázek.

   

Fixní bloky

Trendem se stává i ukotvení bloku napevno i v momentě, kdy posouváme stránku dolů. Často se tak můžeme setkat s fixně ukotvenými navigacemi nebo i reklamou. Blogy či webziny navíc chtějí, aby byly sdíleny, a snaží se čtenářům podsunout sociální tlačítka tak, aby byla pořád na očích. A tak se umístí na okraj článku a jsou vidět vždy a je jedno, v jaké části článku se právě nacházíte.

Příkladem může být například asi všem známý www.techcrunch.com (pevně umístěné menu) nebo web www.netontwerp.com, který vyřešil fixní navigaci velmi zajímavě a neotřele. Pro příklad fixního bloku s možnostmi sdílení nemusíme chodit daleko, však se sami podívejte nalevo od článku, který právě čtete. :-)

Vícesloupcové navigace

Na zahraničních webech taky poměrně rozebírané téma. Že se menu webu ve většině případů umisťuje horizontálně v hlavičce, na to už jsme si zvykli. Nevýhodou tohoto řešení však je docela velké omezení v počtu nabídek, které do menu umístíme. Výhodou vertikálního menu je naopak velká flexibilita – je v podstatě jedno, jestli je v menu 7 nebo třeba 15 položek. Vícesloupcové navigace jsou kompromisem. Podívejte se na ukázky.

Slidy

Nejsem myslím jediný, kdo se na webu stále více setkává s posuvným obsahem většinou použitým v horní části stránky pro přehled nějakých těch referencí, fotografií, unikátních funkcí… asi netřeba říkat víc. Navíc, po webu jsou roztroušeny desítky a desítky hotových řešení s mnoha možnostmi nastavení, takže používání slidů nebylo nikdy jednodušší.

Klienti byli ale stále trochu skeptičtí k použití slidů; mnozí měli pocit, že je nepotřebují. Ovšem v době, kdy se klient s touto funkcionalitou setkává častěji (a to hlavně u konkurence), získává najednou pocit, že to na webu nutně potřebuje a je úplně jedno, že do slidů nemá co dát. To pořeší argument „dnes to je in, takže nějaký obsah vymyslíme“. A tvůrci webu většinou nemají dostatek síly či argumentů k rozmluvení této myšlenky.

 

Co říci závěrem? Body v tomto článku vycházejí hlavně ze zkušeností z minulého roku a vždy to bude pouze odhad; nikdo nedovede předpovědět, co přesně nás čeká. Co pro web přinese rok 2012, uvidíme až časem.

Loňský rok byl v lecčem přelomový, nepochybně v pozitivním směru. Ale já věřím, že to nejlepší nás teprve čeká. A těším se na to.

×Odeslání článku na tvůj Kindle

Zadej svůj Kindle e-mail a my ti pošleme článek na tvůj Kindle.
Musíš mít povolený příjem obsahu do svého Kindle z naší e-mailové adresy kindle@programujte.com.

E-mailová adresa (např. novak@kindle.com):

TIP: Pokud chceš dostávat naše články každé ráno do svého Kindle, koukni do sekce Články do Kindle.

Hlasování bylo ukončeno    
30 hlasů
Google
(fotka) Honza TomanHonza je profesně frontend programátorem v jednom mediálním domě a poslední dobou se vydává i projektově manažerským směrem. Honzovou velkou vášní je fantasy a všechny možné seriály.
Facebook    

Nové články

Obrázek ke článku Datafesťak 2018 bude o datech, byznyse a ženách v IT

Datafesťak 2018 bude o datech, byznyse a ženách v IT

Na Univerzitě v Hradci Králové se 23. a 24. listopadu potkají všichni, které zajímá práce s daty. 

Reálné zkušenosti se zpracováním dat budou v prostorách univerzity prezentovat zástupci obchodních i výrobních firem. Potkat tak bude možné představitelé například z Kiwi.com, Crocodille, Dáme Jídlo nebo společnosti Adler. 

Reklama
Reklama
Obrázek ke článku 4 tipy, jak financovat rozvoj start-upu

4 tipy, jak financovat rozvoj start-upu

Možná jste právě jedním ze zakladatelů či manažerů nadějného start-upu 
a aktuálně řešíte, kde sehnat finanční prostředky pro další rozvoj. Zde pro vás máme čtyři tipy.

Obrázek ke článku Virtuální zrcadla změní způsob nakupování v e-shopech

Virtuální zrcadla změní způsob nakupování v e-shopech

Díky pluginu Virtooal.com získávají zákazníci e-shopů možnost si vyzkoušet produkty ve virtuálním světě. E-shopy, které si plugin nainstalují, výrazně snižují množství vráceného zboží, dělají nákupy zábavnějšími, a tím budují lepší vztahy se svými zákazníky. V současnosti lze Virtooal.com využít zejména pro kosmetiku, brýle a šperky, do budoucna půjde také o módu.

Obrázek ke článku Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Kariérní postup & vyšší plat: Titul MBA ve sféře IT

Působíte jako specialista v oblasti IT a aspirujete na povýšení, příp. řídící pozici? Pak se jistě potýkáte nejen s vysokými nároky (potenciálních) zaměstnavatelů, ale i se silnou konkurencí ze strany ostatních uchazečů. Pokud chcete zvýšit své šance na kariérní posun a lepší plat, měli byste vedle technických dovedností ovládat i ty manažerské. Pomoci vám v tomto ohledu může studium MBA se specializací na management IT.

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032018 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý