Prezentacja ta zawiera 5 praktycznych porad dotyczących usprawnienia stron internetowych na urządzeniach mobilnych.

1. STUDIOOSOM
5
sposobów jak usprawnić stronę WWW
na urządzeniach mobilnych

2. Do kogo…?
Dla wszystkich, którzy posiadają stronę internetową i chcą,
by prezentowała się atrakcyjnie na urządzeniach mobilnych.
STUDIOOSOM
1
5 sposobów, jak usprawnić stronę WWW
na urządzeniach mobilnych

3. 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
1
2
3
4
5
5 sposobów, jak usprawnić stronę WWW
na urządzeniach mobilnych

4. 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

5. STUDIOOSOM
4
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

6. STUDIOOSOM
5
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

7. STUDIOOSOM
6
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

8. STUDIOOSOM
7
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

9. STUDIOOSOM
8
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

10. STUDIOOSOM
9
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

11. STUDIOOSOM
10
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

12. STUDIOOSOM
11
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

13. STUDIOOSOM
12
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

14. STUDIOOSOM
13
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

15. STUDIOOSOM
14
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

16. STUDIOOSOM
15
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

17. 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

18. 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

19. 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

20. 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

21. 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

22. 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

23. 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

24. 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

25. STUDIOOSOM
24
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

26. STUDIOOSOM
OSOMSTUDIO - 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.
office@osomstudio.com (+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!