Do kogo…?
Dla wszystkich, którzy posiadają stronę internetową i chcą,
by prezentowała się atrakcyjnie na urządzeniach mobilnych.
STUDIOOSOM1
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
Co w poradniku?
sposoby usprawnienia strony www na mobile’u
często popełniane błędy
wskazówki, podsumowujące każde zagadnienie
słowniczek pojęć
2
12
34
5
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
1. Zrezygnuj z Flasha
Flash (Adobe Flash Player)
- wtyczka umożliwiająca odtwarzanie
materiałów multimedialnych
na urządzeniach mających dostęp do Internetu.
Wpływa na działanie strony i poprawia jej jakość.
Marki stopniowo odchodzą od stosowania Flasha
(Apple w ogóle z niej nie korzysta!)
3
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM4
Korzyści:
“waga” strony jest znacznie mniejsza
strona ładuje się szybciej i działa dynamiczniej
strona jest dostępna na urządzeniach Apple
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM5
Strony, które wyświetlane są na urządzeniach mobilnych
muszą dostosowywać się do małych rozdzielczości. Powinny więc:
działać dynamicznie i sprawnie
dostarczać odbiorcy potrzebnych informacji
zawierać małą ilość grafik
2. Skompresuj obrazy lub zrezygnuj z części z nich
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM6
obrazy, które nie zawierają zbyt wielu kolorów czy cieniowań
eksportuj do formatu gif
kompresji (60-70% powinno być wystarczające)
Pomocna w tym procesie jest ta strona
Zalecenie:
obrazy o skomplikowanej, kolorowej strukturze eksportuj
do formatu jpg z odpowiednim procentem
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM7
elementy “przezroczyste” eksportuj do formatu png
(krawędzie obrazu będą gładsze)
stosuj format png, ponieważ gwarantuje on najlepszą jakość obrazu,
jednak z umiarem – pliki w tym rozszerzeniu ważą znacznie więcej,
co może dodatkowo obciążać stronę
stosuj trik CSS Sprite – technika zamieszczania wielu,
mniejszych obrazów, na jednym (przekłada się to
na “wagę” strony)
Zalecenie:
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM8
Pamiętaj - każdy przypadek należy rozpatrywać indywidualnie
i obserwować, jak obrazy wpływają na działanie naszej strony.
Może warto z części całkowicie zrezygnować?
Korzyści:
rozmiar strony jest znacznie mniejszy
ładowanie strony następuje szybciej
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM9
Nawigacja strony WWW na urządzeniu
mobilnym znacznie różni
się od wersji widocznej na desktopie.
Nie utrudniaj odbiorcom poruszania się
po własnym serwisie, a wręcz przeciwnie
– uprość ten proces.
3. Hierarchizuj swoje menu
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM10
Zalecenie:
TAK NIE
krótkie, jasno scherarchizowane menu
przyciski przekierowujące do konkretnych informacji
wielokrotnie zagłębione, kaskadowe struktury
mnogość stron pośrednich
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM11
Zastanów się…
...czego może poszukiwać odbiorca na Twojej stronie,
kiedy używa jej na urządzeniu mobilnym?
Spróbuj zaserwować mu to w możliwie
najszybszy sposób.
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM12
Korzyści:
odbiorca otrzymuje potrzebne informacje w przystępny sposób
szansa, że użytkownik dotrze tam, gdzie zamierzał
i dokona czynności, na której nam zależy
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM13
Postaraj się, aby na Twoim serwisie nie było
zbyt długich podstron. Przewijanie nie może
być zbyt czasochłonne, bo w efekcie
mało który użytkownik
przejdzie przez cały ten proces do końca.
4. Zwróć uwagę na długość stron
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM14
Zalecenie:
TAK NIE
korzystanie z rozszerzeń i krótkich zapowiedzi, przedstawiające,
co znajdzie się po tapnięciu w dany element
podział tekstu na akapity, stosowanie śródtytułów, pogrubień, wyliczeń,
odpowiedniej interlinii etc.
stosowanie zbyt dużej ilości tekstu
brak zaznaczonej struktury tekstu: akapitów, śródtytułów etc.
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM15
Korzyści:
szansa, że użytkownik dłużej pozostanie na naszej stronie
wyższe prawdopodobieństwo, że odbiorca przejrzy naszą stronę
do końca i wykona pożądaną czynność
szybsze ładowanie się strony
zadowolenie użytkownika z łatwości poruszania się po stronie
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
5. Stosuj ograniczoną ilość przycisków
w optymalnej wielkości
rozmiar przycisków - im większy element, tym większa jego waga
użytkownicy urządzeń mobilnych obsługują je palcem,
a nie kursorem myszki, dlatego design strony
powinien być finger-friendly
16
5
sposobów jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
zalecenia
Ogranicz ilość przycisków. Zastosuj tylko te, które są kluczowe.
Elementy interfejsu powinny być osadzone z konkretnej
przyczyny i dawać użytkownikowi to, czego najbardziej
oczekuje w danej chwili. Pamiętaj, że strona jest wyświetlana
na małej przestrzeni i jeśli użytkownik nie będzie mógł
w coś trafić palcem, to prawdopodobnie z tego zrezygnuje.
17
5
sposobów jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
korzyści
“waga” strony może być mniejsza
strona ładuje się szybciej
mniejsza ilość przycisków nie rozprasza uwagi odbiorcy,
zwiększa się szansa na kliknięcie w określone miejsce
możliwość kierowania ruchu użytkowników
w najbardziej pożądane miejsca
18
5
sposobów jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
Porady te są tylko ogólnymi wskazówkami i nie gwarantują sukcesu.
Każdy przypadek należy rozpatrywać indywidualnie i dostosowywać
do niego określone działania.
Poniżej przedstawiamy Wam jeszcze niezbędnik,
który ułatwi dopasowanie strony do jej użytkowników.
Proponujemy, byś skorzystał z tej ostatniej rady.
19
5
sposobów jak usprawnić stronę WWW na urządzeniach mobilnych
Monitoruj, czyli Google Analytics Twoim kompanem
połącz swoją witrynę z nim i zacznij monitorować działania użytkowników
otrzymasz w ten sposób dane. Przydadzą się one do wyciągnięcia wniosków
i zmian mających na celu usprawnienie strony
ułatwi to także stargetowanie ewentualnych kampanii reklamowych,
które w rezultacie będą bardziej efektywne, dzięki poznaniu odbiorców
strony i ich schematów zachowań
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
Korzyści:
możliwość lepszego poznania swoich odbiorców (wiek, płeć, miejsce zamieszkania)
mierzenie skuteczności Twoich kampanii w mediach społecznościowych
możliwość sprawdzenia, jak wielu użytkowników odwiedza Twoją witrynę,
w jaki sposób z niej korzystają i jaką osiągasz sprzedaż (w przypadku e-commerce)
21
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
Korzyści:
tworzenie raportów dotyczących tego, które części witryny mają dobrą skuteczność,
a także, które strony są najpopularniejsze
możliwość sprawdzenia schematu poruszania się użytkownika po stronie internetowej
mnóstwo danych do analizy i wyciągania własnych wniosków, jak usprawnić serwis
22
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM
CSS – arkusze stylów używane do opisu układu elementów na stronie WWW.
Finger-Friendly – rozwiązania na urządzenia mobilne, będące “przyjaznymi” dla palców,
których używa się przy kontakcie z nim.
Flash – wtyczka umożliwiająca odtwarzanie materiałów multimedialnych
na urządzeniach mających dostęp do Internetu.
Google Analytics – darmowe narzędzie, umożliwiające prowadzenie statystyk związanych
ze stroną internetową (m.in. charakterystyka grupy docelowej, informacje dotyczące
schematu zachowań na stronie itp.)
HTML5 – język programowania stosowany do tworzenia i prezentowania stron WWW.
23
Słowniczek:5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOM24
Słowniczek:Interfejs (Interface) – sposób komunikowania się użytkownika z programem
i programu z użytkownikiem.
Kompresja obrazów – zmniejszanie obrazów w celu zmniejszenia ich wymiarów i rozmiaru.
Konwersja – dokonanie akcji przejścia na określoną stronę, wywołanej nakłaniającym
do tego komunikatem (np. w przypadku sklepu internetowego realizującego reklamę
internetową, konwersją nazwiemy podjęcie akcji kliknięcia w reklamę,
która przekieruje użytkownika na stronę sklepu).
Ruch na stronie – liczba unikalnych użytkowników, którzy w określonym
momencie przeglądają stronę.
5
sposobów, jak usprawnić stronę WWW na urządzeniach mobilnych
STUDIOOSOMOSOMSTUDIO - Agencja Interaktywna specjalizująca się w tworzeniu i projektowaniu stron internetowych
oraz aplikacji mobilnych, w działaniach z zakresu e-marketingu i e-PR, projektowaniu graficznym na potrzeby Internetu i Mobile oraz realizacji video.
[email protected] (+48) 791 169 208www.osomstudio.com
Dzięki za czas poświęcony na zapoznanie się z naszą prezentacją.
Jeśli moglibyśmy jeszcze jakoś Ci pomóc - skontaktuj się z nami!