Reszponzív webdesign alapelvek

Manapság bevett gyakorlat, hogy olyan webhelyet vagy alkalmazást készítenek, amely a böngészőtől vagy az eszköztől függően beállítja felhasználói felületét. E cél eléréséhez két megközelítés létezik. Az első a webhely vagy alkalmazás különböző verzióinak létrehozását jelenti különböző eszközök számára. De ez nem hatékony, és kiszámíthatatlan hibákhoz vezethet.

A megbízható, jövőbiztos megközelítés keresése során megalkották a reszponzív-vagy adaptív-tervezést. Arra összpontosít, hogy az elrendezés egyetlen változatát hozza létre, amely automatikusan alkalmazkodik a különböző böngészőkhöz vagy eszközökhöz.

Ebben a cikkben megismerkedünk a reszponzív webes tervezéssel és az alapvető elvekkel, amelyek segítenek egy fantasztikus weboldal készítésében.

Érzékeny webdesign -összetevők

A reszponzív webdesign nem olyan bonyolult, mint amilyennek hangzik. Ez egy sor gyakorlat, amelyet a CSS írásakor használhat, nem pedig egy különálló technológia, amelyet a semmiből kell megtanulnia. Lehet, hogy már követed ezeket az elveket anélkül, hogy észrevennéd. Megértheti a reszponzív webdesignot, ha feltárja annak négy összetevőjét: folyékony elrendezéseket, reszponzív egységeket, rugalmas képeket és médialekérdezéseket.

Folyadékelrendezések

Folyékony elrendezéssel olyan weboldalakat hozhat létre, amelyek alkalmazkodnak az aktuális nézetablak szélességéhez és magasságához. Az általános gyakorlat magában foglalja a maximális szélesség tulajdonságot, ahelyett, hogy fix szélességet adna egy elemnek. Továbbá, százalék használatával (%), nézetablak magassága (vh), vagy a nézetablak szélessége (vw) segít javítani az alkalmazkodóképességet, ami képpontokkal nem lehetséges (px). Tehát, amikor legközelebb elrendezést készít, győződjön meg arról, hogy bevezeti ezeket az apró változtatásokat, és részesüljön a reszponzív tervezési technikákból.

Érzékeny egységek

A haladóbb CSS -re való áttéréskor gyakran látni fogja a használatát rem és em hosszúság mértékegységei helyett px egységek. Ez azért van, mert a rem az egység rendkívül egyszerűvé teszi a teljes elrendezés skálázását. Alapértelmezés szerint az 1rem 16px -nek felel meg, mert arányos a elem betűmérete, általában 16 képpont. A felső szám betűméretének beállításával azonban beállíthatja az 1rem értéket 10 képpontnak (vagy bármely más értéknek).

Rugalmas képek

A képek a legalapvetőbb elrendezés kialakításakor is elsődleges szempont. Mindig ügyelnie kell a megfelelő méretre, hogy illeszkedjen a dizájnhoz. Ezenkívül alapértelmezés szerint nem méretezik a nézetablak változásait. Tehát használnia kell % a képek méretéhez, a maximális szélesség ingatlan.

Médialekérdezések segítségével életre keltheti a reszponzív webhelyeket. A folyadékrácsokkal jó kezdeni, de azt tapasztalja, hogy van néhány pont, ahol az elrendezés bomlani kezd. A töréspontok hozzáadása ezekhez a nézetablak -szélességekhez hangolja a különböző eszközök elrendezését. A médialekérdezések segítenek a CSS szelektív alkalmazásában a médiafunkciós tesztek eredményei alapján. Új dolgokat fedezhet fel CSS funkciók egy reszponzív webhely létrehozásához kevesebb idő alatt.

Reszponzív webdesign alapelvek

Bár a reszponzív webdesign megmentője a többképernyős problémáknak, előfordulhat, hogy nincsenek rögzített fizikai korlátai, amelyekre hivatkozhat. Ezért hat reszponzív webtervezési alapelv létezik, amelyekkel kezdeni kell a reszponzív elrendezés tervezésénél.

Használjon tartalomalapú töréspontokat

Az egyik alapvető tervezési alapelv kimondja, hogy webhelyének kialakításának támogatnia kell a tartalmat, nem pedig fordítva. A médiatartalmakat, például a videókat, fényképeket és szöveges tartalmakat, például a hosszú és rövid webes másolatot, minden képernyőn optimálisan kell megjeleníteni. A reszponzív webdesign kulcsa a tartalomalapú töréspontok használata az eszköz alapú helyett.

Válassza bölcsen a webes betűtípusokat és a rendszerbetűtípusokat

A webes betűtípusok lenyűgözően néznek ki! Számos lehetőség áll rendelkezésre a formatervezés módosítására hűvös megjelenésű webes betűtípusokkal. De tudnia kell, hogy a böngészőknek le kell tölteniük az egyes webes betűtípusokat. Több webes betűtípus, több letöltési idő. Ezzel szemben a rendszer betűtípusai villámgyorsak. Ha a felhasználó nem rendelkezik megnevezett rendszerbetűtípussal a helyi eszközén, akkor vissza fog térni a következő betűtípushoz a font-család verem. Ezért a betűtípusok kiválasztásakor vegye figyelembe a betöltési időt és a tervezési igényeket.

Bitmap képek és vektorok optimalizálása

Vannak különböző ikonjai a webhelyen, amelyek támogatják a tartalmat? Gyakran bevált gyakorlat a bitkép formátum használata, ha az ikonok sok részletet tartalmaznak. Másfelől a vektoros formátumok az útvonalak a szépen felfelé és lefelé méretező ikonokhoz. A vektorok gyakran aprók, de a hátránya, hogy néhány régebbi böngésző nem támogatja őket. Ezenkívül vannak olyan esetek, amikor a vektorok nehezebbek, mint a bitképek, például amikor a kép nagyon részletes. Ezért mindig győződjön meg arról, hogy optimalizálja a bittérképes képeit és vektorait, mielőtt azok az internetre kerülnének.

Végezzen teszteket a reszponzív első hajtogatáshoz

A webhely első hajtása az a nézet, amelyet a látogatók látnak az első betöltéskor, minden görgetés előtt. Gyakran tartalmaz egy hős részt a érzékeny navigációs sáv, bevezető példány és média, valamint egy CTA. A válaszkészség nem csak a mobil eszközökre korlátozódik. Érdemes megfontolni a táblagépeket, a játékkonzolokat és más képernyőket is. Tehát a legfontosabb az, hogy gyakori teszteket végezzen legalább a webhely első nézetében. Használhatja a Chrome DevTools (Világítótorony) a weboldal minőségének teszteléséhez.

Ne rejtse el a tartalmat a kisebb képernyőkön

Sokan azt hitték, hogy a mobilfelhasználók mindig rohannak, harapnivaló méretű információkat keresnek, míg az asztali felhasználók inkább a hosszú formájú tartalmat kedvelik. Ma már tudjuk, hogy ez nem igaz a mai világban. Az emberek mindenhol mobil eszközöket használnak, teljes tartalmat és minden szolgáltatáshoz való hozzáférést keresnek. Biztosítania kell, hogy a tartalom elrejtése helyett az elrendezést és a töréspontokat kezeli, hogy a lehető legegyszerűbben és erőfeszítésmentesebben mutassa be.

Az elrendezés kezelése beágyazott objektumok használatával

A webhely elrendezésének és helymeghatározó elemeinek helyes felépítése megfelelő erőfeszítést igényel. Önnek is nehézségei lehetnek sok egymástól függő elem kezelésében. Ezért fontolja meg a kapcsolódó elemek csomagolását egy tartályba vagy. Ez segít csökkenteni a több elem elhelyezésének feladatát egy olyanra, amelyben csak egyetlen elemet helyez el.

Érzékeny dizájn: Először az asztali számítógéppel vagy a mobilnal?

Az asztali első megközelítés azt jelenti, hogy CSS -t ír a nagy képernyőkhöz, majd médialekérdezéseket alkalmaz a kisebb képernyők kialakításának szűkítésére. Ezzel szemben a mobil első megközelítése magában foglalja a CSS írását mobileszközökre, kisebb képernyőkön, majd a médialekérdezések alkalmazását a nagyobb képernyők kialakításának kibővítésére. Az elsődleges cél az, hogy a weboldalt és az alkalmazásokat a legszükségesebbekre redukáljuk.

Ha még csak most kezdi a reszponzív webfejlesztést, akkor először az asztali számítógépet kell választania a nap végén, a konténert egymásra kell rakni a mobilon eszközök. Bár ez teljesen személyes döntés, a mobil első megközelítés segít a strukturálásában HTML-t jobb módon, míg az asztali első megközelítés segít az elrendezésben és a térközökben technikákat.

A 6 legjobb tanfolyam az UX tervezéshez

Ha szeretné megtanulni az UX tervezést vagy fejleszteni a készségeit, akkor itt van a hat legjobb online tanfolyam, amelyet elvégezhet.

Olvassa tovább

A szerzőről