Tenerife - Islas Canarias, Spain .

+34 618 900 666 admin@franciscogarcia.eu

Responsive Design o diseño adaptativo

Diseño adaptativo
Ejemplo de Responsive Design

Guardar

El Responsive Design o diseño adaptativo,

es la técnica que se usa en la actualidad para tener una misma web adaptada a las diferentes plataformas que nos brinda la tecnología: ordenador, tablet y Smartphone.

Consiste en una serie de hojas de estilo en CSS3, que usando el atributo “mediaquery” convierten una web ordinaria en una web multiplataforma capaz de adaptarse a todos los tamaños que existen.

Así podrás ofrecier una experiencia para el usuario mucho más amena y cubriendo las necesidades de nuestro público.

Atrás quedan las webs que vistas en un Smartphone se tenían que ampliar para poder leer algo.

¿Por qué tu web debería ser Responsive?

Las ventajas del Responsive Design son muchas y leyendo cuales son, seguro que te

convences para convertir tu web en una web multiplataforma:

Mejor experiencia de usuario:

Eso repercute en la opinión que los usuarios tienen de tu sitio web y el uso que le darán a ella.

Mejorará tanto tu imagen de marca como el tiempo de permanencia en la web y aumentará la tasa de rebote entre páginas de tu web.

Se acabaron los contenidos duplicados:

Si usabas una versión móvil para que los usuarios que accedían a tu web vieran el contenido adaptado al dispositivo, 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.

Se reducen los costes de desarrollo y mantenimiento de la 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.

Aumenta la viralidad:

Un reciente estudio certifica que el 70% de los accesos a las redes sociales se hacen a través de dispositivos móviles, eso significa que si un usuario accede a nuestra web a través de un Smartphone, seguramente tenga las aplicaciones sociales abiertas y si quiere compartir algo, es mucho más rápido y natural.

Por supuesto que no todo son ventajas

También hay inconvenientes, como por ejemplo, el coste de desarrollo inicial es mayor al de una web normal ya que su dificultad técnica es mayor, o que el tiempo de carga de las imágenes es mayor debido a que usa las mismas en web que en un ordenador por qué sólo escala el tamaño y no usa unas específicas. 

El Responsive Design se está generalizando a pasos agigantados y eso ha producido varios desarrolladores creen frameworks (aplicaciones preconfiguradas) para que no se tengan que crear las páginas adaptativas desde cero, nos facilitan la vida y hacen que todo el proceso de creación sea mucho más fácil para los desarrolladores.

  • Uno de los más generalizados es Bootstrap, un framework creado por el equipo de desarrollo de Twitter y de código abierto, muy usado por desarrolladores freelances. 
  • Foundation 3 es otro framework muy popular el cual ellos mismo definen como “el framework más avanzado del mundo”.
  • HTML5 Boilerplate, el framework que usan más marcas conocidas como Google, Microsoft, Nike o el equipo de desarrolladores de Barack Obama. 

Aunque se use la misma página para todas las vistas de tu web, es importante tener claro qué se debe mostrar en cada versión y qué no, ya que habrá información que no sea útil para unas vistas y otras.

Existen guías muy buenas de cómo diseñar para dispositivos móviles, como por ejemplo esta: 10 buenas prácticas en el diseño de web móviles.

Ahora que ya sabes todo lo que debes saber sobre el Responsive Design,

¿A qué esperas para convertir tu web en una web adaptativa y ser mejor que tu competencia?

¿Estás preparado?

Puedes consultar con nosotros si tu web no tiene estas característica o estás pensando diseñar una web propia.

Deja un comentario

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

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies
All original content on these pages is fingerprinted and certified by Digiprove