Dzień z Profesjonalistą w eHandlu, 11.10.2014, Społeczna Akademia Nauk w Łodzi

1. RWD – z czym to się je?
11.10.2014
1
Informacja publiczna
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: istore@istore.pl

2. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: istore@istore.pl
2
Agenda:
1.Czym jest RWD?
2.Wady/Zalety stron responsywnych
3.Wyzwania projektowania
4.Nasze doświadczenie w projektowaniu w RWD

3. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: istore@istore.pl
3
RWD Story
2004 - powstaje technika adaptująca wygląd strony do urządzenia
2010 - powstaje termin Responsive Web Design oraz ramy projektowania
w RWD
2012 - RWD #2 in Top Web Design Trends według .net magazine
2013 - rokiem RWD w USA (wdg Mashable)

4. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: istore@istore.pl
4
Jak działa RWD?

5. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: istore@istore.pl
5
Adaptive Web Design (AWD) = różny kod HTML dla każdej zdefiniowanej wersji strony
AWD = całkowicie przewidywalny wygląd na konkretnych urządzeniach
RWD – egzekwowane po stronie klienta
AWD – egzekwowane po stronie serwera
Responsive vs Adaptive
Źródło: Brezi.com

6. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
6
•RWD = 1 niezmienny kod HTML + zmienny kod CSS
•Płynne dostosowanie się do każdego rozmiaru ekranu
•ograniczanie użycie przestrzeni serwera - modyfikacja wyglądu strony odbywa się po stronie klienta i jest wykonywana przez przeglądarkę
•Rozwiązanie tańsze od aplikacji mobilnej
•Lepsze user experience
•Prostszy sposób zbierania danych o ruchu/konwersji
Zalety RWD

7. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
7
Wady RWD
•Problemy z wolniejszym ładowaniem strony na urządzeniach mobilnych
•CSS3 nie jest wspierany przez starsze wersje przeglądarek (w przypadku desktopa)
•Problemy z zupełnie nowym sposobem projektowania stron www

8. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
8
Wyzwania projektowania

9. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
9
Wyzwania projektowania

10. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
10
Wyzwania projektowania
Mobile first

11. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: istore@istore.pl
11
Wyzwania projektowania
Progressive enhancement duże przyciski/ wyraźne elementy

12. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
12
Wyzwania projektowania
Odpowiednie odstępy

13. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
13
Wyzwania projektowania
Źródło: http://globalmoxie.com/blog/desktop-touch-design.shtml

14. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
14
Wyzwania projektowania
•Projektowanie pod RWD - Układy – od lewej do prawej – skalowanie – przy konkretnej rozdzielczości zmieniamy pozycję bloków
•Breakpointy
•Minimalizacja grafiki –np. poprzez wykorzystanie fontów z ikonami – awesome – zostaje tekst – łatwo się skaluje http://fortawesome.github.io/Font-Awesome/icons/#brand

15. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
15
iStore mobile Story AD 2011

16. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
16
i 2013…

17. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
17
•Mobile first – przemyślana architektura informacji
•Grafika – specjalne przygotowanie grafiki pod katem ekranów w technologii retina – wieloobrazkowe tło–tzw. Sprite (urządzenia z ekranami retina ograniczone przez media query)
•Dobre, duże skalowalne zdjęcia
•Warto testować na konkretnym urządzeniu po zaprojektowaniu– beta testerzy są wśród nas ;)
Nasze doświadczenie z RWD

18. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
18
•Projektujemy pod palec – odpowiednie odległości – przerwy
•Nie każdy telefon ma wszystkie funkcjonalności! – uwaga na bardziej zaawansowane rozwiązania
•Uwaga na pływające okienka – problem z warstwą i jej zamknięciem

19. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: istore@istore.pl
19
•Bloki tekstowe - uwaga na sierotki – litery na końcu linii – powinny się znaleźć w nowej linii -{br} zostawia pustą przestrzeń – nie używamy łamania linii, dajemy twardą spację
•Zachęta do tapnięcia – pokazujemy strzałki lub cześć obrazka, żeby puścić dalej
•Hoover – wyłączamy– unikamy, błąd projektowy
•Menu rozwijane na Java Scrypcie
Nasze doświadczenie z RWD

20. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
20
•Sprzedaż tabletów przekroczy sprzedaż PCtów w tym roku w USA (Nielsen)
•50% zamówień w sklepach internetowych w UK pochodzi z urządzeń mobilnych
•Ruch z urządzeń mobilnych w sklepach iStore.pl rośnie o 1% każdego miesiąca - obecnie sięga 15% w skali platformy
Dlaczego warto inwestować w RWD?
0,00%
2,00%
4,00%
6,00%
8,00%
10,00%
12,00%
14,00%
16,00%
01.2011
03.2011
05.2011
07.2011
09.2011
11.2011
01.2012
03.2012
05.2012
07.2012
09.2012
11.2012
01.2013
03.2013
05.2013
07.2013
09.2013
11.2013
01.2014
03.2014
05.2014
07.2014
09.2014
Ruch mobilny w iStore

21. Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o. 60-166 Poznań, ul. Grunwaldzka 182 email: istore@istore.pl
21
Dziękuję za uwagę Zapraszam do kontaktu katarzyna.piosik@allegro.pl