Obsah
- Reagující obrázky
- Výkon
- Podmíněné a líné načítání
- Responzivní typografie
- Mediální dotazy v JavaScriptu
- Postupné vylepšení
- Rozložení
- Rozložení mřížky CSS
- Konečně
Reagovat na webový design zní neuvěřitelně jednoduše. Vyberte si flexibilní mřížky pro rozvržení, použijte flexibilní média (obrázky, video, prvky iframe) a použijte mediální dotazy k aktualizaci těchto měření, abyste co nejlépe uspořádali obsah v jakémkoli výřezu. V praxi jsme se naučili, že to není tak snadné. Drobné problémy, které se objevují během každého projektu, nás neustále škrábou na hlavách a občas dokonce vyřezávají zákopy nehtů na našich stolech.
Od té doby, co jsem začal kurátorem zpravodaje Responsive Design Weekly, měl jsem to štěstí, že jsem mohl mluvit s mnoha členy webové komunity a slyšet jejich zkušenosti. Chtěl jsem zjistit, co přesně se chce komunita naučit, a tak jsem rozeslal průzkum čtenářům. Zde jsou nejlepší výsledky:
- Reagující obrázky
- Zlepšení výkonu
- Responzivní typografie
- Mediální dotazy v JavaScriptu
- Progresivní vylepšení
- Rozložení
S ohledem na tato témata jsem spustil řadu podcastů a požádal některé z našich vedoucích v oboru o jejich myšlenky. V jejich odpovědích byl jeden bod jednomyslný: zaměřte se na získání základů těsně předtím, než se začnete obávat vzrušujících a pokročilých technik. Tím, že vezmeme věci zpět k základům, jsme schopni vybudovat robustní rozhraní pro každého a vrstvit funkce, pokud to kontext zařízení nebo uživatele umožňuje.
„Takže ... a co ty pokročilé techniky?“ Slyšel jsem, že se ptáte. Myslím, že to nejlépe shrnul Stephen Hay, když řekl: „Hlavní technikou RWD je začít tím, že nepoužíváme žádné pokročilé techniky RWD. Začněte se strukturovaným obsahem a budujte si cestu nahoru. Bod zlomu přidejte pouze tehdy, když se design rozbije a obsah jej diktuje a ... to je ono. “
V tomto článku začnu od základů a přidám vrstvy složitosti, jak to situace dovolí, v návaznosti na tyto pokročilé techniky. Začněme.
Reagující obrázky
Fluidní média byla klíčovou součástí RWD, když ji poprvé definoval Ethan Marcotte. šířka: 100%; , maximální šířka: 100%; funguje dodnes, ale responzivní obrazová krajina se stala mnohem komplikovanější. S rostoucím počtem velikostí obrazovky, hustoty pixelů a podporovaných zařízení toužíme po větší kontrole.
Tři hlavní obavy byly definovány skupinou Responsive Images Community Group (RICG):
- Velikost kilobajtu obrázku, který posíláme po drátě
- Fyzická velikost obrazu, který odesíláme do zařízení s vysokým DPI
- Oříznutí obrázku ve formě uměleckého směru pro konkrétní velikost výřezu
Yoav Weiss s pomocí Indiegogo provedl většinu práce na implementaci Blink - vidlice WebKit od Googlu a v době, kdy si ji přečtete, bude dodána v prohlížečích Chrome a Firefox. Safari 8 bude dodáván srcset, avšak atribut velikosti je pouze v nočních verzích a obrázek> ještě není implementován.
S příchodem čehokoli nového do našeho procesu vývoje webu může být obtížné začít. Pojďme si projít příklad krok za krokem.
img! - Deklaruje záložní obrázek pro všechny prohlížeče nepodporující obrázky -> src = "horse-350.webp"! - Deklaruje všechny velikosti obrázků v srcset. Zahrňte šířku obrázku pomocí deskriptoru w a informujte prohlížeč o šířce každého obrázku. -> srcset = "kůň-350.webp 350w, kůň-500.webp 500w, kůň-1024.webp 1024w, kůň.webp 2000w "! - Velikosti informují prohlížeč o rozložení našich stránek. Tady říkáme pro jakýkoli výřez, který je 64EM a větší, použijte obrázek, který bude zabírat 70% výřezu -> sizes = "(min-width: 64em) 70vw,! - Pokud výřez není ten velký, pak pro jakýkoli výřez, který má 37,5ems a větší, použijte obrázek, který zabírá 95% výřezu -> (min-width: 37,5em) 95vw,! - a pokud je výřez menší než tento, použijte obrázek, který zabírá 100% výřezu -> 100vw "! - vždy použijte alternativní text .--> alt =" Kůň "/>
Z hlediska výkonu nezáleží na tom, zda v atributu size použijete min-width nebo max-width - ale záleží na pořadí zdroje. Prohlížeč vždy použije první odpovídající velikost.
Nezapomeňte také, že pevně kódujeme atribut velikosti, který má být přímo definován v porovnání s naším designem. To může způsobit problémy při pohybu vpřed. Pokud například redesignujete svůj web, budete muset znovu navštívit všechny obrázky> nebo obrázky> s a předefinovat velikosti. Pokud používáte CMS, lze to v rámci vašeho procesu sestavení překonat.
WordPress již má plugin, který vám pomůže. Definuje srcset na standardních odrůdách obrázků WP a umožňuje deklarovat velikosti v centrálním umístění. Když je stránka generována z databáze, vymění všechny zmínky na img> a nahradí je značkou obrázku.
Základní
- Přemýšlejte o tom, zda opravdu potřebujete zahrnout obrázek. Je obsah jádra obrázku nebo je dekorativní? Jeden méně obrázku bude znamenat rychlejší dobu načítání
- Pomocí ImageOptim můžete optimalizovat obrázky, které potřebujete zahrnout
- Nastavte záhlaví vypršení platnosti pro své obrázky na serveru nebo v souboru .htaccess (viz podrobnosti v části „Výkon“)
- PictureFill poskytuje podporu polyfill pro obrázky
Pokročilý
- Lazy načtěte obrázky pomocí pluginu Lazy Load od jQuery
- Pro detekci funkcí použijte HTMLImageElement.Sizes a HTMLPictureElement.
- Pokročilý modul PictureFill WP, který najdete na Githubu, vám umožní definovat vlastní hodnoty šířky a velikosti obrazu
Výkon
Abychom na našich stránkách dosáhli nejrychleji vnímaného výkonu, potřebujeme všechny HTML a CSS potřebné k vykreslení horní části naší stránky v rámci první odpovědi ze serveru. Toto magické číslo je 14 kB a je založeno na maximální velikosti okna přetížení během prvního zpáteční doby (RTT).
Patrick Hamann, technický vedoucí frontendu v Guardianu, a jeho týmu se podařilo prolomit bariéru 1000 ms pomocí kombinace technik frontend a backend. Guardian se snaží zajistit, aby byl požadovaný obsah - článek - doručen uživateli co nejrychleji a v rámci magického čísla 14 kB.
Podívejme se na postup:
- Uživatel klikne na odkaz Google na novinový článek
- Do databáze článku je odeslán jeden požadavek na blokování. Nejsou požadovány žádné související příběhy ani komentáře
- Načte se HTML obsahující kritické CSS
- v hlavě>
- Probíhá proces „Vystřihněte hořčici“ a načtou se všechny podmíněné prvky založené na funkcích zařízení uživatele
- Jakýkoli obsah související s nebo podporující samotný článek (související obrázky k článku, komentáře k článku atd.) Jsou líně načteny na místo
Optimalizace takto kritické cesty vykreslování znamená, že hlava> má 222 řádků. Kritický obsah, který si uživatel přišel prohlédnout, však při gzipu stále spadá do počáteční užitečné zátěže 14 kB. Je to tento proces, který pomáhá překonat bariéru vykreslování 1000 ms.
Podmíněné a líné načítání
Podmíněné načítání zlepšuje zážitek uživatele na základě funkce jeho zařízení. Nástroje jako Modernizr vám umožňují tyto funkce testovat, ale mějte na paměti, že to, že prohlížeč tvrdí, že nabízí podporu, nemusí vždy znamenat plnou podporu.
Jednou z technik je pozastavit načítání něčeho, dokud uživatel neukáže úmysl tuto funkci použít. To by bylo považováno za podmíněné. Načítání v sociálních ikonách můžete pozastavit, dokud se uživatel nepřesune nad ikony nebo se jich nedotkne, nebo se můžete vyhnout načítání iframe Google Map v menších výřezech, kde je pravděpodobné, že uživatel upřednostňuje propojení s vyhrazenou mapovací aplikací. Dalším přístupem je „Vyříznout hořčici“ - podrobnosti viz výše.
Líné načítání je definováno jako něco, co vždy hodláte načíst na stránku - obrázky, které jsou součástí článku, komentáře nebo jiné související články - ale nemusí tam být, aby uživatel mohl začít konzumovat obsah.
Základní
- Povolit gzipování souborů a nastavit záhlaví vypršení platnosti pro veškerý statický obsah (netm.ag/expire-260)
- Použijte plugin Lazy Load jQuery. Toto načte obrázky, když se blížíte k výřezu nebo po určité době
Pokročilý
- Nastavte rychle nebo CloudFlare. Sítě pro doručování obsahu (CDN) doručují váš statický obsah uživatelům rychleji než váš vlastní server a mají několik bezplatných úrovní
- Povolte SPDY pro prohlížeče podporující protokol HTTP2 a využijte výhod funkcí protokolu HTTP2, jako jsou paralelní požadavky protokolu HTTP
- Social Count umožňuje podmíněné načítání vašich sociálních ikon
- Použití rozhraní Static Maps API vám umožní vypnout interaktivní mapy Google pro obrázky. Podívejte se na příklad Brada Frosta na netm.ag/static-260
- Ajax Include Pattern načte fragmenty obsahu z atributu data-before, data-after nebo data-replace
Responzivní typografie
Typografie je o tom, aby byl váš obsah snadno strávitelný. Responzivní typografie to rozšiřuje, aby byla zajištěna čitelnost na široké škále zařízení a výřezů. Jordan Moore připouští, že typ je jedna věc, na kterou není ochotný ustoupit. Pokud potřebujete, přetáhněte obrázek nebo dva, ale ujistěte se, že máte skvělý typ.
Stephen Hay navrhuje nastavit velikost písma HTML na 100 procent (čtení: nechte to tak, jak je), protože každý výrobce prohlížeče nebo zařízení nastavuje rozumně čitelnou výchozí hodnotu pro konkrétní rozlišení nebo zařízení. U většiny prohlížečů pro počítače je to 16px.
Na druhou stranu Moore používá jednotku REM a velikost písma HTML k nastavení minimální velikosti písma pro určité prvky obsahu. Například pokud chcete, aby vedlejší článek měl vždy 14 pixelů, nastavte jej jako základní velikost písma na elementu HTML a nastavte .byline {font-size: 1rem;}. Když změníte velikost textu: font-size: tak, aby vyhovovala výřezu, nebude to mít vliv na styl .by-line.
Důležitá je také dobrá délka řádku pro čtení - zaměřte se na 45 až 65 znaků. K dispozici je záložka, pomocí které můžete zkontrolovat svůj obsah. Pokud svým designem podporujete více jazyků, může se také lišit délka řádku. Moore navrhuje použít: lang (de) article {max-width: 30em} k zakrytí případných problémů.
Chcete-li zachovat vertikální rytmus, nastavte margin-bottom proti blokům obsahu ul>, ol>, blockquote>, table>, blockquote> atd. Na stejnou výšku řádku. Pokud je rytmus přerušen zavedením obrázků, můžete jej opravit přidáním Baseline.js nebo BaselineAlign.js.
Základní
- Založte své písmo na 100% textu
- Pracujte v relativních em jednotkách
- Nastavte okraje na výšku čáry, abyste ve svém návrhu udrželi vertikální rytmus
Pokročilý
- Zlepšete výkon načítání písem pomocí Enhance.js nebo odloženého načítání písem
- Pro sémantické nadpisy použijte Sass @includes.
- Často musíme použít styl h5 v widgetu postranního panelu, který vyžaduje označení h2. Pomocí Bearografových typografických mixinů můžete ovládat velikost a zůstat sémantický pomocí níže uvedeného kódu:
.sidebar h2 {@include heading-5}
Mediální dotazy v JavaScriptu
Od té doby, co jsme byli schopni ovládat rozložení v různých výřezech prostřednictvím mediálních dotazů, hledali jsme způsob, jak to spojit také s spuštěním našeho JavaScriptu. Existuje několik způsobů, jak vypálit JavaScript na určité šířky, výšky a orientace výřezu, a někteří chytří lidé napsali několik snadno použitelných nativních pluginů JS, jako jsou Enquire.js a Simple State Manager. Dalo by se to dokonce postavit sami pomocí matchMedia. Máte však problém, že musíte duplikovat mediální dotazy ve vašem CSS a JavaScriptu.
Aaron Gustafson má elegantní trik, který znamená, že nemusíte spravovat a porovnávat své mediální dotazy v CSS a JS. Myšlenka původně přišla od Jeremyho Keitha a v tomto příkladu ji Gustafson vzal k plné implementaci.
Pomocí getActiveMQ (netm.ag/media-260) vložte div # getActiveMQ-watcher na konec elementu body a skryjte jej. Pak v CSS nastavte # getActiveMQ-watcher {font-family: break-0;} na první mediální dotaz, font-family: break-1; do druhé, font-family: break-2; do třetí a tak dále.
Skript používá watchResize () (netm.ag/resize-260) ke kontrole, zda se změnila velikost výřezu, a poté načte zpět aktivní rodinu fontů. Nyní to můžete použít k připojení vylepšení JS, jako je přidání rozhraní s kartami do dl>, pokud to výřez umožňuje, změna chování lightboxu nebo aktualizace rozložení datové tabulky. Podívejte se na getActiveMQ Codepen na netm.ag/active-260.
Základní
- Zapomeňte na JavaScript pro různé výřezy. Poskytujte uživatelům obsah a funkce webových stránek tak, aby k nim měli přístup ve všech výřezech. Nikdy bychom neměli potřebovat JavaScript
Pokročilý
- Rozšiřte Gustafsonovu metodu pomocí Breakup jako předdefinovaného seznamu mediálních dotazů a automatizováním vytváření seznamu rodin písem pro getActiveMQ-watcher
Postupné vylepšení
Častou mylnou představou o postupném vylepšování je, že si lidé myslí: „No, nemohu tuto novou funkci použít“, ale ve skutečnosti je to naopak. Progresivní vylepšení znamená, že můžete dodat funkci, pokud je podporována pouze v jednom nebo dokonce v žádném prohlížeči, a postupem času lidé získají lepší zážitek, jakmile dorazí nové verze.
Pokud se podíváte na základní funkci libovolného webu, můžete jej dodat jako HTML a nechat zpracování provést na straně serveru. Platby, formuláře, lajky, sdílení, e-maily, řídicí panely - to vše lze provést. Jakmile je základní úkol vytvořen, můžeme na něj navrstvit úžasné technologie, protože máme bezpečnostní síť, která zachytí ty, které propadnou. Většina pokročilých přístupů, o kterých jsme zde hovořili, je založena na progresivním vylepšování.
Rozložení
Flexibilní rozvržení je jednoduché říci, ale má mnoho různých přístupů. Vytvářejte jednoduchá rozložení mřížky s menším počtem značek pomocí selektoru: nth-child ().
/ * deklaruje první šířku mobilu pro mřížku * / .grid-1-4 {float: left; šířka: 100%; } / * Pokud je výřez minimálně 37,5EM, nastavte mřížku na 50% na prvek * / @media (min. Šířka: 37,5EM) {.grid-1-4 {šířka: 50%; } / * Vymazat float každý druhý prvek PO prvním. Toto zacílí na 3., 5., 7., 9. ... v mřížce. * / .Grid-1-4: n-tý typ (2n + 1) {clear: left; }} @media (min-sirka: 64em) {.grid-1-4 {sirka: 25%; } / * Odebrat předchozí clear * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Vymazat float každý 4. prvek PO prvním. Toto zacílí na 5., 9. ... v mřížce. * / .Grid-1-4: n-tý typ (4n + 1) {clear: left; }}
Zamávejte s používáním polohy a plovoucího rozložení. I když nám doposud dobře sloužili, jejich použití pro rozložení bylo nezbytným hackem. Nyní máme v bloku dvě nové děti, které nám pomohou napravit všechny naše problémy s rozložením - Flexbox a Grids.
Flexbox je skvělý pro jednotlivé moduly a řídí rozložení částí obsahu v každém z modulů. Existují rozložení, která se pokoušíme doručit, kterých lze snáze dosáhnout pomocí Flexboxu, a to platí ještě více u responzivních webů. Další informace najdete v příručce CSS Tricks k aplikaci Flexbox nebo Flexbox Polyfill.
Rozložení mřížky CSS
Mřížka je spíše pro rozložení na úrovni maker. Modul rozložení mřížky vám nabízí skvělý způsob, jak popsat vaše rozložení v rámci vašeho CSS. I když je v tuto chvíli stále ve fázi konceptu, doporučuji tento článek o rozvržení CSS Grid od Rachel Andrew.
Konečně
Zde je jen několik tipů, jak rozšířit svoji citlivou praxi. Když přistupujete k jakékoli nové responzivní práci, udělejte krok zpět a ujistěte se, že máte správné základy. Začněte s jejich vylepšeným obsahem, HTML a vrstvami a nebude zde žádný limit, kam si můžete vzít své návrhy.
Tento článek se původně objevil v čísle 260 síťový časopis.
