eKomercyjnie.pl

Jak stworzyć użyteczną stronę mobilną?

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

Autor wpisu

Dodaj komentarz

Twój adres email nie zostanie opublikowany.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Zamknij

Najlepsze poradniki i informacje
e-commerce prosto na Twój e-mail!

Bonus dla Ciebie:
PDF, 72 strony!

Wpisz swój adres e-mail, aby rozpocząć prenumeratę newslettera od eKomercyjnie.pl.

Od razu wyślemy do Ciebie:

  • BONUS #1: Jak się robi e-handel w Polsce? Rozmowy z właścicielami sklepów internetowych (magazyn .pdf, aż 72 strony!)
     
  • BONUS #2: Piętnaście gotowych sposobów na ulepszenie sklepu internetowego!
    (poradnik .pdf)