A Magento alapból nem támogatja a mobil megjelenést, de a sablon és layout rendszer alkalmas az átalakításra.

FONTOS! A 50-100 dollárokért kapható responsive-nak meg mobile ready-nek reklámozott sablonok döntő többsége valóban működőképes, viszont a legtöbb esetben csak bizonyos oldalakra fektettek hangsúlyt (főoldal, lista oldal, termék oldal, kosár) a többi aloldal csak minimálisan került kidolgozásra bennük és mondani se kell, egy elrontott rendszerbe nehezebb beavatkozni, mint újat felépíteni az alapoktól.
Az pedig már szintén másik történet, hogy ránézésre megállapítható a webáruházról: az sablon alapján készült-e avagy sem.

Csak a felső réteget kapargatom meg az alábbi 22 ponttal. Remélem sok tulajdonos elgondolkodik és előre menekül, mert eljön az az idő amikor a lenti dolgok elkerülhetetlenek lesznek
(mert a konkurencia már meglépte vagy éppen most lépi meg őket).

1. Gombok
Az ujjak közel sem olyan pontosak, mint az egér kurzor 1px-t is eltaláló precizitása. Már a normál (desktop, nagy monitoros) megjelenítésnél is megfigyelhető a cél: fontos és a látogató szempontjából kiemelkedő prioritású gombok nagyobbak, ezzel is érzékeltetve annak fontosságát.
A Magento alap skinben is a kosárba gomb vagy éppen a vásárlás folytatása lényegesen nagyobb méretű, mint a többi (pl összehasonlítás) gomb.
A "hozzáértő" grafikusok viszont szeretik ezt átrajzolni, átméretezni. Ne hagyjuk.
A mobil és táblagépeknél a gombok minimum 44px magasságúak legyenek (okos emberek ezt találták a legoptimálisabbnak).
Lehetőség szerint ne zsúfoljunk a gombok környékére információk, használjunk megfelelő eltartásokat, üres helyeket a még pontosabb érintés érdekében.

2. Gesztusok
Az érintőképernyők használói megszoktak bizonyos gesztusokat az eszközök használata során. Ilyenek például a lapozás, csippentés, húzás.
Ha a webáruházban bizonyos elemek úgy néznek ki, mint amelyekkel ez a művelet elvégezhető, az érintőképernyő használatakor bántóan zavaró lesz, hogy ezek az elemek sem úgy viselkednek,
ahogy azt már megszokták a vevők.

3. Gépelések minimalizálása
Amíg asztali használatnál a billentyűzet gyors és pontos adatbevitelt biztosít, az érintő képernyőknél ez a legnagyobb lassítási mechanizmus. Próbáljuk kerülni, vagy legalább elősegíteni:
egy-egy form kitöltése ne szenvedés legyen, hanem szükséges rossz.
Használjunk lenyíló menüket, checkboxokat az értékek gyorsabb bevitele érdekében.
A formok input mezőit is próbáljuk a várt adatnak megfelelően beállítani, ha email címet kérünk be akkor email típusú legyen a mező, ha numerikus értéket várunk, akkor használjuk a numerikus
billentyűzetet, ne a karakteres beviteli eszköz legyen az alapértelmezett.

4. Automatikus kiegészítés, automatikus nagybetű
Kapcsoljuk ki az automatikus dolgokat, hiszen ezek a legtöbb esetben többet ártanak mint használnak. Tipikus példa pl az email mezőben vagy a jelszó mezőben az első betű nagybetűssé konvertálása
milyen galibákat okozhat.

5. Betűméret, sortávolság
Ne kelljen szükségből belenagyítani vagy kicsinyíteni a szövegeken. Felesleges, idegesítő a vevő megunja.
Használjunk minimum 16px méretű betűméretet és 1.5x sortávolságot a jó olvashatóság miatt.

6. Font alapú (vektoros) ikonok
Nincs annál rosszabb látvány mikor pl retina kijelzős ipad-en minden kristálytisztán látszik és van 2-3 ikon amely maszatos, zajos, mert kép.
A vásárlók a webáruházakban hozzászoktak bizonyos ikonokhoz, megjelenítési formákhoz.
Nem kell újat kitalálni: az ikonok egységes, megszokott képet mutatnak. A webáruház vásárlóit nem fogjuk elveszíteni emiatt.
Használhatunk erre már több előre elkészített készletet, de akár saját magunk is létrehozhatunk ikonokat.
A lényeg: vektoros ikonok legyenek a különböző felbontások, méretek miatt.

7. Termékfotók
Azok a fránya termékfotók a magas dpi következtében igen ocsmányul tudnak kinézni. Ne hagyjuk, mert látogatót és vásárlót veszítünk. Tévhit, hogy csak a férfiak vizuális tipusúak ám...

8. Hover
Érintőképernyőn nincs hover effekt. Ami a desktopon jó ötletnek tűnik: bizonyos tartalmakat megjelenítsünk velük, tipikusan a termék kép bizonyos %-át elfoglaló gyorsnézet szokott ez lenni, az táblagépeken azt fogja eredményezni, hogy a vásárló a termék oldalon találja magát (ahova nem is akart eljutni és még ez a szerencsés eset) vagy egyáltalán semmi sem történik (ekkor bosszús lesz és
lehet a bezárás gombot keresi meg.

9. Rugalmas tartalom
Aminek desktopon is működnie kellene (itthon sajnos nagyon kevés oldalnál) az a grid rendszerek használata és ezáltal a tartalmak megfelelő elhelyezkedése, az üres helyek maximális kitöltése.
Számtalan olyan oldallal találkozni amelyek több 100ezer látogatót szolgálnak ki és az érdemi tartalom egy 300px széles hasábban található.
S nem azért tudnak működni, mert annyira jó érzés rajtuk böngészni, hanem mert a konkurencia is ugyanilyen. Amint az egyik elmozdul a helyes irányba a másik követni fogja, de már rosszabb pozicióban.
Marketing bullshit: Ne a divatot kövesd, hanem azt diktáld. Jelen esetben legyél te az, akihez a versenytársaknak alkalmazkodni kell és így szerezz -nehezen behozható- előnyt.

10. Portré és tájkép mód
Ugye kétféleképp lehet tartani az eszközöket. Jó ezt tudni a tervezés és kivitelezés alkalmával.

11. Kitöltő képes tartalmak
Amíg egy elválasztó vonal szépen mutathat a desktopon addig a hordozható eszközöknél inkább arra törekedjünk, hogy a betűtípussal, tipográfiával, háttérszínekkel válasszuk el az elemeket egymástól.
Sokkal boldogabbak lesznek a látogatók is hiszen azt látják amiért érkeztek.

12. Minden ami felesleges az tilos
A vásárlónak kevés az ideje, ne éljünk vele vissza. Kerüljünk minden olyan betöltést lassító dolgot, amely az idejét rabolja. Gondoljunk arra lehet csak 3 percig nézegeti az oldalunkat mert épp vár valakire.
Szintén okos emberek azt mutatták ki, ha egy oldal 3 másodpercnél tovább töltődik akkor a látogatók fele inkább másik oldal után néz.
Ez hatványozottan igaz a hordozható eszközökre.
Növeljük a teljesítményt, csökkentsük a felesleges időrabló dolgokat.

13. Tesztelés
A fekete bárány. Senki sem szeret tesztelni, a megrendelő meg egyenesen időrablónak gondolja. Valójában a tesztelés az egyik legfontosabb munkafázis és ne próbáljuk azzal elodázni: majd a
látogatók szolnak, ha valami gond van.
Igen, vannak rendes látogatók akik figyelmeztetnek bizonyos hibákra, azonban a nagy részük inkább továbbáll.
Régen a monitorok mérete okozott sok fejtörést most a táblagépek sokrétűsége. A mobiltelefonokról pedig ne is beszéljünk.
Csak néhány eszköz amire jó odafigyelni: ipad, ipad mini, iphone, samsung note, galaxy, google nexus 7,10, microsoft surface.

14. Nagyítások
Ha már jól megszerkesztett a webáruházunk érintőképernyőkre, akkor a vásárló sem akar zoomolni a szövegekre. Viszont a képekre annál inkább. Dolgozzunk nagyméretű képekkel és engedélyezzük azok
nagyítását.

15. A navigáció mindig legyen szem előtt
Ismét statisztikák bizonyítják, a mindig szem előtt lévő (ún. sticky) navigáció előnyösen befolyásolja a vásárlók konfortérzetét, hogy a webáruházban navigálhassanak.
Használjuk, megéri.

16. Helymeghatározás
Sokféle helymeghatározás létezik, amelyet valaki szeret használni valaki a nagy testvér miatt sem.
De gondoljunk csak bele, mennyire hálás dolog, pl a szállításnál a cím bepötyögése helyett csak egyszerűen jóváhagyni a jelenlegi tartozkodási helyünket. Ugye?

17. Tanítás, magyarázat
Ha nem faék egyszerűségű a webáruház használata, akkor bizony a vásárló hajlamos eltévedni, összezavarodni és elhagyni azt. Ezen segít, ha első látogatáskor a bonyolultabb dolgokat elmagyarázzuk neki,
ha ehhez tudunk némi humort is csempészni garantáltan megjegyzi webshopunkat.

18. Panelek
Volt már szó a navigációról. A panelek is ezt a célt szolgálják, ha kell ott vannak, ha nem kell akkor egy mozdulattal összecsukhatóak és a képernyő 99%-ban a hasznos tartalom látszik.

19. Animált, mozgó elemek
Ha nem visszük túlzásba akkor a vásárló úgy érzi a weboldalon magát, mint ha egy alkalmazásban lenne. Konfortfokozata nő, elégedettsége és bizalma nő, természetesen vásárlói hajlandósága is.
De, mint az alkoholnál, csak mértékkel!

20. Címsor, url
Remélem, már mindenki beszédes url-ket használ. De ennél is fontosabb: az url sávot is elrejthetjük, így további területet nyerhetünk.

21. Home screen ikon
Legyen ilyenünk, ha valaki szeretné kiemelni és letenni a saját asztalára.

22. Egy kép néha többet jelent mint 100 szó
Egy-egy jól eltalált képpel, némi humorral az unalmas tartalmak is feldobhatóak. Szintén konfortot növelnek, a vásárló pedig vásárolni akar majd a webáruházban.