¿Qué es, cómo se usa y a qué problemas nos enfrentamos con el diseño responsive?

El uso de internet ha cambiado en pocos años y cada vez se navega más a través de un móvil. Si observamos las actuales webs e imaginamos como se verían de la misma forma en un móvil, comprenderemos que esto es una locura. Por un lado, habría que navegar haciendo zoom, lo que dificultaría muchísimo la interacción de los/as usuarios/as con la web. Por otro lado, habría un continuo desbordamiento del ancho de la página. Pulsar un simple botón se puede convertir en un dolor de cabeza para las personas menos “adaptadas” al medio informático, y así contaríamos con un sinfín de problemas.

¿Cuál es la solución a este esperpento? La solución es hacer un diseño responsive, y por ello vamos a detallar cómo funciona y cómo lo llevamos a cabo en Sekkend.

entrada-blog-compressor

¿Qué hace el diseño responsive?

Puesto que el diseño de escritorio no es adecuado para móviles ni tablets, la solución está en adaptar ese diseño al dispositivo desde donde se visualiza la web. Dicho de otra forma, según el dispositivo la web tendrá un diseño u otro.

¿Cómo se lleva a cabo?

El diseño responsive, antes de proyectar la web, se pregunta cuál es el ancho –y a veces el alto- de la ventana, y una vez recibe la información, proyecta la web teniendo en cuenta las indicaciones programadas para dicha ventana.

Lo primero que debemos hacer es insertar un tag llamado viewport en el HTML, ya que será este el responsable de indicar tales valores. Tal etiqueta tiene múltiples formas según queramos un resultado u otro, pero vamos a ver cual solemos usar en Sekkend:

1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no
">

Aquí podemos observar que da tres órdenes: width, initial-scale y user-scalable. La primera orden pregunta cuál va a ser el ancho y se le responde que será device-width, es decir, el ancho del dispositivo. La segunda orden pregunta cuál será la escala inicial y se le responde “1”, es decir, sin zoom inicial. Y la tercera pregunta si permitimos al usuario/a hacer zoom, y le responde que no (ya que así lograremos una mayor apariencia de app móvil).

De esta forma, ya hemos conseguido que el diseño actúe teniendo en cuenta la ventana, por lo que comenzaremos a predefinir el diseño para cada tamaño de ventana.

¿Cómo ajustamos el diseño a cada tamaño?

Para que el diseño actúe según el tamaño, en la hoja de estilos le añadiremos un Media Query. Estas van a ser indicaciones para “romper” el diseño según el tamaño. Un ejemplo podría ser el siguiente:

1
@media only screen and (max-width: 800px){/*AÑADIR CSS AQUÍ*/}

Los Media Query pueden actuar según muchos medios, pero en este caso le hemos indicado que actúe solo según el screen, es decir, la pantalla. A continuación le hemos añadido las características, que es para que actúe con un máximo de 800px. Con esto, lo que hacemos es que las reglas que incluyamos dentro de sus corchetes actúen siempre para aquellas pantallas que tengan 800px de ancho o menos.

Si usásemos éste media para tablets, luego deberíamos crear otro media más para móviles, donde el máximo de pantalla debería ser, por ejemplo, 400px. Por seguridad, siempre es aconsejable delimitar el comienzo y fin de cada media, por lo que si usamos un media de hasta 400px para móviles y luego vamos a añadir otro para tablets, en lugar de indicarle que actúe solo hasta 800px le indicaremos, además, que comience desde 400px. Esto evitaría varios problemas, como por ejemplo que un elemento que se modificó para tablets pero NO para móviles influya en la versión móvil. Ambos media quedarían así:

1
2
@media only screen and (min-width: 400px) and (max-width: 800px){/* TABLETS*/}
@media only screen and (max-width: 400px){/* MOVILES */}

NOTA: Los pixeles aquí indicados solo son ejemplificativos, pero no por ello reales o útiles. A la hora de diseñar hay que tener en cuenta muchos factores (dispositivos a los que va dirigido, año de creación, etc.). Por ello, la cantidad de medias siempre depende de cuantas rupturas quieras en el diseño para adaptarlo lo máximo posible, puesto que incluso podrías crear un media para solo unos pocos elementos.

Démosle fluidez al diseño.

Ya tenemos todas las indicaciones para hacer el diseño responsive, por lo que llegó el momento de ajustarlo.

Lo primero a tener en cuenta es darle fluidez al diseño y, cómo no, comenzar por el ancho de la página. Si bien muchas webs aun usan un diseño de cuerpo en columna, nosotros solemos recomendar ajustar el ancho al 100% del ancho de ventana, pero esto queda al gusto del cliente. Sea como fuere, lo recomendable es usar el 100% del ancho para el responsive, ya que una web con un ancho menor en un móvil o una tablet quita mucho espacio que se podría usar para la visualización. Para todo ello, es importante que comencemos a dejar el uso de tamaños fijos en pixeles (px) y comencemos a usar porcentajes (%), ya que serán estos los que nos den una fluidez adecuada al diseño.

Además, unas nuevas unidades que nos trae CSS son vw, vh, vmin y vmax. Estas unidades, que en principio pueden ser confundidas con el porcentaje, tienen como referencia siempre el viewport. De esta forma, vw se referencia en el ancho del viewport, vh en el alto, vmin en los lados con menos espacios entre sí del viewport, y vmax en el que tengan mayor espacio (muy útiles para trabajar con el efecto landscape de móviles y tablets). Por ello, ahora podremos definir el ancho del body en width:100vw en lugar de width:100%. Aunque esta unidad es realmente atractiva para otros tipos de elementos; aquellos que necesitan de referencia el viewport y no el del elemento padre.

Estructura: Usando los medias, vamos a ir ajustando el ancho en cada dispositivo, y una vez que lo tengamos pasaremos a definir la fluidez de los elementos. Para comenzar habría que definir la posición de cada sección (head, nav, aside, body, footer…). Quizás para la versión tablet podamos arriesgarnos y dejarlo con la misma estructura, pero deberemos redefinir los tamaños.

A priori, el diseño para tablets (sobre todo en las más actuales) permite dejar algunos elementos importantes con el mismo diseño que teníamos para escritorio, pero repetimos que esto vuelve a ser un riesgo y que, aun así, rediseñemos algunos aspectos como pueden ser su tamaño. Piensa que un menú de escritorio podría ser lo suficientemente molesto en una tablet como para crispar al usuario/a. Pero enfatizamos en su riesgo, y por ello aconsejamos directamente un menú burger, un aside solo para las tablets más grandes, un head personalizado y letras adecuadas para su correcta visualización.

En el diseño para móviles lo correcto sería pasar los elementos que tenemos en el diseño de escritorio a un diseño en columna, donde haya un pequeño head con un menú burger, seguido de un body muy explicito y sencillo y un footer. Si el aside es un elemento imprescindible, lo podremos poner entre el body y el footer o, aunque menos recomendado, entre el head y el body. Siempre deberemos de tener en cuenta el contenido, puesto que un exceso de scroll creará una experiencia un tanto frustrante para el/la usuario/a.

En el body, todos los elementos deberían tener un orden explicito incluso en la versión de escritorio. De esta forma, al reordenarlos en el responsive no tendremos problemas como el exceso de contenido basura. HTML5 ha pensado muy bien en esto, y ha introducido nuevas propiedades como flexbox, el “Santo Grial” como le han denominado muchos diseñadores y diseñadoras. Esta nueva propiedad de Display permite un diseño extremadamente fluido de los divs, en incluso tiene muy en cuenta las posibles transiciones que le pongamos a cada div, como podría ser un cambio en la distribución del tamaño con un hover, visualizaciones en forma de gráficas, etc.

Lo más importante es exponer de forma explícita el contenido principal. Así si vemos por ejemplo el diseño responsive de Facebook, observamos cómo los post ocupan casi el 100% del ancho de pantalla, como lo hacen los videos en Youtube o los artículos en Wikipedia. Los botones deben estar a medida para que sea fácil interactuar con ellos y evitar elementos que molesten, como ventanas emergentes, exceso de menú desplegables, etc.

NOTA: Para tener un buen diseño, es necesario saber con qué espacio estamos trabajando. Nuestro ancho es 100%, por lo que su contenido siempre deberá tener justamente un total del 100% o menos, pero nunca más, ya que creara un overflow en el ancho. Por ello, siempre deberemos tener cuidado no solo con el tamaño de nuestros divs sino también con sus margins y paddings. Recuerda: estos SIEMPRE se suman. Por ello, si nuestro div mide 90% de ancho, tiene un margin lateral del 5% y un padding del 5%, entonces habrá overflow, ya que el total será de 110% (ancho total + margin-left + margin-right + padding-left + padding-right).

Elementos importantes a tener en cuenta

Imágenes: Las imágenes requieren un cuidado especial. Debemos tener cuidado en cuatro aspectos:

  • Peso de la imagen: Dejar la misma imagen en responsive de la que usamos para la versión escritorio es una autentica locura. Para ello, podremos usar varios métodos:
    • Usar el Media Query para indicar una nueva ruta hacia una imagen adecuada. SOLO si la imagen está insertada con un background-image.
    • Usar compresores de imágenes para que pese menos.
    • Usar HTML5 para exponer una imagen según el tamaño de la ventana. Para ello, usaremos el nuevo elemento <picture>.
  • Colocación de la imagen: Un método consiste en ajustar la imagen a un div (definiendo width 100% y height auto, inversa, o ambas definidas en el caso de que se integre la imagen en el HTML, o con sus correspondientes propiedades en el caso del background-image). Luego, ajustaremos ese div según nuestras necesidades. Éste método nos evitará posibles quebraderos de cabeza puesto que las imágenes son un tanto especiales en su manejo. Y no hay problema que con un buen overflow:hidden no se arregle.
  • Max-width: Siempre deberemos especificar un máximo para la imagen, de esta forma podemos evitar una escala mayor a la original y posibles overflows innecesarios.
  • ¿Es necesaria?: Piensa primero si es necesaria esa imagen en el responsive, pues cabe la posibilidad de que sea prescindible y nos ahorremos espacio, tiempo y energía, además de generar una visualización más limpia.

Importante: Evita a toda costa usar imágenes de gran peso para el responsive. El bolsillo de cada cliente y la velocidad de carga de la página te lo agradecerán.

Letras: Las letras deberán tener un tamaño específico para cada dispositivo. Ten en cuenta que si en el metatag de viewport dices que la página no será escalable, no se podrá hacer zoom, y ya de por si la lectura en un móvil no es cómoda para algunos/as usuarios/as como para además dejarle una letra pequeña y sin posibilidad de zoom.

En Sekkend definimos los tamaños para cada elemento (p, h1, h2, span, etc.), y volvemos a definirlos en cada Media Query para ajustarlo a cada dispositivo. Siempre aconsejamos usar algún RESET CSS, por lo que debemos definir cada tamaño por nuestra cuenta.

Ahora bien, ¿pixeles, porcentajes o em? ¿Cuál debemos usar? Pues esto queda un poco a decisión de los diseñadores y diseñadoras. Por un lado, si usamos un tamaño fijo con pixeles, tendremos la ventaja de que no tendrá un tamaño que no deseemos, y está bien si definimos varios medias, por el contrario, si un media abarca 400px… no es lo mismo si se visualiza desde un dispositivo con 450px de ancho que con uno de 780px, por ello debemos de tener cuidado en definir cuál será su tamaño dependiendo de lo que abarque nuestro media.

¿Qué problemas tenemos al diseñar en responsive?

Internet Explore siempre dará problemas El principal problema viene por la compatibilidad de los navegadores. Elementos como <picture> están muy poco estandarizados, y unidades como las del viewport (vw, vh) no están aceptadas en su totalidad por los navegadores de Windows (incluido Edge). Por suerte, los Media Query están altamente aceptados por los navegadores (a excepción de Internet Explorer 6-8), y solo son pocas las propiedades que no se podrán usar.

Por culpa de las compatibilidades, su reparación conlleva realizar ciertos arreglos que aumentan un poco más el código y, por lo tanto, su peso. Pero este es un precio mínimo que hay que pagar por tener un diseño adaptado a las necesidades actuales.

¿Qué podemos hacer para solucionar estos fallos de compatibilidad? La solución se llama Javascript. Podemos realizar un parche de Js para hacer que esos elementos trabajen como queremos en esos navegadores antiguos o incompatibles. Pero por suerte, gracias al grandísimo trabajo de gente que miran por el bien común, hay varias herramientas que tenemos a disposición de un solo click. Por ejemplo, polyfills como respond.js nos arreglarán el problema de los min/max-width.

Importante: Para conocer las compatibilidades, recomendamos usar webs como caniuse.com.

En un mundo lleno de CMS, ¿No existen herramientas que nos faciliten el trabajo del responsive?

Así es, existen, y son los frameworks para responsive. Algunos como w3.css o Skeleton son frameworks que funcionan de forma muy eficaz, pero especial mención se lleva Bootstrap, el cual, a diferencia de los anteriores, además de usar CSS también usa HTML y jQuery. Es el framework más popular y está siendo usado incluso por grandes compañías.

Sí, ya hemos acabado

Como verás, esto no es más que una simple guía para saber qué es el diseño responsive, cómo llevarlo a cabo y qué tener en cuenta. Pero el trabajo con responsive es algo que en la actualidad no está siendo tan bien valorado.

Si ya de por sí los trabajos informáticos no se valoran como debieran ser, ¿qué vamos a esperar de algo tan especifico como es el diseño responsive? Por ello, cada vez que un diseñador o un diseñadora te digan que tu web contará con diseño responsive, no te lo tomes a la ligera y valora su trabajo. Así como de la misma forma nuestro deber es estar atentos/as de las novedades que salen casi mensualmente, estudiarlas y realizar un trabajo optimo.

¡Salud!

Welcome to Sekkend’s development blog

by admin 0 Comments

Hello to everyone!

Welcome to our new blog. This is a website created by the developers from Sekkend studio to tell the story about our daily routines related to the startup of this project. After finishing our principal website, I thought that maybe it was a good time to write my first post.

Sekkend studio was born of the idea of 3 friends scattered through the European Union who want to get together again and start their own business using their knowledge they earned on the past years. To make it short, we thought about Sekkend as a studio that designs, builds and manage modern and quality websites in the UK and across the EU, specially focusing on Spanish and German markets. So we want to show our future clients what we can do: we want provide nice-looking and error-free websites using the newest and most reliable technologies out in the market. Our aim is to make websites that stand out among the classical designs and make them intuitive, accessible by everyone and for any device.

After evaluating which are the weakest aspects of websites, we thought that we can find our place in the professional world building correct and scalable websites that follows all the standards of web development when we put all our knowledge together. We have a lot of experience in subjects like SEO, design, responsive development, compatibility, databases,  translation or business logic and we want to show it.

May you ask who we are? I will explain you: we are a group of very good friends who share the same interests and life goals. We are creative people full of ideas, we have strong technological skills, we are from the technology generation and know how internet works.

Together with Harley who has the best knowledge in user interfaces and Fran, who has unique template skills. We want to design beautiful websites with CMS or develop websites from the scratch with all the functionalities the clients needs.

Today, we have our web launched and want to show what kind of websites we believe in. We will keep the blog up to date with everything that we do or want to do, so keep us on track and don’t miss to subscribe to us.

If you want to know more about us, you can check out our studio site or find us on Twitter or Facebook.

Thank you very much for reading,

The Sekkend team.