2014. február. 24. |
Napjaink gyorsuló technológiai fejlődése újra és újra kihívások elé állítja a webáruházak tulajdonosait. Amelyik weboldal nem képes gyorsan alkalmazkodni a változásokhoz, az könnyen hátrányba kerülhet a fogyasztókért vívott harcban. A hardverek fejlődése a mobileszközök (okostelefon, táblagép) használatának széles körben való elterjedését hozta magával, amely jelentősen kezdi megváltoztatni az internetezési szokásokat. A KPBC 2013 májusában közreadott tanulmánya szerint a világ teljes internetes forgalmának 15 százalékát a mobilforgalom adja, de ahogy azt a trendvonal mutatja, korántsem ez a vége a folyamatnak.
Nemcsak arányaiban, de abszolút értékben is kimutatható a mobileszközök globális uralmának eljövetele. Amíg az asztali gép mellett ülő internet felhasználók száma a 2009-es 1,4 milliárdról 2015-re várhatóan 1,6 milliárdra növekszik, addig ugyanez az érték a mobileszközök esetében 800 millióról majd 2 milliárdra (www.instantshift.com) változik majd. A szoftverek fejlődésével a weboldalak egyre bonyolultabbá válnak, például több grafikai elemet találunk rajtuk, mint korábban. A több tartalom betöltése a nagy sávszélességű internet elterjedésével ma már nem okoz gondot. Ugyanakkor az okostelefonokon és a táblagépeken a kisebb képernyőméret és a gyakran kisebb sávszélesség miatt a nem optimalizált weboldalakon való böngészés meglehetősen kényelmetlen. Nemcsak, hogy lassabban töltődnek be, de a monitorokhoz képest kisebb érintőképernyő miatt sokat kell görgetünk az oldalak olvasásához. Ezek a hátrányok aztán arra sarkalhatják a vásárlót, hogy idejekorán elhagyja az oldalt, amit mi igencsak nem szeretnénk. Továbbá a nagy felbontású képernyőkön sem mutat túl szépen, ha a weblapunk nem képes kitölteni a rendelkezésre álló felületet. Ezek a problémák hívták életre az olyan weboldalak megszületését, amelyek képesek arra, hogy tartalomban és méretben hozzáidomuljanak a megjelenítő eszközökhöz és a különböző felbontásokhoz. Az ilyen weboldalakat hívjuk reszponzívnak, de ahhoz, hogy pontosabb definíciót adjunk, tisztában kell lennünk vele, mit nem nevezhetünk annak. Fix weboldalak Ma még a webáruházak nagy része statikus. Az ilyen oldalaknak van egy beállított szélességük, és mikor átméretezzük a böngészőt vagy különféle eszközökön tekintjük meg, akkor ez nincs hatással a website kinézetére.
Kritikus olvasók joggal tehetik fel a kérdést, hogy lehet az, hogy az egyik legnagyobb forgalmat lebonyolító áruház megteheti azt, hogy nem alkalmazkodik az új trendhez? A válasz természetesen az, hogy nem teheti. Bár az igaz, hogy a proflowers.com-nak nincs reszponzív website-ja, viszont rendelkezik mobilra optimalizált weboldallal, amely ha nem is ad teljesen kielégítő választ a kijelző méretek sokféleségére, de több mint a semmi. Itt és most leszögezhetjük, hogy attól még egy website nem lesz reszponzív, hogy a mobiltelefonunkon máshogy jön be, mint desktop-on (erről később még lesz szó). Likvid weboldalak Likvid vagy más néven „fluid” website-ok alatt olyan oldalakat értünk, melyeknek bizonyos tartalmai a képernyő átméretezésével változnak így, azok láthatóak maradnak kisebb kijelzőn is. A cremedelamer.com webáruházban a felső és alsósáv, illetve a kategóriamenük „törekednek” arra, hogy a képernyőn maradjanak. Láthatjuk azt is, hogy egy bizonyos „méretnagyság” után ez a mutatvány már nem sikerül minden tartalomnak, így ez a technika igencsak korlátozott, és nem is a legszebb megoldás.
Adaptív webdesign Ebben az esetben a webáruházunk előre meghatározott méretek között változtatja a megjelenését. Azaz a böngésző átméretezésével a tartalom csak akkor változik meg, ha átlépjük azt az általában 2 vagy 3 szélességhatárt, amit a fejlesztő beállított. Például szeretnénk, hogy a webáruházunk szépen jelenjen meg desktop-on (A), tablet-en (B), és mobiltelefonon (C) egyaránt. Ekkor beállíthatjuk, hogy azoknál a kijelezőknél, amik nagyobbak, mint egy telefoné, de még kisebb, mint egy desktop-é a B layout kerüljön megjelenítésre. A B-nél kisebb esetben a C, míg nagyobb esetben az A layout-ot alkalmazzuk. Ezt az eljárást médialekérdezéseknek (angolul media queries) hívják. A Fathead.com is egy ilyen adaptív webáruház.
A fenti példa az adaptív webdesign tiszta esetét mutatja, amikor is a weboldal viselkedése elsősorban a böngésző méretétől függ (ami függhet attól az eszköztől, amin a weboldalt megjelenítjük, vagy akár tőlünk, akik átméretezhetjük azt). Viszont vannak olyan oldalak, amelyek elsősorban a használt eszközre reagálnak adaptívan, így csak akkor változik meg a megjelenésük, ha azt csak mobiltelefonon használjuk. Figyelmes olvasóink már tudják, hogy a fix weboldalaknál felhozott példára (proflowers.com) gondolunk, ahol desktop-on használt böngészőben statikusan reagál az oldal, viszont mobiltelefonon adaptíven viselkedik. Ezeket a website-okat tekinthetjük az adaptív webdesign egy alfajának. Mint ahogy a következő típust már majdnem reszponzívnak is nevezhetjük, de még inkább az adaptív típusba sorolható. A jimmyjazz.com oldalt két méretre optimalizálták, és míg a desktop-okra szánt layout statikusan viselkedik, addig a mobilfelület úgynevezett „fluid grid”-eket, és flexibilis képeket használ. Az adaptív webdesign előnye, hogy a legtöbb eszközön megfelelő kinézetet biztosít weboldalunk számára. Ugyanakkor, ha lehetséges, az ember ne elégedjen meg csupán a „megfelelővel”. Törekedjen a jobbra, a tökéletesre, főleg ha az üzleti sikere, így megélhetése múlhat rajta. A sokféle kijelző, és az egyre nagyobb felbontásra képes monitorok világában az adaptív módszer nem a legjobb megoldás. Reszponzív webdesign A kérdés, hogy létezik-e olyan webdesign, amely képes arra, hogy a megfelelő eszközökre, megfelelően olvasható tartalmakat a lehető legszebben jelenítsen meg? Természetesen igen. A választ a reszponzív webdesign jelenti, amely olyan oldalakban gondolkodik, amely a fluid grid-ek, flexibilis képek és média lekérdezések megfelelő elegyét alkalmazva azt eredményezi, hogy webáruházunk tökéletesen fog passzolni az eszközözök széles tárházához, akármilyen felbontásban jelenítjük is azt meg. Ha egy reszponzív oldalon járunk a böngészőméret változtatásával folyamatosan változik az oldal megjelenése is. Ezt a MooseJaw.com webáruház segítségével mutatjuk be szemléletesen.
További példák a reszponzív webdesignra: 1. ArdenB.com
2. BodyCentral.com
3. SoftChoice.com
Összefoglalás Láthatjuk, hogy a reszponzív webdesign mire képes, eszközt ad a webáruházunk „fegyvertárába”, amely így képes a folyamatos technológiai fejlődés okozta kihívásoknak megfelelni. Még mielőtt a fejünket fognánk, hogy a mi webáruházunk még nem reszponzív, egy közelmúltban végzett kutatás szerint a világ top 500 webes kereskedője által üzemeltetett áruház mindössze 10 százaléka reszponzív (www.ecommerceconversionmastery.com). Azaz még semmiről sem maradtunk le, sőt ez lehetőséget ad számunkra, hogy versenyelőnyre tegyünk szert riválisainkkal szemben, ha ők még nem sajátították el a technikát. Viszont ha még mi se, ideje sietni, mert biztosak lehetünk benne, hogy ez az arány a közeljövőben viharos sebességgel fog nőni, és az előnyből könnyen hátrány lehet. Pár héten belül pedig a Webshop Labort mobilról olvasók is fellélegezhetnek, ugyanis érkezik a mobilra optimalizált felület. :) |
Igen, a ShopRenterbe bekerülő új sablonok már mind reszponzívak lesznek a jövőben, illetve ezzel párhuzamosan készíteni fogunk a korábbi sablonokhoz is reszponzív változatot - ám ez utóbbi vélhetően több időbe telik majd.
Üdvözlettel,
Szántai Tibor
Lehetne pontosítani az időpontot?
Most indulnék a webáruházzal, és a jövőben tág fogalomnak tűnik :)
Amennyiben a jelenlegi sablonokkal kezdünk, a reszponzív változattal nekünk kell foglalkoznunk vagy ez egy automatikus folyamat?
Köszönettel
Győrfy Andrea
Kérem, a cikket olvasók tisztánlátása és korrekt tájékoztatása miatt írja meg, hogy a jelenleg elérhető egyetlen shoprenteres "reszponzívnak" mondott új sablon (és a jövőben következők) milyen, ebben a cikkben is említett követelményekbe n felel meg az igazi reszponzív webdizájnnak és miben nem.
Várom válaszát!
Ambrus Roland
Azt gondolom Ön is tudja, hogy a ShopRenter esetén jelenleg az összes sablon ingyenes. Természetes, hogy vannak olyan elvárások az ügyfeleink részéről, hogy legyen száz és ezer reszponzív webáruház sablonunk, de amíg az egész webáruház rendszert lehet tőlünk egyetlen sablon áráért bérelni, úgy addig feltételezem ezt a hiányosságunkat remélhetőleg meg lehet bocsátani nekünk.
Kedves Andrea és Roland!
Sajnos pontos időpontot és részleteket a jövőben készülő sablonnal kapcsolatban nem tudok közzé tenni (ugyanis ezekkel kapcsolatban még nem született döntés nálunk). Ám annyit tudok egyelőre mondani a sablonok kezelésével kapcsolatban, hogy szeretnénk minden negyedévben egy új sabloncsaládot létrehozni a ShopRenterben. Illetve minden újonnan készülő sablonnál a legújabb technológiákat fogjuk alkalmazni (például a cikkben nem szereplő flat és fluid technológiát is).
Továbbá szeretnénk a meglévő sabloncsaládoka t is reszponzívvá tenni oly módon, hogy elkészítjük ezek egy alternatív változatát. Ám sajnos az sem valószínű, hogy az összes korábbi sablonunk elérhető lesz majd reszponzív változatban. Itt a legtöbb ügyfél által használt sablonok élveznek majd előnyt a többivel szemben.
Összességében tehát azt mondhatom, hogy nagyon szeretnénk mindenki számára a lehető legjobb megoldást, illetve a legnagyobb kínálatot biztosítani, de ehhez szeretnénk az ügyfeleink türelmét is kérni.
Üdvözlettel,
Szántai Tibor
Mindenki szeretne hiper - modern dizájnt, sajnos a többségnek évek kellenek mire meg tudja engedni magának ez a való világ. Tudjátok, hogy mindig igazat mondok/írok de azért teszem mert a hazugság mindig egy visszafelé út.
Tudom minden cég bevételből él, ez frankó, na de elhúzni a kolbászos kerítést anélkül hogy belekóstolhassa nak az ügyfelek. Hmmm...
:)
trendvonal?
15%?
Jézusom! :)
Ez a Wall Street Farkasában a "csillámpor"
Ezt azért nem eszik ilyen forrón!
Az, hogy mikor válik responsive igazán elkerülhetetlen né - megoszlanak a vélemények.
A Flash Media Group grafikusai és kutatója szerint a webshop tulajdonosoknak ma még elég az adaptív is!
A stratéga azt mondja, hogy a fogyasztók szokásaihoz, elvárásaihoz és a saját üzleti céljainkhoz kell igazítani a fejlesztési igényeinket.
A magyar valóság; még csak most jelent meg az előember az m-kereskedelemben . Jelenleg 2% (azaz kettő) az, aki csak mobilon keres meg egy online áruházat. (2013: 200mrd online forgalom, 1 mrd mobilról)
Jelenleg másra használjuk a mobilt (tartalom fogyasztására)
A konyvkapu.hu a webshopok 1.0-ja - viszont mégis ez a shop lett kategóriájának dobogós webshopja - a shopline mellett
www.orszagboltja.hu/.../
Ultra gagyinak tűnik, de MŰKÖDIK!!!
A responsive design hozzávetőleg kétszer több munkaóra, aminek a hozzáadott értéke és a megtérülése Magyarországon még kérdéses.
Hogy ez mennyi pénz?
Hogy ez megéri-e? - ezt mindenkinek magának kell kiszámolnia (természetesen mi is segítünk)
A menedzselés első törvénye dr. Kürti Sándortól:
"1. Mérj! Azt tudod szabályozni, amire vannak adataid. Ha valamit nem merünk, akkor nincs lehetőség visszacsatolásr a."
...tehát nem az a kérdés, hogy mit csinálnak a hegytetőn, hanem az; hogyan jutunk oda.
A reszponzivitás nem hoz több látogatót, jelenleg nem a fogyasztó elvárása - csak nekünk ügynökségeknek jelent több munkát és pénzt. Mi nem tartjuk fontosnak, mert ügyfélélményhez nem tesz hozzá.
Véleményünk szerint elég a desktop. Ha a mobilról érkező látogatók (saját analytics adatok alapján!) meghaladják az 5%-ot, akkor kelleni fog a mobil oldal és a tablet.
Valamikor kelleni fog a responsive design az e-kereskedelemben , de most (sajnos) még nem járunk ott.
Mi így látjuk:
adaptive: webshops
responsive: content heavy websites
Maradok nagy tisztelőjük
Varga Krisztián
ui. Mi e hét héten rajuk ki a responsive oldalunkat (de nem webshopot üzemeltetünk) :)