STUDIOOSOM

5

sposobów jak usprawnić stronę WWW na urządzeniach mobilnych

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.

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!