Responsive Design, el desarrollo de páginas Web plenamente dinámicas que ajusten la visualización y experiencia de usuario a las características diferenciadas y cambiantes de los múltiples dispositivos actuales sobre las que se puede correr un navegador, representa una revolución en la industria.
Pero no solamente para los programadores puros y duros que deben aprender técnicas en HTML5, CSS3 o Java Script con sus decenas de framework asociados, para conseguir que el contenido de un Site se expanda o comprima según el espacio de visualización que ofrezca el soporte físico. Si no que los diseñadores gráficos se enfrentan a un nuevo tipo de reto en donde la interfaz gráfica y sus elementos dejan de ser estáticos y el feel & look del Site también deben adecuarse al tamaño y orientación del lienzo en donde pintar.
Para estos últimos, los diseñadores gráficos y de UIX, quiero compartir una página muy interesante en donde una comunidad propone Webs que funcionan siguiendo los principios de Responsive Design; las valoran entre todos sus miembros; y las publican en orden de puntuación para servir de inspiración a otros profesionales o aficionados del diseño de la experiencia de usuario.
El nombre de la Web, Media Queries, indica el tipo de contenido que nos vamos a encontrar al estar inspirado en la denominación del nuevo estándar descrito en la recomendación del W3C de análogo nombre, y que define las expresiones que permiten comprobar ciertas capacidades de los navegadores en donde se visualiza el contenido.
Así, encontraremos un listado en donde observar una serie de capturas de pantallas de una misma página Web en cuatro resoluciones diferentes, para poder observar cómo se ajusta el interfaz de usuario y el diseño gráfico a las limitaciones de reproducción.
-
Smartphone : 320px
-
Tablet : 768px
-
Netbook : 1024px
-
Escritorio : 1600px
Sin duda un buena fuente de inspiración.
Más información | Media Queries
<p>En GenbetaDev | <a href="https://www.genbetadev.com/tag/introduccion-al-responsive-design">Introducción al Responsive Design (serie)</a></p>
