Reszponzív Web Design (RWP)

/Reszponzív Web Design (RWP)

A Trendfigyelő című posztomban első helyen említettem a reszponzív designt, mint eszközt. Fontossága miatt utánajártam, hogy milyen megoldásokkal dolgozhatunk, hogy felvegyük a versenyt a mobil-internet használók táborának óriási bővülésével.

Reszponzív webdesign

Reszponzív áttekintő

A reszponzív webdesign tulajdonképpen egy gyakorlat, mely segítségével a felépített honlap minden eszközön, böngészőben és képernyőn automatikusan használható és élvezhető lesz, függetlenül attól, hogy mekkora felületen nyitja meg a felhasználó. Nem csak az elrendezés, hanem gyakran a tartalom is változik ilyenkor. Ezzel a módszerrel kiküszöbölhető, hogy a piacon fellelhető minden egyes mobileszközre külön-külön designt kelljen készíteni. A kifejezés megalkotója és az eljárás első fejlesztője Ethan Marcotte volt. Van azonban némi kavarodás a fogalmakat illetően, tegyük először ezt tisztába:

  • Reszponzív: gyorsan és megfelelően reagál bármilyen változásra. A reszponzív honlapok különböző faktorok szerint folyamatosan változnak, például a képernyő szélessége alapján.
  • Adaptív: azaz alkalmazkodó, ami egy új szituációban könnyen módosítható. Az adaptív weboldalakat a különböző, már meglévő tényezők alapján építik fel.
  • Mobil: általában azt jelenti, hogy egy önálló honlapot építenek – új domain alatt – kizárólag a mobil használók részére.

A reszponzív designokat három fő összetevőre bonthatjuk: rugalmas elrendezés, média lekérdezések és rugalmas média. Lássuk ezeket kicsit részletesebben:

 

1.    Rugalmas elrendezés (Flexible Layout)

A rugalmas elrendezés során egy rugalmas rácsra helyezzük a honlap szerkezetét, amely dinamikusan átméretezi magát bármilyen képernyő méretre. A rugalmas rács relatív hossz-mértékegységeket használ, általában százalékokat vagy em (kvirt) mértékegységet. Ebben határozzuk aztán meg a szélességet, margót és kitöltést. A CSS3 bevezetett néhány új relatív hossz-mértékegységet, ezek a következőek:

  • vw – viewports width: a képernyő szélessége
  • vh – viewports height: a képernyő magassága
  • vmin: a képernyő minimális szélessége és magassága
  • vmax: a képernyő maximális szélessége és magassága

Rugalmas elrendezésnél tehát nem használhatjuk a fix mértékegységeket, mint a pixel, vagy cm.

Magában ez azonban nem elég. Hiszen túl keskeny eszközön előfordulhat, hogy egy-egy oszlop annyira összeszűkül, hogy a benne lévő tartalom már nem látható, nem olvasható. Vagy fordítva: túl széles eszközön a tartalom töredezetté válhat. Erre megoldás a média lekérdezés.

 

2.    Média lekérdezések (Media Queries)

A média lekérdezések segítségével különböző stílusokat és struktúrákat adhatsz meg különböző böngészőkre és eszközökre, a következő szempontok alapján:

  • magasság és szélesség
  • orientáció (horizontális vagy vertikális)
  • magasság és szélesség aránya
  • pixelek aránya
  • felbontás (DPI)

Népszerű technika alapvetően mobil eszközökre fejlesztett stílusokkal felépíteni egy honlapot (mobile first), majd ehhez rendelni a többit – média lekérdezések segítségével –, ahogy nő a felhasználói felület. Ezzel csökkenthető a mobilokra letöltendő adatmennyiség.

 

3.    Rugalmas média (Flexible Media) / Mozgékony ábrák (Fluid Images)

A reszponzív design szintén fontos eleme a médiatartalom – képek, videók, stb. – rugalmassága, vagy mozgékonysága. A rugalmasságot a maximális szélesség 100%-ként történő megadásával biztosíthatod. Mozgékony illusztrációkat pedig a következő technikákkal alkothatsz:

  • képek elrejtésével majd előtűnésével
  • csúszó összetett ábrákkal
  • előtérbe helyezett rugalmas médiaelemekkel

A RWD célja tehát egy optimális megtekintési és interakciós élmény biztosítása. Egy olyan honlap, melyet a legkülönbözőbb eszközökön is könnyű olvasni és navigálni, minimális átméretezéssel, pásztázással és görgetéssel. Mivel a trend egyre inkább a mobileszközökön történő internetezés felé halad, a Google is jutalmazza a mobilbarát honlapokat.

Példák:

Stephen Caver – designer

Reszponzív webdesign

A designer ezzel a honlappal érzékelteti, hogyan kell egy nyitóoldal standard elemeit a tipográfia, a rácsvonalak és az elrendezés segítségével reszponzívvá tenni. A három, lényeges elem, amit monden honlap tartalmaz:

  • hatalmas üdvözlő szöveg, nyers tipográfiával
  • óriási blokkok, melyek az oldal tetején található főmenü duplikációi
  • blog rész.

A horizontálisan elrendezett blokkok könnyedén átalakíthatóak vertikálisan egymást követő blokkokká, elhagyva a díszítést.

The Boston Globe – hírportál

Reszponzív webdesign

A cikkek a számítógép képernyőjén 3 oszlopba rendezettek, majd a képernyő zsugorodásával az oszlopok száma is csökken – 2-re notebook, 1-re telefon esetén.

Forrás: Smashingmagazine Awwwards Designmodo Wikipedia

By | 2016-10-21T13:23:37+00:00 2016 április 14|weboldal|

Hagyj üzenetet

Weboldalamon a felhasználói élmény javítása érdekében cookie-kat használok.

A weboldalon cookie-kat használunk, amik segítenek engem a lehető legjobb szolgáltatások nyújtásában. A honlap további használatával ezt és az adatkezelési szabályzatot jóváhagyod.

Close