Content MarketingMarketing és értékesítési videókMarketing infografikaMobil és táblagépes marketing

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 Web Design Infographic

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.

  • króm fejlesztői eszközök reszponzív táblagép
  • chrome fejlesztői eszközök reszponzív mobil vízszintes
  • chrome fejlesztői eszközök reszponzív mobil
  • chrome fejlesztői eszközök reszponzív asztali

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!

Douglas Karr

Douglas Karr CMO of OpenINSIGHTS és az alapítója a Martech Zone. Douglas több tucat sikeres MarTech startupnak segített, több mint 5 milliárd dolláros átvilágításban segédkezett a Martech akvizíciókban és befektetésekben, és továbbra is segíti a vállalatokat értékesítési és marketingstratégiáik megvalósításában és automatizálásában. Douglas nemzetközileg elismert digitális átalakulás és MarTech szakértő és előadó. Douglas egy Dummie's Guide és egy üzleti vezetői könyv szerzője is.

Kapcsolódó cikkek

Vissza a lap tetejére gombra
közel

Adblock észlelve

Martech Zone ingyenesen tudja biztosítani Önnek ezt a tartalmat, mivel webhelyünkkel bevételt szerezünk hirdetési bevételek, társult linkek és szponzorálás révén. Nagyra értékelnénk, ha eltávolítaná hirdetésblokkolóját, miközben megtekinti webhelyünket.