Trendy i przykłady stron mobilnych

Jakie panują obecnie trendy w projektowaniu stron mobilnych? Jakie są najpopularniejsze rozdzielczości, wymiary ekranów? Potrzebne informacje dostarcza nam blog sender11, na którym autor zestawił dane dotyczące wymiarów ekranów komórek wprowadzanych na przełomie kilku lat. Jak widzimy na poniższym wykresie ekrany 240 x 320 (określane jako QVGA) dominują:
mobilescreen
mobilescreen3
mobilescreen2
Twórcę stron internetowych najbardziej interesuje tutaj długość. Wysokość ma mniejsze znaczenie (za wyjątkiem wypełniania formularzy). Obecnie można już obserwować powszechne stosowanie 240 x 320 na "zwykłych" komórkach. Na smartphonach pojawiają się już większe ekrany jak 320 x 480 dla iPhone. Niestety nie ma wyraźnego trendu pośród producentów co do wymiarów dla tych większych urządzeń.

Trendy

smashingmagazine.com w artykule "Mobile Web Trends For 2009" zbiera wszystkie najnowsze trendy i rozwiązania. Oto zawarte w tym artykule punkty:
  • Proste opcje: Jako przykład podawana jest mobilna strona digg.com zawierająca tylko 10 linków i ograniczoną ilość opcji, jak i prostą nawigację.
  • Brak grafik: Należy uwzględnić że nie zawsze użytkownik używa szybkiego i taniego dostępu do internetu. Ładowanie grafik może być więc wolne. Także duże grafiki nie będą dobrze wyglądały na małych ekranach
  • Priorytety treści: mobilna strona powinna być pozbawiona zbędnych elementów. Użytkownik wchodząc na stronę z komórki raczej nie zajmuje się swobodnym sufrowaniem po internecie, a szuka konkretnej usługi lub informacji. Zazwyczaj na mobilnych wersjach stron www nie ma reklam ani zbędnych reklam produktów.

Popularne rozwiązania

Pośród różnych mobilnych stron powtarzają się dwa pomysły zaczerpnięte z iPhona:
  • Imitacja interfejsu iPhona: często stronę stylizuje się na aplikację iPhona stosując np. identyczne tła i gradienty, czy też podobny układe we własnej kolorystyce:
    mobdes5
    mobdes5a
    Deviantart stosuje własną zieloną kolorystykę, lecz układ i zastosowane gradienty imitują aplikację iPhona.
  • Strona główna w postaci zbioru ikon-przycisków kierujących w różne sekcje serwisu (odpowiednik listy aplikacji na iPhonie):
    mobdes4
    mobdes4a

    mobdes1
    mobdes1a
    Strona główna Lawrence.com w łatwy sposób (dla dotykowego ekranu) pozwala wybrać sekcję serwisu, do której chcemy się udać. Podobne rozwiązanie stosuje dailyhoroscope. Oprócz zbioru "przycisków" poszczególne horoskopy są umieszczone w rozsuwalnym sliderze - ogranicza to konieczność przewijania strony aby dotrzeć do interesującej nas treści:
    mobdes3
    mobdes3a
    Linki przedstawione jako przyciski są odpowiednio duże i ładnie wyglądają. Strona volkswagena jest jedną z często wymienianych jako bardzo dobry przykład mobilnego serwisu.
  • Linki ukryte pod przyciskami to powszechnie stosowany i sprawdzony sposób nawigacji po stronie. Łatwo w nie klikać po prostu dotykając ekranu, jak i nie ma problemu z wycelowaniem w odpowiedni link.

Przydowe projekty i popularne mobilne serwisy

androidandme.com - przegląd kilku mobilnych serwisów wraz z opisami
mobileawesomeness.com - zbiór mobilnych projektów popularnych serwisów
cssiphone - zbiór projektów stron robionych pod iPhony
templatemonster.com - mobilne projekty do kupienia
RkBlog

Strony mobilne, 17 July 2009

Comment article
Comment article RkBlog main page Search RSS Contact