Wyzwania przy tworzeniu serwisu RWD z dużym ruchem

hellobuongiornodobry dendzień dobrygod morgonbonjourдоброе утро

Kim jesteśmy?

Maciek WiktorowskiHead of Mobile & Big Data

Sebastian CholewaDeveloper

#RWD

#ResponsiveWebDesign

#MobileFirst

#MultiScreening

#apps #SecondScreen

#SocialLocalMobile#Haptics

#NFC

#VAS#QRcode

#Selfie #AppStoreSEO

#InternetOfThings

#WearableComputers

Ruch w polskim Internecie MOBILE vs. DESKTOPVII 2008 – X 2013

Statcounter (X 2013)

DESKTOP MOBILE

11,59%

Ruch w południowokoreańskim Internecie MOBILE vs. DESKTOP VII 2008 – X 2013

Statcounter (X 2013)

DESKTOP MOBILE

28,85%

36,66%

11,59%

Z jakiej wersji strony wolą korzystać użytkownicy?

INTERIA.PL – ankieta wewnętrzna (VIII 2012)

2012

Z jakiej wersji strony wolą korzystać użytkownicy?

INTERIA.PL – ankieta wewnętrzna (VIII 2012)

2013

Z wersji mobilnej Z wersji standar-dowej (pełnej)

Trudno powiedzieć0

10

20

30

40

50

60

70

80

90

80

613

Użytkownik smartphone odwiedzający SG INTERIA.PL wykonywał przeciętnie:

2,24 odsłon/wizyta

Google Analytics (III 2013)

Użytkownik smartphone odwiedzający mobilną wersję SG INTERIA.PL wykonywał przeciętnie:

4,44 odsłon/wizyta

Google Analytics (III 2013)

Użytkownicy chcą odciąć pępowinę

Bądź tam gdzie Twój klient.

Dlaczego warto użyć RWD?

bądź jak woda, przyjacielu

Ruch w polskim Internecie MOBILE vs. DESKTOPVII 2008 – X 2013

Statcounter (X 2013)

DESKTOP MOBILE

11,59%

RWD=mobile ?

RWD≠mobile

RWD=mobile+desktop

ruch mobilny = kontekst

pogoda.interia.plruch mobilny w marcu 2013 – 8,45%ruch mobilny w lipcu 2013 – 17,43%ruch mobilny w sierpniu 2013 – 17,61%ruch mobilny we wrześniu 2013 – 16,73%ruch mobilny w październiku 2013 – 17,27%

Google Analytics

Wyzwanie #1 – dobór formy

więcej zmiennych wejściowychszerokość ekranówrozdzielczość ekranówsposób nawigacjiodległość od ekranusposób łączenia z siecią

Najpopularniejsze rozdzielczości ekranóww Polsce XII 2012

Gemius Ranking (XII 2012)

~77%

Punkty złamania

320 px480 px 640 px950 px1150 px

Punkty złamania

Gemius Ranking (XII 2012)

320 px7%

480 px4%

640 px4%

960 px14%

1150 px70%

#RWD = lepsza usługa dla każdego ekranu

Wyzwanie #2 – wybór zawartości

#ContentStrategy

Jaka będzie pogoda?

Jakie treści i elementy strony są najważniejsze?

Jakie treści i elementy strony są najważniejsze?

zmiana położeniaukrywanieusuwanie

priorytety dla różnych wersji strony

Zbadanie preferencji użytkowników

Ukrywanie elementów nawigacji

Czego oczy nie widzą, tego sercu nie żal

Wyzwanie #3 – #RWD jako element ekosystemu

Tylko 2 na 4 patronów warsztatów Mobile Marketing ma stronę dopasowaną do urządzeń mobilnych.

Kreacje reklamowe

brak wsparcia dla Flash

Skoro treść jest dopasowana to może reklamy powinny?

Wyzwanie #4 – organizacja pracy IT

Jak pracuje się developerowi w projektach graficznych?

Używanie urządzeń mobilnych już na etapie produkcji

Style responsywne

Obrazki responsywne

Touch Friendly

Używanie dużych elementów, które jednocześnie wyglądają dobrze na desktopie

Sposoby optymalizacji

Wczytywanie niektórych obrazków jak tła CSSUżywanie sprite’ów celem redukcji requestówOgólne ograniczenie użycia plików graficznychSięgnięcie po CSS-owe tricki

Opera Mini

Korzyści z użycia #RWD

Koszty

projektowanie i analityka +100%IT +30%ale…mniejszy koszty utrzymania – jeden kod

Lepszy produkt

prostszy, zaspokajający potrzeby, produktjeden produkt – nauka interfejsulojalność

Wizerunek

#RWD daje wizerunek nowoczesnej firmy

Dziękujemy!Pytania?