Arnoost links #3

Člověk se pořádně ani nerozhlédne a už jsou čtyři měsíce nového roku pryč. Takže, když nic, je tu čas na další „Arnoštovy“ linky. Stejně jako jsem odkazoval několik super timelaps videí, které neberou konce, podobnou módu na webu zažívá všechno, co má v názvu responsive. Proto to budou následující links o věcech „ladící“ responsive design.

CSS Frameworky

Rozhodně jich je hodně a není snadné vybrat ten správný. Tedy v případě, že jste nuceni si zvolit. Je dobré najít si jeden oblíbený a ten používat. Bootstrap je super rozsáhlý, aktualizovaný, je k němu spousta návodů, ale na můj vkus, už je ho moc.

Base

Mám k němu nějak blízko, to asi tím názvem. Obsahuje to nejdůležitější co je třeba, i když mu něco málo chybí. To se ale mění s každým novým webem. Například formulářové prvky jsou v defaultní podobě (na MAC OSX, Chrome 26), což ocení každý, kdo nepozná, co je formulář a co tlačítko, když si to grafik nakreslí jinak. Ne nadarmo mají na webu Super Simple Responsive Framework: http://matthewhartman.github.io/base/

Simple Grid

Čistě jen grid systém, kde po stažení najdete pouze dva soubory – index.html a CSS file. Do začátku práce s responzivním designem je to dobrá učebnice, při které se Vám nezamotá hlava z kilometrové definice různých css tříd. http://thisisdallas.github.io/Simple-Grid (při otevření dema si horizontálně zmenšujte okno prohlížeče)

Další jsou například lessframework.com nebo foundation.zurb.com, které padnou do oka třeba Vám. Dobré je vybrat si jeden, ten se naučit a následně používat. Ideálně ten, který autoři alespoň trochu aktualizují. Jak jsem napsal, je jich mnohem více a stačí chvilku hledat na webu.

U responsive webů budete hlavně řešit menu a navigaci v mobilním zařízení vůbec. Což je důležitější než to, že se prvky přeskládají pod sebe. Ukázka, jak řešit menu, je pod následujícím odkazem. U dema je nutné si opět zúžit okno prohlížeče. http://www.hongkiat.com/blog/responsive-web-nav/

Obrázky nejen v responsive designu

I když operátoři nyní nabízejí všechno neomezeně, je FUP stále okolo 1 GB. Pokud tedy chcete svým „fanouškům“ udělat radost a posílat jim komprimované obrázky, možná Vám pomůže následující script. http://adaptive-images.com

Výhodou je, že jej můžete nasadit na již funkční projekt. Pokud máte na webu uložený jen jeden rozměr obrázku (ten nejkvalitnější nebo největší). Takže když nemáte responsive design a Váš web obsahuje hodně obrázků, uživateli se stránka načte alespoň o něco rychleji.

Na závěr je nutné dodat, že nic z výše uvedeného nepotřebujete pro denní život či cestu do práce, za kamarády apod.