Diseño receptivo, significa que su sitio web se adaptará automáticamente para verse bien en cualquier dispositivo o tamaño de pantalla. Para eso, no creas en la magia, el diseñador / desarrollador web tiene que usar técnicas para detectar el espacio disponible y cambiar las propiedades de los elementos en consecuencia (con el uso de consultas de medios en el CSS)
De hecho, tiene una página que tiene varios diseños y el navegador elige el que mejor se adapta a las pantallas actuales.
La técnica más común es utilizar porcentajes para tamaños e imágenes, por ejemplo, puede decir que esta imagen de encabezado debe tener siempre el 90% del ancho, en lugar de 960 px.
- ¿Cuál es la diferencia entre la variable de sesión y la cookie?
- ¿Son fáciles de aprender los marcos CSS / HTML una vez que conoces el núcleo HTML / CSS?
- ¿Debo aprender Scala o PHP?
- Si Heroku usa PostgreSQL, ¿cómo puede una aplicación Rails local que utiliza una base de datos MySQL o SQLite funcionar perfectamente con ella?
- ¿Cuánto tiempo lleva aprender PHP y JavaScript para desarrollar una web?
Además, a través de consultas de medios, puede decidir ocultar algunos elementos y mostrar otros, … por ejemplo, el menú de encabezado, si está en el escritorio tiene suficiente espacio para mostrar todos los elementos, pero desde cierto ancho, puede decidir ocultar este menú y reemplácelo por un menú desplegable, que es más común en sitios web móviles.
Lo siguiente está en la distribución de contenido, si tiene 3 columnas en el escritorio, puede usar un% de cada columna, pero desde cierto ancho puede decidir comenzar a ocultar algunas de ellas. Digamos que la primera columna es el menú izquierdo, el centro es contenido y la tercera es información adicional. Primero, puede querer deshacerse de la tercera columna, y en el móvil también puede deshacerse de la primera columna.
Finalmente, decidirá sobre elementos particulares, por ejemplo, en el escritorio, puede tener sentido tener una imagen, un título y una descripción para una galería de imágenes. En la tableta, puede decidir usar una versión de texto más corta de la descripción, mientras que en el móvil solo puede mostrar la imagen.
Afectando su tiempo de carga.
Cualquier cambio de diseño puede afectar su tiempo de carga. Si realiza una buena implementación del diseño receptivo, sus páginas se cargarán más rápido, especialmente en pantallas pequeñas, ya que cargará menos elementos.
Diseño receptivo, también puede ayudarlo a mejorar el tiempo de carga en pantallas grandes, ya que la página se crea con más cuidado que en el diseño tradicional. Todavía hay demasiados diseñadores haciendo su diseño en Photoshop y simplemente “cortándolo” y traduciéndolo a código html, sin usar elementos CSS nativos … pero esto es más sobre la calidad del diseñador web y este es otro tema.
