Obsah
- Navrhování pro neznámé
- Pragmatický přístup k designu
- Stává se agnostický
- Postupné kódování
- Ponořte se do přirážky
Zdá se, že dnes všichni mluví o responzivním designu webu, a to z dobrého důvodu; jak počet zařízení s webovým připojením stále roste - každé s odlišnými schopnostmi a funkcemi - již není rozumné vytvářet webové stránky s pevnou šířkou.
Pravda je, že nikdy nebyla. Dosud se však za nejlepší postup považovalo navrhování zkušeností, které vytvářely řadu předpokladů, ať už se týkaly rozlišení obrazovky, šířky pásma nebo vstupní metody. Pokud jste někdy navrhli web o šířce 960 pixelů, abyste jej mohli zobrazit pouze na netbooku malé obrazovky přítele (a ano, píšu zde z bolestivé zkušenosti), pochopíte, proč to nebyl nijak zvlášť chytrý přístup. Nyní, když jsou do mixu vloženy chytré telefony a tablety, je jasné, že naše tradiční metody již nejsou vhodné pro daný účel.
Naštěstí příchod mediálních dotazů CSS a rostoucí uznání, že web je samo o sobě médiem, znamená, že začínáme přijímat skutečnou povahu platformy a připouštíme, že její univerzálnost je síla, nikoli slabost.
Během příštích pěti dnů vás provedu technikou, která rozpozná tuto skutečnost: responzivní webdesign. To, které vyvinul Ethan Marcotte, kombinuje plynulé rozvržení, flexibilní obrázky a dotazy médií, které nám pomáhají vytvářet weby, které se elegantně přizpůsobí jakémukoli prostředí, s nímž se setkají.
Tento přístup předvedu tím, že vám ukážu, jak vytvořit jednoduchou galerii médií. V mých příkladech vytvořím malou webovou stránku, která bude dokumentovat nedávný výlet po Spojených státech, ale kód a design si můžete přizpůsobit podle svých vlastních potřeb.
Navrhování pro neznámé
Velká část tohoto kurzu se bude soustředit na vývojový aspekt responzivního designu. Ale než se pustíme do jakéhokoli kódu, pojďme se na chvíli zamyslet, jak bychom mohli navrhnout web, který by mohl mít nekonečné rozvržení.
Nyní mám štěstí, že mohu navrhovat rozhraní a vyvinout frontendový kód, díky kterému jsou skutečné. To samozřejmě není jedinečná dovednost - pokud pracujete pro sebe, pak jste pravděpodobně stejní. Je ale jistě výhodné pochopit, jak se obsah může přizpůsobit a přeformulovat při tvorbě fluidních vzorů.
Pracuji také jako součást většího týmu, kde je moje role více specializovaná. V takovém prostředí se vizuální designér může soustředit pouze na překlad drátových modelů do atraktivních, poutavých (podepsaných, dokonalých pixelů) kompilátorů. A není neobvyklé, že vývojáři jsou umístěni samostatně a překládají tato rozvržení do štíhlých a efektivních značek a CSS.
Takové lineární a oddělené pracovní postupy se však rychle rozpadnou, jakmile začneme hodnotit, jak se návrhy přizpůsobí různým prostředím. Stejně jako jakýkoli nový nástroj nebo technologie bychom měli také zvážit spolupráci a pružnější způsoby práce. Mnoho z nejsložitějších problémů, se kterými se setkáte při navrhování responzivních webů, lze vyřešit jednoduše konverzací, experimentováním a iterací.
Pragmatický přístup k designu
To však neznamená, že neexistuje prostor pro návrháře, aby přemýšleli o tom, jak může design fungovat mimo hranice konkrétního zařízení.
Ve společnosti Clearleft iniciujeme vizuální design z pohledu plochy. Začínáme definováním zastřešujícího návrhového jazyka a vizuální estetiky, přičemž počáteční průzkumy se často zakládají na jádru obsahu. Pokud například navrhujeme web s potravinami, začneme stránkou receptů; pro zpravodajský web stránku s příběhy.
Nejen, že je to důležitá stránka na webu, ale pravděpodobně obsahuje dostatek strukturovaného obsahu, abychom mohli vytvořit typografickou paletu. Budeme také přemýšlet o tom, jak se může rozvržení přizpůsobit - i když je to v této fázi jen v našich myslích.
Jedním z užitečných způsobů zátěžového testu designu je vzít takovou stránku a přizpůsobit ji pro užší (~ 320px široká) obrazovka. Pravděpodobně zjistíte, že některé aspekty designu budou muset být znovu promyšleny, aby fungovaly v této šířce. Zde jsou nějaké příklady:
- Typografie: Velké nadpisy mohou dobře fungovat na širších rozloženích, ale na menších obrazovkách mohou zabírat hodně svislého prostoru, a proto vyžadují další posouvání. Jak se mění délky čar, měli byste také zvážit výšky čar a další typografické úpravy.
- Odkazy: Jak bude váš design fungovat na zařízeních s dotykovou obrazovkou? I když zatím nemáme snadný způsob, jak je detekovat (což znamená, že bychom měli brát ohled na všechny aspekty našeho designu), návrh na užší obrazovku nám může dát příležitost přemýšlet o cílových oblastech odkazů a dalších interaktivních prvků . Pokyny pro iOS doporučují, aby to byly čtverce nejméně 44 pixelů / bodů, což je dobrý údaj, na který se zaměřit.
- Navigace: Pravděpodobně to bude ta nejobtížnější součást každého responzivního designu, zvláště pokud váš web obsahuje mnoho sekcí a hlubokou hierarchii. Brad Frost napsal souhrn některých různých přístupů k navigaci, které jsou v současné době zvažovány.
- Nadbytečný obsah: Není nějaký obsah vyžadován? Je nutné, aby se jiný obsah zobrazoval pouze v určitých scénářích? Neobhajuji skrývání obsahu na základě toho, jaké zařízení uživatel náhodou používá, ale techniky jako podmíněné načítání (na které se podíváme později tento týden) nám mohou pomoci zobrazovat menší stránky, které načtou doplňkový obsah pouze v případě potřeby.
Navrhování dvou kontrastních rozvržení posiluje myšlenku, že se design přizpůsobí, zatímco na počátku vyžehlí potenciální motivy. I když to zní jako zdvojnásobení práce, mějte na paměti, že nenavrhujeme každou stránku s dokonalou pixelovou přesností. Místo toho se zaměřujeme na budování škálovatelného návrhového jazyka - takového, který se bude vyvíjet, jakmile ho začneme implementovat v kódu, a ten, který je založen na jednotlivých modulech a komponentách.
Stává se agnostický
Není překvapením, že pro odvětví, které historicky zachází s webem jako s tiskem, rozvržení s pevnou šířkou proniklo do mnoha dodávek, které produkujeme. Jak začneme navrhovat adaptabilní médium, uvažujeme o nových přístupech, které nám umožní řešit problémy a komunikovat myšlenky a zároveň uznat proměnlivou povahu média. Zde je několik mých oblíbených:
- Schémata popisu stránky: Zatímco drátové modely mohou často znamenat rozvržení (a tedy předpokládat určitý typ zařízení), diagramy popisu stránky tento předpoklad odstraňují a místo toho popisují jednotlivé komponenty uspořádané v dokumentu z hlediska priority.
- Stylové dlaždice: Při komunikaci návrhových nápadů s klienty se můžeme setkat s prezentací „obrazů webových stránek“. Pokud nebudeme opatrní, klienti oprávněně požádají, aby si prohlédli koncepty, které ukazují, jak bude design vypadat i na jiných zařízeních. To nás může přinutit do neudržitelné situace výroby více stránek pro více zařízení. Samantha Warren o tomto problému přemýšlela a přišla s dlaždicemi stylu. Sedí někde mezi náladovým panelem (ale méně vágním) a plně realizovanými kompasy (ale méně přesnými) a pomáhají nám komunikovat typografii, styly tlačítek a úpravy mastheadů. Rovněž podporují zralejší úroveň diskuse s našimi klienty.
- Mobilify designová hra: Toto cvičení může během workshopů společného designu opravdu dobře fungovat. V tomto cvičení si každý zapisuje příspěvek, který zaznamenává prvky, které se mohou na určité stránce objevit. Ty jsou poté přilepeny ke zdi v pořadí podle důležitosti, jako by se na mobilním telefonu objevovaly jako linearizované. Výsledná diskuse může vygenerovat několik překvapivých závěrů. Můžete si například uvědomit, že navigace není nejdůležitější součástí stránky. To by mohlo vést až k designu, kde odkaz přeskočit v horní části stránky odkazuje na navigaci v zápatí.
Samozřejmě stále existuje prostor pro nástroje, které již používáme, ale při širším návrhu webových stránek je třeba mít na paměti, že rozvržení již není známé.
Postupné kódování
Naštěstí se nemusíme starat o vizuální design v příkladu, na kterém pracujeme, protože tvrdá práce pro nás byla provedena! Místo toho se můžeme soustředit na kódování našeho designu do plně responzivního webu.
Ještě než začneme, ještě jedna věc. Je důležité si pamatovat základní princip média, se kterým pracujeme: univerzálnost. To znamená nejen budování dnešních webových zařízení, ale také zajištění kompatibility se zařízeními včera a zítra. John Allsopp ve svém příspěvku The Next 6 Billion popsal, proč je tento princip důležitý:
„Těchto dalších šest miliard tvoří děti na venkově v Indii, Africe a Číně, kde může být přerušovaný přístup k energii a sítím. Je to někdo na Sumatře v desetileté Wintelově krabici. Jsou to lidé, kteří mluví stovkami různých jazyků, s desítkami různých systémy psaní. Jsou to lidé, kteří jsou první v jejich rodině, kdo umí číst a psát. Je to 20 procent lidí na celém světě, kteří neumí číst ani psát.’
Můžeme vystopovat naše chápání webu tím, že se podíváme na různé způsoby (pro lepší slovo), které se v naší profesi ujaly: webové standardy, přístupnost, nenápadný JavaScript… všechny jsou varianty na stejné téma: progresivní vylepšení. Totéž platí pro responzivní webový design. Postavit skutečně responzivní web je vybudovat web, který je nejen zpětně kompatibilní, ale také přátelský k budoucnosti.
Ponořte se do přirážky
Dobře, dost preambule, je čas otevřít textový editor.Náš designér nám poskytl design orientovaný na plochu a byl natolik laskavý, že poskytl příklady toho, jak by se to mohlo objevit i v užším výřezu.
Může být lákavé je kódovat samostatně, ale navrhnu jiný přístup. Umístěním samostatných komponent - nebo vzorů - tvořících design na jednu stránku můžeme vytvořit portfolio vzorů. To nám umožňuje vyvíjet komponenty mimo hranice jakéhokoli rozložení stránky a dá nám něco, na co se budeme později odvolávat při jakémkoli regresním testování. Podívejme se na počáteční označení v několika různých zařízeních:
Podívejte se na naše portfolio značených vzorů
Budu zatraceně - již máme responzivní web! Náš obsah se přizpůsobuje omezením každého zařízení, ať už jde o nový fantastický iPad nebo vyřazený funkční telefon. Funguje dokonce i v textovém prohlížeči, jako je Lynx.
Díky základním principům univerzality je web ve výchozím nastavení responzivní. To je skvělé, ale také to znamená, že cokoli, co od nynějška uděláme kódu, může tuto nativní přizpůsobivost ohrozit.
Zítra: Budeme opatrně šlapat a začneme uplatňovat první aspekt responzivního designu: typografii a plynulé mřížky.
