" 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: [email protected]




2

Agenda:

1. Czym jest RWD?

2. Wady/Zalety stron responsywnych

3. Wyzwania projektowania

4. Nasze doświadczenie w projektowaniu w RWD




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)

http://en.wikipedia.org/wiki/.net_(magazine)






4

Jak działa RWD?




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

mailto:[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




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

Wyzwania projektowania




9





1

0


Mobile first




1

1


Progressive enhancement duże przyciski/ wyraźne elementy




1

2


Odpowiednie odstępy




1

3


Źródło: http://globalmoxie.com/blog/desktop-touch-design.shtml

http://globalmoxie.com/bm~pix/phone-thumb~s800x800.png

http://globalmoxie.com/bm~pix/tablet-thumb-zone~s800x800.png

http://globalmoxie.com/bm~pix/hyrbid-thumb-zone~s800x800.png




1

4


• 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

http://fortawesome.github.io/Font-Awesome/icons/#brand








1

5

iStore mobile Story AD 2011




1

6

i 2013…




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




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




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




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




2

1

Dziękuję za uwagę Zapraszam do kontaktu

[email protected]

" rwd - z czym to się je?", katarzyna piosik, istore

Technology