„Křápy“ first
Na Webexpo přednášce nebyl čas tuhle myšlenku rozvést. Tady je i s konkrétní technickou aplikací.
Metodu Mobile first a její platnost asi není potřeba dále rozvádět. Luke Wroblewski přes pochyby běží tryskem a nechává jen spálenou zemi. ;)
Designér co navrhuje rozhraní metodou „jeden web“ by v prvé řadě měl myslet na horší zařízení a řešení pro lepší koncipovat jako rozšiřující.
Proto nejdříve mobily a proto jde na proces designu webu krásně pohlížet jako na vrstvení jeho jednotlivých elementů na sebe:
Vývojář designérský pohled obohacuje kromě jiného o přístupnost. Než navrhne řešení pro smartphony, musí se zamyslet nad zařízeními, kterým můžeme říkat třeba „křápy“. :)
Nemusí to být jenom stará Nokia se špatným prohlížečem nebo MSIE6. Mezi křápy počítejte i vaši zcela novou tiskárnu nebo slepeckou čtečku. Všechno to jsou zařízení, který pomůžete především správně vyznačenou strukturou dokumentu, významem obsahu a taky čitelnou typografií.
„Křápy first” není nic jiného než metoda Mobile first obohacená o přístupnost.
V přednášce jsem stihl být jen obecný. Pojďme se na vrstvení designu podle „křápy first“ podívat technicky a v konkrétní situaci. Tohle je vrstvení viditelné z obrázku převedené do CSS souboru v probíhajícím redesignu webů kin Světozor, OKO a Aero:
index.css:
/*
Vrstva pro krapy:
* reset/normalizace
* zakladni typografie
*/
/* css pravidla... */
/*
Vrstva pro smartphony:
* vzhled prvku (barvy, vlastni pisma, formatovane boxy)
*/
@media screen and (max-width: 480px) {
/* css pravidla... */
}
/*
Vrstva pro tablety a desktop:
* uprava vzhledu
* layout
*/
@media screen and (min-width: 481px) {
/* css pravidla... */
}
Hezčí kód je na Github gyzdu.
CSS je úmysleně zjednodušené. V praxi pro každý z typů zařízení přidáváme ještě extra vrstvu s drobnými úpravami — třeba pravidla pro zalamování stránky v tiskové verzi.
Problémy s media-queries v IE8 nám v tomhle jednoduchém případě pomůže vyřešit Respond.js.
Prosím, jen to CSS neberte jako šablonu. Váš projekt a hlavně zařízení rozšířená ve vaší cílové skupině mohou vyžadovat radikálně jiné nastavení.
