" rwd - z czym to się je?", katarzyna piosik, istore
DESCRIPTION
Dzień z Profesjonalistą w eHandlu, 11.10.2014, Społeczna Akademia Nauk w ŁodziTRANSCRIPT
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: [email protected]
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
2
Agenda:
1. Czym jest RWD?
2. Wady/Zalety stron responsywnych
3. Wyzwania projektowania
4. Nasze doświadczenie w projektowaniu w RWD
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
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)
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
4
Jak działa RWD?
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
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
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
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
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
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
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
8
Wyzwania projektowania
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
9
Wyzwania projektowania
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
0
Wyzwania projektowania
Mobile first
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
1
Wyzwania projektowania
Progressive enhancement duże przyciski/ wyraźne elementy
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
2
Wyzwania projektowania
Odpowiednie odstępy
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
3
Wyzwania projektowania
Źródło: http://globalmoxie.com/blog/desktop-touch-design.shtml
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
4
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
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
5
iStore mobile Story AD 2011
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
6
i 2013…
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
7
• 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
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
8
• 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
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
1
9
• 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
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
2
0
• 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
.20
11
03
.20
11
05
.20
11
07
.20
11
09
.20
11
11
.20
11
01
.20
12
03
.20
12
05
.20
12
07
.20
12
09
.20
12
11
.20
12
01
.20
13
03
.20
13
05
.20
13
07
.20
13
09
.20
13
11
.20
13
01
.20
14
03
.20
14
05
.20
14
07
.20
14
09
.20
14
Ruch mobilny w iStore
Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.
60-166 Poznań, ul. Grunwaldzka 182
email: [email protected]
2
1
Dziękuję za uwagę Zapraszam do kontaktu