" RWD - z czym to się je?", Katarzyna Piosik, istore

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

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

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)

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?

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

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

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

Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.

60-166 Poznań, ul. Grunwaldzka 182

email: istore@istore.pl

8

Wyzwania projektowania

Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.

60-166 Poznań, ul. Grunwaldzka 182

email: istore@istore.pl

9

Wyzwania projektowania

Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.

60-166 Poznań, ul. Grunwaldzka 182

email: istore@istore.pl

1

0

Wyzwania projektowania

Mobile first

Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.

60-166 Poznań, ul. Grunwaldzka 182

email: istore@istore.pl

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: istore@istore.pl

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: istore@istore.pl

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: istore@istore.pl

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: istore@istore.pl

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: istore@istore.pl

1

6

i 2013…

Operatorem platformy iStore.pl jest: Grupa Allegro Sp. z o.o.

60-166 Poznań, ul. Grunwaldzka 182

email: istore@istore.pl

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: istore@istore.pl

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: istore@istore.pl

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: istore@istore.pl

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: istore@istore.pl

2

1

Dziękuję za uwagę Zapraszam do kontaktu

katarzyna.piosik@allegro.pl