Autorką poniższego artykułu jest Urszula Holik – marketing communication specjalist w firmie NETFACE.
Dziś trudno sobie wyobrazić, by popularne strony czy aplikacje webowe nie były kompatybilne z urządzeniami przenośnymi. Liczba użytkowników iPhona i Androida wciąż rośnie, zaś smartfony powoli stają się urządzeniami, za pomocą których wielu Internautów korzysta z zasobów sieci. Dobrze zaprojektowana strona desktopowa będzie się wyświetlała na komórkach bez konieczności rezygnacji z możliwości XHTML czy JavaScript.
Już dziś rynek urządzeń mobilnych, stanowi dla wielu osób główny kanał dystrybucji informacji, reklam i usług elektronicznych. W parze z tym zjawiskiem idzie stopniowy wzrost użytkowników Internetu, którzy łączą się z siecią za pomocą urządzeń mobilnych. W 2010 roku producenci Opery Mini odnotowali 118% wzrost ilości odwiedzonych stron internetowych za pośrednictwem urządzeń mobilnych. Nie trudno się domyślić, że ten trend w kolejnych latach będzie miał tendencje zwyżkową.
Dwa podstawowe parametry, jakie mają dla mobilnych Internautów kluczowe znaczenie to szybki dostęp do informacji i wygodna obsługa. Użytkownicy, którzy korzystają z urządzeń mobilnych, zazwyczaj nie mają czasu, ani chęci na żmudne przeszukiwanie zasobów sieci, czy kilkakrotne przewijanie strony w celu znalezienia interesujących ich informacji. Dlatego też strony na smartfony muszą cechować się maksymalną prostotą, często kosztem rezygnacji z rozbudowanej grafiki, intuicyjną nawigacją i szybkim transferem danych.
Z danych producentów opera mini wynika, że polscy internauci najczęściej korzystają z zasobów sieci łącząc się z nią za pomocą urządzeń mobilnych w celu zapoznania się z wiadomościami (sportem, informacjami, pogodą), znalezienia adresu lub nr telefonu, sprawdzenia poczty i odwiedzenia portali społecznościowych, zobaczenia rozkładu jazdy, czy znalezienia informacji turystycznych.
Dostosowanie stron desktopowych do potrzeb urządzeń mobilnych możliwe jest na kilka sposobów – wyjaśnia Michał Chołuj z Netface. Pierwszym jest technologia small screen rendering, pozwalająca na automatycznym formatowaniu i zmniejszaniu strony do potrzeb mobilnej przeglądarki. Kolejną metodą jest formatowanie kodu HTML, w taki sposób, że jest on upraszczany i wyświetlany w ograniczonym zakresie. Technologia stylesheets pozwala na opracowanie osobnego arkusza stylów CSS, uruchamianego automatycznie w wypadku wykrycia urządzenia mobilnego. Te metody polegają na formatowaniu stron do potrzeb i parametrów urządzeń mobilnych, co może prowadzić do pojawienia się błędów. Zdecydowanie lepszymi rozwiązaniami są zaprojektowanie od podstaw serwisu mobilnego zgodnie z wytycznymi stron na urządzenia przenośne lub tworzenie tzw. serwisów uniwersalnych, które prezentują treść stron dektopowych i mobilnych w identyczny sposób.
Do najczęstszych celów, jakie spełniać ma strona mobilna należą stworzenie nowego kanału dystrybucji informacji lub produktów, budowanie społeczności wokół maki i innowacyjnego image firmy. By jednak dobrze zaprojektować stronę czy aplikację mobilną należy połączyć powyższe cele z potrzebami użytkownika – wygodą użytkowania, określeniem struktury i hierarchii treści, określeniu zasad nawigacji. Szczególnie ważne jest stworzenie prostej, przejrzystej i czytelnej struktury serwisu, a w tym zaprojektowanie przemyślanej architektury informacji. W tym celu niekiedy tworzy się prototypy serwisu, które pozwalają na określenie tzw Click Streams (ścieżek informacji, jakimi „poruszają się” użytkownicy po serwisie) oraz zidentyfikowanie problemów jakie mogą wystąpić podczas korzystania z serwisu.
To co różni strony mobilne od desktopowych to ich ciężar – zazwyczaj ok. 40 kB, rozdzielczość (zazwyczaj max 200 x 250 px). Takie strony zazwyczaj tworzy się w XHTML – Basic Profile. Najważniejsze elementy serwisów mobilnych to:
- Nagłówek z informacją o ścieżce kliknięć i miejscu, w którym znajduje się użytkownik. Linki na ścieżce kliknięć powinny pozwalać na powrót do poprzedniej podstrony;
- Linia pionowa po lewej stronie – ikony prowadzące do podstron serwisu ikonom, można również nadać wartość od 1 – 9, dzięki czemu, każdy z klawiszy numerycznych telefonu może bezpośrednio prowadzić do kolejnej podstrony serwisu – tzw. access key.
- W środku treść główna strony, bez nadmiaru grafiki o odpowiednim kontraście, który pozwoli na zapoznanie się z informacją, nawet pod światło.
- Stopka strony z danymi teleadresowymi.
- Skrócony adres URL oraz krótkie tytuły dla poszczególnych podstron serwisu.
- Unikanie stosowania tabel definiowanych w px (w przypadku konieczności ich wstawienia lepiej podać wymiary procentowe), elementów we flashu, ramek,
- Unikanie obrazków, animacji i grafik na początku strony
