Wyzwania przy tworzeniu serwisu responsywnego z dużym ruchem - na przykładzie pogoda.interia.pl
-
Upload
mwiktorowski -
Category
Marketing
-
view
578 -
download
3
description
Transcript of Wyzwania przy tworzeniu serwisu responsywnego z dużym ruchem - na przykładzie pogoda.interia.pl
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?