Megjelent a magento Community Edition 1.9.0.1 változata, reszponzív alapsablonnal

2014 május 16-án megjelent a magento Community Edition 1.9.0.1 változata, az 1.8-as változatban rengeteg biztonsági hiba javítás volt. Ez az új változat azonban inkább megjelenési újdonságokat tartalmaz, ugyanis az alapsablon amivel a Magento települ, reszponzív megoldást tartalmaz. Ennek azért örülünk mert látszik, hogy manapság nem érdemes új weboldalt létrehozni tablet illetve mobil nézet nélkül. Meglehet oldani ugyan, hogy eszköz alapján különböző aldomainekre irányítjuk át a felhasználónkat, de ennek az rejtett hátránya, hogy ebben az esetben kétszer kell elkészíteni a webáruházat és csak mobil nézet létezik belőle.

Jelenleg a PC, Tablet, Mobil eszközökre 3 féle képpen lehet weboldalt készíteni:

1. Eszköz alapján elkészítjük a különböző sablonokat és a böngésző eszköz alapján különböző al-domainekre dobjuk a felhasználót. pl.:
pc.webaruhazam.tld
tablet.webaruhazam.tld
m.webaruhazam.tld
Ennek hátránya, hogy mind a 3 nézetet el kell készíteni, fejlesztés szempontjából, a template rendszert 3-szor el kell készíteni, és tartalmi szempontból valószínüleg programozást is igényel az így kialakított oldal. Azaz 3 webáruház készül egyszerre. Ez a megoldás a 2000-2011 közötti időszakra volt jellemző.
Hátránya: rossz SEO alapismeretek miatt a keresők 3 külön oldalnak tekintik és megegyező tartalmak miatt hátrasorolhatják őket a találati listán.
3 weboldal: kis túlzással de 3*szoros áron érhető el, és nem biztos hogy megéri.

2. A weboldal megjelenése az eszköz típusa és felbontás alapján változik, itt sajnos sokan úgy gondolkoznak, hogy az ez úgy müködik mint az 1-es pontban részletezett megoldás, azaz különböző fenbontásoknál más a tartalom. Ez rossz felfogás, a tartalom ugyanaz, az elemek sorrendje a weboldalon ugyanaz, amivel lehet segíteni, hogy bizonyos elemek, bizonyos töréspontoknál megjelennek vagy eltűnnek, DE ezen elemek minden nézetben ott vannak a weboldal forráskódjában, csak a láthatóság van szabályozva. AZAZ nincs különböző tartalom az egyes felbontások alatt és nincs aldomain sem!

2.1.
A weboldal ugynavezett adaptív sablon alapján épül fel, aminek az a lényege, hogy bizonyos felbontások mellett különböző megjelenést produkál. Azt, hogy az oldal hogyan jelenik meg ugynevezett törési pontok határozzák meg. Az elterjedt és okrétű http://getbootstrap.com/ Bootstrap mobil framework alapján ezen töréspontok:
0 pixel – 768 pixel
769 pixel – 992 pixel
992 pixel – 1200 pixel
1200 pixel és felette
méretekben jelenik meg ebben az esetben.
Adaptív oldal esetében, a kinézet ezen határok között fix, a töréspontok átugrása esetén pedig megváltozik a kinézet. Ebben az esetben a töréspontokkor van egy ugrás, de ha a böngészőnk ablakát tologatjuk össze vagy huzzú szét, az újabb töréspontig nem változik a kinézet, azaz a töréspontok között fix a megjelenés.

2.2.
A weboldal ugynevezett reszponzív sablon alapján épül fel, amely a 2.1-es pontban részletezett megjelenéstől, annyiben tér el, hogy az egyes törsépontok közötti felbontásoknál is változhat az oldal kinézete. Azaz amíg adatptív megjelenés esetében a weboldal elemei fix széleséggel jelennek meg addig a reszponzív megjelenés esetén méretarányosan az böngésző szélességéhez igazodóan.

A fent említett 3 elkészítési módnak vannak előnyei és hátrányai, azt kell mondjam mindegyiknek van létjogosultsága. Az 1-es pontban általában csak m.webaruhazam.tld aldomain esetén kerül elkészítésre weboldal az erdeti weboldal mellett. Ez azért jó, mert van mobil nézet ami jobb mintha nem lenne. Hátránya, hogy két weboldal készül, jó esetben más tartlommal, rossz esetben hasonló tartalommal, ami rossz SEO beállításokkal tartalom másolásnak minősül és hátrasorolódik a böngészők találati listájában mind a két oldal. A 2.1-es pontban az adatptív megoldást próbálják sokan követni, sokan azt hangoztatják, hogy ez a megfelelő megoldás a sokféle eszközre, ezt azért mondják és lehet, hogy meglepő amit írok, mert ezzel könnyű tervezni, meg lehet mutatni, hogy az egyes töréspontok között hogyan fog kinézni az oldal. Hátránya azonban, hogy a tablet és mobil eszközöknek lassan de inkább hamarosan, hasonló vagy jobb felbontása lesz mint a PC-knek. Ezért az adaptív megoldás lehet, hogy egy idő után nem lesz megfelelő, igaz ez a jövőben fog eldőlni. A reszponzív megoldás esetén a töréspontokon belül is változhat a kinézet, de ebben az esetben el kell fogadni, hogy lehet olyan állapot amikor az oldal kicsit szétesik, vagy nem legtökéletesebben jelenik meg, ezt igazából teszteléssel lehet kiküszöbölni. Ebben az esetben a kinézet mindig az aktuális szélesség alapján rendeződik be. Hátránya, míg adaptív kinézet esetén a töréspontokon belül meg lehet mutatni, hogy hogy fog kinézni az oldal, addig reszponzív megoldás esetén nem lehet pixelenként megmutatni a kinézetet. A szélességek a felbontástól függően %-os formában lesznek megadva, emiatt nehezebben tervezhető egy ilyen oldal, több fantáziát igényel egy ilyen oldal tervezés, mind fejlesztői mind ügyfél oldalról. Viszont ebben az esetben minden felbontásra tud reagálni az oldal és használhatóvá válik.

Lássuk a fenti 3 pont hogyan néz ki költségek – bevételek formájában

Költség:
Tekintsük egy weboldal elkészítését 1 felbontásra 1 nézettel PC-re 100%-os egységnek.
Így az 1.-es pont esetében, 2 weboldal készül 2 külön felbontásra 2 külön kinézettel, A mobil általában kisebb mértékű így 175%-os költséggel kell körülbelül számolni, mintha csak PC-re készülne az oldal. Az oldal megfelelően müködik: PC módban és Mobil módban, Tablet kérdéses…
A 2.1-es változat esetében, 1 weboldal készül 3 felbontásra optimalizált 1 kinézettel (a kinézet felbontások alapján automatikusan változik). Egy oldal készül el, ugyanaz a HTML kód de a megjelenést biztosító CSS bonyolult a törsépontok miatt, ezért olyan 140%-os költséggel kell kb számolni. Ebben az esetben az oldal megfelelően működik: PC módban, Tablet nézetben és mobil nézetben, de a törsépontok között az oldal fix kinézettel rendelkezik, az egyes átmeneteken belül lehetnek használhatósági problémák.
A 2.2-es változatban részletezett reszponzív weboldal esetében, 1 weboldal készül 3 felbontásra optimalizált 1 kinézettel (a kinézet felbontások alapján automatikusan változik). Ebben az esetben az oldal megfelelően működik: PC módban, Tablet nézetben és mobil nézetben, és a törsépontok között az oldal kinézete változhat, le tudja reagálni és a helyet jobban kihasználva tud megjelenni a különböző töréspontok között is, így az adaptív elkészítési mófhoz képest, jobban használható oldalt kapunk. Egy oldal készül el, ugyanaz a HTML kód de a megjelenést biztosító CSS bonyolult a törsépontok miatt és töréspontokon belüli megjelenést is le kell programozni CSS-ben, ezért olyan 160%-os költséggel kell kb számolni.

Bevétel:
Az 1-es pontban részletezett oldal esetében PC és Mobil nézet esetében a vásárlók 99%-a tudja elérni és megfelelően használni az oldalt.
A 2.1-es pontban részletezett oldal esetéen a PC, Tablet, Mobil nézet esetében a PC 99%-a, a Tablet Mobil esetében olyan 85-90%-a tudja elérni és megfelelően használni az oldalt.
A 3-as pontban mind PC, Tablet, Mobil esetében is a vásárlók 99%-a tudja elérni és megfelelően használni az oldalt.

A magento 1.9.0.1-es reszponzív alapsablonjának megjelenése is azt vetíti előre illetve már mutatja, hogy lépést kell tartani az új eszközökkel és aki webáruház megújítás vagy vásárlás előtt áll, annak már mindenképpen érdemes a 2-es pontban vázolt megoldások valamelyike mellett döntenie. Véleményem szerint csak PC-re webáruházat létrehozni már nem ajánlatos, ugyanis 2-3 éven belül mindenképpen szükség lesz Tablet, mobil nézetre.

Fejlesztői szemszögből azt meg kell jegyezni, hogy a Magento alapsablonja saját fejlesztés, sajnos nem épül egyik elterjedt keretrendszerre sem. Van egy fejlesztés, amely a Bootstrap reszponzív keretrendszerre épül, itt megtekinthető: http://magentoboilerplate.webcomm.com.au/ jelen állapotában arra hasznos hogy szemléltessük vele egy reszponzív oldal működését.

Reklámok

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s