Jak zrobić dobrą stronę WWW na iPhona

Liczba użytkowników iPhone'a 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.

Foto: Glow Images/East News

 

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.

 

Czego szukamy na iPadzie

 

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.

 

Cele mobilnej strony WWW

 

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

 

• 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 podstroi 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