Que es un Diseño Responsivo y para qué sirve?

Diciéndolo en lenguaje coloquial, un Diseño Responsivo (o diseño web adaptable) es un diseño para una página web realizado de forma adaptiva, para que se adapte automáticamente (responsivamente) al tamaño de la pantalla del dispositivo visualizador: monitores, tablets, celulares, y otros tipos de aparátos móbiles dotados con conección de internet.

Porqué usar un Diseño Responsivo?

La idea del diseño responsivo es que con un sólo diseño, la web pueda ser mostrada de forma clara en cualquier aparato receptivo sin la necesidad de crear uno para cada tipo de pantalla. Como ejemplo podemos mencionar una web con un formato responsivo que se ve en un pc como una página normal, pero que en un móbil, se vé prácticamente como un app.

Ventajas de un Diseño Responsivo para los usuariosde la web

Si la página web es responsive, el usuario tiene la libertad de visitarla con su pc, celular, tablet, etc., sin el temor de que no se vea bién, o que la información sea muy difícil de leer en las pantallas más pequeñas.

Ventajas de un Diseño Responsivo para los dueños de webs

Un diseño responsivo generalmente es más costoso que uno normal, sin embargo, este tipo de diseños sirve frecuentemente para ahorrar la necesidad de tener que programarse un app para dicha web. Además, se incrementa generalmente el tiempo de las visitas a la web a través de móbiles, tablets, ipads, etc.., debido a que los usuarios tienen rápido e incomplicado acceso a la información de la página también desde estos aparatos receptores.

Como construir un Diseño Responsivo?

La creación de un diseño web responsivo comienza con una buena estructura de HTML, en especial, el nuevo standar HTML5, tiene buen soporte para ello. Sin embargo, lo que hasta hace poco era posible solo con la ayuda de JavaScript, es ahora también posible con CSS sólamente. Nos referimos por ejemplo al reconocer el ancho de la pantalla del dispositivo visualizador y  adaptar el diseño de la web automáticamente según dicho dato.

Una nueva técnica de CSS que es parte de CSS3 hace esto posible, es decir, Media Queries (Consultas de medios). Con esta técnica es posible preguntar las características fijas de una pantalla como el máximo ancho o la resolución, y de acuerdo a ello el diseño puede reaccionar adaptándose a dichas medidas.

Los siguientes comandos de CSS son los más empleados en la construcción de diseños responsivos:

  • Width/Height: El ancho y el alto con valores como auto, 100% o otros valores especificados en porcentajes, sirven para que el diseño (o la parte del diseño especificada) se adapte automáticamente al tamaño de la pantalla usada. 
  • max-device-width: Máximo valor de ancho en el dispositivo visualizador.
  • min-device-width: Mínimo valor de ancho en el dispositivo visualizador.
  • @media screen and (min-width: 801px) {…}: Con este comando se especifica que lo que está entre los corchetes se aplica sólo en dispositivos con pantallas con un mínimo ancho de 801px.
  • @media screen and (max-width: 800px) {…}: Con este comando se especifica que lo que está entre los corchetes se aplica sólo en dispositivos con pantallas con un máximo ancho de 800px. 

Estas son medidas en los dispositivos móbiles más usados:

  • Mobiles formato alto (320×480)
  • Mobiles formato oblongo (480×320)
  • Formato alto para Tablets pequeñas (600×800)
  • Formato oblongo para Tablets pequeñas (800×600)
  • Tablet formato alto(768×1024)
  • Tablet formato oblongo (1024×768)

Donde conseguir Diseños Responsivos gratis

En la web www.1aProjects.com puedes hallar y descargar diseños responsivos gratis. Dichos diseños web son muy profesionales, lo que hace a este sitio muy atractivo, la página está en español y tienen diseños responsivos para Webs, o para CMS como Joomla, WordPress, Drupal y otros.