Logo versatico

Escrito por Jorge Leonardo Pérez Mayorga. 

El diseño web responsive entra en el escenario del internet para hacer que nuestros sitios creados y páginas visitadas se puedan visualizar de una manera correcta dentro de cualquier pantalla y resolución.

Es una realidad palpable que en nuestra era de la información y de cambios exponenciales de tecnologías, es indispensable tener los medios para poder llegar a cada usuario dentro de Internet, hablo a nombre de quienes creamos contenido para la web, ya sea como diseñadores de sitios web, administradores de portales, redactores en un blog, administradores de redes sociales o consumidores de todo lo anterior; la importancia de visualizar y que se visualice correctamente todo aquello es la piedra angular de nuestro trabajo, por ende, en este breve artículo se tratará de explicar qué es el diseño responsive design o diseño elástico.

Comenzaremos por explicar su surgimiento; nació en Estados Unidos gracias al diseñador web Ethan Marcotte, quien postuló una serie de artículos y los compiló dentro de su libro Responsive Web Design. En este redacta el funcionamiento de esta tecnología con el fin de ir de la mano con el crecimiento de las líneas de internet que día a día aumentan, y aprovechando la necesidad de involucrar cada uno de los terminales móviles, que, ayudado con el crecimiento de internet, también aumentan dramáticamente su uso en el pasar de cada año, Ethan explica su implantación en nuestros diseños web.

Cómo funciona? A través de pequeñas consultas llamadas @MediaQueries, el sitio realiza preguntas de acuerdo a lo que se quiera averiguar, por ejemplo, puede preguntar acerca de la resolución del dispositivo o tamaño de pantalla, si la consulta arroja positivo, se ejecutarán las instrucciones asignadas dentro del MediaQuery. Con estas instrucciones, el contenido se ajusta de acuerdo al espacio que se quiere ocupar por cada ítem del sitio web, dividos en columnas, como las columnas de un periódico. Esto implica una gran ventaja en el mundo web, puesto que un sólo diseño funciona para cualquier resolución de pantalla siguiendo las reglas dentro de las instrucciones de las queries.

Dentro del portal www.bufa.es, nos comparten una lista de los Media Queries más utilizados para dispositivos móviles.

/* Smartphones (portrait & landscape) */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
 
/* Smartphones (landscape) */
@media only screen
and (min-width : 321px) {
}
 
/* Smartphones (portrait) */
@media only screen
and (max-width : 320px) {
}
 
/* iPads (portrait & landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
 
/* iPads (landscape) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
 
/* iPads (portrait) */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
 
/* Ordenadores de sobremesa y portátiles */
@media only screen
and (min-width : 1224px) {
}
 
/* Pantallas grandes */
@media only screen
and (min-width : 1824px) {
}
 
/* iPhone 4 */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

También dejo un video explicando el funcionamiento del responsive design:

Tu sitio web podría verse en cualquier dispositivo desde hoy, y nosotros te ayudamos a lograrlo.

Trabajemos Juntos

Te ayudamos a entrar al mundo digital

es_ESEspañol
en_USEnglish es_ESEspañol