La importancia del diseño responsive y los errores que no puedes cometer

La importancia del diseño responsive y los errores que no puedes cometer

Carlos Yañez

01-02-2017

En los últimos años la forma que tenemos de acceder a Internet ha cambiado sustancialmente. Si en unos inicios sólo podíamos acceder desde un PC, desde la aparición de los Smartphone y las tablets nuestras opciones de acceso a Internet se han diversificado.

En el post de hoy veremos la importancia de tener diseños de páginas web adecuados a los diferentes dispositivos que pueden ser usados para acceder a la web. Es lo que se denomina diseño responsive.

 

¿Qué es el diseño responsive?

El término diseño responsive hace alusión a la técnica de diseño de páginas web que tiene como objetivo hacer que las páginas web sean flexibles, de forma que puedan adaptarse al tamaño de las diferentes pantallas de los dispositivos mediante los que el usuario puede consultar la web y, de esta forma, visitarla y leer las mismas con comodidad.

Con este tipo de diseño se independiza la web del dispositivo con el que se visualiza y, de forma automática, se ajustan las páginas para una mejor visualización de las mismas.

 

 

 

 

 

Importancia del diseño responsive

Más de una vez habremos intentado ver una página web desde nuestro Smartphone o Tablet y para visualizar su contenido de forma adecuada hemos tenido que ampliar o reducir el zoom. Esto es señal inequívoca de que no está diseñada la web de forma responsive.

Existen varios motivos por los que es importante que, si tenemos una web, la rediseñemos siguiendo técnicas responsive. Algunos de estos motivos pueden considerarse más importantes que otros, pero todos son relevantes.

Los motivos que podemos enumerar como principales, son los siguientes:

  • Multidispositivos: Quizás la razón fundamental es que cada vez más los usuarios recurren a sus Smartphones y tablets para consultar la web. Si nosotros no les facilitamos la visualización, flaco favor les hacemos.

  • Google lo tiene en cuenta: Así es, Google decidió hace algún tiempo valorar las webs con diseño responsive con mejor puntuación que las no adaptadas. Esto quiere decir que, si tu web no sigue estándares responsive, bajará posiciones en las búsquedas en Google.

  • Mejora para el usuario: Una web responsive es mucho más agradable de usar que una que no. Estos los usuarios lo valoran positivamente lo que puede tener connotaciones muy positivas en visitas. Si la web es una tienda, con más motivo aún la necesidad de una experiencia de usuario agradable, para no perder ventas.

  • Mejora en los tiempos de desarrollo: Otro punto importante es que, a nivel de desarrollo, con una versión de CSS se pueden cubrir las diferentes resoluciones de pantalla que queremos contemplar, facilitando el desarrollo.

 

Tenemos que tener presente que los diseños responsive se originaron para visualizar webs en pantallas más pequeñas que los monitores de un PC. Por este motivo, hay aspectos que tenemos que tener claro en el diseño y que os comento a continuación.

 

Errores que no debemos cometer en un diseño responsive

Son varios los aspectos a tener en cuenta cuando realizamos un diseño responsive. Los aspectos más importantes que debemos cuidar en este tipo de diseño son los siguientes:

  • Tenemos que tener en cuenta todas las posibles pantallas sobres las que se va a visualizar nuestra web. No pensemos solo en Tablets o sólo en Smartphones, consideremos todos los posibles dispositivos. Tengamos también en cuenta la posibilidad de visualizar el contenido en vertical o en horizontal. En resumen: consideremos todas las posibilidades de visualización en el diseño.

  • Dado que las pantallas son más pequeñas, no debemos perder de vista que los logos y los menús deberán adaptarse a las mismas, por lo que, para la visualización en Smartphone o Tablet, deberemos reducir el tamaño de esos logos y usar técnicas adecuadas para la visualización de los menús, como es el uso del menú hamburguesa, es decir, un botón que despliega los menús solo en modo responsive para optimizar el uso del espacio. En definitiva, adaptemos logos y menús al modo responsive.

  • Posiblemente y por el tema de los espacios disponibles en las pantallas, se deban revisar los contenidos que se publiquen en función del dispositivo para adaptarlos a los mismos. No podemos poner contenidos muy extensos en modo responsive pues no serían fácilmente leíbles. Así pues, adaptemos los contenidos a la visualización

  • No sólo deberemos adaptar el tamaño y logos y revisar contenidos, también es fundamental adaptar el tamaño de los textos. Las fuentes y tamaños a usar, no pueden ser los mismos que usemos para la versión para PC ya que el espacio es sensiblemente inferior. Así pues, adaptemos las fuentes de los textos al modo responsive.

 

Resumiendo, en modo responsive, debemos priorizar siempre que la experiencia del usuario sea satisfactoria, adaptando la visualización y los contenidos sobre otras opciones de diseño, de forma que nuestra web sea agradable y cómoda de ver en terminales móviles.

 

Si tienes una web ¿ya la has adaptado para cumplir con diseños responsive? Si la has creado con plantillas proporcionadas por una empresa, ¿has comprobado que sea responsive? Vale la pena hacerlo, y más porque Google te premiará en su posicionamiento si es responsive.

Profile picture for user Carlos Yañez
Carlos Yañez

Ingeniero Superior de Telecomunicaciones por la UPC. Director de Informática en un Laboratorio de Análisis con implantación nacional. Profesor de los cursos de Electrónica y Técnico en Sistemas Microinformaticos y Redes.