Probablemente xa viu como o iPhone pode virar e expandir páxinas web. Pode mostrarche toda a páxina web dunha ollada ou achegarse para que o texto que lle interese sexa lexible. En certo sentido, posto que o iPhone usa Safari, os diseñadores web non deberían ter que facer nada especial para crear unha páxina web que funcionará no iPhone.
Pero realmente queres que a túa páxina funcione só? A maioría dos deseñadores queren brillar as súas páxinas.
Cando constrúas unha páxina web , debes pensar en quen vai velo e como o verán. Algúns dos mellores sitios teñen en conta o tipo de dispositivo que se está a ver a páxina, incluída a resolución, as opcións de cores e as funcións dispoñibles. Non basta contar co dispositivo para descubrir.
Pautas xerais para a construción dun sitio para dispositivos móbiles
- Proba en tantos dispositivos como poidas. O primeiro que debes facer é ver o teu sitio nun iPhone e tantos dispositivos móbiles ou emuladores como poidas. Mentres pode usar emuladores para todas as probas, realmente non lle dan a mesma sensación que intentar navegar a través dun sitio web na minúscula pequena pantalla, polo tanto, probar os dispositivos reais tanto como sexa posible.
- Fai que as túas páxinas degraden con graza. Podes escribir as túas páxinas para navegadores de pantalla ancha habilitados con Flash, pero asegúrate de que a información crítica sexa visible nun pequeno monitor que non pode manipular as funcións especiais (como cookies, Ajax, Flash, JavaScript, etc.). Calquera cousa máis aló do XHTML Basic estará alén dalgúns móbiles. Aínda que a maioría dos teléfonos intelixentes poden manexar todas esas cousas (excepto Flash no iPhone, por suposto), outros dispositivos móbiles non poden.
- Cree unha páxina específica sen fíos e facilite a busca. Se vai construír unha páxina específica para o teléfono móbil e os clientes sen fíos, faino dispoñible. Un bo xeito é poñer a ligazón á páxina sen fíos na parte superior do documento e, a continuación, ocultar a ligazón de dispositivos non portátiles que usan o tipo de dispositivo de man. Despois de todo, a maioría da xente chega á túa páxina de inicio, incluso nos teléfonos móbiles e, se a ligazón á túa páxina sen fíos non está alí, sairán se a páxina é moi difícil de usar.
Deseño de páxina web para teléfonos intelixentes
O primeiro que debes recordar ao escribir páxinas para o mercado de teléfonos intelixentes é que non debes facer ningún cambio se non queres. O gran aspecto da maioría dos teléfonos intelixentes dispoñibles é que utilizan navegadores Webkit (Safari en iOS e Chrome en Android) para amosar páxinas web, polo que se a súa páxina está ben en Safari ou Chrome, estará ben na maioría dos teléfonos intelixentes (só moito máis pequenos ). Pero hai cousas que podes facer para que a experiencia de navegación sexa máis agradable:
- Lembre que a pantalla é pequena. Os teléfonos intelixentes condensarán todas esas columnas cara á pequena fiestra, e isto pode facelo moi difícil de ler sen facer zoom. A maioría dos usuarios están acostumados a achegarse, pero pode resultar cansativo. Unha longa columna de texto é máis fácil de ler.
- Dividas as páxinas en anacos máis pequenos. Pode ser difícil ler segmentos longos de texto nun teléfono móbil, polo que poñelos en varias páxinas fai que sexan máis fáciles de ler.
Ligazóns e navegación en iPhones
- Canto máis curto sexan as URL, mellor. Se xa intentaches escribir unha URL nun teléfono móbil, sabes que é unha dor (agás quizais para os adolescentes que están afeitos a enviar moitas mensaxes de texto). Incluso no iPhone, é tedioso escribir longas URLs. Mantéñalles curtos.
- Pero o texto de ligazón longo é máis fácil de tocar. Cando nunha páxina onde varias palabras separadas están ligadas a artigos diferentes, xusto ao lado do outro, pode ser moi difícil tocar o correcto sen facer zoom. Moita xente só vai abandonar e ir a outro lado. As ligazóns con 3-5 palabras neles son máis fáciles de facer clic no teléfono que as ligazóns de 1 palabra.
- Non poñas a túa navegación na parte superior da pantalla. Non hai nada máis molesto que ter que pasar por pantallas e pantallas de enlaces para atopar a información que quere. Se ollaches páxinas web deseñadas para móbiles, verás que as primeiras cousas que aparecen son o contido eo título. A continuación, a continuación está a navegación.
- Non teña medo de ocultar a navegación. Ocultar ligazóns de navegación con CSS ou JavaScript e facelas aparecer só cando o usuario pide que sexa unha forma de facilitar a páxina para os usuarios de teléfonos intelixentes.
Consellos para imaxes en teléfonos intelixentes
- As imaxes deben ser pequenas. Si, Android e iPhones poden achegarse e ampliar as imaxes , pero canto máis pequenas son, en ambas as dimensións e o tempo de descarga, máis felices serán os teus clientes sen fíos. Optimizar as imaxes sempre é unha boa idea, pero para páxinas de teléfonos móbiles, é fundamental.
- As imaxes deben descargarse rapidamente. As imaxes ocupan moito espazo nas páxinas web cando o estás a ver desde un dispositivo móbil. E, aínda que moitas veces son moi agradables e fan que as páxinas se vexan mellor cando se visualizan nun navegador web de pantalla completa, adoitan atravesar un dispositivo móbil. Ademais, cando un usuario de smartphones está na rede móbil, a última cousa que queren pagar é descargar unha morea de imaxes enormes ou iconas de navegación.
- Non coloque imaxes grandes na parte superior da páxina. Do mesmo xeito que coa navegación, pode ser moi tedioso agardar por unha imaxe que ocupe 3-4 pantallas para cargar na parte superior da páxina. E isto é moi común nas páxinas web. A única excepción a isto é se o lector sabe que van a obter unha imaxe cando preme, digamos nunha galería de fotos.
Que evitar ao deseñar para móbil
Hai moitas cousas que debes evitar ao construír unha páxina amigable para móbil. Como se mencionou anteriormente, se realmente quere ter estes na súa páxina, pode, pero asegúrese de que o sitio funciona sen eles.
- Flash: a maioría dos teléfonos móbiles non admiten Flash, polo que non é unha boa idea incluílo nas súas páxinas sen fíos.
- Cookies: moitos teléfonos móbiles non teñen soporte para cookies. Os iPhones teñen soporte para cookies.
- Marcos - aínda que o navegador o admita, pensa nas dimensións da pantalla. Os marcos só non funcionan nos dispositivos móbiles: son moi difíciles ou imposibles de ler.
- Táboas - non use táboas para o deseño nunha páxina móbil. E intenta evitar as táboas en xeral. Non son compatibles con todos os móbiles (aínda que os iPhones e outros smartphones soportan) e pode acabar con resultados estraños.
- Táboas aniñadas: se ten que usar unha táboa, asegúrese de non anidar noutra táboa. Estes son difíciles para os navegadores de escritorio compatibles e, no mellor dos casos, fan que a páxina cargue máis lentamente.
- Medidas absolutas: noutras palabras, non definimos as dimensións dos obxectos en tamaños absolutos (como píxeles, milímetros ou polegadas). Se define algo como 100px de ancho, nun dispositivo móbil que pode ser a metade da pantalla e noutro pode ser dúas veces o ancho. Os tamaños relativos (como ems e porcentaxes) funcionan mellor.
- Fontes: non supoña que algunha das fontes ás que estea afeita ter acceso estará dispoñible nos teléfonos móbiles.
Le máis
- Como facer que o seu sitio web sexa móbil agradable usando PHP