30 Užitočné Nápovedné Web Design Tutoriály
Takže sme dosiahli koniec nášho "Reagujúci týždeň webového dizajnu", dnes večer bude posledná zo série. Ideme všetkými, aby sme vám pomohli zdokonaliť svoje zručnosti pri manipulácii s týmito kódmi, aby ste reagovali podľa vášho vkusu, keď sa zobrazia na rôznych zariadeniach. A aby sme to urobili, predstavujeme to 30 Responsible Web Design Tutoriály našiel on-line. Tento zoznam nie je určený ako vyčerpávajúci, ale začne vás chápať základy navrhovania prispôsobivej webovej stránky, ktorá bude uspokojovať všetky druhy obrazoviek.
Začneme s úvodnými tutoriálmi v príručke "Breaking the Ice", niečo ako trieda RWD: 101, ktorú by ste mali absolvovať, aby ste sa dostali k zaveseniu konceptu predtým, ako prejdeme na cviky "Začnite budovať".
Nakoniec skončíme sekciou "Do More", v ktorej budeme obsahovať návody, ktoré hrajú s horizontálnymi rozloženiami, "elastickými" videami, rozbaľovacími menumi a navigáciami akordeónov, miniatúrami a problémom s tabuľkami.
Ale najprv…
Tu je zhrnutie dvoch cvičení, ktoré naši autori uviedli skôr tento týždeň:
Zodpovedná webová stránka Navigácia
Thoriq Firdaus - [Zobraziť tutorial]
Tu je výukový program, ktorý vám pomôže vytvoriť si vlastnú navigačnú webovú stránku. Jedným z najdôležitejších aspektov webových stránok je, aké ľahké je navigácia cez rôzne časti stránky. Zistite, ako to optimalizovať pomocou CSS3 pomocou tohto tutoriálu.
Response Resume
Jake Rocheleau - [Zobraziť tutorial]
Ak ste webový profesionál a online životopis je už súčasťou vašej kariéry, potom by ste mali využiť príležitosť, aby sa tento životopis aj citlivo reagoval. Uľahčite zamestnávateľom a klientom, aby vás našli na akomkoľvek zariadení. A kým ste na to, vaše vlastné životopis zdvojnásobí ako portfólio toho, čo môžete urobiť ako vývojár.
Rozbíjanie ľadu
Teraz, kde sme boli my? Ah áno, poďme začať s ľadovou akciou!
Príručka pre začiatočníkov na zodpovedný dizajn webu
Nick Petit - [Zobraziť tutorial]
Tento tutoriál je skvelým východiskovým bodom pre začiatočníkov, pretože opisuje, aký dizajn zodpovedá webovej stránke, ako to vyšlo najavo, ako aj vysvetlenia kvasiniek a mediálnych dopytov. Pozrite sa aj na zdroje uvedené v spodnej časti tutoriálu.
Úvod do zodpovedného dizajnu webu: Video
Nick Petit - [Zobraziť tutorial]
Jedná sa o tutoriál, ktorý je takmer dlhý ako 9 minút, ktorý skomprimuje povrch toho, čo reaguje na dizajn webových stránok, ako sa to stalo, vplyv, ktorý má na dizajn webových stránok a aké prvky sa podieľajú na tvorbe odpovedajúceho dizajnu webu , Ak chcete lepšie pochopiť, aký dizajn webového dizajnu je bez toho, aby ste šli do kódovania, mali by ste začať s týmto videom.
Ako zmeniť akékoľvek webové stránky na zodpovedajúce stránky
Do Rochester Oliveira - [Zobraziť tutorial]
Toto je ďalší návod, ktorý začína od základov, ale rozdeľuje všetko po krokoch, vrátane operačného systému a prehľadávačov, ktorým robíte vaše webové stránky citlivé, rovnako ako prvky, ktoré sú ovplyvnené pri prezeraní webových stránok z rôznych zariadení. Autor tiež obsahoval niektoré užitočné doplnky WordPress a jQuery, ktoré vám uľahčia prácu.
Reagujúci dizajn v 3 krokoch
Nick La - [Zobraziť tutorial]
Tento návod vám vysvetlí, ako môžete vytvoriť zodpovedný dizajn webových stránok s metaznačkami, štruktúrou HTML a dôležitými mediálnymi dopytmi. Potrebujete nejaké znalosti CSS, aby ste to pochopili ...
Navrhovanie pre zodpovedný web
Max Luzuriaga - [Zobraziť tutorial]
Tu je článok, ktorý nie je toľko tutoriál, pretože je návodom na vytvorenie citlivého dizajnu webu. To znamená, že autor vám doslova povie, čo robiť a nechať reagovať na dizajn webových stránok. Existujú vysvetlenia, prečo niektoré funkcie nie sú dostatočne citlivé, ako pracovať s pomermi a modulmi a najlepšie zo všetkých je pomerne krátka a ľahko sa absorbuje.
Odpovedajúci webový dizajn: vizuálna príručka
Andrew Gormley - [Zobraziť tutorial]
Ak textové výukové programy nie sú životaschopnými možnosťami, vyskúšajte namiesto toho tento video tutoriál. Je to stále dosť technicky, ale ak sa cítite lepšie, nemusíte čítať veľa. Je to asi 25 minút dlhý a výrobca videí sa v skutočnosti rýchlo preháňa cez časti, kde kóduje, potom sa vráti, aby vysvetlil, čo robia kódy.
Začnite budovať
Dobre, začnime budovať nejaké citlivé návrhy, počnúc ...
Mriežky kvapalín
Od Ethan Marcotte - [Zobraziť tutorial]
Povedzte mriežku a myslíte si, že tuhé štruktúry, hovoria tekutiny a myslíte si, že keď stlačíte tlak na prehliadač, môže prúdiť z jednej strany obrazovky na dno alebo vrch alebo stranu, pravdepodobne by ste si mysleli, že sa musíte pozrieť na tento tutoriál, aby ste si plne uvedomili, ako tekuté mriežky môžu pomôcť vášmu dizajnu lepšie reagovať.
Snímky tekutín
Od Ethan Marcotte - [Zobraziť tutorial]
Na konci tohto článku by ste mali vedieť, kto je Ethan Marcotte. Tu je návod: on je ten, kto prišiel s pojmom a pojmom pre dizajny citlivé na web. Jeho meno sa do značnej miery objaví v každom inom výučbe v tomto zozname, takže prečo sa nerozprávať o tekutých obrázkoch priamo od samotného Majstra?.
Škálovateľné navigačné vzory v citlivom webovom dizajne
Michaelom Meskerom - [Zobraziť tutorial]
Tento tutoriál hovorí o lekciách, ktoré sa autor dozvedel z práce na rozsiahlom projekte webového dizajnu. Prečítajte si jeho návod na to, ako vytvoriť šablóny, ktoré sú ľahšie konfigurovateľné pre užívateľsky prívetivé a citlivé výsledky. Je to skvelý pohľad v zákulisí na pochopenie toho, ako navrhnúť rozhrania najlepším spôsobom pre stolové počítače, tablety a mobilné zobrazenia.
Zodpovedajúci dizajn webových stránok pomocou dopytov médií CSS3
Nick La - [Zobraziť tutorial]
A ďalší vynikajúci návod, ktorý vás naučí, ako navrhnúť šablónu webových stránok reagujúcich na prehliadač s HTML5 a CSS3. Je to krok za krokom a existujú demonštrácie dizajnu webových stránok pred a po implementácii mediálnych dopytov s cieľom lepšie oceniť vplyv mediálnych dopytov.
Efekty CSS: Obrázky z priestoru sa prispôsobia výške textu
Zoe Mickley Gillenwater - [Zobraziť tutorial]
Tento návod vás naučí, aby ste sa naučili trik vytvárania obrázkov s pevnou šírkou meniť ich veľkosť a medzery, aby bolo možné zarovnať sa s priloženým textom bez ohľadu na zmenu veľkosti okna prehliadača.
Adaptívne rozloženie s dotazy médií
Aaron Gustafson - [Zobraziť tutorial]
Zistite, ako používať prispôsobiteľné alebo flexibilné rozloženia pomocou dopytov médií CSS. Stačí sledovať cvičenie, aby ste sa naučili prispôsobiť svoj dizajn dvojokĺbovému zobrazeniu alebo zobrazeniu s jedným stĺpcom, ako aj pripraviť návrh pre iPhone a iPad.
Citlivé obrázky: Experimentovanie s dimenziou obrazu v kontexte
Scott Jehl - [Zobraziť tutorial]
Tu je návod, ktorý použil prístup založený na mobilnom telefóne. Táto technika špecifikuje väčšiu veľkosť obrázkov, ktoré sa majú používať pri rozlíšeních väčších obrazoviek, mínus požiadavky na obrázky, ako aj čuchanie UA.
Robiť viac
Elastické videá
Nick La - [Zobraziť tutorial]
Tento tutoriál sa zaoberá zmenou mierky videí v okne prehliadača. Je to v podstate CSS trik a tu je demo, ktoré vidí trik v práci v tutoriáli samotnom.
Skrytie a odhalenie častí obrazov
Zoe Mickley Gillenwater - [Zobraziť tutorial]
Táto príručka je v skutočnosti prevzatá z autorovej knihy a opisuje, ako odhaliť alebo skryť časti obrázkov v závislosti od rozlíšenia obrazovky. Učí vás, ako dynamicky orezávať obrazy pri zmene veľkosti obrazovky a zobrazuje vám iba časť plného obrazu, keď je obmedzený priestor.
Responsivný obsahový navigátor s CSS3
Mary Lou - [Zobraziť tutorial]
Uprednostňujete obľúbený spôsob, ako sa môžu používatelia pohybovať po vašej strane? Potom by ste si mali prečítať tento tutoriál, aby ste sa dozvedeli, ako kódovať v niektorých chladných prechodoch: vyblednúť, posúvať, otáčať a zvyšovať. Prechody sú v podstate obsahové vrstvy, ktoré boli zobrazené alebo skryté so špecifickým kódovaním.
Vytvorte šablónu Responsive Web Design
Harry Atkins - [Zobraziť tutorial]
Toto je krátky návod na vytvorenie odpovede webová šablóna ktorý funguje ako na pracovnej ploche, tak aj na telefóne iPhone.
Odpovedajúce horizontálne usporiadanie
Mary Lou - [Zobraziť tutorial]
Tento tutoriál vás naučí, ako vytvoriť horizontálne usporiadanie s niekoľkými panelmi s posuvným obsahom. Použitím Pôvod druhov ako ukážkový text, každá kapitola knihy je oddelená v stĺpcoch umiestnených vedľa seba v režime úplného prehliadača, ale keď sa zmenší na dostatočne malú, rozloženie sa zmení na plne vertikálnu "knihu".
Previesť ponuku na položku Rozbaliť pre malé obrazovky
Chris Coyier - [Zobraziť tutorial]
Tento návod vám ukáže, ako previesť menu do rozbaľovacieho zoznamu, keď je okno prehliadača úzke, alebo keď ste v mobilnom zariadení. Riadok odkazov v pravom hornom rohu stránky sa konvertuje na rozbaľovaciu ponuku, čím sa ušetrí priestor bez obetovania možností navigácie.
Flexibilná kĺzačka
Mary Lou - [Zobraziť tutorial]
Naučte sa, ako vytvoriť jednoduché a flexibilné rozloženie akordeónov s prechodmi v prechodnom režime a nastaviteľnými šírkami podľa veľkosti a rozlíšenia obrazovky.
Ako používať dopyty médií orientácie CSS3
Ryan Seddon - [Zobraziť tutorial]
Na základe jednoduchého pravidla, ktoré definuje režimy portrét (výška väčšia ako šírka) a šírka (šírka väčšia ako výška), môžete napísať mediálny dotaz na zacielenie na konkrétne štýly na základe režimu, ktorý ho zobrazíte. Tento tutoriál nám ukáže, ako to urobiť, a je dodávaný s odkazom na chameleón, ktorý mení farbu a ktorý používa farbu na preukázanie tejto zmeny pri zmenšovaní okna prehliadača.
Responzívne tabuľky údajov
Chris Coyier - [Zobraziť tutorial]
Tabuľky sú zdrojom bolesti hlavy, pokiaľ ide o malé veľkosti obrazovky, ale to neznamená, že sa musíme úplne vyhýbať stolom. Zistite, ako používať mediálne dopyty, aby ste úplne zmenili formáty tabuľky pri prepínaní na veľkosť obrazovky pre mobilné zariadenia. Prezrite si demo, aby ste získali predstavu o kúzlo, ktoré môžete urobiť na základe tohto tutoriálu.
Fluid CSS3 Prezentácia s efektom Parallax
Prstencová krídla - [Zobraziť tutorial]
Vytvorte prezentáciu CSS3, kde sa používajú dva obrázky na pozadí a keď sa pozície pozadia zmenia, vidíte paralaxový efekt. Okrem toho je prezentácia flexibilná, zmena veľkosti, keď sa okienko prehliadača zavrie.
Ako vytvoriť galériu odpovedajúcich miniatúr
Joshua Johnson - [Zobraziť tutorial]
Je to skvelé pre webové stránky, ktoré obsahujú miniatúry v galérii. Keď je okno prehliadača zmenené, rozloženie sa zmení tak, aby obsadilo medzi dvoma stĺpcami (menšie veľkosti obrazovky) a piatimi (maximálnymi) stĺpcami. Pre ďalšie podobné prezentácie a posuvníky, pozrite si naše Top 10 Free Response Galerií obrázkov / Slideshows článok.
Optimalizácia e-mailu pre mobilné zariadenia
Od Ros Hodgekiss - [Zobraziť tutorial]
Dokonca aj e-maily môžu byť optimalizované pre zobrazenie na malej obrazovke, ako sú webové stránky. Väčšinu času je text v e-mailovej správe HTML zmenený na bod, ktorý nie je pre pohodlné čítanie; dozviete sa, ako to spravovať z tohto tutoriálu.
pomocou rámcov
Vytvárajte webovú stránku s kostrou, ktorá bude reagovať na mobilné zariadenia
Joshua Johnson - [Zobraziť tutorial]
Skelet je úžasný rámec pre budovanie citlivých webových stránok. Tento návod vás prevedie podrobným sprievodcom o tom, ako používať kostru Skeleton na vytvorenie úžasných reakcií. Budete ohromení, aby ste videli, aké ľahké je implementovať.
Zodpovedajúci dizajn webových stránok s HTML5 & Less Framework 3
Louis Simoneau - [Zobraziť tutorial]
Ak ste neboli riadne uvedení do kategórie Less, potom najskôr skontrolujte našu vlastnú Less CSS tutorial, aby ste získali menej chuti. V tomto návode bol rámec Less využitý na jasné zobrazenie účinkov mediálnych dopytov.
záver
A to uzatvára našu Zodpovedný dizajn webu series. Dúfame, že témy, nástroje a ďalšie zdroje uvedené v tejto sérii pomohli našim čitateľom odhaliť koncepciu citlivého dizajnu webu. Ale ako by sme vedeli, keby ste nám to nepovedali?
Dajte nám vedieť spätnú väzbu na sérii a ak máte návrhy na ďalšie nápady, ktoré chcete vidieť na stránke hongkiat.com. Dajte nám riadok alebo komentár nižšie.
