źródło: flickr.comDobrze 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 automatyczne formatowanie i zmniejszanie 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ół marki 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 itp.
- Unikanie obrazków, animacji i grafik na początku strony.