19 igazán hasznos adaptív web-tervezési oktatóanyag

Az adaptív webdesign már nem választható; a webhelyeknek manapság egyszerűen reagálniuk kell. Szerencsére az RWD-t könnyebb megvalósítani, mint valaha, mivel rengeteg nagyszerű eszköz áll rendelkezésre a tervek létrehozásában és tesztelésében, valamint a legjobbak létrehozásában. felhasználói tapasztalat .

Az alábbiakban összefoglaljuk a legjobb forrásokat, amelyek segítenek abban, hogy webhelyei jól működjenek és bármilyen eszközön jól nézzen ki. Szeretne még néhány hasznos forrást? Útmutatóink a legjobbakhoz weboldal készítő és webtárhely Szolgálat segítenek. És ha aggódsz a fájlok biztonságos tárolása miatt, akkor ezekre ragyogó szükség van felhőtároló lehetőségek.

01. Hogyan kezdjünk el reagálni

Reszponzív webdesign oktatóanyagok: Hogyan kezdjünk el reagálni gondolkodni



Érzékeny lelkiállapotba kerüljön(Kép jóváírása: FreeCodeCamp)

Ban ben ezt a bejegyzést a FreeCodeCamp oldalon , Kevin Powell azt a fontos megállapítást teszi, hogy az adaptív webdesign már nem trend; a webhelyek építésének várható módja ez, és ez azt jelenti, hogy a kezdetektől fogva reagálni kell. Itt bemutatja, hogyan lehet bejutni az érzékeny gondolkodásmódba, miközben egy teljesen érzékeny 3 oldalas weboldalt épít.

02. 9 érzékeny tipográfiai tipp

Reszponzív webdesign oktatóanyagok: 9 adaptív tipográfiai tipp

Válaszos típusú tippeket kaphat a szakértőktől(Kép jóváírása: Adam Banks)

A reszponzív webdesignnak természetesen reagálnia kell tipográfiára. De mit is jelent ez, és hogyan valósítja meg? Hét vezető webdesignert kérdeztünk az elegáns, olvasható szöveg minden nézetablakban történő létrehozásával kapcsolatos tippjeikért.

03. A reszponzív webes tipográfia szabályai

Az adaptív webes tipográfia szabályai

Kövesse ezeket a tippeket, hogy megfelelő legyen az adaptív webes tipográfia

A reszponzív webes tipográfia nehéz - mind tervezési szeletekkel, mind technikai know-how-val rendelkeznie kell. Bármennyire is bonyolult ez, a tévedés nem megoldás, mert a tipográfia a webes tervezés sarokköve. Kövesse ezeket a tervezési elveket és gyakorlati megoldásokat hogy rendben legyen.

04. Tervezzen egy adaptív helyet em-alapú méretezéssel

Tervezzen érzékeny webhelyet em-alapú méretezéssel

Készítse el oldalait, hogy a betűméret megváltozása esetén a tervezés ne törjön össze

Az em egységek használatával a betűmérethez olyan elemeket tervezhet az oldalon, amelyek automatikusan reagálnak a betűméret változására. Ezután az érzékeny betűméret ügyes trükkjével egy teljes oldalt készíthet, amely dinamikusan igazodik a böngésző nézetablak-szélessége alapján. Kövesse ezt az oktatóanyagot megtanulni, hogyan lehet kihasználni az 'relatív' viselkedést skálázható és érzékeny tervek létrehozása érdekében.

05. Elsőbbségi útmutatók: a drótkeretek tartalmi első alternatívája

Elsőbbségi útmutatók: a drótkeretek tartalmi első alternatívája

Ismerje meg, miért érdemes prioritási útmutatókat használni drótváz helyett

A drótvázak lehetnek a legszélesebb körben használt eszközök a weboldalak, alkalmazások és más digitális interfészek tervezéséhez, de nem hátrányosak, főleg ha az adaptív tervezésről van szó. Itt Heleen van Nues és Lennart Overkamp mutatják be a drótkeretek preferált alternatíváját: elsőbbségi útmutatók , amelyek tartalmat és elemeket tartalmaznak egy mobil képernyőhöz, hierarchia szerint rendezve felülről lefelé és elrendezési specifikációk nélkül.

06. A profi útmutató az adaptív web tervezéshez

A profi

Készítsen jobb oldalakat bármilyen eszköz számára ezzel az útmutatóval

Írta Justin Avery , a Responsive Design Weekly hírlevél kurátora, ez az útmutató a net magazinból a webes profiknak az alapokon át a fejlettebb adaptív web-tervezési technikákig vezet.

07. Hogyan készítsünk reszponzív és eszköz-agnosztikus formákat

Különböző eszközökhöz alkalmazkodó adaptív formák

Győződjön meg arról, hogy az űrlapok működnek, bármilyen eszköztől is

Az űrlapok a digitális terméktervezés egyik legfontosabb eleme, és akár regisztrációs folyamatra, akár több nézetből álló lépésre van szükség, meg kell terveznie, hogy hatékonyan működjön a mobileszközökön és az asztalon is. Így teheti meg , hasznos tippekkel kiegészítve a Flexbox használatához.

08. Hozzon létre egy adaptív elrendezést a CSS Grid segítségével

CSS Grid webhelyet létrehozó tervező

Készítsen egy nagyszerű portfólió-oldalt, amely megfelel az összes nézetablaknak

A CSS Grid Layout mindennap bővül a böngészők támogatásában, és bár nem helyettesíti a Flexboxot, sőt az úszókat sem, velük együtt használva nagyszerű módja új és izgalmas, rugalmas reagálási elrendezések létrehozásának. Kövesse ezt a lépésenkénti útmutatót egy reszponzív portfólió webhely felépítéséhez a Grid segítségével.

09. A webdesigner útmutatója a Flexboxhoz

Az 1 2 3 4 5 jelű Flexbox oszlopok nyílral, amely a fő tengely vízszintes

Kezdje a Flexbox használatával

Megkezdte már a Flexbox használatát? Ebben az oktatóanyagban Wes Bos a átfogó útmutató az alapvető fogalmakhoz, amelyek szilárd megértést nyújtanak mindannak, amire szükséged van ahhoz, hogy kezelni tudd ezt a hatékony eszközt.

10. Codrops Flexbox referencia

A Codrops képernyőkép szerint

Sara Soueidan teljes útmutatója

Ez teljes útmutató a Flexboxhoz Sara Soueidan, egy olyan szerző írja, aki híres arról, hogy képes a fogalmak olyan módon történő magyarázatára, hogy könnyen követhető legyen, a részletek nélkül. A Codrops útmutatót rendszeresen frissítik, így remek erőforrás visszatérni, amikor arra szüksége van.

11. Verem: Flexbox a Sketch számára

A közepes cikk képernyőképe azt mondja

Szerezzen be Flexbox képességeket a Sketch alkalmazásban

Az Automatikus elrendezés beépülő modul részét képező Stacks lehetővé teszi a Flexbox technológia használatát a Sketch-en belül, CSS használata nélkül. ez a cikk elmagyarázza, hogyan használhatja ezt a hatékony technikát az egyszerű reagáláshoz.

12. Összeomlási tanfolyam a műszaki RWD-ben

Összeomlási tanfolyam technikailag adaptív webdesign képernyőképben

Ismerje meg az adaptív webdesign alapjait

Jerry Cao a Treehouse blogon írva rengeteg hasznos információt sűrített egy viszonylag rövid, olvasható cikkbe.

13. Hozzon létre rugalmas elrendezéseket Susy és Breakpoint segítségével

Eszközképernyők, amelyek az egyes arányokhoz igazítják az érzékeny webhelyelrendezést

Sass kiterjesztések az érzékeny matematika érdekében

Ha nem szeretne keretrendszert használni az adaptív webhely létrehozásához, ezeket a Sass kiterjesztéseket kellemes alternatíva, mindegyiknek megvan a maga erőssége. Ők gondoskodnak az érzékeny matematikáról az Ön számára, így Ön a tervezésre koncentrálhat.

14. Hogyan készítsünk adaptív útmutatókat az Adobe XD-ben

Reagáló útmutatók készülnek az Adobe XD-ben

Az Adobe Experience Design (XD) egy UX és prototípus-készítő eszköz

Ha szívesen kipróbálnád Adobe Experience Design (XD) , itt van egy jó bemutató hogy elinduljon. Tartalmaz egy video bemutatót, amely végigvezet a folyamat minden kattintásán.

15. CSS a BBC Sportnál

Pillanatkép a BBC Sport webhelyéről

Könnyű CSS nagy reagálású webhelyhez

Ez önmagában nem oktatóanyag, de itt rengeteg tanulás van. Ebben a bejegyzésben , a kétrészes sorozat elsője, a frontend fejlesztője, Shaun Bent részletes túrára vezet minket a CSS működésével kapcsolatban a BBC Sportnál. Sikerült 9kb alatt tartaniuk ennek a hatalmas oldalnak a CSS-alapját, és lenyűgöző látni, hogy ez hogyan történt.

A CSS Tricks képernyőképe a cikk indításával

Chris Coyier ragadós lábléc útjai

Ragadós lábléc ... ennek elég egyszerűnek kell lennie, igaz? Sajnos nem. Lehet bonyolultabb, mint amire számíthat, hogy ezt a láblécet minden eszközön a megfelelő helyre szerezze. Szerencsére Chris Coyier összeállt öt trükk ami segít megvalósítani a használatával calc () , Flexbox, negatív margók és Rács.

17. Alkalmazkodás a bemenethez

Táblázat, amely kényelmes, kényelmes és kompakt szövegterveket mutat, különböző méretű képernyőkön

Győződjön meg arról, hogy adaptív webhelye bármilyen eszközről be tudja fogadni a bevitelt

Az adaptív tervezés nem csak az oldal megfelelő megjelenítését teszi lehetővé bármely eszközön, hanem azt is, hogy jól működjön - és ez azt jelenti, hogy jónak kell lennie abban, hogy elfogadja a bevitelt egy olyan világban, ahol az asztali számítógépek érintőképernyővel rendelkeznek, a telefonok pedig billentyűzettel. ez a cikk Jason Grigsby, a Cloud Four munkatársa megalapozott tanácsokkal szolgál.

18. A legjobb gyakorlataink a mobil webes teljesítmény megölése

Pillanatkép a cikkolvasásról

A teljesítmény szempontjainak a mobilon is működniük kell

Megfontolás nélkül alkalmazva, az asztali számítógépek korában kialakított egyes bevált gyakorlatok káros hatással lehetnek a mobil web teljesítményére. ez a cikk mélyebb gondolkodásra készteti Önt, hogy miként érheti el, hogy webhelye jól működjön a mobilon.

19. Hogyan készítsünk reszponzív webalkalmazásokat tároló lekérdezésekkel

Különböző méretű képernyők, amelyek a webalkalmazás makett méretezését mutatják

Megtanulják, hogyan lehet méretarányt létrehozni a tárolói lekérdezések segítségével

Megtanulják, hogyan lehet átalakítani egy gyönyörű, összetett webalkalmazást - összetevőkkel, állapotokkal és interakciókkal - különböző dimenziókban és felbontásokban, konténer lekérdezés segítségével .

Kapcsolódó cikkek: