Desarrollo Web

Que es responsive design y como usarlo

La web evoluciona constantemente. Hemos sufrido varios grandes cambios a lo largo de la vida de la misma. El diseño ha cambiado y el último cambio que estamos viviendo es uno de los más importantes, sacar la web del pc y llevarla a todo tipo de dispositivos: moviles, tablets, ¿gafas?, etc... Por tanto para ofrecer una buena experiencia de uso a los usuarios,hay que adaptarse a cualquier medio. La solución ha nacido y se llama Responsive Design

¿En que consiste Responsive Design?

Consiste en adaptar tu web a cualquier dispositivo. Esto se consigue mediante una adaptación del diseño de la página, de manera, que según varia el tamaño la resolución, el contenido se va adaptando para "llenar" la pantalla.

Para conseguir esto, se emplean una serie de técnicas css, y sobre todo el uso de los media queries. Estos nos permiten según el tamaño de la pantalla; mover, ocultar, cambiar... los distintos módulos de nuestra web para que estén adaptados siempre.

Responsive design

¿Como adaptar tu web a Responsive Design?

Para adaptar tu web puedes empezar de cero, pero si no tienes un buen conocimiento sobre ello, es aconsejable usar uno de los muchos frameworks que existen para esto. Ejemplos hay muchos como: Bootstrap, Grid, Titan, etc..

Si no deseas usarlos porque tienes un proyecto ya construido o simplemente quieres hacerlo tu de cero:

  • Las medidas fijas han muerto, debes usar en todo momento porcentajes. Todas las capas de tu web deben ser porcentuales al total de su contenedor.
  • Puedes establecer unas medidas máximas absolutas con la propiedad max-width y luego darle un width 100% si deseas que una capa no pase de un cierto tamaño.
  • Para las fuentes usa medidas en "em", con esto conseguirás una mejor adaptabilidad en las distintas resoluciones.
  • A las imágenes dales también un max-width:100, así se re-dimensionarán siempre para cualquier medida.
  • Usa media-queries.

Uso de los media queries

Uno de los elementos básicos del responsive design son los media-queries, con ellos podremos darle una apariencia u otra dependendiendo de varios factores, el más importante el tamaño de la pantalla. A continuación vemos un ejemplo sencillo donde si la resolución es menor a 750 ocultamos una capa:

@media screen and (max-width:750px){

  .capa
    {
       display:none;
    }
}

Con estos sencillos códigos las posibilidades son infinitas. Podemos ocultar contenido, moverlo, cambiar el diseño, cualquier cosa para que el resultado quede lo más adaptado posible.

Ventajas y desventajas del responsive design

  • Ventajas
    • Adaptabilidad a cualquier dispositivo sin importar su tamaño, lo que le otorga una mejor experiencia de usuario.
    • Sólo tienes un sistema de urls, por lo que no habrá problemas de contenido duplicado.
    • Para el SEO es lo recomendado por google. Con esto queda claro que es la mejor solución para adaptar tu web si necesitas posicionar tu web.
    • Sólo hay una versión que mantener, si actualizas la web solamente tendrás que actualizar una única versión.
  • Desventajas
    • Si tienes una web creada puede ser difícil o casi imposible adaptarla a esta tecnología.
    • Una de las principales pegas que le veo es el rendimiento. A día de hoy es imposible sacar una imagen u otra dependiendo de la resolución usando estas técnicas únicamente. Para poder hacerlo hay que usar programación de servidor o javascript, o emplear la misma imagen para todos los tamaños. Esto haría que el usuario móvil tenga que descargarse las mismas imágenes que desde una versión de escritorio.
    • En los navegadores antiguos no funciona, como siempre el principal problema Internet Explorer.
Si quieres leer más articulos como este, sigueme => @ander_gs
Compartir en: