![\"Urz\u0105dzenia](\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2022\/09\/Ryc.-1-3.png\")
<\/a>Wg bada\u0144 Gemius<\/a> dla e-Commerce Polska w 2021 roku, komputer przeno\u015bny i smartfon s\u0105 najpopularniejszymi urz\u0105dzeniami wykorzystywanymi przez respondent\u00f3w w zakupach online. W dalszej kolejno\u015bci plasuje si\u0119 komputer stacjonarny i tablet.<\/p>\n\n\n\n Ale ju\u017c w najm\u0142odszej grupie wiekowej zdecydowanie rz\u0105dzi smartfon \u2013 92% wskaza\u0144, za\u015b laptop odnotowa\u0142 tu jedynie 71%.<\/p>\n\n\n\n Wersje mobilne sklepu mo\u017cna podzieli\u0107 na trzy rodzaje:<\/p>\n\n\n\n Wg r\u00f3\u017cnych bada\u0144, u\u017cytkownicy mobilni robi\u0105cy zakupy przez internet wol\u0105 korzysta\u0107 ze strony mobilnej sklepu zamiast aplikacji natywnej. Aplikacje natywne musz\u0105 najpierw zdoby\u0107 zaufanie u\u017cytkownik\u00f3w, aby zdoby\u0107 miejsce na ich telefonach kom\u00f3rkowych. Z tych powod\u00f3w najlepsz\u0105 opcj\u0105 dla wielu sklep\u00f3w internetowych jest stworzenie strony mobilnej w technologii RWD lub PWA.<\/p>\n\n\n\n Podej\u015bcie Desktop First<\/strong> polega na zaprojektowaniu sklepu internetowego na urz\u0105dzenie stacjonarne tak, \u017ceby strona na takim urz\u0105dzeniu wygl\u0105da\u0142a doskonale i wykorzystywa\u0142a do tego ca\u0142y potencja\u0142 du\u017cego ekranu. Kolejnym krokiem jest zmniejszanie rozdzielczo\u015bci i pozbywanie si\u0119 lub ukrywanie niekt\u00f3rych element\u00f3w czy skrypt\u00f3w tak, aby strona dobrze wygl\u0105da\u0142a na mniejszych urz\u0105dzeniach.<\/p>\n\n\n\n Cz\u0119sto zamiast usuwa\u0107 niepotrzebne skrypty ukrywa si\u0119 je tylko, co powoduje, \u017ce strona na telefon jest tak samo \u201eci\u0119\u017cka\u201d jak na komputer stacjonarny i w rezultacie \u0142aduje si\u0119 zbyt d\u0142ugo.<\/p>\n\n\n\n Metodyka Mobile First<\/strong> oznacza rozpocz\u0119cie projektowania sklepu od najmniejszego urz\u0105dzenia i najni\u017cszej obs\u0142ugiwanej rozdzielczo\u015bci. Podej\u015bcie to zak\u0142ada, \u017ce projektowanie mobilne \u2013 jako najtrudniejsze do stworzenia \u2013 powinno by\u0107 wykonane w pierwszej kolejno\u015bci.<\/p>\n\n\n\n Graficy, projektanci UX i programi\u015bci skupiaj\u0105 si\u0119 najpierw na stworzeniu idealnej strony na telefon, bior\u0105c pod uwag\u0119 specyfik\u0119 i mo\u017cliwo\u015bci urz\u0105dze\u0144 mobilnych tak, \u017ceby potrzeby u\u017cytkownika by\u0142y w tej wersji w pe\u0142ni zaspokojone, wi\u0119c p\u00f3\u017aniejsze projektowanie sklepu dla innych urz\u0105dze\u0144 b\u0119dzie \u0142atwiejsze. Nast\u0119pnie wraz ze wzrostem rozdzielczo\u015bci i typ\u00f3w urz\u0105dze\u0144 (wi\u0119ksze smartfony, tablety, laptopy czy urz\u0105dzenia stacjonarne) stale dodaje si\u0119 nowe funkcjonalno\u015bci i rozbudowuje istniej\u0105ce systemy.<\/p>\n\n\n\n Dzi\u0119ki temu mo\u017cna wykorzystywa\u0107 bardziej zaawansowane skrypty na komputery stacjonarne bez obci\u0105\u017ce\u0144 dla wersji mobilnej, a sam plik CSS powinien mie\u0107 jak najmniejsz\u0105 wag\u0119 dla telefon\u00f3w, a najwi\u0119ksz\u0105 dla komputer\u00f3w stacjonarnych.<\/p>\n\n\n\n Przede wszystkim powinno si\u0119 rozpoczyna\u0107 projekt od ekranu smartfonu, a nie od urz\u0105dzenia stacjonarnego. Niekt\u00f3rzy uwa\u017caj\u0105, \u017ce wystarczy stworzy\u0107 dwa r\u00f3\u017cne projekty i b\u0119d\u0105 ju\u017c mieli strony w duchu mobile-first. Jestem jednak zdania, \u017ce powinno si\u0119 raczej podej\u015b\u0107 do projektu mobile jak do ca\u0142kowicie nowego projektu, nie zwracaj\u0105c, p\u00f3ki co, uwagi na desktop.<\/p>\n\n\n\n Zaczynaj\u0105c projekt sklepu od ekranu smartfonu, a nie od komputera stacjonarnego, musimy wzi\u0105\u0107 pod uwag\u0119 specyfik\u0119 danego urz\u0105dzenia, wi\u0119c projekt sklepu powinien by\u0107 zupe\u0142nie odr\u0119bny od projektu na desktop i wykorzystywa\u0107 zalety i specyfik\u0119 tego urz\u0105dzenia:<\/p>\n\n\n\n Podej\u015bcie mobile-first ma jedn\u0105 g\u0142\u00f3wn\u0105 wad\u0119 \u2013 mo\u017cna \u0142atwo zapomnie\u0107 o mo\u017cliwo\u015bciach, jakie daj\u0105 nam wersje desktopowe. Bezpo\u015brednie przeniesienie designu mobilnego na du\u017cy ekran mo\u017ce spowodowa\u0107, \u017ce design nie b\u0119dzie tak przyjazny dla u\u017cytkownika. A przecie\u017c powinno si\u0119 w pe\u0142ni wykorzystywa\u0107 wi\u0119ksze ekrany.<\/p>\n\n\n\n \u017beby wyeliminowa\u0107 powy\u017csz\u0105 wad\u0119, nale\u017cy skoncentrowa\u0107 si\u0119 na u\u017cytkowniku i jego wygodzie. R\u00f3\u017cne rodzaje ekran\u00f3w stwarzaj\u0105 pewne ograniczenia, ale i r\u00f3wnie\u017c mo\u017cliwo\u015bci. Dzi\u0119ki nim mo\u017cna u\u0142atwi\u0107 u\u017cytkownikowi wykonanie okre\u015blonych zada\u0144 np. bior\u0105c pod uwag\u0119 r\u00f3\u017cne sposoby korzystania z klawiatury w komputerze i telefonie.<\/p>\n\n\n\n Bior\u0105c pod uwag\u0119 statystyki i trendy w e-handlu, zmiana podej\u015bcia na mobile-first i stworzenie dobrej wersji mobilnej sklepu, to najlepsza rzecz, jak\u0105 obecnie mo\u017cna zrobi\u0107 dla swojego internetowego biznesu. Rynek mobilny jest przysz\u0142o\u015bci\u0105 i warto traktowa\u0107 go z wy\u017cszym priorytetem, a strony wykorzystuj\u0105ce podej\u015bcie \u201emobile first\u201d, przynios\u0105 znacznie wi\u0119cej korzy\u015bci.<\/p>\n\n\n\n Dynamicznie rosn\u0105cy udzia\u0142 urz\u0105dze\u0144 mobilnych w zakupach online przek\u0142ada si\u0119 na znaczny wzrost konwersji ze sprzeda\u017cy online, a dzi\u0119ki funkcjonalnej dobrze zaprojektowanej i szybko dzia\u0142aj\u0105cej stronie mobilnej, u\u017cytkownicy ch\u0119tniej b\u0119d\u0105 korzysta\u0107 z tej formy sprzeda\u017cy, daj\u0105c sklepowi przewag\u0119 nad konkurencj\u0105.<\/p>\n\n\n\n ***<\/p>\n\n\n\n Je\u015bli interesuje Ci\u0119 obszar e-commerce, zobacz inne artyku\u0142y naszych ekspert\u00f3w m.in.: Case Study Urbanista \u2013 jak w kr\u00f3tkim czasie programi\u015bci Sii zrealizowali migracj\u0119 do Magento 2.4.2<\/a><\/p>\n\n\nKt\u00f3ra wersja mobilna jest najlepsza?<\/strong><\/h2>\n\n\n\n
Metodyka Mobile First vs Desktop First<\/strong><\/h2>\n\n\n\n
<\/a>Jak stworzy\u0107 nowoczesn\u0105 stron\u0119 Mobile First?<\/strong><\/h2>\n\n\n\n
Warto skorzysta\u0107 z narz\u0119dzia do analizy szybko\u015bci sklepu lub strony, np. kt\u00f3rego\u015b z tych:
Na przyk\u0142ad w widoku mobilnym najlepiej sprzedaj\u0105cy si\u0119 produkt czy najnowszy model b\u0119d\u0105 prowadzi\u0107 bezpo\u015brednio do sprzeda\u017cy, wi\u0119c inne elementy \u2014 takie jak bony podarunkowe, mniej popularne modele, czy najnowsze wiadomo\u015bci \u2014 mo\u017cna umie\u015bci\u0107 na stronach wewn\u0119trznych.<\/li><\/ul>\n\n\n\n<\/a>Wada podej\u015bcia mobile-first<\/strong><\/h2>\n\n\n\n
Podsumowanie<\/strong><\/h2>\n\n\n\n