Diseños Responsive ¿Para qué?

El diseño responsive no es una moda. El responsive, es un hecho. Cada vez hay mas usuarios de Internet que utilizan dispositivos móviles para navegar. Si nos fijamos en la analítica de nuestra web, nos damos cuenta que cada vez hay un gran numero de visitas que provienen de dispositivos móviles. También  es verdad, que cada vez las resoluciones son diferentes, cada una de los equipos, tiene una, hay mucha variedad, así que hay que ponernos manos a la obra.

¿Puedo hacer a mi web actual un diseño responsive?

Hombre, claro que sí, en temas de diseño o desarrollo web poder, se puede casi todo. Aunque a veces, sobre todo en este caso concreto, el remedio será peor que la enfermedad, asi que recomiendo hacer un diseño completo.

Hay muchas personas que preguntarán si es necesario hacer cuatro diseños diferentes, pero no, no hace falta. Crearemos un diseño principal, y de ese diseño adaptaremos los otros diseños para diferentes dispositivos, el diseño será el mismo, solo tendremos que modificar algunas cosillas para un buen diseño responsive.

Finalidad

La principal necesidad que existe para hacer un diseño «adaptable», es porque se pierden bastantes visitantes, al no tener el site adaptable a todos, aunque la temática SEO se las podéis preguntar mejor a mi compañera María Sáez, no hacemos un diseño responsive, porque queda más bonito, o para fardar con los amigos, la hacemos porque hay una necesidad, ya que cada vez más usuarios navegan desde el móvil  y cada vez existen más resoluciones.

Actualización 22.05.21

Han pasado casi 10 años desde que hice este post y bueno quería contar lo que pensaba por aquel entonces y lo que pienso ahora sobre un diseño o desarrollo web responsive.

Hoy en día (depende del proyecto) existe mucho más tráfico desde dispositivos móviles que desde ordenadores de escritorio. Si no recuerdo mal, más del 60-70% del tráfico depende de un móvil.

¿Por qué vale la pena hacer un diseño responsive?

Sobre todo por experiencia de usuario. Es cierto que cada vez Google tiene mas en cuenta que los usuarios tengan una buena experiencia en nuestras webs. Aunque me esté metiendo en un tema que no es realmente el mío (diseño) hay que tener en cuenta alguna que otra cosa.

Responsive no es que se vea bien en móvil

A día de hoy, todavía veo muchos errores en diseños responsive, y si, lo ves y la apariencia es correcta: Los viewports están correctos, las media-queries están en su sitio, aparentemente todo se ve bien.

En muchos de estos proyectos hay errores de lo mismo: Han hecho un diseño para escritorio y luego han metido con calzador muchos elementos para que se vean en móvil.

Esto lo explica muy bien Nora Ferreirós en el curso que dió sobre «Proceso del diseño web y móvil«.

Aquí entra el concepto Mobile First. Pero son cosas diferentes, una sitio web puede estar bien adaptado a móvil y no tener porque ser mobile first.

Sin versión responsive no existes

Esto es cierto, a día de hoy, el que no tenga versión responsive es como si no existiera. Todavía a día de hoy existe algún despistado que no tiene su web adaptada a dispositivos móviles y es bastante «traumático» navegar por esas webs en móvil. Yo personalmente me voy de esas webs, me ponen muy nerviosa.

Además, Google penaliza a todas esas webs que no tengan su versión en móvil y juraría que las que no sean Mobile First también.

Subdominios para cada versión

Esto es otra forma de hacer las versiones responsive, y esto, al principio con los primeros sitios webs en responsive, se veía un montón.

Tiene una ventaja muy clara en desarrollo, que al final es siempre más fácil crear sitios independientes que tener que adaptar cada sitio web dependiendo del dispositivo.

A mi personalmente nunca me ha gustado esta parte y creo que siempre hay lios de URLs y es más complicado de implementar.

Conclusión

La conclusión de este post, es que el diseño y desarrollo responsive es necesario, y mucho más ahora ya que Google penaliza. Acuérdate de analizar a ver cuántas visitas tiene tu sitio web desde dispositivos móviles y lo sabrás a ciencia cierta. Ejemplo de mi web:

Imagen destacada: NicoElNino