Citlivé Návrh internetových stránek


Link: http://alistapart.com/article/responsive-web-design
Author: Ethan Marcotte

Ethan Marcotte 25.května 2010 Publikováno v CSS, rozvržení a grid computing, mobilní / Multidevice, vstřícného Projektování, interakci designu ∙ 103 Komentáře

“Ovládací prvek, který designéři vědět tiskové médium, a často touží ve webovém prostředí, je prostě funkce omezení tištěné stránky. Měli bychom přijmout fakt, že web nemá stejná omezení a design pro tuto flexibilitu. Ale nejprve musíme “akceptovat příliv a odliv věcí.”

John Allsopp, “Dao of Web Design

Anglický architekt Christopher Wren kdysi zavtipkoval, že jeho zvoleném oboru “směřuje k věčnosti,” a něco o tom, že odvolání vzorce: Na rozdíl od webu, který se často cítí jako cíl pro příští týden, architektura je obor velmi definována jeho trvalosti.

Budově je základem definuje jeho stopu, která definuje jeho rám, který utváří fasády. Každá fáze architektonického procesu je neměnný, neměnná více než ten předchozí. Kreativní rozhodnutí doslova formovat fyzický prostor, definuje způsob, jakým se lidé pohybují přes jeho hranice za desetiletí nebo dokonce staletí.

Práce na webu je však zcela jiná věc. Naše práce je definována svou pomíjivost, často rafinovaný nebo nahrazena do jednoho roku nebo dvou. Nejednotné okno šířky, rozlišení obrazovky, uživatelské preference a instalované našich uživatelů fonty jsou jen některé z nehmotných jednáme, když jsme publikovat svou práci, a za ta léta jsme se stali neuvěřitelně adept na tom.

Ale krajina se posouvá, možná rychleji, než bychom chtěli. Mobilní prohlížeč se očekává rychlejší než desktop založený přístup do třípěti let. Dva ze tří dominantních herních konzolí mají webové prohlížeče (a jeden z nich je docela vynikající). Jsme navrhování pro myši a klávesnice, pro T9 klávesnice, pro kapesní herní ovladače, pro dotykové rozhraní. Stručně řečeno, jsme konfrontováni s větším počtem zařízení, vstupních režimů, a prohlížečích, než kdy předtím.

V posledních letech jsem se setkání s více společnostmi, které žádají iPhone webové stránky jako součást svého projektu. Je to zajímavá věta: V nominální hodnotě, samozřejmě, že mluví kvalita Mobil WebKit je jako prohlížeč, stejně jako silný obchodní případ pro přemýšlení nad pracovní plochu. Ale jak designéry, myslím, že jsme často útěchu v těchto výslovných požadavků, protože nám umožní rozčlenit problémy před námi. Můžeme karantény mobilní zážitek na jednotlivé subdomény, prostory odlišné a oddělené od non-iPhone internetových stránkách.” Ale co bude dál?IPad webové stránky?N90 webové stránky? Můžeme opravdu pokračovat, aby se zavázaly k podpoře každého nového uživatelského agenta s vlastním zakázku zkušenosti? Na nějakém místě, to se začne cítit jako hrou s nulovým součtem. Ale jak můžeme a naše návrhy, přizpůsobit?


Flexibilní základ

Podívejme se na příklad design. Jsem postavil jednoduchou stránku pro hypotetickou časopis, je to jednoduchý dvousloupcový layout postavený na tekutiny roštu, s ne několika flexibilních obrázků zasypali celé. Jako dlouholetý zastánce non-pevné rozvržení, jsem dlouho pocit, že jsou více “budoucnost, prostě proto, že byli layout agnostik. A do jisté míry je to pravda: flexibilní konstrukce provést žádné předpoklady o okně prohlížeče šířky, a přizpůsobit krásně do zařízení, která mají výšku a na šířku.

Obrovské obrazy jsou obrovské. Naše rozvržení, když je flexibilní, není dobře reagují na změny v usnesení nebo výřez velikosti.

Ale design, pevné nebo kapalné formě, váhy hladce mimo kontextu, pro který byl původně určen. Váhy příklad provedení dokonale jakož i změní velikost okna prohlížeče, ale stres body rychle se objeví v nižším rozlišení. Při pohledu na výřezu menší než 800 × 600, je obrázek pod logem se rychle stává oříznut, navigace text může obtékat v nevhodným způsobem, a snímky podél spodní příliš kompaktní objeví čitelné. A není to jen spodní konec rozlišení spektra, která je ovlivněna: při pohledu na design na širokoúhlém displeji, snímky rychle rostou nepraktických rozměrů, vytěsnění okolní kontext.

Stručně řečeno, naše flexibilní konstrukce funguje docela dobře v desktop-centrické kontextu, pro které byl určen, ale není optimalizována rozšířit daleko za tím.

Stát reagovat

V poslední době vznikající disciplína s názvem “reagovat architektura” začala ptát, jak fyzické prostory může reagovat na přítomnost lidí, kteří projdou ně. Prostřednictvím kombinace vestavěných robotiky a tahových materiálů, architekti experimentují s uměleckými instalacemi a stěnových, která se ohýbají flex a rozšířit davy k nim. Pohybová čidla lze spárovat se systémy pro kontrolu klimatu Chcete-li upravit teplotu v místnosti a okolního osvětlení, neboť se naplní lidmi. Firmy již vyrábí “chytré sklo technologii”, který může automaticky stát neprůhledné, když pokoji je cestující dosáhnout určité prahové hodnoty hustoty, což jim další vrstvu ochrany soukromí.

Ve své knize Interactive Architecture, Michael Fox a Miles Kemp popsal více adaptivní přístup jako “více regulačního systému, ve které se vstupuje do konverzace;. Kontinuální a konstruktivní výměny informací” Důraz moje, protože si myslím, že je to jemné, ale přesto výkonný Rozlišení: spíše než vytvářet nezměnitelný, neměnné prostory, které definují konkrétní zkušenosti, které naznačují, obyvatel a struktura může a měl-vzájemně se ovlivňují.

To je naše cesta vpřed. Spíše než přizpůsobení odpojené návrhy na každé stále rostoucí počet internetových zařízení, můžeme s nimi zacházet jako aspekty stejné zkušenosti. Jsme schopni navrhnout optimální zážitek ze sledování, ale vložit na standardech založené technologie do našich návrhů tak, aby byly nejen pružnější, ale adaptivní do médií, že je činí. Stručně řečeno, musíme praktikovat reagující web design. Ale jak?
Seznamte dotaz média

Od dob CSS 2.1, naši stylů si užili nějakou míru informovanosti zařízení prostřednictvím různých typů médií. Pokud jste někdy napsali tisku stylů, jste již obeznámeni s koncepcí:

<Link rel = “stylesheet” type = “text / css” href = “core.css”
media = “screen” />
<Link rel = “stylesheet” type = “text / css” href = “print.css”
media = “print” />

V naději, že bychom se víc než navrhování pěkně formátované stránky výtisků, specifikace CSS dodává nám houf přijatelných typů médií, které byly navrženy tak, aby cílit na konkrétní třídu web-ready zařízení. Ale většina prohlížečů a zařízení nikdy přijali ducha specifikaci, takže mnoho typů médií provedena nedokonale nebo zcela ignorována.

Naštěstí W3C vytvořen příkazy médií jako součást specifikace CSS3, zlepšení na příslib typů médií. Dotaz média nám umožňuje zaměřit se nejen určité třídy zařízení, ale ve skutečnosti kontrolovat fyzikální vlastnosti přístroje činí naši práci. Například po nedávném vzestupu mobilního WebKit, mediální dotazy se stal populárním na straně klienta technika pro doručování na míru stylů na iPhone, Android telefony a jejich ilk. K tomu bychom mohli začlenit do dotazu propojeného Stylů mediálního atributu:

<Link rel = “stylesheet” type = “text / css”
media = “displej a (max-device-width: 480px)”
href = “shetland.css” />

Dotaz obsahuje dvě složky:

typ média (obrazovka), a
Skutečný dotaz uzavřeny v závorkách, který obsahuje konkrétní mediální funkce (max-device-width) kontrolovat, následovaný cílové hodnoty (480px).

V jednoduché angličtině, žádáme zařízení, pokud je jeho horizontální rozlišení (max-device-šířka) je rovna nebo menší než 480px. Pokud test proběhl úspěšně, jinými slovy, pokud budeme prohlížení naší práci na malé obrazovce zařízení jako iPhone, pak se přístroj načte shetland.css. V opačném případě je odkaz zcela ignorován.

Návrháři experimentovali s rozlišením-aware rozvržení v minulosti, většinou se spoléhat na JS-řízené řešení, jako je vynikající scénář Camerona Adamse. Ale dotaz média specifikace poskytuje celou řadu funkcí médií, která sahá daleko za hranice rozlišení obrazovky, výrazně rozšiřuje rozsah toho, co můžeme testovat s našimi dotazy. A co víc, můžete vyzkoušet více hodnot vlastností v jednom dotazu zřetězení je spolu s klíčovým slovem a:

<Link rel = “stylesheet” type = “text / css”
media = “displej a (max-device-width: 480px) a (rozlišení: 163dpi)”
href = “shetland.css” />

Navíc nejsme omezeny na začlenění mediální dotazů našich odkazů. Můžeme zahrnout do naší CSS buď jako součást @ mediální pravidla:

@ Media screen a (max-device-width: 480px) {
. Sloupec {
float: none;
}
}

Nebo jako součást @ import směrnice se rozumí:

@ Import url (“shetland.css”) displej a (max-device-width: 480px);

Ale v každém případě, účinek je stejný: Pokud zařízení projde testem vztáhl mediálním dotaz, je příslušný CSS aplikován na naší značky. Mediální dotazy jsou, stručně řečeno, podmíněných komentářů pro zbytek z nás. Spíše než na konkrétní verzi konkrétního prohlížeče, můžeme chirurgicky opravit problémy v našem uspořádání jak to mimo své původní váhy, ideální rozlišení.
Přizpůsobovat, reagovat, a překonat

Obraťme svou pozornost k obrazům na základně naší strany. Ve své standardní rozložení, příslušný CSS v současné době vypadá takto:

. Obr. {
float: left;
margin: 0% 3,317535545023696682 1.5em 0 / * 21px / 633px * /
šířka: 31,121642969984202211% / * 197px / 633px * /
} Li # f-Mycroft,
li # f-zima {
margin-right: 0;
}

Jsem vynechal řadu typografických vlastností, které se zaměřují na rozložení:. Každá postava prvek je dimenzován zhruba jednu třetinu obsahující sloupce s pravém okraji vynuluje na dvou obrázcích na konci každého řádku (Li # f-Mycroft, li # f-zima). A to funguje docela dobře, dokud se výřez je buď znatelně menší nebo větší než náš původní design. S dotazy médií, můžeme použít rozlišení specifické spotfixes, přizpůsobení náš design, aby lépe reagovat na změny na displeji.

Za prvé, pojďme linearizovat naše stránky, jakmile výřez klesne pod určitou rozlišovací práh, řekněme 600px. Takže na dně naší stylů, pojďme vytvořit novou mediální @ blok, tak jako:

@ Media screen a (max-width: 600px) {
. Stožár,
. Intro,
. Hlavní,
. Footer {
float: none;
šířka: auto;
}
}

Pokud si prohlížíte naše aktualizované stránky v moderní prohlížeče na stolním počítači a snížit velikost svého okna pod 600px, dotaz média zakázat plave na provedení hlavních prvků, stohování každý blok na vrcholu každého jiný v toku dokumentu. Takže náš miniaturní provedení se rýsuje pěkně, ale obraz stále ještě zmenšit, že inteligentně. Pokud si představíme další dotaz médií, můžeme změnit jejich uspořádání podle:

@ Media screen a (max-width: 400px) {
. Postava,
li # f-Mycroft {
margin-right: 3,317535545023696682% / * 21px / 633px * /
šířka: 48,341232227488151658% / * 306px / 633px * /
} Li # f-watson,
li # f-Moriarty {
margin-right: 0;
}
}

Naše údaje mohou citlivě měnit jejich uspořádání, aby lépe vyhovoval menší displeje.

Nestarejte se o nevzhledné procenta, my prostě přepočtem šířky kapaliny mřížky na účet pro nově linearizovaný rozložení. Stručně řečeno, jdeme od třemi sloupci rozložení na dvě rozložení sloupců, pokud je šířka výřezu klesne pod 400px, takže obraz výraznější.

Můžeme skutečně zaujala stejný přístup pro širokoúhlé displeje, taky. Pro větší rozlišení, mohli bychom přijmout šest přes péči pro naše obrazy, umístění je všechny ve stejném řádku:

@ media screen a (min-width: 1300px) {
 . postava,
 li # f-Mycroft {
 margin-right: 3,317535545023696682% / * 21px / 633px * /
 šířka: 13,902053712480252764% / * 88px / 633px * /
 }
}

Nyní naše obrazy jsou krásně pracuje na obou koncích spektra rozlišení, optimalizace jejich rozložení na změny v okně šířkách a rozlišení zařízení podobně.

Zadáním širší min-width v novém dotazu médií, můžeme posunout naše obrázky do jednoho řádku rozvržení.

Ale to je jen začátek. Práce z dotazů médií, které jsme v našem vložených CSS, můžeme změnit mnohem více než jen umístění několika obrázků: můžeme zavést nové, alternativní rozložení naladěné každý rozsah rozlišení, takže možná navigace více prominentní v širokoúhlém zobrazení, nebo přemístit ji nad loga na menších displejích.

Návrhem citlivě, nemůžeme jen linearizovat náš obsah na menší zařízení, ale také optimalizovat svou prezentaci v celé řadě displejů.

Ale citlivý provedení není omezeno na změny uspořádání. Mediální dotazy nám umožňují praktikovat nějaké neuvěřitelně přesné jemného doladění, naše stránky přetvářet sami sebe: můžeme zvýšit cílovou oblast na odkazy na menších obrazovkách, lepší dodržování zákona Fitts “na dotek zařízení; selektivně skrýt nebo zobrazit prvky, které by mohly obohatit stránka je navigace, dokonce můžeme praktikovat reagující sazbu postupně měnit velikost a vedoucí našeho textu, optimalizace zážitek ze čtení na displeji poskytnutí.

Pár technických poznámek

Je třeba poznamenat, že mediální dotazy vychutnat neuvěřitelně robustní podporu mezi moderních prohlížečích. Stolní prohlížeče jako Safari 3 +, Chrome, Firefox 3.5 +, Opera 7 +, a všichni přirozeně analyzovat mediální dotazy, stejně jako novější mobilní prohlížeče jako Opera Mobile a mobilní WebKit. Samozřejmě, že starší verze těchto desktopových prohlížečů nepodporují příkazy médií. A zatímco Microsoft se zavázala k podpoře dotazu mediální IE9 Internet Explorer v současnosti nenabízí nativní implementaci.

Nicméně, pokud máte zájem o realizaci starší prohlížeče podporu pro dotazy médií, tam je JavaScript tónovaná blýskání:

  • JQuery plugin od roku 2007 nabízí poněkud omezenou mediální dotazu podporu, kterou se provádí pouze min-width a max-width vlastnosti média při použití se samostatným odkazem prvků.
  •  Více nedávno, byl CSS3-mediaqueries.js propuštěn, knihovnu, která slibuje “, aby IE 5 +, Firefox a Safari 1 + 2 transparentně analyzovat, testovat a používat CSS3 Media Queries”, pokud je zahrnuto přes @ bloků médií. Zatímco hodně vydání 1.0, já osobně jsem zjistil, že je docela robustní, a mám v plánu se dívat na jeho vývoj.

Ale pokud používáte JavaScript není odvolání, je to naprosto pochopitelné. Nicméně, to posiluje argumenty pro budování rozvržení vrcholu flexibilní sítě, zajišťující váš návrh má určitou volnost v prohlížečích médií dotaz zaslepených a zařízení.

Cesta vpred

Fluid rošty, flexibilní obrázky a média dotazy jsou tři technické ingredience pro citlivou web design, ale také vyžaduje jiný způsob myšlení. Spíše než náš obsah karantény do různorodých, specifických pro určité zařízení zkušenosti, můžeme použít příkazy médií postupně zlepšit naši práci v různých pozorovacích kontextech. To neznamená, že tam není obchodní případ různých míst zaměřena na konkrétní zařízení, například, může v případě, že uživatel cílů pro váš mobilní stránky jsou ve svém rozsahu omezenější než jeho desktop ekvivalent, pak slouží jiný obsah, aby každý z nich nejlepší přístup.

Ale tento druh designu myšlení nemusí být naše výchozí. Nyní více než kdy jindy, budeme projekční práce chtěl být viděn podél gradientu různými zkušenostmi. Citlivé web design nabízí nám cestu vpřed, nakonec nám umožní “vytvořit pro příliv a odliv věcí.”

O autorovi

Ethan Marcotte je web designer a vývojář, který hluboce zajímá o krásný design, elegantní kódu a průsečíkem dvou. Za ta léta, Ethan se těší pracovat s takovými klienty, jako je Sundance Film Festival, Stanford University, New York Magazine a The Today Show. Přísahá hojně na Twitteru a chcete být nezastavitelný robot ninja, až vyroste. Jeho poslední knihou je citlivý Web Design.