Les pàgines web optimitzades per utilitzar-les en dispositius mòbils són diferents de les que apareixen als ordinadors d'escriptori i portàtils. Aquests últims estan dissenyats per a pantalles grans i fer clics precís del ratolí, mentre que les pàgines web per a mòbils tenen la mida per a pantalles més petites i per tocar els dits de manera imprecisa.
- Dissenyat per a pantalles més petites i tocs imprecisos amb els dits.
- Dissenyat per a pantalles grans amb un clic precís del ratolí.
Atès que la majoria de visites al lloc web provenen de dispositius mòbils, els dissenyadors de llocs tenen l'encàrrec de proporcionar versions que funcionin tant amb dispositius mòbils com amb ordinadors de sobretaula. L'enfocament més comú és utilitzar un disseny web responsiu, que ofereix automàticament la versió adequada segons el dispositiu de l'usuari i la mida de la pantalla, tal com detecta el navegador.
En qualsevol cas, les pàgines web adaptades per a mòbils es diferencien de les versions d'escriptori de diverses maneres.
Disseny de la pàgina: les pantalles mòbils tenen menys espai
- Les pantalles de telèfons intel·ligents i tauletes mesuren de 4 a 10 polzades en diagonal.
-
Els ginys de menú plegables o ampliables solen substituir les barres laterals i els voluminosos menús de capçalera.
- Gràfics d'amplada completa amb ús judicial de l'espai entre text.
- La majoria dels monitors d'escriptori mesuren de 19 a 24 polzades en diagonal.
- Enllaços patrocinats i anuncis de bàners grans més habituals.
- Text més dens amb més marge de maniobra per als gràfics.
La diferència més òbvia entre les pàgines web per a ordinadors i mòbils és la superfície de la pantalla. Tot i que la majoria dels monitors d'escriptori mesuren almenys entre 19 polzades i 24 polzades en diagonal, les tauletes solen tenir unes 10 polzades. Els telèfons intel·ligents tenen unes 4 polzades de diagonal. Simplement allunyar-se no converteix correctament una pàgina web en una versió adaptada per a mòbils perquè fa que el text sigui il·legible i requereix un pas addicional per part del visitant del lloc. A més, es fa impossible tocar amb precisió els elements petits.
Per solucionar el problema, els dissenyadors poden eliminar les barres laterals i els gràfics que no són estrictament necessaris. En comptes d'això, utilitzen gràfics més petits, augmenten la mida de la lletra i col·lapsen el contingut en ginys ampliables. Aquesta limitació immobiliària ha impulsat un tipus de pensament completament diferent entre els dissenyadors web.
A més, els ginys de menú plegables o ampliables solen substituir les barres laterals i els voluminosos menús de capçalera. En la seva recerca de fer que cada mil·límetre d'espai a la pantalla compti, els dissenyadors eliminen l'espai en blanc superflu, alhora que vigilen amb cura la llegibilitat.
Una multitud d'enllaços patrocinats i grans anuncis de bàner simplement no funcionen en un telèfon o una tauleta petita. En canvi, els petits anuncis emergents són més habituals a les pàgines web per a mòbils.
Els dissenys que inclouen text embolicat al voltant d'un gràfic no funcionen bé als dispositius mòbils. En canvi, els dissenyadors sovint donen a aquests gràfics tota l'amplada de la pantalla i executen el text per sota o per sobre. De la mateixa manera, un bon disseny web divideix el text en trossos per a la seva llegibilitat; ningú vol llegir parets sòlides de text. Això és encara més important a les pantalles petites. Utilitzar els espais en blanc amb criteri és crucial.
Controls de pàgina: precisió d'escriptori i blobs mòbils
- Àrees de toc grans o punts d'accés per a una navegació més precisa.
- URL diferent: afegeix la lletra "m". Sovint una opció per veure la versió d'escriptori d'un lloc.
- Les credencials d'inici de sessió solen tenir espai dedicat, de vegades amb accessibilitat amb empremtes digitals.
- Enllaços i botons basats en cursors més precisos.
A diferència d'un punter precís del ratolí a l'escriptori, el dit humà és una gota i tocar-los requereix objectius grans a la pantalla per als hiperenllaços. Els llocs adaptats per a mòbils ofereixen grans àrees de toc (o punts d'accés) per facilitar una navegació precisa.
Les pàgines web adaptades per a mòbils també inclouen habitualment la lletra m a les seves adreces; per exemple, l'adreça mòbil de Facebook és m.facebook.com. L'URL del mòbil se sol triar automàticament quan navegueu amb una tauleta mòbil o un telèfon intel·ligent. En alguns casos, veureu un enllaç que es pot tocar que us permet canviar a la versió normal d'escriptori de la pàgina.
Els camps d'inici de sessió i de contrasenya destinats a ordinadors de sobretaula i ordinadors portàtils es tornen petits i inutilitzables en un telèfon, de manera que els editors web els fan més grans i, de vegades, els ofereixen les seves pròpies pàgines per facilitar-ne l'ús. Iniciar sessió amb una empremta digital o un altre compte, com ara Google o Facebook, és cada cop més comú a mesura que evolucionen les capacitats del dispositiu i del servei.
Per què és important?
Les pàgines web per a mòbils estan dissenyades per a dispositius portàtils i són força diferents de les pàgines fetes per a la lectura d'escriptori. Tot i que normalment podeu veure la versió d'escriptori d'una pàgina web en un dispositiu mòbil, i viceversa, estan dissenyades de manera diferent per facilitar la visualització, la lectura i la navegació del contingut.
