El diseño web receptivo o adaptable se basa en una serie de técnicas que tienen como objetivo adaptar una página web a diferentes tamaños de pantalla, plataformas y orientaciones. Consiguiendo así la adaptación de la página para teléfonos móviles, tabletas o cualquier otro dispositivo móvil.
Desde 2015 Google ha implementado cambios en su algoritmo de búsqueda que prioriza las páginas adaptables en los resultados de búsqueda sobre aquellas que carecen de esta función.
Responsive web
Contenido
El diseño web receptivo o adaptativo es una técnica de diseño web que busca la correcta visualización de una misma página en diferentes dispositivos. Desde ordenadores de sobremesa hasta tabletas y teléfonos móviles.
Hoy en día accedemos a sitios web desde todo tipo de dispositivos; ordenadores, tabletas, smartphones… así que, cada vez más, necesitamos adaptar nuestro sitio web a los diferentes tamaños de los mismos, pero ¿qué es exactamente esto?
Responsive significado
Se trata de redimensionar y colocar los elementos de la web de forma que se adapten a la anchura de cada dispositivo, permitiendo una correcta visualización y una mejor experiencia de usuario. Se caracteriza porque los layouts (contenidos) e imágenes son fluidos y se utiliza código CSS3 media-queries.
El diseño receptivo reduce el tiempo de desarrollo, evita la duplicación de contenido y aumenta la viralidad del contenido al permitir que se comparta de una manera mucho más rápida y natural.
Características de diseño sensibles
Se basa en proporcionar a todos los usuarios de un sitio web el mismo contenido y una experiencia de usuario lo más similar posible a otros enfoques de desarrollo web móvil, como la creación de aplicaciones, el cambio de nombres de dominio o sitios web servidos dinámicamente en función del dispositivo.
En resumen, el diseño web sensible se ha convertido en una de las mejores prácticas en el diseño web hoy en día. Aunque, como todos ellos, tiene sus pros y sus contras, el diseño web sensible se considera hoy en día la mejor práctica posible en el diseño web.
El diseño web adaptativo (también conocido como diseño web receptivo) es una filosofía de diseño y desarrollo cuyo objetivo es adaptar la apariencia de las páginas web al dispositivo que se utiliza para visitarlas. Hoy en día las páginas web se ven en muchos dispositivos tales como tabletas, teléfonos inteligentes, libros electrónicos, laptops, PCs, etc. Además, incluso dentro de cada tipo, cada dispositivo tiene sus características específicas: tamaño de pantalla, resolución, potencia de CPU, sistema operativo o capacidad de memoria, entre otras. Esta tecnología tiene como objetivo hacer que todo se vea bien en cualquier dispositivo con un solo diseño web.
El diseñador y autor estadounidense Ethan Marcotte creó y difundió esta técnica a partir de una serie de artículos en A List Apart, una publicación en línea especializada en diseño y desarrollo web, idea que posteriormente amplió en su libro Responsive Web Design.
Origen del diseño web adaptable
Tanto la idea como el propósito del diseño web adaptativo fueron previamente discutidos y descritos por el World Wide Web Consortium (W3C) en julio de 2008 en su recomendación de Mejores Prácticas en Web Móvil bajo el subtítulo «One Web».
Esta recomendación, aunque específica para dispositivos móviles, señala que se hace en el contexto de One Web, y por lo tanto abarca no sólo la experiencia de navegación en dispositivos móviles, sino también en dispositivos de pantalla de mayor resolución como los dispositivos de escritorio.
El concepto de Una Web se refiere a la idea de construir una’Web para Todos’ y accesible desde cualquier tipo de dispositivo (Web on Everything).
Hoy en día, la variedad de dispositivos en el mercado ha significado que la información disponible no es accesible desde todos los dispositivos, o es accesible pero con una experiencia de navegación muy pobre.
Ventajas del diseño web adaptable
El uso de dispositivos móviles ha aumentado significativamente en 2010, en particular el uso de tabletas y teléfonos inteligentes. La evolución de la navegación por Internet ha ido de la mano, y esto ha popularizado la navegación por Internet a través de una creciente variedad de dispositivos y resoluciones de pantalla, lo que a su vez ha creado la necesidad de adaptar la experiencia de navegación web a ellos.
Con una sola versión en HTML y CSS se pueden cubrir todas las resoluciones de pantalla, por lo que el sitio web se optimizará para diferentes dispositivos y resoluciones de pantalla. Esto mejora la experiencia del usuario en comparación con, por ejemplo, los sitios web de ancho fijo cuando se accede desde dispositivos móviles. Esto reduce los costes de creación y mantenimiento cuando el diseño de la pantalla es similar entre dispositivos de diferentes tamaños. También evita tener que desarrollar aplicaciones ad-hoc para cada sistema operativo móvil: iOS, Android, Windows Phone, BlackBerry OS, etc., aunque hoy en día los sitios web móviles todavía no pueden realizar las mismas funciones que las aplicaciones nativas.
Desde el punto de vista del posicionamiento en buscadores, aparecería una única URL en los resultados de búsqueda, lo que ahorraría múltiples redirecciones y los errores que de ellas se derivan. También evitaría errores en el acceso al sitio web, en particular desde los denominados enlaces sociales, es decir, desde los enlaces que los usuarios comparten en medios sociales como Facebook o Twitter, y que pueden terminar en error dependiendo del dispositivo desde el que se copió y del dispositivo desde el que se intenta acceder a ese enlace.
Funcionamiento del diseño web adaptable
El diseño web adaptable es posible gracias a la introducción de consultas de medios en las propiedades de los estilos CSS en su versión 3. Las consultas de medios son una serie de comandos que se incluyen en la hoja de estilo que le indica al documento HTML cómo debe comportarse en diferentes resoluciones de pantalla.
Para entenderlo mejor, los diseños de páginas web, al igual que los periódicos y revistas, se basan en columnas, por lo que con la filosofía del diseño adaptativo, si una web a resolución de PC (1028×768 px) tiene 5 columnas, para una tableta (800×600 píxeles) sólo necesitaría 4, y en el caso de un smartphone cuyo ancho suele estar entre 320 y 480 píxeles las columnas utilizadas serían 3.
El diseño sensible debe fluir con una adaptación constante del tamaño de los gráficos y de las estructuras de composición de un sitio web dentro de los diferentes dispositivos y tamaños de pantalla teniendo en cuenta automáticamente la disposición (vertical – horizontal) en la que se muestran los contenidos.
Imágenes de Responsive design
