2013-as weboldal trendek - 2.rész - Reszponzív weboldalak

2013-as weboldal trendek - 2.rész - Reszponzív weboldalakÍrta: KLSoft, 2013.04.15, 14:39:44-kor


Folytatva a megkezdett trendbemutató sorozatunkat, következzen az újabb állomás: a reszponzív weboldalak bemutatása.
A reszponzív (vagy eredetileg responsive) webdesign nem egy új dolog. Már 2 éve adott hozzá a legtöbb technológia, viszont idén már szinte megkerülhetetlenné válik a használata. A különböző mobil platformok (tabletek, okostelefonok) annyira elterjedtek lettek az elmúlt időszakban, hogy nem lehet észrevétlenül elmenni mellettük.
Ezzel párhuzamosan az internetezési szokások is változáson mentek keresztül, folyamatosan növekszik a mobil eszközökről indított weboldal-látogatások száma is, így elkerülhetetlenné válik a weboldal-tulajdonosok számára a honlapok tabletre és okostelefonra optimalizált átalakítása is.


Mi a reszponzív webdesign?

A reszponzív webdesign lényege nem más, mint a különböző képernyőfelbontásokra, és platformokra optimalizált weboldalak tervezése. A reszponzív design lényege, hogy mindösszesen egy weboldalunk van, viszont ez az oldal másképp reagál az egyes képernyőméretekre – tehát az oldal reagál a képernyő felbontására, így az oldal egyes elemeinek szélessége lecsökken, a menüpontok összerendeződnek, ahol 4 oszlopos megjelenés volt, az végül már fokozatosan 1-re csökken, de a weboldal funkcionalitása megmarad.
A régebbi megoldások arról szóltak, hogy a honlapok tulajdonosai külön-külön gyártattak egy-egy weboldalt a mobitelefonokra, egyet a tabletekhez és természetesen egyet az „asztali megjelenítéshez”. A reszponzív weboldalak ezt a többszörös munkát teszik feleslegessé, hiszem nem kell a weboldal tartalmát minden platformra külön-külön feltölteni.
Egy szép infografika a témában:


Ennek megfelelően a webdesignernek egyszerre több nézetet kell megterveznie az adott kinézet elemeinek kicsinyítésével, eltüntetésével, átalakításával dolgozva, míg az adott képernyő méreten optimálisan jelenik meg az adott tartalom.

Fontos technológiai alapok:

  • CSS media query: A technológia lényege. Segítségével tudhatjuk meg, hogy a weboldal látogatója milyen felbontású készüléken nézi a honlapot, és ez alapján módosíthatjuk az oldal megjelenését minden egyéb külső alkalmazás nélkül.
  • Rugalmas, méretarányos képek: a képeknek rugalmasan átméretezhetőnek kell lenniük a különböző képernyőfelbontások miatt.
  • Rugalmas elrendezés: A weboldal különböző strukturális elemeinek rugalmasnak kell lenniük ahhoz, hogy a méretük csökkenni, nőni tudjon az adott képernyőmérethez.


Kinek kell ez?

  • A technológia használata mindenkinek ajánlott, akinek érkeznek látogatói mobil eszközökről. Erről részletes statisztikát vezet akár a Google Analytics is, így könnyen áttekinthetjük, hogy honnan érkeznek weboldalunk látogatói.
  • Aki terméket, szolgáltatást mutat be a weboldalán, és esetleg online hirdetési lehetőségeket is használ (facebook, google adwords)
  • Aki nem szeretne egy-egy tartalmat 3-4-5 különböző saját weboldalra feltölteni.

Miért jó ez, mik az előnyei?

  • Modern trend, Magyarországon még nagyon kevés ilyen weboldal van. Ha valami egyedit szeretnénk, akkor ez a technika jó fegyver lehet a kezünkben.
  • Költséghatékony: egy reszponzív weboldal drágább, mint egy hagyományos weboldal, de sokkal olcsóbb, mint ha elkészíttetnénk külön-külön minden platformra egy-egy weboldalt.
  • Jól optimalizálható: az asztali nézetre szánt oldal megmaradhat látványosnak, nagy méretűnek, a mobil nézeteket pedig a sebességre optimalizálhatjuk
  • Egy tartalom: nem kell a különböző méretű oldalakhoz külön-külön felvinni a tartalmat, hiszen mindösszesen egy weboldalunk van.

Nézzünk néhány szép példát:




Összegzésként tehát azt mondhatom, hogy a mobil eszközök elterjedésével a reszponzív webdesign alkalmazása nagy jelentőséget kap, és a jövőben egyre több olyan magyar oldallal fogunk találkozni, amely használja ezt az elegáns módszert!

A 2013-as weboldal trendeket bemutató sorozatunk ezzel nem ér véget! A következő cikk a Minimalista design kérdéskörével fog foglalkozni.


Kapcsolódó cikkünk: Milyen honlap-trendek várhatók 2013-ban? – 1.rész

Addig is várom a visszajelzéseket, véleményeket a most bemutatott trenddel kapcsolatban!




Ne maradjon le a következő cikkünkről:
iratkozzon fel most a blogértesítőnkre!

Cikkek


címkefelhő

Adwords Ajánlatkérés ÁRAJÁNLAT ÁSZF bemutatkozó cég bővítés családbarát árak egyedi megoldások egyedi elképzelés weboldalak felújítása frissítések grafika híreink Honlapok Honlapkészítés Honlapfelújítás Honlaptervezés ingyenes árajánlat körlevél kampányok karbantartás Keresőoptimalizálás wablap-készítés weboldal készítése kialakítás kivitelezés KLSoft látványtervek magánszemély megbízható megfizethető megoldások Hírlevél megvalósítás mindenkinek PHP Referenciák Rövid határidő rugalmas ügyintézés Segítünk sikeres szervezetek szolgáltatások tervezés ügyintézés Blogbejegyzés vállalkozás webáruház webes megoldások weblap Weboldal weboldal-karbantartást Webprogramozás