Strony internetowe zoptymalizowane do użytku na urządzeniach mobilnych różnią się od tych, które pojawiają się na komputerach stacjonarnych i laptopach. Te ostatnie są przystosowane do dużych ekranów i precyzyjnego klikania myszą, natomiast mobilne strony internetowe są dostosowane do mniejszych ekranów i nieprecyzyjnego stukania palcami.
- Zaprojektowany z myślą o mniejszych ekranach i nieprecyzyjnym stukaniu palcami.
- Zaprojektowany z myślą o dużych ekranach z precyzyjnym klikaniem myszą.
Biorąc pod uwagę, że większość wizyt w witrynie pochodzi z urządzeń mobilnych, projektanci witryn mają za zadanie dostarczyć wersje, które działają zarówno na urządzeniach przenośnych, jak i komputerach stacjonarnych. Najpopularniejszym podejściem jest korzystanie z responsywnego projektowania stron internetowych, które automatycznie dostarcza odpowiednią wersję w oparciu o urządzenie użytkownika i rozmiar ekranu wykryty przez przeglądarkę.
W każdym razie strony internetowe dostosowane do urządzeń mobilnych różnią się pod wieloma względami od wersji na komputery.
Projekt strony: ekrany mobilne mają mniej miejsca
- Wyświetlacze smartfonów i tabletów mają przekątną od 4 do 10 cali.
-
Zwijalne lub rozwijane widżety menu zwykle zastępują paski boczne i obszerne menu nagłówka.
- Grafika o pełnej szerokości z sądowym wykorzystaniem spacji między tekstami.
- Większość monitorów stacjonarnych ma przekątną od 19 do 24 cali.
- Linki sponsorowane i duże banery reklamowe są bardziej powszechne.
- Gęstszy tekst z większą ilością miejsca na grafikę.
Najbardziej oczywistą różnicą między stronami internetowymi na komputery i urządzenia mobilne jest powierzchnia ekranu. Podczas gdy większość monitorów stacjonarnych ma przekątną od co najmniej 19 cali do 24 cali, tablety mają zwykle około 10 cali. Smartfony mają około 4 cale po przekątnej. Samo pomniejszenie nie powoduje pomyślnej konwersji strony internetowej na wersję dostosowaną do urządzeń mobilnych, ponieważ sprawia, że tekst jest nieczytelny i wymaga dodatkowego kroku od odwiedzającego witrynę. Również dokładne stukanie w drobne elementy staje się niemożliwe.
Aby rozwiązać ten problem, projektanci mogą usunąć paski boczne i grafikę, które nie są absolutnie konieczne. Zamiast tego używają mniejszych grafik, zwiększają rozmiary czcionek i zwijają zawartość do rozwijanych widżetów. To ograniczenie dotyczące nieruchomości spowodowało zupełnie inny sposób myślenia wśród projektantów stron internetowych.
Ponadto zwijane lub rozwijane widżety menu zwykle zastępują paski boczne i obszerne menu nagłówka. W dążeniu do tego, aby każdy milimetr przestrzeni ekranu się liczył, projektanci usuwają zbędną białą przestrzeń, jednocześnie uważnie obserwując czytelność.
Tłum linków sponsorowanych i duże banery reklamowe po prostu nie działają na telefonie lub małym tablecie. Zamiast tego na mobilnych stronach internetowych częściej pojawiają się małe wyskakujące reklamy.
Układy zawierające tekst owinięty wokół grafiki nie działają dobrze na urządzeniach mobilnych. Zamiast tego projektanci często dają tym grafikom całą szerokość ekranu i umieszczają tekst poniżej lub powyżej. Podobnie dobry projekt strony internetowej dzieli tekst na kawałki, aby zapewnić jego czytelność; nikt nie chce czytać solidnych ścian tekstu. Staje się to jeszcze ważniejsze na małych ekranach. Rozsądne używanie spacji ma kluczowe znaczenie.
Kontrola strony: precyzja na pulpicie a mobilne obiekty blob
-
Duże obszary dotknięcia lub hotspoty dla dokładniejszej nawigacji.
- Inny adres URL: dodaje literę „m”. Często opcja przeglądania komputerowej wersji witryny.
- Poświadczenia logowania często mają wydzieloną przestrzeń, czasami z dostępem do odcisku palca.
- Bardziej precyzyjne linki i przyciski oparte na kursorze.
W przeciwieństwie do precyzyjnego wskaźnika myszy na pulpicie, ludzki palec to kropla, a stuknięcie wymaga dużych obiektów na ekranie w celu utworzenia hiperłączy. Witryny dostosowane do urządzeń mobilnych oferują duże obszary do klikania (lub hotspoty), aby ułatwić dokładną nawigację.
Strony internetowe dostosowane do urządzeń mobilnych również często zawierają literę m w swoich adresach; na przykład adres mobilny Facebooka to m.facebook.com. Mobilny adres URL jest zwykle wybierany automatycznie podczas surfowania za pomocą mobilnego tabletu lub smartfona. W niektórych przypadkach zobaczysz link, który można kliknąć, który pozwoli Ci przełączyć się na zwykłą komputerową wersję strony.
Pola logowania i hasła przeznaczone dla komputerów stacjonarnych i laptopów stają się malutkie i bezużyteczne na telefonie, więc wydawcy internetowi powiększają je, czasami udostępniając im własne strony w celu ułatwienia obsługi. Logowanie za pomocą odcisku palca lub innego konta, takiego jak Google lub Facebook, staje się coraz bardziej powszechne w miarę ewolucji możliwości urządzeń i usług.
Dlaczego to ma znaczenie?
Mobilne strony internetowe są przeznaczone dla urządzeń przenośnych i różnią się znacznie od stron przeznaczonych do czytania na komputerze. Chociaż zazwyczaj możesz wyświetlić komputerową wersję strony internetowej na urządzeniu mobilnym i odwrotnie, są one zaprojektowane w inny sposób, aby ułatwić przeglądanie, czytanie i nawigację po treści.
