A mobileszközökön való használatra optimalizált weboldalak eltérnek az asztali számítógépeken és laptopokon megjelenő oldalaktól. Utóbbiakat nagy képernyőkre és precíz egérkattintásra tervezték, míg a mobilweboldalakat kisebb képernyőkre és pontatlan ujjal való koppintásra méretezték.
- Kisebb képernyőkhöz és pontatlan koppintáshoz tervezve.
- Nagy képernyőkre tervezve, pontos egérkattintással.
Tekintettel arra, hogy a webhelylátogatások többsége mobileszközökről érkezik, a webhelytervezők feladata olyan verziók biztosítása, amelyek mobileszközökkel és asztali számítógépekkel is működnek. A legelterjedtebb megközelítés az adaptív webdizájn használata, amely automatikusan a megfelelő verziót jeleníti meg a felhasználó eszköze és képernyőmérete alapján, ahogy azt a böngésző észleli.
A mobilbarát weboldalak több szempontból is különböznek az asztali verzióktól.
Old altervezés: Kevesebb hely a mobil képernyőjén
- Az okostelefonok és táblagépek kijelzőinek átlós mérete 4-10 hüvelyk.
- Az összecsukható vagy kibontható menümodulok általában helyettesítik az oldalsávokat és a terjedelmes fejlécmenüket.
-
Teljes szélességű grafika a szöveg közötti hely megfelelő kihasználásával.
- A legtöbb asztali monitor átlósan 19 hüvelyk és 24 hüvelyk közötti.
- Gyakoribbak a szponzorált linkek és a nagyméretű szalaghirdetések.
- Sűrűbb szöveg nagyobb mozgástérrel a grafikák számára.
A legnyilvánvalóbb különbség az asztali és mobil weboldalak között a képernyő tulajdonságai. Míg a legtöbb asztali monitor átlósan legalább 19 hüvelyk és 24 hüvelyk között van, a táblagépek általában 10 hüvelyk körül vannak. Az okostelefonok körülbelül 4 hüvelyk átlósak. Az egyszerű kicsinyítés nem konvertálja sikeresen a webold alt mobilbarát verzióra, mert olvashatatlanná teszi a szöveget, és plusz lépést igényel az oldal látogatójától. Ezenkívül lehetetlenné válik az apró elemek pontos megérintése.
A probléma megoldása érdekében a tervezők eltávolíthatják a nem feltétlenül szükséges oldalsávokat és grafikákat. Ehelyett kisebb grafikákat használnak, növelik a betűméretet, és a tartalmat kibontható widgetekbe csukják össze. Ez az ingatlankorlátozás egészen másfajta gondolkodást váltott ki a webdesignerek körében.
Az összecsukható vagy kibontható menümodulok általában helyettesítik az oldalsávokat és a terjedelmes fejlécmenüket. Annak érdekében, hogy a képernyőterület minden millimétere számítson, a tervezők eltávolítják a felesleges fehér részeket, miközben gondosan ügyelnek az olvashatóságra.
A szponzorált linkek és a nagy szalaghirdetések tömege egyszerűen nem működik telefonon vagy kis táblagépen. Ehelyett a kisméretű pop-up hirdetések gyakoribbak a mobilweboldalakon.
Azok az elrendezések, amelyek egy grafika köré szöveget tartalmaznak, nem játszanak jól mobileszközökön. Ehelyett a tervezők gyakran a képernyő teljes szélességében megadják ezeket a grafikákat, és a szöveget alatta vagy felett futtatják. Hasonlóképpen, a jó webdizájn az olvashatóság érdekében darabokra bontja a szöveget; senki sem akar tömör szövegfalakat olvasni. Ez még fontosabbá válik kis képernyőkön. A szóközök megfontolt használata kulcsfontosságú.
Oldalvezérlők: Desktop Precision vs. Mobile Blobs
-
Nagy érintési területek vagy hotspotok a pontosabb navigáció érdekében.
- Eltérő URL: hozzáadja az "m" betűt. Gyakran lehetőség nyílik egy webhely asztali verziójának megtekintésére.
- A bejelentkezési hitelesítő adatokhoz gyakran van külön hely, néha ujjlenyomat-hozzáféréssel.
- Pontosabb kurzoralapú hivatkozások és gombok.
Az asztalon lévő precíz egérmutatóval ellentétben az emberi ujj egy folt, és a koppintáshoz nagy célpontokra van szükség a képernyőn a hiperhivatkozásokhoz. A mobilbarát webhelyek nagy érintési területeket (vagy hotspotokat) kínálnak a pontos navigáció megkönnyítése érdekében.
A mobilbarát weboldalak címében is gyakran szerepel az m betű; például a Facebook mobilcíme m.facebook.com. A mobil URL-t általában automatikusan választja ki Önnek a rendszer, amikor mobil táblagéppel vagy okostelefonnal böngészik. Egyes esetekben megjelenik egy koppintható hivatkozás, amely lehetővé teszi, hogy átváltson az oldal normál asztali verziójára.
Az asztali számítógépekhez és laptopokhoz szánt bejelentkezési és jelszómezők aprókká és használhatatlanná válnak a telefonon, ezért a webes megjelenítők ezeket nagyobbra teszik, és néha saját oldalakat adnak nekik a könnyebb használat érdekében. Az ujjlenyomattal vagy más fiókkal, például Google- vagy Facebook-fiókkal való bejelentkezés egyre gyakoribb, ahogy az eszközök és a szolgáltatások képességei fejlődnek.
Miért számít?
A mobil weboldalak kézi eszközökhöz készültek, és nagyon különböznek az asztali olvasáshoz készült oldalaktól. Bár általában megtekintheti a weboldalak asztali verzióját mobileszközön, és fordítva, másképpen tervezték őket, hogy megkönnyítsék a tartalom megtekintését, olvashatóságát és navigálását.
