Obsah
- Citlivé obrázky
- Výkon
- Podmienené a lenivé načítanie
- Responzívna typografia
- Dotazy na médiá v JavaScripte
- Postupné vylepšovanie
- Rozloženie
- Rozloženie mriežky CSS
- Nakoniec
Responzívny webový dizajn znie neuveriteľne jednoducho. Vyberte si flexibilné mriežky pre rozloženie, použite flexibilné médiá (obrázky, video, prvky iframe) a na aktualizáciu týchto meraní použite mediálne dotazy, aby ste čo najlepšie usporiadali obsah v akomkoľvek výreze. V praxi sme sa dozvedeli, že to nie je také ľahké. Drobné problémy, ktoré sa objavujú počas každého projektu, nás nútia škriabať si hlavu a občas nám na stoloch dokonca vyrezávajú zákopy nechtov.
Odkedy som začal kurátorovať bulletin Responsive Design Weekly, mal som to šťastie, že som hovoril s mnohými členmi webovej komunity a počul ich skúsenosti. Chcel som zistiť, čo sa vlastne komunita chce naučiť, a tak som rozposlal prieskum čitateľom. Tu sú najlepšie výsledky:
- Citlivé obrázky
- Zlepšenie výkonu
- Responzívna typografia
- Dotazy na médiá v JavaScripte
- Progresívne vylepšovanie
- Rozloženie
S ohľadom na tieto témy som spustil sériu podcastov, v ktorých som požiadal niektorých našich vedúcich predstaviteľov odvetvia o ich myšlienky. V ich odpovediach bol jeden bod jednomyseľný: zamerajte sa na získanie základných informácií skôr, ako sa začnete obávať vzrušujúcich a pokročilých techník. Ak sa vrátime k základom, sme schopní vytvoriť robustné rozhranie pre každého a vrstviť funkcie, keď to kontext zariadenia alebo používateľa umožňuje.
, Takže ... čo tieto pokročilé techniky? ‘Počul som, že sa pýtate. Myslím si, že Stephen Hay to najlepšie zhrnul, keď povedal: „Najdôležitejšou technikou RWD je začať tým, že sa nepoužijú žiadne pokročilé techniky RWD. Začnite štruktúrovaným obsahom a budujte si cestu nahor. Bod prerušenia pridajte iba vtedy, keď dôjde k prerušeniu dizajnu a obsah to diktuje a ... to je všetko. “
V tomto článku začnem základnými postupmi a pridaním ďalších vrstiev zložitosti, ktoré situácia umožní, aby som nadviazal na tieto pokročilé techniky. Začnime.
Citlivé obrázky
Kvapalné médiá boli kľúčovou súčasťou RWD, keď ich prvýkrát definoval Ethan Marcotte. šírka: 100%; , maximálna šírka: 100%; stále funguje, ale responzívna obrazová krajina sa stala oveľa komplikovanejšou. So zvyšujúcim sa počtom veľkostí obrazoviek, hustotou pixelov a podporovanými zariadeniami túžime po väčšej kontrole.
Tri hlavné obavy definovala komunitná skupina pre responzívne obrázky (RICG):
- Kilobajtová veľkosť obrázka, ktorý posielame po drôte
- Fyzická veľkosť obrázka, ktorý odosielame do zariadení s vysokým DPI
- Orezanie obrázka vo forme umeleckého smeru pre konkrétnu veľkosť výrezu
Yoav Weiss s pomocou Indiegogo vykonal väčšinu práce na implementácii Blink - vidlica Google od WebKit, a kým si ju prečítate, bude sa dodávať v prehliadačoch Chrome a Firefox. Safari 8 bude dodávaný srcset, atribút size je však iba v nočných zostaveniach a obrázok> ešte nie je implementovaný.
S príchodom všetkého nového v našom procese vývoja webu môže byť ťažké začať. Prejdime si príklad krok za krokom.
img! - Deklaruje záložný obrázok pre všetky prehľadávače nepodporujúce obrázky -> src = "horse-350.webp"! - Deklaruje všetky veľkosti obrázkov v srcset. Šírku obrázka uveďte pomocou deskriptora w, ktorý informuje prehliadač o šírke každého obrázka. -> srcset = "kôň-350.webp 350w, kôň-500.webp 500w, kôň-1024.webp 1024w, kôň.webp 2000w "! - Veľkosti informujú prehliadač o rozložení našich stránok. Tu hovoríme pre akýkoľvek výrez, ktorý má 64 GB a väčší, použite obrázok, ktorý zaberie 70% výrezu -> sizes = "(min-width: 64em) 70vw,! - Ak výrez nie je tento veľký, potom pre akýkoľvek výrez, ktorý má 37,5 g a väčší, použite obrázok, ktorý zaberá 95% výrezu -> (minimálna šírka: 37,5 em) 95vw,! - a ak je výrez menší ako tento, použite obrázok, ktorý zaberá 100% výrezu -> 100vw "! - vždy majte alternatívny text .--> alt =" Kôň "/>
Z hľadiska výkonu nezáleží na tom, či v atribúte Veľkosti použijete minimálnu alebo maximálnu šírku, ale záleží na poradí zdroja. Prehliadač vždy použije prvú zodpovedajúcu veľkosť.
Pamätajte tiež, že pevne kódujeme atribút veľkostí, ktorý sa má priamo definovať v porovnaní s naším dizajnom. To môže spôsobiť problémy pri pohybe vpred. Napríklad ak redizajnujete svoj web, budete musieť znova navštíviť všetky obrázky> alebo obrázky> s a predefinovať veľkosti. Ak používate CMS, je možné to prekonať ako súčasť procesu vytvárania.
WordPress už má doplnok, ktorý vám pomôže. Definuje srcset pre štandardné odrody obrázkov WP a umožňuje deklarovať veľkosti v centrálnom umiestnení. Keď je stránka generovaná z databázy, zamení všetky zmienky na img> a nahradí ich obrázkovým označením.
Základné
- Popremýšľajte, či naozaj potrebujete zahrnúť obrázok. Je obsah jadra obrázka alebo je dekoratívny? O jeden obrázok menej bude znamenať rýchlejšia doba načítania
- Pomocou ImageOptim optimalizujte potrebné obrázky
- Nastavte hlavičky vypršania platnosti svojich obrázkov na serveri alebo v súbore .htaccess (podrobnosti nájdete v časti „Výkon“)
- PictureFill poskytuje polyfill podporu obrázkov
Pokročilé
- Lazy načítajte svoje obrázky pomocou pluginu Lazy Load od jQuery
- Na detekciu funkcií použite HTMLImageElement.Sizes a HTMLPictureElement.
- Pokročilý doplnok PictureFill WP, ktorý sa nachádza na serveri Github, vám umožní definovať vlastné hodnoty šírky a veľkosti obrázka
Výkon
Aby sme dosiahli čo najrýchlejší výkon na našich stránkach, potrebujeme všetky HTML a CSS potrebné na vykreslenie hornej časti našej stránky v rámci prvej odpovede servera. Toto magické číslo je 14 kB a je založené na maximálnej veľkosti okna preťaženia v rámci prvého spiatočného času (RTT).
Patrick Hamann, technický náskok frontendu v Guardiane, a jeho tímu sa podarilo prekonať hranicu 1000 ms pomocou zmesi techník frontend a backend. Prístup spoločnosti Guardian spočíva v zabezpečení toho, aby sa požadovaný obsah - článok - doručil používateľovi čo najskôr a v rámci magického čísla 14 kB.
Pozrime sa na postup:
- Užívateľ klikne na odkaz Google na novinku
- Do databázy článku sa odošle jedna žiadosť o blokovanie. Nie sú požadované žiadne súvisiace príbehy ani komentáre
- Načíta sa kód HTML, ktorý obsahuje kritické CSS
- v hlave>
- Uskutoční sa proces „Vyrežte horčicu“ a načítajú sa všetky podmienené prvky založené na vlastnostiach zariadenia používateľa
- Akýkoľvek obsah súvisiaci alebo podporujúci samotný článok (obrázky súvisiaceho článku, komentáre k článku atď.) Je lenivo načítaný na svoje miesto
Takáto optimalizácia kritickej cesty vykreslenia znamená, že hlava> má 222 riadkov. Kritický obsah, ktorý si používateľ prišiel pozrieť, však po gzipu stále spadá do 14 kB počiatočného užitočného zaťaženia. Je to tento proces, ktorý pomáha prekonať bariéru vykresľovania 1000 ms.
Podmienené a lenivé načítanie
Podmienené načítanie zlepšuje dojem používateľa na základe funkcie jeho zariadenia. Nástroje ako Modernizr vám umožňujú testovať tieto funkcie, ale uvedomte si, že to, že prehľadávač poskytuje podporu, nemusí vždy znamenať úplnú podporu.
Jednou z techník je odložiť načítanie, kým používateľ nepreukáže úmysel túto funkciu použiť. Toto by sa považovalo za podmienené. Načítanie v sociálnych ikonách môžete pozastaviť, kým sa používateľ nad nimi nedotkne alebo sa ich nedotkne, alebo sa môžete vyhnúť načítaniu iframe Google Map v menších výrezoch, kde je pravdepodobné, že používateľ preferuje prepojenie na špeciálnu mapovaciu aplikáciu. Ďalším prístupom je ‘Vystrihnúť horčicu‘ - ďalšie podrobnosti nájdete v rámčeku vyššie.
Lenivé načítanie je definované ako niečo, čo vždy zamýšľate načítať na stránku - obrázky, ktoré sú súčasťou článku, komentáre alebo iné súvisiace články -, ktoré však nemusia byť k dispozícii, aby mohol používateľ začať konzumovať obsah.
Základné
- Povoľte gzipovanie súborov a nastavte hlavičky vypršania platnosti pre všetok statický obsah (netm.ag/expire-260)
- Použite plugin Lazy Load jQuery. Týmto sa načítajú obrázky, keď sa blížite k výrezu alebo po určitej dobe
Pokročilé
- Nastavujte rýchlo alebo CloudFlare. Siete na doručovanie obsahu (CDN) doručujú váš statický obsah používateľom rýchlejšie ako váš vlastný server a majú niekoľko bezplatných úrovní
- Povoľte SPDY pre prehliadače s povoleným protokolom HTTP2, aby ste mohli využívať výhody funkcií protokolu HTTP2, ako sú paralelné požiadavky protokolu HTTP
- Počet sociálnych sietí umožňuje podmienené načítanie vašich sociálnych ikon
- Používanie rozhrania Static Maps API vám umožní vypnúť interaktívne mapy Google pre obrázky. Pozrite sa na príklad Brada Frosta na netm.ag/static-260
- Ajax zahrnúť vzor načíta úryvky obsahu z atribútov data-before, data-after alebo data-replace
Responzívna typografia
Typografia je o tom, aby bol váš obsah ľahko stráviteľný. Responzívna typografia to rozširuje, aby sa zabezpečila čitateľnosť na širokej škále zariadení a výrezov. Jordan Moore pripúšťa, že typ je jedna vec, na ktorú nie je ochotný ustúpiť. Ak potrebujete, napíšte jeden alebo dva obrázky, ale nezabudnite, že máte skvelý typ.
Stephen Hay navrhuje nastavenie veľkosti písma HTML na 100 percent (čítanie: nechajte ho tak, ako je), pretože každý výrobca prehľadávača alebo zariadenia nastavuje rozumne čitateľnú predvolenú hodnotu pre konkrétne rozlíšenie alebo zariadenie. Pre väčšinu prehliadačov pre počítače je to 16 pixlov.
Na druhej strane Moore používa jednotku REM a veľkosť písma HTML na nastavenie minimálnej veľkosti písma pre určité prvky obsahu. Napríklad ak chcete, aby riadok článku mal vždy 14 pixelov, nastavte ho ako základnú veľkosť písma na prvku HTML a nastavte .byline {font-size: 1rem;}. Ak zmeníte veľkosť textu: font-size: tak, aby vyhovovala zobrazenému oknu, nebude to mať vplyv na štýl .by-line.
Dôležitá je aj dobrá dĺžka riadku na čítanie - zamerajte sa na 45 až 65 znakov. K dispozícii je záložka, pomocou ktorej môžete skontrolovať svoj obsah. Ak svojím dizajnom podporujete viac jazykov, môže sa tiež líšiť dĺžka riadku. Moore navrhuje použiť: lang (de) article {max-width: 30em} na pokrytie prípadných problémov.
Ak chcete zachovať vertikálny rytmus, nastavte spodný okraj proti blokom obsahu ul>, ol>, blockquote>, table>, blockquote> atď. Na rovnakú výšku riadka. Ak je rytmus prerušený zavedením obrázkov, môžete ho opraviť pridaním súboru Baseline.js alebo BaselineAlign.js.
Základné
- Založte svoje písmo na 100 percentnom tele
- Pracujte v relatívnych em jednotkách
- Nastavte okraje na výšku čiary, aby ste pri návrhu zachovali vertikálny rytmus
Pokročilé
- Zlepšite výkon načítania písma pomocou súboru Enhance.js alebo odloženého načítania písma
- Pre sémantické nadpisy použite príkaz Sass @includes.
- Často musíme použiť štýl h5 v miniaplikácii bočného panela, ktorá vyžaduje označenie h2. Použite Bearded’s Typographic Mixins na kontrolu veľkosti a zachovanie sémantiky s nasledujúcim kódom:
.sidebar h2 {@include heading-5}
Dotazy na médiá v JavaScripte
Odkedy sme prostredníctvom mediálnych dotazov schopní ovládať rozloženie v rôznych výrezoch, hľadali sme spôsob, ako to prepojiť aj s spustením nášho JavaScriptu. Existuje niekoľko spôsobov, ako spustiť JavaScript na určité šírky, výšky a orientácie výrezu, a niektorí inteligentní ľudia napísali niekoľko ľahko použiteľných natívnych doplnkov JS, ako sú Enquire.js a Simple State Manager. Toto by ste si mohli dokonca postaviť sami pomocou matchMedia. Máte však problém, že musíte duplikovať svoje mediálne dotazy vo vašom CSS a JavaScripte.
Aaron Gustafson má šikovný trik, ktorý znamená, že nemusíte spravovať a porovnávať svoje mediálne dotazy v CSS a JS. Myšlienka pôvodne vzišla od Jeremyho Keitha a v tomto príklade ju Gustafson vzal do plnej implementácie.
Pomocou getActiveMQ (netm.ag/media-260) vložte div # getActiveMQ-watcher na koniec prvku body a skryte ho. Potom v rámci CSS nastavte # getActiveMQ-watcher {font-family: break-0;} na prvý mediálny dopyt, font-family: break-1; do druhej, font-family: break-2; do tretice a pod.
Skript používa funkciu watchResize () (netm.ag/resize-260) na kontrolu, či sa zmenila veľkosť výrezu, a potom načíta späť aktívnu rodinu fontov. Teraz to môžete použiť na zavesenie vylepšení JS, ako je pridanie rozhrania s kartami na dl>, keď to výrez umožňuje, zmena správania lightboxu alebo aktualizácia rozloženia údajovej tabuľky. Pozrite si program getActiveMQ Codepen na adrese netm.ag/active-260.
Základné
- Zabudnite na JavaScript pre rôzne výrezy. Poskytujte používateľom obsah a funkcie webových stránok tak, aby k nim mali prístup vo všetkých výrezoch. JavaScript by sme nikdy nemali potrebovať
Pokročilé
- Rozšírte Gustafsonovu metódu tým, že použijete Rozchod ako preddefinovaný zoznam mediálnych dotazov a automatizujete vytváranie zoznamu rodín fontov pre pozorovateľa getActiveMQ
Postupné vylepšovanie
Častou mylnou predstavou o progresívnom vylepšovaní je, že si ľudia myslia: „Túto novú funkciu nemôžem použiť“, ale je to naopak. Progresívne vylepšenie znamená, že môžete dodať funkciu, ak je podporovaná iba v jednom alebo dokonca v žiadnom prehľadávači, a ľudia tak po príchode nových verzií získajú lepší zážitok.
Ak sa pozriete na základnú funkciu ľubovoľného webu, môžete ho dodať ako HTML a nechať spracovanie vykonať na strane servera. Platby, formuláre, označenia Páči sa mi, zdieľanie, e-maily, informačné panely - to všetko je možné. Len čo sa vytvorí základná úloha, môžeme na ňu navrstviť úžasné technológie, pretože máme bezpečnostnú sieť na zachytenie tých, ktoré prepadnú. Väčšina pokročilých prístupov, o ktorých sme tu hovorili, je založená na progresívnom vylepšovaní.
Rozloženie
Flexibilné usporiadanie je jednoduché povedať, má však veľa rôznych prístupov. Vytvárajte jednoduché rozloženia mriežky s menším počtom značiek pomocou selektora: nth-child ().
/ * deklaruje prvú šírku mobilu pre mriežku * / .grid-1-4 {float: left; šírka: 100%; } / * Ak je výrez najmenej 37,5 pixelov, nastavte mriežku na 50% na prvok * / @media (minimálna šírka: 37,5 pixela) {.grid-1-4 {šírka: 50%; } / * Vymazať plavák každý druhý prvok PO prvom. Toto je zacielené na 3., 5., 7., 9. ... v mriežke. * / .Grid-1-4: n-tý typ (2n + 1) {clear: left; }} @media (min-sirka: 64em) {.grid-1-4 {sirka: 25%; } / * Odstrániť predchádzajúci clear * / .grid-1-4: n-tý typ (2n + 1) {clear: none; } / * Vymazať plavák každý štvrtý prvok PO prvom. Toto je zacielené na 5., 9. ... v mriežke. * / .Grid-1-4: n-tý typ (4n + 1) {clear: left; }}
Rozlúčte sa s používaním polohy a plávaním pre svoje rozloženia. Aj keď nám doposiaľ slúžili dobre, ich použitie pre rozloženie bolo nevyhnutným hackom. Teraz máme v bloku dve nové deti, ktoré nám pomôžu napraviť všetky naše problémy s rozložením - Flexbox a Grids.
Flexbox je vynikajúci pre jednotlivé moduly, ktorý riadi rozloženie častí obsahu v rámci každého z modulov. Existujú rozloženia, ktoré sa snažíme dodať, a ktoré je možné ľahšie dosiahnuť pomocou Flexboxu, a to ešte viac platí pre responzívne weby. Ak sa chcete dozvedieť viac, prečítajte si Sprievodcu CSS Tricks pre Flexbox alebo Flexbox Polyfill.
Rozloženie mriežky CSS
Mriežka slúži skôr na rozloženie na úrovni makra. Modul rozloženia mriežky vám ponúka skvelý spôsob, ako opísať svoje rozloženie v rámci CSS. Zatiaľ, čo je to momentálne v štádiu návrhu, odporúčam tento článok o rozložení tabuľky CSS od Rachel Andrew.
Nakoniec
Existuje iba niekoľko rád, ako rozšíriť svoju schopnosť reagovať. Keď pristupujete k akejkoľvek novej pohotovej práci, urobte krok späť a zabezpečte, aby ste mali správne základy. Začnite s ich vylepšeným obsahom, formátom HTML a vrstvami a nebude mať žiadny limit, kam si môžete vziať svoje návrhy.
Tento článok sa pôvodne objavil v čísle 260 z sieťový časopis.
