La resolución de pantalla en las páginas web se ha convertido en un tema esencial hoy en día. Dada la cantidad de dispositivos que existen hoy en día, y la facilidad que casi todos tienen para adquirirlos, se ha vuelto muy común que la navegación en internet ya no dependa únicamente de los PCs o laptops y es de vital importancia que, sin importar el dispositivo que usemos, el contenido se vea siempre de la mejor forma posible y se den todas las facilidades táctiles y de navegación en general para que los usuarios lean sus noticias, eventos, redes sociales y cualquier otro contenido.
Por lo anterior es que ha tomado tanta importancia el término Responsive. Responsive significa la adaptabilidad que tiene un blog o sitio web para ajustar su diseño a cualquier resolución de pantalla de página web y cualquier dispositivo, de modo que no importa desde donde se vea, siempre se note un aspecto agradable y de fácil lectura y comprensión para los usuarios.
Se debe tener en cuenta que lo que ves en un monitor de 23″, no podrás verlo con la misma facilidad en un smartphone de 4″. Es por este motivo que se debe siempre asegurar que el diseño web se haga responsive, para que todo el contenido se adapte automáticamente sin necesidad de intervención de los usuarios.
Hoy queremos compartir dos herramientas que te facilitarán el trabajo para realizar todas las pruebas que quieras al sitio web que estás desarrollando o simplemente ver como se ve tu portal favorito en cualquier resolución, sin necesidad de tener Tablets o Smartphones a la mano para lograrlo.
Se trata de dos extensiones para el navegador Google Chrome, el cual recomendamos para hacer desarrollo web por todas las facilidades que presta y por lo completo que es su inspeccionador de elementos para trabajos de HTML y CSS entre otras funciones.
Mobile Browser Emulator
Esta extensión tiene incorporadas 9 resoluciones distribuidas entre Tablets, smartphones y PC en sus diferentes posiciones (vertical u horizontal). Además trae la posibilidad de colocar manualmente las pulgadas que tiene tu PC para pruebas más específicas en monitores más grandes. Después de añadir la extensión a tu navegador, se verá una pequeña letra “m” en la parte superior derecha, la cual debes clickear para realizar los cambios de resolución. Dependiendo de la que elijas, el tamaño de la ventana cambiará y ahí podrás visualizar como se ve el contenido del sitio web que tienes abierto en ese momento.
Agrega Mobile Browser Emulator a Chrome aquí
Resolution Test
Esta extensión es muy similar a la anterior, solo que aquí te ofrecen más resoluciones y más opciones de personalización. Sin embargo no te menciona si se trata de una tablet en posición vertical u horizontal, o un smartphone. Aquí se centran en resoluciones específicas.
Al instalarla verás en la parte superior derecha una pequeña ventana blanca con un borde azul en la parte de arriba. Al dar clic ahí se listarán las resoluciones las cuales simplemente eliges para ver como se adapta tu sitio web a ellas.
Agrega Resolution Test a Chrome aquí
Cualquiera de las dos extensiones que decidas probar, tendrás a la mano una considerable cantidad de opciones para elegir y realizar todas las pruebas que sean necesarias y útiles a tu página web. No olvides dejarnos un comentario si requieres asesoría o tienes cualquier tipo de duda.
