Programación web, Drupal, Wordpress y ¡Mucho más!

Aprende a programar y diseñar una página web gracias a los trucos y tutoriales que ofrecemos en nuestro sitio.

sábado, 27 de octubre de 2012

La importancia del diseño adaptativo de páginas web para dispositivos móviles y tablets

Cada día es más común estar en nuestros sofás navegando en Internet con un dispositivo móvil o tablet en nuestras manos, y es que la tecnología de teléfonos móviles y tablets están sufriendo un cambio radical en la última década.

Existen ciertas estadísticas las cuales revelan que el uso de estos aparatos se está realizando cada vez con más frecuencia dejando atrás poco a poco a los ordenadores. No hay que ir mucho más lejos para comprobar esto, simplemente con entrar a Google Analytics y comprobar cómo va subiendo las visitas por dispositivos móviles. ¿Será por la comodidad que esto supone?
Lo que sí que debemos tener muy claro es que esta arrancando una nueva era tecnológica y que en el futuro será algo muy normal trabajar únicamente con teléfonos móviles, por eso mismo debemos tener muy en cuenta que el diseño que hagamos a una página web debe obligatóriamente adaptarse a estos dispositivos.

¿Cómo podemos adaptar nuestra web a otras resoluciones de pantalla?
La verdad es que existen muchas maneras de hacerlo, hay personas que dicen que la mejor manera es hacer el tamaño de la página web mediante porcentajes de tal manera que se adapte a todas pantallas.
Personalmente pienso que lo mejor es tener dos plantillas distintas (CSS, HTML etc.. adaptado a cada una de ellas), una para ordenadores de toda la vida y otra para dispositivos con menor resolución, teniendo estos dos temas lo único que tendríamos que realizar es una redirección a la plantilla adaptada a dispositivos móviles para cuando alguien acceda desde los mismos, para realizar esa redirección tendríamos que hacerlo desde el archivo .htaccess añadiendo unas líneas de código muy sencillas las cuales podréis encontrar en numerosas búsquedas de Google.
Etiqueta Meta Viewpor Tag
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Esta meta etiqueta nos permite configurar el ancho a escala del contenido que se mostrará de nuestra página web en el navegador.
Introdúcela antes del <head>
No uses flash
El flash es uno de los principales enemigos de los dispositivos móviles y tablets, el iPad 2 tenía muchos problemas en compatibilidad con flash, ya que este no se reproducía al entrar a una página web, por lo tanto evita usar flash en tus páginas web por los siguientes motivos:
  1. Por falta de compatibilidad.
  2. Por temas de posicionamiento (Google no es capaz de leer una web en flash)

7 comentarios:

  1. Excelente articulo, una sugerencia: la pagina debería responder al titulo del articulo, saludos...

    ResponderEliminar
  2. tengo mi pagina hecha con flash. ¿hay algún modo de adaptarla a los dispositivos moviles a raiz de la misma pagina? gracias

    ResponderEliminar
  3. La importancia del diseño adaptativo de páginas web para dispositivos móviles y tablets, aporte valioso. Me encanta vuestra web. marketing online http://www.granota.net/index.php/marketing-online/posicionamiento-seo.html

    ResponderEliminar
  4. La importancia del diseño adaptativo de páginas web para dispositivos móviles y tablets, ¿Puedes aportar más?, me resulta didactico esta informacion. Saludos.

    ResponderEliminar
  5. Hola Geli, lamentablemente el flash, es un problema con el que se encuentran los móviles y tablets...Cuando yo tengo un trabajo de realizar una página web, NUNCA se me pasa por la cabeza hacerla en flash, el flash es muy bonito...pero no va a ser siempre 100% compatible con dispositivos y navegadores, por lo cual debes elegir entre, "elegancia" o compatibilidad...

    ResponderEliminar
  6. Por supuesto, ponte en contado contigo a través de info@studiosweb.es e intentaré resolver tus dudas.

    ResponderEliminar
  7. Me alegro. Un saludo

    ResponderEliminar