Responsive Design: dlaczego jest to najlepsza opcja i jak zrobić to dobrze

gwałtowny rozwój urządzeń mobilnych i stale rosnąca liczba różnych urządzeń sprawiają, że responsive web design (RWD) jest najlepszym rozwiązaniem dla sprzedawców detalicznych i marek, które chcą zoptymalizować sposób interakcji z klientami we wszystkich cyfrowych punktach kontaktu. Według sprzedawcy internetowego 261 milionów konsumentów w USA posiada urządzenia mobilne, a 66 milionów właścicieli tych urządzeń robi z nimi zakupy. W rzeczywistości sprzedawca internetowy odnotował 159% wzrost sprzedawców na IR Mobile 500 za pomocą responsive od 2013 do 2014, ponieważ sprzedawcy naciskają na utrzymanie konkurencyjności i zaspokajanie potrzeb konsumentów w podróży.

mobilne wersje witryn stacjonarnych były do tej pory popularnym rozwiązaniem, ale doświadczenie często nie ma krytycznych elementów brandingowych i treści, a także wiąże cenny personel i budżet z zarządzaniem dwiema wersjami witryny. Dostarczając informacje z jednej bazy kodu, która rozpoznaje i dostosowuje się do urządzenia mobilnego, responsywny projekt rozwiązuje oba te problemy, a także z jednego adresu URL.

jednak tak jak uruchomienie witryny eCommerce nie jest gwarancją sukcesu biznesowego, wysoce wydajna responsywna strona bierze równo pod uwagę i planowanie. Jeśli nie zrobisz tego dobrze, responsywne witryny mogą przynieść tyle wyzwań, ile rozwiązują: powolną wydajność, kosztowne, czasochłonne i złożone opóźnienia w testach programistycznych, a także mogą zdemaskować wyzwania architektoniczne, które wymagają przepisania witryny. W niedawnym badaniu Moovweb dotyczącym responsywnych witryn 12 sprzedawca internetowy zauważył, że wydajność była o 513% wolniejsza na smartfonach niż na komputerach i tabletach, a niektóre witryny ładowały się 18.24 sekund, znacznie powyżej czasu ładowania strony 3 second industry best practice.

optymalizacja pod kątem responsywności: zanim zaczniesz

w niedawnym sponsorowanym przez Magento webinarium dla sprzedawców internetowych, prelegent, Forrester Research, Inc. Analityk Mark Grannan podkreślił, że jak większość projektów, udane wdrożenie RWD zaczyna się od dostosowania celów biznesowych i rozwojowych. Poświęcenie czasu na analizę wzorców ruchu mobilnego, tworzenie list priorytetów urządzeń oraz przeglądanie architektury informacji i treści pozwoli zespołom działać szybciej. Ścisłe połączenie zespołów projektowych i programistycznych oraz przyspieszenie współpracy z narzędziami do prototypowania i ramami rozwojowymi może również skrócić czas wprowadzania produktów na rynek. Grannan zalecił również, aby inżynierowie od samego początku rozwiązywali wymagania dotyczące długiego ogona, takie jak określanie, czy zmiany w architekturze CMS lub web są potrzebne do obsługi responsywnych projektów projektowych, i proaktywnie zajmowali się szybkością i przyspieszaniem witryny za pomocą technik optymalizacji frontend. Wreszcie, Grannan zalecił dopasowanie metryk wartości biznesowej (takich jak ruch w witrynie i konwersje) do zakresu rozwoju.

optymalizacja pod kątem responsywności: Mapuj drogę swoich klientów

jak Wszystko inne, optymalizacja witryny pod kątem wielu urządzeń zaczyna się od odbiorców – ich składu i zachowań.

• jaki procent ruchu w witrynie odbywa się za pośrednictwem urządzeń mobilnych? Większość kupców peg 20-30% ruch mobilny jako wyzwalacz dla rozważenia responsywnego

• jak uzyskują dostęp do twojej witryny? Makro trendy mają mniejsze znaczenie niż specyfika Twojej witryny i klienta

• jakie urządzenia / przeglądarki preferuje twoja populacja klientów? Ważne jest, aby pamiętać, że responsive Web design jest realizowany przy użyciu technik, które są niezgodne ze starszymi przeglądarkami (zwłaszcza IE8 i starszymi). Identyfikacja najlepszych urządzeń uzyskujących dostęp do witryny pomoże również określić liczbę punktów przerwania ekranu, dla których należy zaprojektować witrynę

optymalizacja pod kątem responsywności: Zdefiniuj strategię treści

przygotowanie treści na responsywną stronę internetową jest jednym z największych wyzwań, przed którymi staną sprzedawcy, ponieważ będą musieli zmienić sposób myślenia o treści. Często mówi się, że wdrożenie responsywnego projektowania stron internetowych to bardziej kwestia strategii treści niż pytania projektowego.

jak ujął to Brendan Falkowski z działu Gravity, „Mobile First to metodologia, która prosi o projektowanie interakcji, myśląc najpierw o małym ekranie. Mobile first nie jest okrojoną wersją witryny komputerowej.”

spójrz na wyszukiwane hasła, których używają twoi klienci i zacznij od zdefiniowania ważnych interakcji dla Twojego sklepu. Nadawaj priorytety funkcjom i informacjom, aby efektywniej organizować widok mobilny, a następnie skaluj go do czystszej witryny dla dużych ekranów. Tworzenie zwycięskiego doświadczenia nie polega na usuwaniu użyteczności lub głębi.

przeciwnie, użytkownicy oczekują, że będą mogli wykonać dowolną akcję z dowolnego urządzenia, które trzymają. Oznacza to, że filtrowanie wyników wyszukiwania, czytanie recenzji, zapisywanie do listy życzeń i sprawdzanie muszą być powszechnie dostępne.

optymalizacja pod kątem responsywności: Kod i obrazy

jednym z wyzwań RWD jest to, że jego pojedynczy kod może być bardzo duży i wolny do ładowania. Rozważ te wskazówki, wiele z nich podzielił Mark Grannan w niedawnym webinarium dla sprzedawców internetowych, aby uzyskać optymalne wrażenia mobilne:

• załaduj zawartość priorytetową jako pierwszą i zawartość późnego ładowania („leniwe Ładowanie”) pod nią, aby stworzyć wrażenie szybszej wydajności, zamiast czekać na wyświetlenie zawartości po załadowaniu wszystkiego

• Użyj technologii po stronie serwera, aby dostarczać lub renderować obrazy o odpowiednich rozmiarach dla urządzenia

• Zakoduj swoją witrynę, aby zmniejszyć liczbę powrotów w obie strony na serwer, aby zmniejszyć opóźnienia

• użyj otwartych czcionek internetowych zamiast czcionek niestandardowych, aby zmniejszyć wagę strony

• rozważ użycie akceleracji innych firm dostawcy, tacy jak CDN, w celu optymalizacji wydajności za pomocą szeregu technologii i lokalnego buforowania treści

Going Responsive: Lessons from the Trenches

Skinny Ties jest jednym z największych detalistów i hurtowników krawatów w Stanach Zjednoczonych i jedną z pierwszych firm sprzedających tradycyjne krawaty online. Pasowało więc tylko to, że sprzedawca powinien być jednym z pierwszych sprzedawców, którzy opracowali responsywną stronę na początku 2012 roku.

aby stworzyć wyjątkowe wrażenia klientów, których szukała firma Skinny Ties, Dział Gravity drastycznie zwiększył złożoność swojej taksonomii, mapując każdy atrybut do standardowego formatu. Wcześniej użytkownicy mogli poruszać się tylko po sztywnym drzewie kategorii. Dynamiczna Taksonomia otworzyła wiele wejść do każdego produktu.

połączenie responsywnego projektu i elastycznej taksonomii przyczyniło się do ogromnego wzrostu przychodów, wartości SEO i współczynników konwersji na każdej platformie i formacie.

• 58% wzrost transakcji R / R

• 20.8% zwiększenie AOV

• 187% wzrost przychodów z urządzeń z systemem Android

• 224% wzrost przychodów z iPadów

• 437% wzrost przychodów z iphone ’ ów

Vax jest najlepiej sprzedającą się marką floorcare w Wielkiej Brytanii i częścią oddziału floorcare firmy TTI z siedzibą w Hongkongu, globalnego lidera w zakresie produktów dla branży wyposażenia wnętrz i budownictwa.

firma rozwija się na poziomie 40% rocznie, a firma internetowa doświadczyła ponad 85% wzrostu.

firma odniosła ogromny sukces dzięki sprzedaży flash, lub jak to nazywa Sprzedaż stoczni.

te pięciodniowe wydarzenia przyciągają ponad 3000 jednoczesnych użytkowników w szczytowym momencie i są bardzo udane! Kiedy firma zobaczyła, że 40% Ruchu Na sprzedaż stoczni pochodzi z urządzeń mobilnych, wiedziała, że potrzebuje zoptymalizowanej strony mobilnej.

dyrektor TTI Floorcare w regionie EMEA Nigel Aitchison podzielił się wspaniałymi wynikami z linii Vax po uruchomieniu Magento Enterprise Edition 1.Responsywny motyw 14, który zajęło im tylko cztery tygodnie, aby zbudować i przetestować. Dzięki responsywnej stronie, Vax widział konwersję podczas ich dużej sprzedaży stoczni wzrost o 42% na tabletach i 156% na telefonach komórkowych.

dodatkowe zasoby:

sklep internetowy – 23 lipca 2014: kroki do sukcesu Responsive Web Design

Forrester Research – styczeń 2014 16, 2014: Sześć Pułapek Projektu Responsywnej Strony Internetowej I Najlepsze Praktyki, Jak Ich Uniknąć

Sklep Internetowy – Maj 2, 2013: Skinny Ties osiąga 211% wzrost sprzedaży mobilnej dzięki responsywnej stronie projektu

Brendan Falkowski : https://speakerdeck.com/brendanfalkowski

Moovweb-lipiec 2014: 8 sposobów na poprawę wydajności witryny responsywnej

Blog Magento – maj 13, 2014: Magento umożliwia responsywne witryny w połowie czasu