30 Hasznos, érzékeny Web Design oktatóanyagok
Tehát elértük a végünket "Érzékeny webes tervezési hét", ma este lesz az utolsó a sorozat. Mindent megteszünk, hogy segítsük a készségek kezelésében, hogy manipulálják ezeket a kódokat, hogy válaszolni tudjanak, ha különböző eszközökön jelenik meg. És ehhez a funkcióhoz tartozunk 30 Érzékeny Web Design oktatóanyagok online. Ez a lista nem feltétlenül kimerítő, hanem elkezdte megérteni az adaptív weboldal tervezésének alapjait, amelyek mindenféle képernyőméretnek megfelelnek..
Kezdjük a bevezető oktatókkal a „Jégtörés” című témakörben, ami olyan, mint egy RWD: 101 osztály, amelyet meg kell látogatnia a koncepció lefagyásához, mielőtt továbblépünk az „Építés indítása” gyakorlatokra.
Végül egy "Do More" (Végezzünk el többet) fejezetet fogunk végezni, amelyben bemutatjuk azokat a bemutatókat, amelyek vízszintes elrendezésekkel, "elasztikus" videókkal, legördülő menükkel és csúszkával párhuzamos navigációval, miniatűrökkel és a táblák ragadós problémájával játszanak.
De először…
Az alábbiakban bemutatjuk azokat a két oktatóanyagot, amelyeket a héten korábban a szerzők szerepeltek:
Érzékeny weboldal navigáció
Thoriq Firdaus - [Tutorial megtekintése]
Íme egy bemutató, amely segít Önnek a saját, rugalmas webhely navigációjában. A weboldal egyik legfontosabb szempontja az, hogy milyen egyszerű a navigáció a webhely különböző részein. Ismerje meg, hogyan lehet optimalizálni ezt a CSS3-val ezzel a bemutatóval.
Érzékeny Resume
Jake Rocheleau - [Tutorial megtekintése]
Ha Ön webes szakember, és egy online önéletrajz már része a karrierjének, akkor az alkalmat arra kell fordítanod, hogy újraindítsd a visszajelzést. A munkaadók és az ügyfelek számára megkönnyíti, hogy bármilyen eszközön megtalálják Önt. És miközben te vagy rajta, a saját önéletrajza a fejlesztő portfóliójává válik.
Megtörni a jeget
Most hol voltunk? Ah igen, kezdjünk egy kis jégtöréses akciót!
Kezdő útmutató az érzékeny webes tervezéshez
Nick Petit - [Tutorial megtekintése]
Ez a bemutató nagyszerű kiindulópont a kezdőknek, mivel leírja, hogy milyen webes megoldások jelentenek, hogyan jött létre a világítás, valamint többek között a folyékony rácsok és a média lekérdezések magyarázatai. Nézze meg a bemutató alján felsorolt forrásokat is.
Bevezetés az érzékeny webtervezésbe: Videó
Nick Petit - [Tutorial megtekintése]
Ez egy olyan oktatóanyag, amely közel 9 percig terjed, ami felborítja azt a felületet, amelyre az érzékeny web design szól, hogyan jött létre, milyen hatással van a weboldal tervezésére, és milyen elemeket vesz igénybe egy érzékeny webes terv készítése . Ha azt szeretné megérteni, hogy a webes tervezést miért nem akarja kódolni, először ezt a videót kell kezdeni.
Hogyan lehet bármely webhelyet egy érzékeny webhelyre fordítani
Rochester Oliveira - [Tutorial megtekintése]
Ez egy másik bemutató, amely az alapokból indul ki, de mindent megszakít, beleértve az operációs rendszert és a böngészőket, amelyekre a webhelyet megváltoztatják, valamint azokat az elemeket, amelyek hatással vannak a webhely különböző eszközökről történő megtekintésére. A szerző néhány hasznos WordPress és jQuery plugint is tartalmazott, amelyek segítik a munkát sokkal könnyebbé tenni.
Érzékeny tervezés 3 lépésben
Nick La - [Tutorial megtekintése]
Ez a bemutató elmagyarázza, hogyan készíthet egy érzékeny webes tervezést meta címkékkel, HTML struktúrával és az összes fontos média lekérdezéssel. Szüksége van valamilyen tudásra a CSS-ről, hogy megértse…
Tervezés egy érzékeny webre
Max Luzuriaga - [Tutorial megtekintése]
Itt van egy olyan cikk, amely nem annyira bemutató, mert egy útmutató a rugalmas webdesign létrehozásához. Ez azt jelenti, hogy a szerző szó szerint elmondja, hogy a webes tervezést miért és nem. Vannak magyarázatok arra vonatkozóan, hogy miért nem eléggé érzékenyek bizonyos funkciók, hogyan kell dolgozni arányokkal és modulokkal, és ami a legjobb, hogy viszonylag rövid és könnyen elnyelhető.
Érzékeny Web Design: Vizuális útmutató
Andrew Gormley - [Tutorial megtekintése]
Ha a szöveges betanítások nem életképes lehetőségek, próbálkozzon ezzel a videó bemutatóval. Még mindig meglehetősen technikai jellegű, de ha jobban érzi magát, nem kell sokat olvasnia. Ez körülbelül 25 perc hosszú, és a videó készítő ténylegesen gyorsan átadta magát a részeken, ahol kódol, majd visszajön, hogy elmagyarázza, mi a kódja.
Indítsa el az épületet
Rendben, kezdjünk néhány érzékeny tervet építeni…
Folyékony rácsok
Ethan Marcotte - [Tutorial megtekintése]
Mondd meg a rácsot, és azt gondolnád, hogy 'merev struktúrák', mondjuk a folyadék, és azt gondolnád, hogy a képernyő egyik oldaláról az alsó vagy felső oldalra vagy oldalra áramolhat, ha nyomást gyakorolsz a böngészőre, de együtt helyezed el őket és valószínűleg úgy gondolja, hogy meg kell vizsgálnia ezt a bemutatót, hogy teljes mértékben értékelje, hogy a folyékony rácsok hogyan tudják jobban reagálni a designra.
Fluid képek
Ethan Marcotte - [Tutorial megtekintése]
A cikk végére tudnia kell, hogy ki az Ethan Marcotte. Íme egy tipp: ő az, aki a webes válaszokhoz tervezett koncepciókkal és fogalommal jött létre. A neve nagyon sokszor megjelenik a listában, így miért ne vegye fel a tanácsokat a folyékony képekről közvetlenül a Mesterből?.
Méretezhető navigációs minták az érzékeny webdesignban
Michael Mesker - [Tutorial megtekintése]
Ez a bemutató arról szól, hogy a szerző milyen tanulságokat szerzett egy nagyszabású, érzékeny web design projektről. Olvassa el az „átgondolását” arról, hogyan lehet olyan sablonokat létrehozni, amelyek könnyebben konfigurálhatók a felhasználóbarát és érzékeny eredményekhez. A kulisszák mögött nagyszerű megértés, hogy hogyan lehet az interfészeket az asztali, tablet és mobil nézetekhez legjobban megtervezni.
Érzékeny webdesign CSS3 média lekérdezésekkel
Nick La - [Tutorial megtekintése]
És egy másik kitűnő bemutató, amely megtanulja, hogyan tervezzen egy HTML5 és a CSS3-as kereszt-böngészőre reagáló weblapsablont. Ez egy lépésenkénti megközelítés, és a média lekérdezések végrehajtását megelőzően és azt követően egy webdesign bemutatója van, hogy jobban értékelhessük a média lekérdezések hatását.
CSS-effektusok: A képek kiegyenlítése a szövegmagassághoz
Zoe Mickley Gillenwater - [Tutorial megtekintése]
Ez a bemutató megtanulja, hogy a rögzített szélességű képek megcsinálják a méretüket és a távolságot, hogy sorba állítsák a kísérő szöveget, függetlenül attól, hogy a böngészőablak milyen méretű legyen.
Adaptív elrendezések a média lekérdezésekkel
Aaron Gustafson - [Tutorial megtekintése]
Ismerje meg, hogyan használhatja az adaptív vagy rugalmas elrendezéseket CSS média lekérdezésekkel. Kövesse a gyakorlatot, hogy megtudja, hogy a tervezést kettős oszlopra vagy egyoszlopos nézetre alakítsa, valamint hogy elkészítse az iPhone és az iPad tervét.
Érzékeny képek: kísérletezés kontextus-tudatos képmérettel
Scott Jehl - [Tutorial megtekintése]
Itt van egy bemutató, amely a mobilról-első megközelítést használja. Ez a technika nagyobb méretet határoz meg a nagyobb képernyőfelbontásoknál, a képkéréseknél és az UA szippantásnál használt képeknél..
Csinálj többet
Rugalmas videók
Nick La - [Tutorial megtekintése]
Ez a bemutató a videók méretezésével foglalkozik, mivel a böngésző ablakát átméretezi. Ez lényegében egy CSS trükk, és van egy demó, hogy a trükköt a munkahelyen is megismerhesse.
Képek elrejtése és feltárása
Zoe Mickley Gillenwater - [Tutorial megtekintése]
A bemutató ténylegesen a szerző könyvéből származik, leírva, hogy a képek felbontását vagy elrejtését hogyan lehet megjeleníteni a képernyő felbontásaitól függően. Megtanítja, hogyan lehet dinamikusan vágni a képeket, amikor a képernyő mérete megváltozik, és csak a teljes kép egy részét mutatja, ha korlátozott hely van.
Érzékeny tartalom navigátor CSS3-mal
Mary Lou - [Tutorial megtekintése]
Előnyben részesítheti a felhasználókat, hogy navigáljanak az Ön oldalán? Ezután olvassa el a bemutatót, hogy megtudja, hogyan kell kódolni néhány hűvös átmenetet: elhalványul, dia, forgatás és méretezés. Az átmenetek lényegében olyan tartalomrétegek, amelyek specifikus kódolással jelennek meg vagy voltak rejtve.
Hozzon létre egy érzékeny webes tervezési sablont
Harry Atkins - [Tutorial megtekintése]
Ez egy rövid bemutató, amely érzékeny webes sablon amely mind az asztalon, mind az iPhone-on működik.
Érzékeny vízszintes elrendezés
Mary Lou - [Tutorial megtekintése]
Ez az útmutató bemutatja, hogyan hozhat létre vízszintes elrendezést több görgethető tartalompanel segítségével. használata A fajok eredete mintaszövegként a könyv minden fejezete egymástól teljes egészében böngésző módban elhelyezett oszlopokban van elválasztva, de ha elég kicsik, akkor az elrendezés teljesen függőleges görgetőkönyvre változik.
Konvertáljon egy menüt a kis képernyőkre
Chris Coyier - [Tutorial megtekintése]
Ez a bemutató megmutatja, hogyan lehet konvertálni egy menüt legördülő listára, ha a böngészőablak keskeny, vagy ha mobileszközön van. Az oldal jobb felső sarkában lévő hivatkozások sora legördülő menüvé alakul át, hogy helyet takarítson meg a navigációs lehetőségek feláldozása nélkül.
Rugalmas diavetítés a csúcsra
Mary Lou - [Tutorial megtekintése]
Ismerje meg, hogyan lehet létrehozni egy egyszerű és rugalmas harmonika elrendezést, fade-in átmenetekkel és állítható szélességgel a képernyő méretének és felbontásának megfelelően.
A CSS3 orientációs média lekérdezések használata
Ryan Seddon - [Tutorial megtekintése]
Az egyszerű szabály alapján, amely meghatározza a portré (magasság nagyobb, mint a szélesség) és a táj (szélesség nagyobb, mint a magasság) módokat, írhat egy média lekérdezést, hogy az adott stílust célozza meg a megjelenített mód alapján. Ez a bemutató megmutatja nekünk, hogyan kell ezt csinálni, és egy olyan színváltozó kaméleonra mutató hivatkozással egészül ki, amely színt használ a változás bemutatásához, amikor a böngészőablakot zsugorítja.
Érzékeny adat táblázatok
Chris Coyier - [Tutorial megtekintése]
A táblák fejfájás forrását jelentik a kis képernyőméretek esetében, de ez nem jelenti azt, hogy teljesen el kell kerülnünk a táblázatokat. Ismerje meg, hogyan használhatja a média lekérdezéseket annak érdekében, hogy a táblázatot teljesen megváltoztassa a mobil képernyőméretekre váltáskor. Tekintse meg a bemutatót, hogy megismerje a varázslatot, amit a bemutató alapján készíthet.
Fluid CSS3 diavetítés Parallaxis hatással
A gyűrűszárny - [Tutorial megtekintése]
Hozzon létre egy CSS3 diavetítést, ahol két háttérképet használnak, és amikor a hátterek helyzete megváltozik, a parallaxishatás látható. Ezenkívül a diavetítés rugalmas, átméretezi magát a böngészőablak bezárásakor.
Hogyan készítsünk egy érzékeny bélyegképtárat
Joshua Johnson - [Tutorial megtekintése]
Ez nagyszerű azoknak a webhelyeknek, amelyek a galériában bélyegképeket tartalmaznak. Mivel a böngészőablak átméretezése megtörtént, az elrendezést két oszlop (kisebb képernyőméretek) és öt (maximum) oszlop között foglalja el. A hasonló diavetítésekhez és csúszkákhoz nézze meg a Top 10 Free Responsive Image Galleries / Slideshows cikket.
Az e-mailek optimalizálása a mobil eszközökhöz
Ros Hodgekiss - [Tutorial megtekintése]
Még az e-mailek is optimalizálhatók a kis képernyős nézetekhez, mint például a webhelyek. Legtöbbször a HTML-e-mailben lévő szöveg átméretezhető egy olyan pontra, amely nem a kényelmes olvasáshoz szükséges; megtudhatja, hogyan kezelje ezt és többet a bemutatóból.
keretek használatával
Hozzon létre egy érzékeny mobilbarát webhelyet a csontvázzal
Joshua Johnson - [Tutorial megtekintése]
A csontváz egy fantasztikus keretrendszer, amellyel rugalmas webhelyeket építhet. Ez a bemutató egy lépésenkénti útmutatót tartalmaz a Skeleton keretrendszer használatáról, hogy félelmetes, érzékeny terveket készítsen. Megdöbbent, hogy milyen könnyen megvalósítható.
Érzékeny webdesign HTML5 és kevesebb keretrendszerrel 3
Louis Simoneau - [Tutorial megtekintése]
Ha még nem lettek megfelelően bemutatva a Less-ot, akkor először nézd meg saját Less CSS bemutatónkat, hogy megkapjuk a Less-et. Ebben a bemutatóban a Kisebb keretrendszert használtuk arra, hogy világosan lássuk a média lekérdezések hatásait.
Következtetés
És ez véget vet a miénknek Érzékeny Web Design sorozat. Reméljük, hogy az ebben a sorozatban szereplő témák, eszközök és egyéb erőforrások segítettek az olvasóinknak az érzékeny webdesign koncepciójának kitettségében. De hogyan tudnánk, ha nem mondja el nekünk?
Tájékoztassa a visszajelzést a sorozatban, és ha van javaslata több olyan ötletre, amelyet a hongkiat.com oldalon szeretne látni. Húzzon el egy sort vagy egy megjegyzést.
