Köszönjük feliratkozását!

Hamarosan megkapja heti webáruházas tippjeit.

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.

Mobil statisztika

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.

Fix weboldal, desktop méret

Fix webdesign, tablet méret

Fix weboldal, mobil méret 

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.

Likvid webdesign, desktop méret

Likvid webdesign, tablet méret

Likvid webdesign, mobil méret 

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.

Adaptív webdesign, desktop méret

Adaptív webdesign, tablet méret

Adaptív webdesign, mobil méret

Adaptív webdesign, desktop méret

Adaptív webdesign, tablet méret

Adaptív webdesign, mobil méret  

 

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.

Reszponzív webdesign, desktop méret

Reszponzív webdesign, tablet méret

Reszponzív webdesign, mobil méret 

További példák a reszponzív webdesignra:

1. ArdenB.com

ardenb, reszponzív webdesign, desktop méret

ardenb, reszponzív webdesign, tablet méret

ardenb, reszponzív webdesign, mobil méret

ardenb, reszponzív webdesign, mobil méret 

2. BodyCentral.com

bodycentral, reszponzív webdesign, desktop méret

bodycentral, reszponzív webdesign, tablet méret

bodycentral, reszponzív webdesign, mobil méret

3. SoftChoice.com 

softchoice, reszponzív webdesign, desktop méret

softchoice, reszponzív webdesign, tablet méret

softchoice, reszponzív webdesign, mobil méret 

Ö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. :)

hát akkor kérjük szépen az összes shoprenteres sablont reszponzívra állítani :) Köszönjük
Üdvözlöm Csaba! A Shoprenter webshopok is reszponzivek leszek? Üdvözlettel, Kovács Zsolt
Kedves Zsolt!

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
#
Győrfy Andrea
Kedves Csaba!

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
#
Ambrus Roland
Kedves Szántai Tibor!

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
#
Popovics György
Ma már a minimum, hogy egy webáruházat fejlesztő cég elérhető áron minimum egy tucat reszponzív template-t tegyen elérhetővé. Elég megnézni a PrestaShop, vagy éppen a Templatemonster , vagy Templatemela oldalait. 50-100 Eurós áron töménytelen sok jobbnál jobb reszponzív templete-t lehet venni.
bízzunk benne, hogy hamarosan a választható sablonok is reszponzívak lesznek, azért azt tudni kell hogy a magentosok, stb. sablonjai sem százasak ám, sok utómunkát igényel
#
Popovics György
Minden template munkaigényes, ha valaki saját arculatot szeretne, és nem is érdemes belevágni alapvető html és Photoshop ismeretek nélkül, viszont pl. a Presta-ban rengeteg jó template van, ha valaki rászán 80-100 Euro-t. Szerintem kb ez egy elfogadható ár egy olyan sablonért, amit bárki megvehet.
Kedves György!

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
Kedves Tibor és Csaba! Ěn tudtam hogy itt robbanni fognak az eddig elfojtott érzelmek, mert olyan téma ez amely mindenkit érint. Vagy azért mert már van vagy azért mert meg szeretnénk kapni (lehetőleg ingyen ugye). Csodálkoztam is hogy kijött ez a poszt úgy hogy nincs mögötte választási lehetőség (a többségnek). Lesz itt még langyos de forró bejegyzés is abban biztos vagyok mert .....

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...
Ajjajj...
:)
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) :)
Kérjük írd be a képen látható kódot
Biztonsági kód Új kódot kérek
Szeretnék e-mail értesítést kapni az új hozzászólásokról!
Ha szeretnél további webáruházas tippeket, iratkozz fel heti értesítőnkre!
Van már webáruházad?