Responsive Design

Home / Diseño / Responsive Design

Responsive Design

Para comenzar…

¿Qué es el Responsive Design?

Se trata de una técnica de diseño y desarrollo de sitios y aplicaciones web que permite que las páginas se adapten al tamaño, la resolución y orientación de la pantalla, y por tanto al dispositivo del usuario. Con este tipo de diseño no se necesita tener una versión para cada dispositivo, ya que una sola web se adapta a todos ellos. Y todo ello con un código único, una única página, una única URL.

Debido a la abundacia de smartphones y tablets en el mercado, nos encontramos con más diversidad que nunca de formatos de pantalla.  Todo ello obliga a adaptar los formatos web a estos nuevos dispositivos y la estructura de cada uno de ellos.

 

¿Cómo se hace?

Esta flexibilidad se consigue mediante el uso de un código HTML único pero que se presenta de manera diferente gracias a:

  • La separación entre el contenido y la presentación:todos los estilos están definidos en las CSS.
  • Layoutsbasados en grids: la información se organiza en ejes verticales y horizontales. Tendremos definidos diferentes layouts en diferentes CSS, por ejemplo uno de 3 columnas, uno de 2 columnas y uno de 1 columna.
  • Fluids Grids, es decir, el uso de medidas relativas que permitan que el contenido se pueda adaptar realmente como se ve en la imagen anterior. Permite utilizar todo el espacio disponible y evitar el desplazamiento horizontal.
  • Media Queries, permite cargar dinámicamente las diferentes CSS que hemos definido en función del tamaño de pantalla, su resolución o su orientación.
  • Configuración del meta viewport: mediante este meta indicamos que nuestra web es flexible para adaptarse a los diferentes anchos y resoluciones de pantalla, le indicamos al navegador que no aumente o reduzca la página, que use el zoom por defecto.
  • Imágenes y vídeos de tamaño flexible, que también se adapten al espacio disponible. Se puede conseguir de diferentes maneras, cada una con sus ventajas e inconvenientes. Más adelante hablaré de cómo algunas de ellas tienen implicaciones en la accesibilidad de la página.

 

¿Cómo funciona el Responsive Web Design?

En lugar de construir una web para cada tipo de dispositivo (smartphone, tablet, ordenador, …) como hemos comentado anteriormente, se crea una sola y de esta forma, la web detecta desde qué clase de dispositivo está accediendo el usuario y muestra la versión más optimizada para ese medio, reorganizando a la vez los elementos.

Resumiendo todo lo comentado en el artículo, podríamos decir que con el Responsive Design son todo ventajas.

Estamos hablando de una manera fácil de manejar, porque al trabajar con una sola web, los resultados serán los mismos en todas las plataformas sin deformaciones de imágenes o texto.

Y por último, en cuanto al posicionamiento, una web creada con Responsive Design, mejora el SEO.

Hasta el próximo día!

Share to Facebook
Share to Google Plus
Recent Posts

Deja un comentario

Contacto

info@thecreativestudio.es

captcha txt

Start typing and press Enter to search

Social Media Icon3