Mi az adaptív tervezés? (Magyarázó videó és infografika)
Egy évtizedbe telt rugalmas webdesign (RWD) hogy menjen a mainstream óta Cameron Adams mutatta be először Az ötlet zseniális volt – miért nem tudunk olyan oldalakat tervezni, amelyek alkalmazkodnak a megtekintett eszköz nézetéhez?
Mi az adaptív tervezés?
A reszponzív webdizájn egy olyan tervezési megközelítés, amely biztosítja, hogy egy webhely optimális megtekintési élményt nyújtson bármilyen eszközön, függetlenül a képernyő méretétől vagy felbontásától. Ez magában foglalja rugalmas elrendezések, rács alapú elrendezések és médialekérdezések használatát egy olyan webhely létrehozásához, amely alkalmazkodik a megtekintett képernyő méretéhez. Ez azt jelenti, hogy a reszponzív webdizájnnal tervezett webhely jól fog kinézni és jól fog működni asztali számítógépen, táblagépen vagy okostelefonon.
Más szavakkal, az olyan elemek, mint a képek, beállíthatók, valamint ezeknek az elemeknek az elrendezése. Íme egy videó, amely elmagyarázza, mi az a reszponzív tervezés, valamint hogy miért érdemes ezt megvalósítania a vállalatának. Ha új webhelytervezést vagy webalkalmazást fejleszt, az adaptív webdizájn kötelező, nem pedig lehetőség, mivel az összes webes forgalom több mint fele olyan mobileszközökről érkezik, amelyek eltérő szélességű és magasságú nézetablakokkal rendelkeznek.
A reszponzív tervezés a webdesignerek számára is optimális, akiknek nem kell független, az eszköz vagy a nézetablak alapján egyedi élményeket felépíteniük. A reszponzív webdizájn segítségével megvalósítható CSS.
Reszponzív tervezésű CSS-nézeti lekérdezések
Íme egy példa egy stíluslapra, amely médialekérdezéssel módosítja a betűméretet a nézet alapján:
/* Default styles for all devices */
body {
font-size: 16px;
line-height: 1.5;
}
/* Style changes for devices with a viewport width between 600px and 900px */
@media (min-width: 600px) and (max-width: 900px) {
body {
font-size: 18px;
}
}
/* Style changes for devices with a viewport width between 900px and 1200px */
@media (min-width: 900px) and (max-width: 1200px) {
body {
font-size: 20px;
}
}
/* Style changes for devices with a viewport width greater than 1200px */
@media (min-width: 1200px) {
body {
font-size: 22px;
}
}
A böngészők tisztában vannak a méretükkel, és felülről lefelé töltik be a stíluslapot. A képernyő méretéhez tartozó stílusok lekérdezésével minden minimális és maximális eszközszélességhez egyedi stíluselemeket állíthat be. Ez nem azt jelenti, hogy minden képernyőmérethez más-más oldalt kell tervezni, csupán a médialekérdezések segítségével kell eltolni a szükséges elemeket.
A mobil-első mentalitással való működtetés ma az alapszint. A kategóriában legjobb márkák nemcsak azon gondolkodnak, hogy webhelyük mobilbarát-e, hanem a teljes ügyfélélményről is.
Lucinda Duncalfe, a Monetate vezérigazgatója
Íme egy infografika innen Pénz szemlélteti az egyetlen reszponzív kialakítás több eszközhöz való létrehozásának lehetséges előnyeit:
Reszponzív a webhelye?
Az egyik egyszerű módja annak, hogy megbizonyosodjon arról, hogy webhelye reszponzív-e, ha csak növeli vagy csökkenti a böngészőablakot, hogy megnézze, az elemek a böngésző szélessége alapján mozognak-e.
A pontosság érdekében mutasson rá Google Chrome böngészővel a webhelyére. Válassza ki Nézet> Fejlesztő> Fejlesztői eszközök menüből. Ez egy csomó eszközt betölt egy panelbe vagy új ablakba. Kattintson a Fejlesztői eszközök menüsor bal oldalán található kis ikonra, amely úgy néz ki, mint egy mobil és táblagép ikon. Kiválaszthat néhány szabványos eszközt, és még azt is megváltoztathatja, hogy az oldalt vízszintesen vagy függőlegesen szeretné-e megtekinteni.
A tetején lévő navigációs beállításokkal a nézetet fekvőről állóra változtathatja, vagy akár tetszőleges számú előre beprogramozott nézetablakot is kiválaszthat. Lehet, hogy újra kell töltenie az oldalt, de ez a világ legklasszabb eszköze az adaptív beállítások ellenőrzéséhez és annak biztosításához, hogy webhelye minden eszközön nagyszerű legyen!