És probable que hàgiu vist com l'iPhone pot girar i expandir pàgines web. Podeu mostrar tota la pàgina web d'un cop d'ull o fer zoom perquè el text que us interessi sigui llegible. En certa manera, ja que l'iPhone utilitza Safari, els dissenyadors web no haurien de fer res especial per crear una pàgina web que funcioni a l'iPhone.
Però, realment, voleu que la vostra pàgina funcioni? La majoria dels dissenyadors volen que les seves pàgines brillin.
Quan creeu una pàgina web , heu de pensar en qui ho veurà i com ho veurà. Alguns dels millors llocs tenen en compte el tipus de dispositiu que es visualitza la pàgina, inclosa la resolució, les opcions de color i les funcions disponibles. No només confien en el dispositiu per esbrinar-lo.
Directrius generals per a la construcció d'un lloc per a dispositius mòbils
- Proveu tant dispositius com puguis. El primer que has de fer és veure el teu lloc en un iPhone i en la major quantitat de dispositius mòbils o emuladors que puguis. Tot i que podeu utilitzar emuladors per a totes les proves, realment no us donen la mateixa sensació que intentar navegar per un lloc web a la minúscula pantalla petita, així que proveu-ho amb els dispositius reals tant com sigui possible.
- Feu que les vostres pàgines es degradin amb gràcia. Podeu escriure les vostres pàgines per a navegadors de pantalla ampla habilitades per Flash, però assegureu-vos que la informació crítica sigui visible fins i tot en un petit monitor que no pugui gestionar cap característica especial (com ara galetes, Ajax, Flash, JavaScript, etc.). Qualsevol cosa més enllà de l'XHTML Basic serà més enllà d'alguns telèfons mòbils. Tot i que la majoria dels telèfons intel·ligents poden gestionar totes aquestes coses (excepte Flash a l'iPhone, és clar), altres dispositius mòbils no poden fer-ho.
- Creeu una pàgina específica sense fils i feu que sigui fàcil de trobar. Si voleu crear una pàgina específica per al vostre telèfon mòbil i per als clients sense fil, feu que estigui disponible. Una manera fantàstica és posar l'enllaç a la pàgina sense fil a la part superior del document i, a continuació, ocultar aquest enllaç des de dispositius no portàtils que utilitzin el tipus de suport de mà. Després de tot, la majoria de la gent arriba a la vostra pàgina d'inici, fins i tot a telèfons mòbils, i si l'enllaç a la vostra pàgina sense fil no hi és, sortirà si la pàgina no és tan difícil d'utilitzar.
Disseny de pàgina web per a telèfons intel·ligents
El primer que heu de recordar quan escriviu pàgines per al mercat dels telèfons intel·ligents és que no heu de fer cap canvi si no voleu. El millor de la majoria dels telèfons intel·ligents disponibles és que utilitzen navegadors Webkit (Safari a iOS i Chrome a Android) per mostrar pàgines web, de manera que si la vostra pàgina es veu bé en Safari o Chrome, es veurà bé en la majoria dels telèfons intel·ligents (només molt més petits ). Però hi ha coses que podeu fer perquè l'experiència de navegació sigui més agradable:
- Recordeu que la pantalla és petita. Els telèfons intel·ligents condensarán totes aquestes columnes a la finestra petita, i això pot fer-les molt difícils de llegir sense fer zoom. La majoria d'usuaris s'utilitzen per fer zoom, però es pot tornar cansat. Una llarga columna de text és més fàcil de llegir.
- Dividiu pàgines en trossos més petits. Pot ser difícil llegir segments llargs de text en un telèfon mòbil, de manera que posar-los en diverses pàgines els fa més fàcils de llegir.
Enllaços i Navegació en iPhones
- Com més curts siguin els URL, millor. Si alguna vegada ha intentat escriure una URL en un telèfon mòbil, sabrà que és un dolor (excepte potser per als adolescents que solen enviar molts missatges de text). Fins i tot a l'iPhone, és tediós escriure URL llargues. Mantingueu-los curts.
- Però el text de l'enllaç llarg és més fàcil de tocar. Quan en una pàgina on diverses paraules separades estiguin enllaçades a diferents articles, tots al costat de l'altre, pot ser molt difícil tocar el correcte sense fer zoom. Molta gent acaba de renunciar i anar a un altre lloc. Els enllaços amb 3-5 paraules en ells són més fàcils de fer clic al telèfon que a un enllaç de paraula.
- No col·loqueu la vostra navegació a la part superior de la pantalla. No hi ha res més molest que haver de passar per pantalles i pantalles d'enllaços per trobar la informació que desitgeu. Si heu mirat pàgines web dissenyades per a telèfons mòbils, veureu que els primers que apareixen són el contingut i el títol. A continuació, sota aquesta és la navegació.
- No tingueu por d'ocultar la vostra navegació. Ocultar enllaços de navegació amb CSS o JavaScript i fer que apareguin només quan l'usuari ho sol·liciti és una manera de facilitar la pàgina als usuaris de telèfons intel·ligents.
Consells per a imatges en els Smartphones
- Les imatges han de ser petites. Sí, Android i iPhones poden augmentar i fer zoom a les imatges , però com més petit siguin, en les dues dimensions i el temps de descàrrega, més feliços seran els vostres clients sense fils. L'optimització de les imatges sempre és una bona idea, però per a les pàgines del mòbil, és fonamental.
- Les imatges s'han de baixar ràpidament. Les imatges ocupen molta espai a les pàgines web quan les visualitzeu des d'un dispositiu mòbil. I tot i que sovint són molt boniques i fan que les pàgines es vegin millor quan es vegin en un navegador web de pantalla completa, sovint s'interposen en un dispositiu mòbil. A més, quan un usuari de telèfon intel·ligent està a la xarxa cel lular, l'últim que vol pagar és descarregar un munt d'imatges grans o icones de navegació.
- No col·loqueu imatges grans a la part superior de la pàgina. Igual que amb la navegació, pot ser molt tediós esperar una imatge que ocupe 3-4 pantalles per carregar a la part superior de la pàgina. I això és extremadament comú a les pàgines web. L'única excepció a això és si el lector sap que aniran a obtenir una imatge quan facin clic, per exemple, en una galeria de fotos.
Què s'ha d'evitar al dissenyar per a mòbils
Hi ha diverses coses que cal evitar quan es crea una pàgina compatible amb el mòbil. Com s'ha esmentat anteriorment, si realment voleu tenir-los a la vostra pàgina, podeu, però assegureu-vos que el lloc funcioni sense ells.
- Flash: la majoria de telèfons mòbils no admeten Flash, pel que no és una bona idea incloure-la a les vostres pàgines sense fils.
- Galetes: molts telèfons mòbils no tenen suport per a galetes. Els iPhones tenen suport per a cookies.
- Marcs: fins i tot si el navegador els admet, pensa en les dimensions de la pantalla. Els marcs només no funcionen en dispositius mòbils: són molt difícils o impossibles de llegir.
- Taules: no feu servir taules per a la presentació en una pàgina mòbil. I intenta evitar taules en general. No són compatibles amb tots els telèfons mòbils (encara que els iPhones i altres telèfons intel·ligents els admeten) i podeu acabar amb resultats estranys.
- Taules anidadas: si heu d'utilitzar una taula, assegureu-vos de no nidificar-la en una altra taula. Aquests són difícils per als navegadors d'escriptori, i, en el millor dels casos, fan que la pàgina es carregui més lentament.
- Les mesures absolutes, és a dir, no defineixen les dimensions dels objectes en mides absolutes (píxels, mil·límetres o polzades). Si definiu alguna cosa com 100px d'ample, en un dispositiu mòbil que podria estar a la meitat de la pantalla i en un altre, podria ser dues vegades l'amplada. Les mides relatives (com ems i percentatges) funcionen millor.
- Fonts: no assumeixi que qualsevol dels tipus de lletra als que acostumes tenir accés estarà disponible als telèfons mòbils.
Llegeix més
- Com fer que el vostre lloc web sigui compatible amb mòbils mitjançant PHP