Systemy mobilne + RWD
Z uwagi na ciągły wzrost wykorzystania smartfonów w życiu codziennym stosujemy zasadę "Mobile first" tak aby strona WWW była dostosowana do przeglądania na telefonie w jak największym stopniu.
Według statystyk już w 2016 roku liczba globalnych odsłon stron WWW na telefonach była większa niż na monitorach komputera. Oczywiście mówimy tu o wszystkich grupach społecznych, odbiorcach i dostawcach treści. Dużą część odsłon na telefonach pochłaniają serwisy społecznościowe takie jak Facebook, Twitter (X), YouTube, Instagram czy TikTok.
Do wzrostu korzystania ze smartfonów przyczyniają się przede wszystkim aplikacje które pomagają w codziennym życiu jak na przykład:
- komunikatory (jak np. Messenger)
- interaktywny kalendarz (np. Google)
- mapy drogowe (np. Google Maps)
- aplikacje zakupowe (jak np. Allegro)
- aplikacje smart home do obsługi urządzeń domowych (np. Tuya, Supla)
- aplikacje do obsługi parkowania (np. Mobilet)
Podobnych przykładów jest znacznie więcej, wszystkie jednak powodują że telefon mamy cały czas przy sobie - a to jest główny powód globalnej zmiany proporcji w używaniu smartfonów względem monitorów desktopowych.
Należy zwrócić szczególną uwagę na dostosowanie strony do wyświetlania na urządzeniach mobilnych tak samo jak na monitorach desktop. Projektując portal internetowy należy zatem osobno zaprojektować grafikę desktop oraz osobno grafikę dla mobile.
W projektowaniu dla mobile wykorzystujemy taką samą Architekturę Informacji jak na desktop w celu zapewnienia spójności nawigacji, jednak projektowanie strony WWW na mobile wymaga stosowania innych rozwiązań z uwagi na inny sposób nawigacji oraz ograniczone miejsce na wyświetlanie informacji.
Responsywność
Responsywność pozwala na płynne dostosowanie strony z dużych rozdzielczości dostępnych na monitorach (np. Full HD tj. 1920 / 1080 px), poprzez mniejsze rozdzielczości laptopów oraz tabletów aż do stosunkowo małych ekranów smartfonów (w porównaniu z ekranami monitorów desktop).
W stosowaniu wersji responsywnej bardzo ważne jest określenie tak zwanych breakpointów tj. szerokości strony przy których następuje zmiana struktury wyświetlanej strony. Breakpointy dobieramy do najczęściej używanych urządzeń.
O czym należy pamiętać projektując portal w wersji mobile ?
Nawigacja palcem
Na telefonie nawiguje się palcem a nie np. myszą dlatego ważne jest aby dostosować wszystkie elementy strony www do takiego sposobu nawigacji.
Mniejszy ekran
Smartphony mają znacznie mniejszy ekran od monitorów desktop dlatego należy zamieścić tylko te treści które są potrzebne
Przyzwyczajenia
Należy wziąć pod uwagę przyzwyczajenia użytkowników z obsługi wiodących portali i korzystać z ich doświadczeń
Dodatkowa nawigacja
Warto stosować dodatkową nawigację w postaci dolnej belki z szybkim dostępem do najważniejszych części strony
Slajdery prawo/lewo
Slajder to idealne rozwiązanie które umożliwia przewijanie treści w kierunku prawo-lewo co ogranicza scrollowanie wyłącznie w dół a zatem również zmniejsza wysokość strony
Menu hamburger
Menu hamburger to już od dawna standard dla telefonów, nie mniej należy zwrócić szczególną uwagę na odpowiednią budowę menu