¿Sabes que es Responsive Design?

noviembre 20th, 2017

Has oído hablar miles y miles de veces acerca del término es Responsive Design,y no sabes lo que es?,  te preguntas si tu web lo es?, te vamos a explicar de una manera rápida y fácil este término, …así…para que la próxima vez que lo oigas te saldrá una sonrisilla de la cara 😉

 

Responsive Web Design: es una técnica que permite crear webs que se adaptan automáticamente al dispositivo desde el cual lo estás viendo (ordenador, portátil, tablets, móvil) , teniendo en cuenta las características concretas del dispositivo, como  el tamaño de la pantalla, la resolución, el sistema operativo(iOS, Android,…),…

 

Esta técnica de diseño y desarrollo web, permite redimensionar y colocar los elementos de tu web, ordenándolos y distribuyéndolos de forma automática de forma que se adaptan a la resolución de la  pantalla de cada dispositivo, viéndose así, correctamente en cada uno de ellos, haciendo que el usuario tenga una experiencia agradable, independientemente del dispositivo desde el que está viendo la página.

 

 

 

 

Un poco de historia rápida

Al principio, las webs estaban optimizadas para ordenadores de escritorio, fácil, era lo que había, y se hacía la web para un solo tipo.

 

Después con la aparición y la introducción de los dispositivos móviles y las tablets, se creaban diferentes versiones de la misma web,  para teléfonos, tablets y ordenadores personles,  es decir, se solía hacer dos o tres páginas, cada una configurada para los diferentes dispositivos,lo que provocaba un incremento en  el desarrollo y en el mantenimiento

 

A medida que aumentaron los tipos de dispositivos, esto se hacía inviable,… ¿que se hace? ¿ una versión para cada dispositivo nuevo que vaya apareciendo?,….imposible! Tenemos pantallas que pueden ir desde los 300píxeles a los 2000, e incluso los hay más grandes todavía….imáginate…¿qué se hace? …¿una web para un tamaño de pantalla de móvil y esa misma web la ves en una pantalla sin hacerle nada más?, …¿que pasaría? …Que se vería horrible!!

 

Por lo tanto surge una nueva técnica que ayuda a solucionar este problema: el responsive design que consiste en preparar la web  estructuralmente para que sea capaz de adaptar  todos sus contenidos en función no solo de la resolución, sino también del tipo de de dispositivo sobre el que se está viendo.

 

 

 

 

¿Cómo se hace el Responsive Design?

Esto es una parte más técnica, y con la que tampoco te queremos aburrir, …en líneas generales, …

se crea una sola website utilizando CSS3, media queries y el uso de estructuras flexibles (contenedores flexibles, imágenes y video flexibles,…), todo ello logra adaptar un sitio web al entorno en el que se encuentra.

Según el dispositivo desde el que se está accediendo,  se detecta el tipo de dispositivo, y según las media queries  muestra la versión más optimizada para ese medio, reorganizando los elementos de la web e incluso discriminando algunos de ellos (menos imágenes, redistribución de las columnas en el diseño, menos texto, etc.).

 

 

Ventajas de que tu web sea Responsive

  • Mejora la experiencia de usuario, la estructura y las imágenes son fluidas y se adaptan a cada pantalla, tanto en la navegación, como en la disposición del resto de elementos, con botones adaptados, el uso táctil del dispositivo, el tamaño de fuente apropiada, lo que permitirá una mejor lectura. Al reestructurar  los elementos de la web dependiendo del tipo de dispositivo , se optimiza  todo el espacio disponible y ofrece una excelente experiencia de usuario.

    La idea es que al cargar la página web, el usuario no tenga que realizar acciones de zoom (acercar y alejar) para encontrar el contenido, sino que baste con hacer scroll.

    Esto repercute directamente  en la opinión que los usuarios tienen de tu sitio web y el uso que darán de ella, lo que conlleva a mejorar tanto tu imagen como el tiempo de permanencia en la web

  •  

     

  • Se acabaron los contenidos duplicados. Como te dijimos antes, las webs antiguas usaban varias versiones para una misma web (la versión para Pc, para móvil, …), esto  era perjudicial para tu SEO, ya que eso creaba contenido duplicado y por lo tanto Google penalizaba a tu web. Un diseño Responsive evita este problema ya que es el mismo contenido que se organiza de manera distinta según el dispositivo en el que se vea.
  •  

  • Carga más rápida del sitio en los dispositivos portátiles, al no tener que estar cargando diferentes recursos
  • Se reducen los costes de desarrollo y mantenimiento de la web. Como ya no es necesario utilizar múltiples versiones de la misma web…al usar la misma plantilla para todas las plataformas, se reduce la inversión en mantenimiento y desarrollo, ya que un sólo cambio repercute en todas las versiones. Conlleva un nivel técnico de programación más específico al inicio de su desarrollo, pero se reducen  costes posteriores
  • Aumenta la viralidad de los contenidos. Estudios recientes demostraron que el gran aumento del uso de los dispositivos móviles para buscar información y navegar, hace mucho más fácil y rápido el que un usuario comparta una publicación que le resulte interesante, ya que por lo general, al estar navegando desde el móvil, lo más normal es que ya tenga abiertas las aplicaciones de sus redes sociales favoritas, haciendo muy sencillo el hecho de compartir

  
De ahí que esté surgiendo otro nuevo movimiento que sucede al Responsive Design, y es el Mobile First, que consiste en desarrollar la web primero para  móviles, y sobre eso, después adaptarla para que se vean en el resto de dispositivos. Esto es síntoma de hacia donde se dirigen las tendencias y la importancia de tener un sitio web desarrollado también para que se vean correctamente en los móviles

 

 

El responsive design es considerada , por lo tanto,  una de las mejores prácticas que se hacen en el diseño web.

 

 

 

¿Quieres ver de manera práctica esta explicación?, es como mejor se entiende, mira este video y podrás comprenderlo mejor 😉

 

 

 

 

 

Quieres saber si tu web es Responsive?, Google tiene una herramienta en concreto para que puedas comprobarlo, introduce la dirección de tu página y te dará los resultados

Herrramienta de google :

 

https://search.google.com/test/mobile-friendly?utm_source=mft&utm_medium=redirect&utm_campaign=mft-redirect

 

 

Tu web todavía no es responsive, …¿a qué estás esperando?, espabila!, conociéndote… sabemos que no quieres dar la imagen de que tu web es obsoleta y anticuada 😉

 

 

 

Written by: 11left, category: logo, web

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.