30 Užitečné citlivé webové konzultace
Tak jsme dosáhli konce našeho "Reagující týden webového designu", dnešní příspěvek bude poslední ze série. Vycházíme z toho, abychom vám pomohli zdokonalovat vaše dovednosti při manipulaci s těmito kódy, abychom mohli reagovat při zobrazení na různých zařízeních. A děláme to 30 Citlivé webové prezentace nalezen online. Tento seznam nemá být vyčerpávající, ale bude vám umožněno porozumět základům navrhování adaptivních webových stránek, které uspokojí všechny druhy velikostí obrazovky..
Začneme úvodními tutoriály v „Breaking the Ice“, něco jako třída RWD: 101, na které byste se měli zúčastnit, než se pustíme do cvičení „Start Building“..
Nakonec skončíme v sekci „Další“, ve které budeme používat výukové programy, které se budou hrát s horizontálním rozložením, „elastickými“ videy, rozbalovacími nabídkami a navigacemi podle harmonogramu, miniaturami a lepkavým problémem s tabulkami..
Ale nejdřív…
Zde je shrnutí dvou tutoriálů, které naši autoři představili na začátku tohoto týdne:
Citlivé webové stránky Navigace
Thoriq Firdaus - [Zobrazit návod]
Zde je návod, který vám pomůže vytvořit vlastní responzivní webovou navigaci. Jedním z nejdůležitějších aspektů webové stránky je, jak snadné je procházet různými částmi webu. Zjistěte, jak to optimalizovat pomocí CSS3 s tímto návodem.
Citlivý životopis
Jake Rocheleau - [Zobrazit návod]
Pokud jste web profesionální a online životopis je již nedílnou součástí vaší kariéry, pak byste měli využít příležitosti obrátit, že i nadále reagovat. Usnadněte zaměstnavatelům a klientům, aby vás našli na jakémkoli zařízení. A zatímco jste na tom, vaše vlastní životopis se zdvojnásobuje jako portfolio toho, co můžete udělat jako vývojář.
Rozbíjení ledu
Kde jsme byli? Ach ano, pojďme začít nějakou ledovou akci!
Začátečník průvodce citlivý web design
Nick Petit - [Zobrazit návod]
Tento tutoriál je skvělým výchozím bodem pro začátečníky, protože popisuje, co web responzivní design znamená, jak to vyšlo najevo, stejně jako vysvětlení týkající se tekutých sítí a mediálních dotazů. Podívejte se také na zdroje uvedené v dolní části tutoriálu.
Úvod do reagovat Web Design: Video
Nick Petit - [Zobrazit návod]
Jedná se o výukový program, který se blíží 9 minutám a který posouvá povrch toho, co je citlivý web design, o tom, jak se to stalo, jaký má vliv na design webových stránek a jaké prvky se podílejí na vytváření responzivního webového designu. . Pokud se snažíte pochopit, co je to responzivní web design, aniž by se nejdříve dostal do kódování, měli byste začít s tímto videem.
Jak se obrátit jakékoli webové stránky do reagovat webu
Rochester Oliveira - [Zobrazit návod]
To je další návod, který začíná od základů, ale rozbije všechno po kouscích, včetně operačního systému a prohlížečů, které mění vaše webové stránky, a také prvků, které jsou ovlivněny při prohlížení webových stránek z různých zařízení. Autor také představil některé užitečné pluginy WordPress a jQuery, které vám usnadní práci.
Citlivý design ve 3 krocích
Od Nicka La - [Zobrazit návod]
Tento tutoriál vysvětlí, jak můžete vytvářet citlivý web design s meta tagy, HTML strukturou a všemi důležitými mediálními dotazy. Chcete-li tomu rozumět, potřebujete znát CSS ...
Navrhování pro reagovat web
Max Luzuriaga - [Zobrazit návod]
Zde je článek, který není tolik tutorial, protože je to průvodce pro vytváření reagovat web design. To znamená, že autor vám doslovně řekne, co děláte a co nevíte o responzivním designu webu. Existují vysvětlení, proč některé funkce dostatečně nereagují, jak pracovat s proporcemi a moduly, a co je nejlepší ze všeho, je poměrně krátká a snadno absorbovatelná..
Reagovat Web Design: Vizuální průvodce
Andrew Gormley - [Zobrazit návod]
Pokud výukové programy vyplněné textem nejsou životaschopnými možnostmi, zkuste místo toho tento tutoriál videa. Je to stále spíše technické, ale pokud se cítíte lépe, nemusíte dělat mnoho čtení. Je to asi 25 minut dlouho a video-tvůrce skutečně rychle-fowarded přes části, kde kódy, pak se vrátí vysvětlit, co kódy dělat.
Začněte stavět
Dobře, začněme vytvářet citlivé návrhy, počínaje…
Fluidní mřížky
Ethan Marcotte - [Zobrazit návod]
Řekněte mřížku, a mysleli byste si, že „tuhé struktury“, řekněme tekutina, byste si mohli myslet, že by to mohlo proudit z jedné strany obrazovky na dno nebo nahoře nebo na stranu, když vyvíjíte tlak na prohlížeč, ale dejte tyto dva dohromady a pravděpodobně si budete myslet, že se musíte podívat na tento návod, abyste mohli plně ocenit, jak tekuté mřížky mohou přispět k větší citlivosti vašeho návrhu.
Obrázky tekutin
Ethan Marcotte - [Zobrazit návod]
Na konci tohoto článku byste měli vědět, kdo je Ethan Marcotte. Zde je nápověda: on je ten, kdo přišel s konceptem a termínem pro webové responzivní návrhy. Jeho jméno se do značné míry objeví v každém dalším tutoriálu v tomto seznamu, tak proč si neberte rady o tekutých obrazech přímo od samotného Mistra?.
Škálovatelné navigační vzory v reagovat Web Design
Michael Mesker - [Zobrazit návod]
Tento tutoriál hovoří o lekcích, které se autor naučil z práce na rozsáhlém projektu webového designu. Přečtěte si jeho návod, jak vytvářet šablony, které lze snáze konfigurovat pro uživatelsky přívětivé a citlivé výsledky. Je to skvělý pohled v zákulisí v pochopení toho, jak navrhovat rozhraní nejlepším způsobem pro pracovní plochy, tablety a mobilní zobrazení.
Reagovat Web Design s CSS3 Media dotazy
Od Nicka La - [Zobrazit návod]
A další skvělý tutoriál, který vás naučí, jak navrhnout šablonu webových stránek reagujících na prohlížeč s HTML5 a CSS3. Jedná se o přístup krok za krokem a před a po implementaci mediálních dotazů jsou k dispozici ukázky webového designu, aby se lépe ocenil dopad mediálních dotazů..
CSS Efekty: Prostorové obrazy ven, aby odpovídaly výšce textu
Zoe Mickley Gillenwaterová - [Zobrazit návod]
Tento tutoriál vás seznámí s trikem tvorby obrázků s pevnou šířkou, které změní jejich velikost a rozestupy, aby odpovídaly průvodnímu textu bez ohledu na velikost okna prohlížeče..
Adaptivní rozvržení s dotazy médií
Aaron Gustafson - [Zobrazit návod]
Naučte se používat adaptivní nebo flexibilní rozvržení s dotazy na média CSS. Stačí sledovat cvičení a naučit se přizpůsobit svůj design zobrazení ve dvou sloupcích nebo v jednom sloupci a připravit design pro zařízení iPhone a iPad.
Reagující obrazy: Experimentování s kontextovým formátováním obrázků
Scott Jehl - [Zobrazit návod]
Zde je návod, který používal přístup build-from-mobile-first. Tato technika specifikuje větší velikost obrázků, které mají být použity na větších rozlišeních obrazovky, mínusové požadavky na snímky a také sniffing UA.
Dělat více
Elastické videa
Od Nicka La - [Zobrazit návod]
Tento tutoriál se zabývá škálováním videa, protože velikost okna prohlížeče je změněna. Je to v podstatě trik CSS a je zde ukázka, jak vidět trik při práci v samotném tutoriálu.
Skrytí A Odhalení Část Obrázky
Zoe Mickley Gillenwaterová - [Zobrazit návod]
Tutoriál je vlastně převzat z autorské knihy, která popisuje, jak odhalit nebo skrýt části obrázků v závislosti na rozlišeních obrazovky. Naučí vás dynamicky oříznout obrázky, když se změní velikost obrazovky, a zobrazí pouze část celého obrazu, pokud je omezený prostor.
Reagujte na aplikaci Content Navigator pomocí CSS3
Mary Lou - [Zobrazit návod]
Upřednostňujte lepší způsob, jak mohou uživatelé procházet po vaší straně? Pak byste si měli přečíst tento návod, abyste se naučili kódovat v některých chladných přechodech: prolnutí, snímky, otočení a zvětšení. Přechody jsou v podstatě vrstvy obsahu, které byly zobrazeny nebo skryty se specifickým kódováním.
Vytvořit šablonu návrhu reagovat web
Harry Atkins - [Zobrazit návod]
Jedná se o krátký návod k produkci citlivé reakce webové šablony který funguje jak na ploše, tak i na iPhone.
Reagující horizontální rozvržení
Mary Lou - [Zobrazit návod]
Tento tutoriál vás naučí, jak vytvořit horizontální rozložení s několika rolovatelnými panely obsahu. Použitím Původ druhů jako ukázkový text, každá kapitola knihy je oddělena ve sloupcích umístěných vedle sebe v režimu plného prohlížeče, ale když se zmenší na dostatečně malé, rozvržení se změní na plně vertikální rolovací „knihu“.
Převeďte nabídku na Rozevírací nabídku pro malá obrazovky
Chris Coyier - [Zobrazit návod]
Tento tutoriál vám ukáže, jak převést nabídku na rozevírací seznam, když je okno prohlížeče úzké nebo když se nacházíte v mobilním zařízení. Řada odkazů v pravém horním rohu stránky bude převedena na rozevírací nabídku, čímž ušetříte místo bez obětování možností navigace.
Flexibilní akordeon mezi snímky
Mary Lou - [Zobrazit návod]
Naučte se, jak vytvořit jednoduché a flexibilní rozvržení harmoniky, s přechodem fade-in a nastavitelnými šířkami na základě velikosti obrazovky a rozlišení.
Jak používat CSS3 Orientační média dotazy
Ryan Seddon - [Zobrazit návod]
Na základě jednoduchého pravidla, které definuje režimy portrétu (výška větší než šířka) a šířku (šířka větší než výška), můžete napsat mediální dotaz a cílit na konkrétní styly založené na režimu, ve kterém je zobrazujete. Tento tutoriál nám ukáže, jak to udělat, a je dodáván s odkazem na chameleon pro změnu barvy, který používá barvu k prokázání této změny při zmenšování okna prohlížeče..
Resistentní datové tabulky
Chris Coyier - [Zobrazit návod]
Tabulky jsou zdrojem bolesti hlavy, pokud jde o malé velikosti obrazovky, ale to neznamená, že se musíme zcela vyhnout tabulkám. Naučte se, jak používat mediální dotazy, aby se při změně formátu mobilních obrazovek zcela změnily formáty tabulky. Podívejte se na demo, abyste získali představu o magii, kterou můžete vytvořit na základě tohoto návodu.
Fluid CSS3 Slideshow s efektem Parallax
Kruhovým křídlem - [Zobrazit návod]
Vytvořte prezentaci CSS3, kde jsou použity dva obrazy pozadí a když se změní pozice pozadí, je vidět efekt paralaxy. Kromě toho je prezentace flexibilní, měnící se podle toho, jak se okno prohlížeče zavírá.
Jak vytvořit Responsive Thumbnail Gallery
Joshua Johnson - [Zobrazit návod]
To je skvělé pro webové stránky, které mají miniatury v galerii. Vzhledem k tomu, že je okno prohlížeče změněno, rozvržení se změní tak, aby zabíralo dva sloupce (menší velikosti obrazovky) a pět (maximální) sloupce. Pro více podobných prezentací a jezdců, podívejte se na náš Top 10 Volný Responsive Image Galerie / Slideshows článek.
Optimalizace e-mailu pro mobilní zařízení
Ros Hodgekiss - [Zobrazit návod]
Dokonce i e-maily mohou být optimalizovány pro zobrazení na malé obrazovce, jako jsou webové stránky. Většinu času je text v HTML e-mailu změněn na bod, který není vytvořen pro pohodlné čtení; Naučte se, jak to zvládnout, a více z tohoto tutoriálu.
pomocí rámců
Vybudovat citlivý mobilní-přátelské webové stránky s Skeleton
Joshua Johnson - [Zobrazit návod]
Skeleton je úžasný rámec pro vytváření citlivých webových stránek. Tento tutoriál vás provede podrobným návodem, jak používat Skeleton framework k vytvoření úžasných responzivních návrhů. Budete ohromeni, abyste zjistili, jak snadné je implementovat.
Reagovat Web Design s HTML5 a méně Framework 3
Louis Simoneau - [Zobrazit návod]
Pokud jste nebyli řádně zavedeni do Less, pak se podívejte na naše vlastní méně CSS tutorial nejprve získat chuť Méně. V tomto tutoriálu byl rámec Méně použit k tomu, abyste jasně viděli účinky mediálních dotazů.
Závěr
A to končí naším Reagovat Web Design série. Doufáme, že témata, nástroje a další zdroje obsažené v této sérii pomohly našim čtenářům odhalit koncept responzivního webového designu. Ale jak bychom věděli, jestli nám to neřeknete?
Dejte nám zpětnou vazbu na sérii a pokud máte návrhy na další nápady, které chcete vidět na hongkiat.com. Zrušte nám řádek nebo komentář níže.
