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
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
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
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
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
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
Í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
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
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
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
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
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
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
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
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
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.
16. Öntapadó lábléc, ötféle
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
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
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
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:
- Hozzon létre adaptív űrlapokat és táblázatokat
- Mennyire változtatta meg a világot az adaptív webdesign
- 7 játékmódosító webdesign eszköz 2018-ra
