Hace unos años, diseñar una web era muy fácil porque podíamos centrarnos en una resolución de 800×600 y maquetar sólo para ella. Pero en los últimos años, con la gran cantidad de dispositivos con acceso a Internet, debemos crear una web que se adapte lo mejor posible a todo tipo de resoluciones y dispositivos.
Y ahí nace Responsive Web Design, RWD, o diseño de web adaptativo. Se trata de una técnica de diseño o filosofía que intenta resolver este problema ayudando a diseñadores y programadores a crear una web que se adapte a cualquier tipo de pantalla. Hasta entonces se estaba resolviendo, creando una versión móvil de la página que poco o nada tenía que ver con la página original. Sin embargo, esto afecta a la experiencia de usuario si ve páginas distintas cuando entra desde el PC o desde el móvil. Y también existen ahora distintos dispositivos: tablets, smart-watches, pantallas de muchas pulgadas, etc., y en todos ellos deberían verse una web similar, sobre todo con el mismo contenido.
Versión 3.5 con Responsive Web Design
Otro día veremos cómo implementar Responsive Web Design en nuestros sitios, cómo utilizar los media-queries o qué es eso de mobile-first, pero esta entrada es para informar que, después de varios años posponiéndolo, por fin esta web es responsive.
Aunque la web no ha sufrido un rediseño completo en el estilo (me siguen gustando mucho los colores y disposiciones de la web) he aprovechado estos días también para cambiar y añadir algunas cosas que necesitaban un arreglo o no me gustaban cómo quedaban. Entre otros, he eliminado los floats para maquetar, como había prometido algunas semanas atrás, y he empezado a utilizar FlexBox.
Esta es la lista de cambios realizados:
- Diseño adaptativo de la web, mobile-first.
- Eliminación de float para maquetar.
- Utilización de FlexBox para maquetar.
- Eliminación de la imagen de fondo de la web, sólo habrá una en pantallas con una resolución mayor a 1200px.
- Enfatización en el flat-style de la web.
- Utilización de la unidad de medida
remen gran parte del diseño - Pequeños detalles en tamaños de fuentes y colores.
Espero que te guste como ha quedado la web y me avises si ves que algo no funciona muy bien desde tu dispositivo. Nos seguimos viendo por aquí.