La misma URL pero con un aspecto diferente
Abres en tu smartphone un sitio web que estabas viendo en el ordenador y el diseño es completamente distinto. El menú se convierte en un icono de hamburguesa (tres líneas), las imágenes cambian de tamaño y el texto tiene un tamaño diferente. Si es la misma URL, ¿por qué cambia tanto el aspecto?
La respuesta es una tecnología llamada "diseño responsivo".
Cómo funciona el diseño responsivo
El diseño responsivo es una tecnología que cambia automáticamente el diseño según el ancho de la pantalla. Utiliza una función de CSS llamada "media queries" para establecer reglas como "si el ancho de pantalla es de 768px o menos, aplicar este estilo".
- Ordenador (1024px o más): diseño de 3 columnas horizontales, barra lateral, imágenes grandes
- Tableta (768-1023px): diseño de 2 columnas, la barra lateral se desplaza hacia abajo
- Smartphone (767px o menos): diseño de 1 columna, menú hamburguesa, imágenes que se reducen al ancho de la pantalla
Lo importante es que el HTML (el contenido de la página) es el mismo y solo cambian las reglas CSS (la apariencia). Los datos enviados desde el servidor son idénticos; es el navegador el que modifica la visualización según el tamaño de la pantalla.
Antes del diseño responsivo - los "sitios móviles"
Antes de que se popularizara el diseño responsivo (hasta alrededor de 2010), muchos sitios creaban versiones separadas para "PC" y "móvil".
www.example.com→ versión para PCm.example.com→ versión móvil
Era necesario mantener dos sitios por separado, lo que provocaba frecuentes inconsistencias de contenido y actualizaciones olvidadas. En 2012, cuando Google anunció que "recomendaba el diseño responsivo", el enfoque de una sola URL para todos los dispositivos se convirtió en el estándar.
El origen del menú hamburguesa (☰)
El icono de tres líneas (☰) que se ve frecuentemente en los smartphones se llama "menú hamburguesa". El nombre proviene de que las tres líneas se asemejan a los panes y el relleno de una hamburguesa.
Este icono fue utilizado por primera vez en 1981 en un ordenador llamado Xerox Star. Fue ideado por el diseñador Norm Cox como "un icono que representara visualmente el contenido de un menú", y tiene más de 40 años de historia.
Como la pantalla de un smartphone es estrecha, no hay espacio para mostrar todos los elementos del menú permanentemente. El menú hamburguesa es una solución que ahorra espacio al expandir el menú solo cuando se toca.
La era del "mobile first"
Actualmente, aproximadamente el 60% de los accesos a sitios web provienen de smartphones. Por eso, el enfoque predominante en el diseño web actual es "mobile first": primero se diseña para smartphones y luego se amplía para ordenadores.
El motor de búsqueda de Google también utiliza "Mobile-First Indexing", evaluando los sitios basándose en su visualización en smartphones. Los sitios difíciles de ver en un smartphone pueden perder posiciones en los resultados de búsqueda.
IP Check-san también utiliza diseño responsivo, permitiendo verificar tu dirección IP cómodamente tanto desde un smartphone como desde un ordenador.
Resumen
La razón por la que la misma URL se ve diferente en un smartphone y en un ordenador es que las media queries de CSS cambian el diseño según el ancho de la pantalla. El menú hamburguesa nació en 1981 y tiene más de 40 años. Actualmente, el 60% del tráfico web proviene de smartphones y el enfoque mobile first es el estándar.