Mi az adaptív tervezés? (Magyarázó videó és infografika)

rugalmas webdesign

Egy évtizedbe telt rugalmas webdesign (RWD), hogy azóta a mainstreambe kerüljön Cameron Adams mutatta be először a koncepció. Az ötlet ötletes volt - miért nem tervezhetünk olyan webhelyeket, amelyek alkalmazkodnak a megtekintett eszköz nézetablakához?

Mi az adaptív tervezés?

Az adaptív webdesign (RWD) egy olyan webdesign-megközelítés, amelynek célja a webhelyek kialakítása az optimális megtekintési élmény biztosítása érdekében - könnyű olvasás és navigálás, minimális átméretezés, pásztázás és görgetés mellett - sokféle eszközön (a mobiltelefonoktól az asztali számítógépekig) monitorok). Az RWD-vel tervezett webhely az elrendezést a nézési környezethez igazítja a folyékony, arányarányú rácsok, rugalmas képek és CSS3 média lekérdezések használatával, a @media szabály kiterjesztésével.

Wikipedia

Más szavakkal, az elemek, például a képek, valamint az elemek elrendezése is módosítható. Itt van egy videó, amely elmagyarázza, mi az adaptív dizájn, valamint azt, hogy miért kell a vállalatának megvalósítania. Nemrégiben alakítottuk át a DK New Media hogy reagáljon, és most dolgoznak rajta Martech Zone hogy ugyanezt tegyem!

A webhelyre reagálókészítés módszertana kissé unalmas, mivel a stílusok hierarchiájára van szükség, amelyet a nézetablak mérete alapján rendeznek.

A böngészők önállóan ismerik méretüket, ezért felülről lefelé töltik be a stíluslapot, a képernyő méretéhez lekérdezve az alkalmazható stílusokat. Ez nem azt jelenti, hogy minden stílusú képernyőhöz különféle stíluslapokat kell megtervezni, csak a szükséges elemeket kell áthelyeznie.

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

Itt található a Monetate infografikája, amely bemutatja az egyik adaptív kialakítás lehetséges előnyeit több eszköz számára:

Reszponzív Web Design Infographic

Ha érzékeny webhelyet szeretne látni működés közben, mutassa meg a Google Chrome böngésző (úgy gondolom, hogy a Firefox ugyanazzal a funkcióval rendelkezik) DK New Media. Most válassza ki Nézet> Fejlesztő> Fejlesztői eszközök a menüből. Ez egy csomó eszközt tölt be a böngésző aljára. Kattintson a Developer Tools menüsor bal szélén lévő kis mobil ikonra.

reszponzív-tesztelő-króm

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!

3 Comments

  1. 1
  2. 2

    Nagyon köszönöm Douglasnak ezt a jól megmagyarázott cikket. Ezzel azonban egyet kell értenem a dolgok tartalmi oldalán. A legtöbb webhely esetében a válaszadóképes elrendezés nem lesz elegendő. Reszponzív tartalomra van szükségünk. De az alapvető weboldalak esetében biztosan felhasználjuk a jól dokumentált cikkét, amely ennek kezelésére szolgál!

Mit gondolsz?

Ez az oldal Akismet-et használ a levélszemét csökkentése érdekében. Ismerje meg, hogyan dolgozik a megjegyzésed.