Diseño web adaptable y responsive

ejemplo de diseño web adaptativo

Las cosas eran más sencillas antes de que pudiéramos tener Internet en los teléfonos móviles y las tabletas. Tener una presencia en línea significaba diseñar un sitio web que sólo tuviera que visualizarse en la pantalla de un ordenador de sobremesa, y tal vez de un portátil. Ahora, sin embargo, hay que tener en cuenta una plétora de tamaños de pantalla, desde las pantallas más grandes de ordenadores de sobremesa y portátiles hasta las pantallas más pequeñas de teléfonos móviles y tabletas, sobre todo porque, si una página web no se muestra correctamente en una pantalla determinada, el usuario pasará rápidamente a otra.

Existen dos enfoques para garantizar que un sitio web esté optimizado para pantallas de móviles, tabletas, portátiles y PC: el diseño responsivo y el diseño adaptativo. Aunque ambos pretenden resolver el mismo problema, utilizan estrategias diferentes.

Los desarrolladores utilizan CSS para asegurarse de que cada página del sitio puede cambiar de formato en función del tamaño de la ventana gráfica del usuario y sólo tienen que crear una base de código para el sitio. Utilizan algo llamado puntos de ruptura para indicar al sitio cuándo debe ajustarse para adaptarse a los diferentes tamaños de pantalla.

¿El resultado? El mismo sitio puede tener un diseño de cuatro columnas en una pantalla grande de ordenador de sobremesa, un diseño de tres columnas en una pantalla más pequeña de ordenador portátil, un diseño de dos columnas en una pantalla de tableta y un diseño de una sola columna en un teléfono móvil. Sea cual sea el dispositivo en el que vea un sitio web responsivo, encontrará el mismo contenido y diseño básicos.

tamaños de pantalla de diseño responsivo

Esta es una pregunta que surge con más regularidad de lo que cabría esperar. La vemos en los foros de CSS-Tricks de vez en cuando. También es una pregunta común que me hacen cuando doy clases de introducción al diseño web.

El diseño web responsivo se ha convertido en un término familiar desde que fue acuñado por Ethan Marcotte en A List Apart en 2010; tanto que podemos dar por sentado que lo entendemos. El concepto de un sitio web responsivo es uno de los mayores «trucos» de CSS en los libros y lo suficientemente importante como para dar un paso atrás con el fin de recordar lo que hace que un sitio web «responsivo» y cómo es diferente de uno «adaptativo».

Otra forma de pensar en ello es la diferencia entre un diseño suave y uno adaptable. El diseño responsivo es suave porque el diseño se ajusta con fluidez independientemente del dispositivo en el que se vea. El diseño adaptativo, por el contrario, se ajusta porque la página sirve algo diferente debido al navegador o al dispositivo en el que se ve. Esta animación ilustra la diferencia de comportamiento:

ejemplos de diseño responsivo

El diseño web es un campo en constante cambio que siempre está desarrollando nuevos y mejores métodos. Si piensa en la década de 2000, probablemente recuerde sitios web estáticos y con mucho texto. En aquella época, sólo pensábamos en crear un sitio para un tamaño de pantalla porque los ordenadores de sobremesa eran el único tipo con el que interactuábamos.

Supongamos que un restaurante decide utilizar el diseño adaptativo para su sitio. Saben que las personas que llegan a su sitio en su dispositivo móvil suelen mirar la ubicación del restaurante o incluso el menú para ver si es un lugar al que les gustaría ir. Pero un usuario que llega al sitio en un ordenador de sobremesa o en un portátil podría estar buscando más información de fondo, ya que es más probable que esté en la etapa de conocimiento. Con un diseño adaptativo, puedes mostrar diferentes contenidos en la página de inicio en función de la pantalla en la que se encuentre el usuario. Contras

Diseño de sitio web responsivo Un sitio responsivo se construye sobre una cuadrícula flexible, de modo que si el usuario está en un escritorio, una tableta o un dispositivo móvil, los elementos de su sitio permanecen constantes y se alinean en esa cuadrícula. Por ejemplo, un diseño de escritorio suele estar en una cuadrícula de 12 columnas, una tableta utilizaría de 4 a 8 columnas, y el teléfono se muestra en una sola columna. A medida que las pantallas disminuyen de tamaño, los elementos se apilan unos sobre otros. Se puede pensar en ello como si el agua adoptara la forma de su recipiente.    Ventajas y desventajas del diseño web responsivo Ventajas

diseño responsivo

El mundo del diseño web ha cambiado bastante a lo largo de los años. A medida que sigue evolucionando, el diseño apto para móviles se ha convertido en la norma y no en la excepción. Cuando se trata de elegir el diseño adecuado para móviles para su sitio web, hay una serie de factores a tener en cuenta.

Los sitios web solían construirse con dimensiones fijas. Se podían ver en una pantalla más pequeña, pero en realidad sólo estaban pensadas para ser vistas en una pantalla de escritorio. Hoy en día, los visitantes de un sitio web necesitan poder acceder a una versión funcional (e, idealmente, bonita) de su sitio en cualquier dispositivo que tengan a su alcance. Como resultado, se han desarrollado tres opciones de diseño web: el diseño responsivo, el adaptativo y el fluido. Aunque estos estilos de diseño web tienen características similares, cada uno de ellos tiene ventajas y desventajas únicas que pueden ayudarle a decidir cuál es el adecuado para su próximo sitio web o su rediseño.

Puntos de corte CSS: Los diferentes anchos en los que un sitio web se «rompe» en diferentes vistas responsivas. En este ejemplo de abajo puedes ver cuatro puntos de ruptura diferentes para el sitio de Pack. Los puntos de ruptura se realizan mediante una consulta de medios en CSS.