Responsive Web Design Testing Tool es una herramienta online gratuita que nos permite comprobar si una página web posee un diseño adaptable (responsive design).
Esta herramienta es muy sencilla de utilizar: se introduce la URL de la página que se quiere verificar si tiene un diseño adaptable y a continuación la carga en diferentes marcos de distintos tamaños que simulan la anchura de pantalla de diferentes dispositivos.
Recordemos que un diseño web adaptable es un diseño de un sitio web que se adapta a diferentes dispositivos con el fin de lograr la mejor experiencia en cada uno de ellos.
¿Cuánto cuesta un diseño web adaptable? Está claro que algo costará, casi nada es gratis, pero quizás salga más caro no realizar un diseño web adaptable.
En How much does a responsive web design cost? intentan contestar a esta pregunta y dan algunas pautas para que la realización de un diseño web adaptable no sea muy costoso.
Que las cosas cada vez cambian más rápidamente, que la vida cada vez se acelera más, y que cada vez nos cuesta más estar al día con esos cambios es un hecho innegable.
En el mundo del desarrollo web, los cambios en las tecnologías que utilizamos fluyen sin cesar. Estamos aprendiendo los cambios de la nueva versión de XXXX y nos enteramos de que va a salir al mercado la próxima versión y las nuevas características anulan todo lo que estamos aprendiendo.
¿Qué podemos hacer? Adaptarnos y estar preparados para el cambio, aceptar el cambio como algo inherente al desarrollo web.
En el sitio web Future Friendly apuestan por ello, por el cambio, nos explican cómo adaptarse al cambio y nos dan unas pautas para aprovecharnos del cambio.
En el apartado Thinking podemos encontrar unos recursos muy interesantes, como Mobile First, donde nos dan tres razones de por qué es mejor primero desarrollar la versión móvil de una aplicación web, o Multiscreen Patterns, con consejos, pautas y estrategias para un mundo web con infinidad de dispositivos y tamaños de pantallas.
Recordad, recordad, hoy en día la gente no sólo navega desde el ordenador…
Fuente: this is the web, @brad_frost.
El diseño web adaptable (responsive web design) es un diseño de un sitio web que se adapta a diferentes dispositivos con el fin de lograr la mejor experiencia en cada uno de ellos. En los últimos años se ha extendido su uso, en especial por el acceso a la Web desde dispositivos móviles.
En el artículo Responsive Menus: Enhancing Navigation On Mobile Websites explican cómo afrontar el diseño de los menús para que sean adaptables.
Al crear un menú adaptable, nos podemos plantear las siguientes modificaciones:
En el artículo se presentan varios casos reales, como el de la empresa Compass Design.
Este es el menú que se ve en un ordenador:
Este es el menú que se ve en un iPad:
Y por último, este es el menú que se ve en un iPhone, además, el menú está situado al final de la página:
Un diseño web adaptable (en inglés, responsive web design) es aquel que se ha creado teniendo presente la posible visualización de una página web en diferentes dispositivos con diferentes tamaños y resoluciones de pantalla, con el fin de lograr la mejor experiencia en cada uno de ellos.
Aunque supone un esfuerzo adicional a la hora de desarrollar un sitio web, yo lo intento utilizar desde hace tiempo en mis sitios web (por ejemplo, Introducción a la accesibilidad web o HTML5 y CSS3 – El futuro de la programación web) y se lo recomiendo a todo el mundo.
Acabo de leer el artículo A Responsive Design Case Study, en el que se realiza un análisis de las decisiones tomadas para realizar un diseño web adaptable.
El artículo empieza con el problema actual: diseñar un sitio web para que se vea bien en pantallas desde 3,5” hasta 30” supone todo un desafío. El artículo nos presenta un sitio web, Passenger Focus, en el que se ha hecho frente a este desafío. Para comprobarlo, no tenemos más que navegar a ese sitio web y cambiar el tamaño de la ventana del navegador. Podremos comprobar que el sitio web no tiene un único diseño, sino varios, aunque con muchos elementos en común.
Por ejemplo, así se ve a 1366 píxeles de ancho:
Y así a un tamaño intermedio de 733 píxeles:
Y por último, a un tamaño más pequeño de 573 píxeles:
Interesante, ¿verdad?
Pues hay más cosas interesantes en el artículo. Por ejemplo, en esta web han desarrollado una guía de estilo, en la que se define el estilo de los encabezados, las listas, etc. ¿Hay que crear una página nueva? No pasa nada, se consulta la lista y ya se sabe lo que se tiene que hacer.
Otra curiosidad del artículo: cómo ejecutar Internet Explorer 7, 8 y 9 en Mac mediante una máquina virtual y de forma gratuita.
Y la última, Opera Mobile Emulator.
Y recordad, para que un diseño adaptable funcione correctamente en los dispositivos móviles, hay que añadir esto en el <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
Y es para muy principiantes, porque no incluye ni una sola línea de código: A Beginner’s Guide to Mobile Responsive Design. Porque en realidad, es un artículo para atraer tráfico al sitio web de la empresa cuyo negocio es vender temas de sitios web y un framework propio. Pero aunque los temas sean de pago, los podemos probar, ver su código y aprender.
Como cada vez hay más variedad de resoluciones de pantalla, cada vez se está poniendo más difícil lograr un diseño adecuado para todas las posibilidades que existen. Afortunadamente, el diseño adaptable nos permite solucionar este “gran problema”.
Acabo de visitar la web de los Imperial War Museums y me ha gustado mucho como han resuelto el rellenar el espacio vacío cuando la página se visualiza a 1920 píxeles:
Me ha gustado tanto que no me he podido resistir y necesitaba descubrir qué se escondía detrás de la zona de contenido de la página web. Aquí la imagen completa que se usa de fondo, podemos apreciar que también se le ha puesto una capa por encima para oscurecerla, lo que se escondía era la Reina Madre:
Por ahora, hay un poco de lío y en español hay diferentes formas de llamarlo. Pero lo que sí que sabemos es que en inglés se dice “responsive web design”.
Un diseño web adaptable (es el término que más me gusta y el que mejor refleja lo que es) es un diseño de un sitio web que se adapta a diferentes dispositivos con el fin de lograr la mejor experiencia en cada uno de ellos. Tradicionalmente se lograba creando diferentes versiones de un mismo sitio web (incluso hace más de 10 años había sitios web que ofrecían una versión para Netscape y otra para Internet Explorer, ¡increíble! pensará alguno), pero eso es un completo error por diferentes motivos que te dejo que pienses tú mismo. Gracias a un uso correcto de HTML y CSS, podemos tener un único sitio web (un solo HTML), pero ofrecer múltiples posibilidades de visualización (múltiples CSS).
Hasta hace unos años, la forma tradicional de ofrecer diferentes CSS era detectando en el lado del servidor las características del navegador/dispositivo del usuario que se conectaba (por ejemplo, a través del user-agent). Según las características detectadas, se devolvía al usuario un CSS particular.
Hoy en día se puede seguir utilizando esa misma técnica, pero es mucho más sencillo y práctico utilizar los “media query”. Debido a que es mucho más sencillo y cualquiera lo puede hacer, en los últimos años se ha extendido su uso, en especial por el acceso a la Web desde dispositivos móviles.
En mi entrada Un par de ejemplos de diseño responsive están enlazados un par de ejemplos muy interesantes que aplican esta técnica.
La siguiente infografía en castellano (¡por fin publicamos una infografía en castellano!) nos resume qué es el diseño web sensible: Diseño web sensible. ¿¿¿Sensible???
[Actualización 12/10/2016]
Fundeu aclaró que se debe decir diseño adaptativo:
Diseño web adaptativo, mejor que adaptable o responsivo, es la traducción más ajustada en español de la expresión inglesa responsive web design.
Esta técnica de diseño y desarrollo web busca que las páginas se adapten automáticamente al dispositivo en el que se visualizan.
En este sentido, lo apropiado en español sería hablar de adaptativo, término que significa ‘perteneciente o relativo a la adaptación o a la capacidad de adaptación’, tal como indica el Diccionario académico, pues es precisamente lo que persigue este modo de diseñar: que las webs tengan capacidad automática de adaptación al soporte.
Adaptable, sin embargo, significa ‘capaz de ser adaptado’, y carece del sentido automático de adaptativo. Una página o un diseño adaptable indicaría que da la posibilidad de que sea modificado, por ejemplo por el usuario, como una opción de configuración (ajustar el tamaño de la letra, eliminar las imágenes, etc.).