Enfoque adecuado para el Responsive Design

Con la proliferación de diferentes tamaños de pantalla de móviles, tablets, pc’s, monitores e incluso televisores, ya no tiene sentido planificar el diseño de un site para dispositivos específicos sino diseñar puntos de ruptura en función del contenido.

¿QUÉ ES EL RESPONSIVE DESIGN?

El “Responsive Design”  consiste en que el contenido de nuestra web se puede adaptar a cualquier tamaño de pantalla. Esto no implica simplemente que se pueda visualizar, ya que una simple redimensión del contenido se puede realizar fácilmente con la metaetiqueta viewport, sino que implica que en dispositivos móviles se puedan llevar a cabo  las mismas funcionalidades que en tamaño completo y con un nivel de experiencia de usuario similar.

No me suele gustar utilizar términos en inglés gratuitamente, pero la verdad es que no es fácil encontrar un término equivalente en castellano medianamente descriptivo. Como muy bien explica el siguiente post, el mejor término podría ser “diseño adaptativo” pero la traducción tiene tela.

Antes de la llegada del Responsive design, se ofrecía 3 posibles soluciones a los usuarios móviles. O bien se realizaba una versión de la web para móviles (normalmente muy pobre) o una app móvil (que era preciso descargar e instalar) o bien se redimensionaba la web realizada para escritorios de pc, con la consiguiente falta de usabilidad.

El responsive design permite dar una buena experiencia de navegación a los usuarios con una única web, que se adapta a diferentes tamaños de pantalla mediante diseños fluidos. Las artífices de dicha adaptación son las famosas “media queries” que son códigos que determinan el tamaño desde el que está navegando un usuario, y permiten aplicar los css (hojas de estilo) para “pintar” o ajustar el contenido de forma óptima para dicho tamaño.

Por ejemplo, si tenemos un pie de página que en el PC se muestra en 4 columnas, para su buena visualización en móvil lo mostraremos en una única columna que ocupe el 100% de la pantalla mediante una media query que aplique los estilos css necesarios para lograrlo (en este caso un estilo que aplique un ancho de columna del 100%, en lugar del 25%).

MÉTODO TRADICIONAL – “MEDIA QUERIES” PARA DISPOSITIVOS MÁS COMUNES

Durante un tiempo quizás se perdió la esencia de lo que suponía el responsive design, y lo que se hacía era una simple adaptación del contenido a diferentes dispositivos. Elegíamos los aparatos más populares del mercado como eran el iphone 3,4, e Ipad estableciendo media queries para 320, 480 y 760 px. Posteriormente llegaron el iphone 5, introduciendo la adaptación para 480 y 568px. Ahorase han popularizado los cacharros Android (yo mismo me he desiphonizado).

Actualmente, proliferan nuevos tamaños de pantalla, incluso gigantes, nuevos tipos de dispositivos y resoluciones que hacen que este enfoque haya perdido sentido…no podemos estar pendientes de un nuevo lanzamiento de Iphone, Samsung, HTC o Sony para realizar un buen diseño.

Para los que aún así queráis un listado de los mediaqueries para resoluciones más habituales, lo publico en el siguiente cuadro de código. En el siguiente link podéis ver un completo listado de resoluciones para dispositivos concretos.

Media queries para resoluciones de dispositivos móviles más comunes

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Estilos */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Estilos */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Estilos */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Estilos */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Estilos */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Estilos */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Estilos */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Estilos */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Estilos */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Estilos */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Estilos */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Estilos */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Estilos */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Estilos */

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Estilos */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Estilos */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Estilos */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Estilos */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Estilos */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Estilos */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Estilos */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Estilos */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Estilos */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Estilos */
}

NUEVO APPROACH – DEFINIR PUNTOS DE RUPTURA EN FUNCIÓN DEL CONTENIDO

El método más adecuado actualmente es diseñar en primer lugar el para el móvil más pequeño. De esta forma, tendremos que priorizar los elementos más importantes de nuestro site para poder presentarlos de la forma más eficiente en un espacio tan limitado como el del móvil.

Posteriormente, comenzamos a expandir la ventana del navegador, y llegaremos a un punto en que el contenido se rompe o visualiza fatal. Ahí debemos incluir un punto de ruptura para cambiar el diseño y aplicar nuevos estilos. Así sucesivamente hasta llegar al tamaño de pantalla más grande.

Como cada vez hay tamaños de pantalla muy grandes, podemos asegurarnos de que el diseño se ajusta a los límites de la misma incluyendo un max-width realmente grande en la capa contenedora del contenido principal.

En definitiva, con este sencillo método lograremos que no importe el dispositivo concreto que esté utilizando el usuario, porque habremos basado los puntos de ruptura en base a la adecuada visualización del contenido.

Parece que el reto del futuro, llegará con dispositivos realmente pequeños como relojes de pulsera u otros en los que los expertos apuestan porque cambiará el formato de la web de HTML a XML,RSS y Json. Será interesante verlo.

¿Te ha gustado? Comparte el artículo con tu red

Facebooktwittergoogle_pluspinterestlinkedinmail

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *