Páginas Responsivas. Web adaptadas a los diferentes dispositivos móviles.

Últimamente es común encontrar buceando por Internet la expresión “Web responsiva” o “Web adaptada a diferentes dispositivos“. Queríamos dedicarle un pequeño espacio a aclarar que es esto de las webs responsivas y, sobre todo, si es importante que nuestra web se adapte a diferentes tipos de dispositivos o es más bien una moda pasajera que hemos de dejar correr.

¿Qué es una página responsiva o una página adaptada a dispositivos móviles?

web responsiva

Una web responsiva es una web que se visualiza correctamente en los diferentes dispositivos, da igual el tamaño de la pantalla. Esa visualización no es igual en una pantalla de un monitor que en una  pantalla de un teléfono o tablet. es decir, la web reacciona diferente según el dispositivo que la está mostrando.

Esto nos permite leer cómodamente la web independientemente del dispositivo o aparato que estemos usando. Si usamos un teléfono pequeño no tendremos incómodas barras para movernos a derecha e izquierda, sino que el contenido se mostrará en vertical y será muy cómoda su visualización.

¿Es importante que nuestra web sea responsiva?

En el momento que vivimos actualmente no es que sea importante, es que es fundamental. Millones de personas tienen actualmente tablets y smartphones o teléfonos inteligentes, y gran cantidad de personas accederán a nuestra página a través de dispositivos diferentes al ordenador.

Si una persona entra con un dispositivo y le cuesta ver nuestra web, casi automáticamente buscará otra opción. Por eso es primordial que el usuario visualice correctamente nuestra información. Para ello la única solución es que nuestra web se adapte a los diferentes dispositivos.

Así es que si tienes una web (!o un blog!) de un negocio, de una entidad, institución… da igual de que, es aconsejable que sea responsiva

¿Se hacen dos web diferentes?

Aquí hay dos opciones diferentes:

– Páginas Independientes. Habréis visto que algunas páginas tienen una opción “Versión Móvil”. Esta opción suele mostrarse cuando se accede con un dispositivo móvil exclusivamente. En este tipo de páginas hay dos desarrollos, una página web normal y otra adaptada a dispositivos móviles.

En este caso normalmente la página adaptada a dispositivos móviles contiene menos información que la página web “madre”, y suele contener información dinámica como noticias, ultima hora… Algunos ejemplo de este tipo de páginas:

Ejemplos de web independientes

– Página responsiva. Otra opción más completa es que la misma página se adapte al dispositivo según el tamaño. Hay varias opciones, aunque lo más común es que según la pantalla vaya siendo más pequeña se vaya estrechando la web. En este caso suelen ocurrir diversas cosas:

  • El contenido principal de la página se adapta al ancho de la pantalla (textos, imágenes, vídeos…)
  • Los diferentes bloques de contenido se van reorganizando, pasando a tomar nuevas posiciones. Por ejemplo, si tenemos una barra lateral, al estrecharse la pantalla los elementos que en ella estaba (como widget, textos, enlaces…) pasan a la parte inferior de la web, de manera que el contenido se ve primero y posteriormente se ven estas secciones
  • El  menú pasa a sel un combo de selección. De esta manera se  puede tener un menú complejo con muy poco espacio
  • Desaparecen elementos superfluos que puedan rellenar demasiado contenido en la cabecera o en la página.

Con todo esto tenemos una web que se adapta perfectamente a cada dispositivo. Algunos ejemplos de estas páginas pueden ser:

Colegio Oficial de Trabajadores Sociales de Madrid

Ara Adaptaciones

2015 y más

 

Truco: Si estáis viendo esto con un ordenador, podéis ver como se adaptan haciendo más pequeña vuestra pantalla del navegador (pulsando en el botón “Minimizar tamaño” en la parte superior derecha del navegador y luego haciendo  más grande y más pequeña la pantalla).

Truco: Podéis también ver como se ve una web en dispositivos móviles diferentes en http://www.responsinator.com/, por ejemplo http://www.responsinator.com/?url=www.comtrabajosocial.com

¿Cómo se  hace una web responsiva?

Para ello los desarrolladores incluimos una serie de lineas de código que nos permiten detectar el tipo de dispositivo que está mostrando la web y, según sea este, ofrecer la web adaptada a este tamaño concreto. En una próxima entrega os contaremos como se incluye este código,  quien suele hacerlo y que puedes hacer si tienes una web no responsiva y quieres adaptarla

Etiquetado con: , ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*