Con la llegada del iPhone, y con él, el boom de los smartphones y tablets, el diseño web se encontró con uno de los quebraderos de cabeza más engorrosos y a la vez emocionantes de su época. De repente, usuarios de todas las edades y segmentos eran capaces de acceder en cualquier momento a una página web. ¿Una página web? No. He ahí el problema.

Aunque los inicios de Internet se remontan a los años 70, fue en los 90 cuando de verdad empezó a llegar a los ordenadores de nuestras casas. Sin embargo, no fue hasta los 2000es cuando todo tipo de empresas se unieron de verdad al boom de las páginas web. Era un mar lleno de pescado para muchos programadores y diseñadores web. Y aunque las herramientas para pescar eran muy rudimentarias, había para todos y no había que preocuparse de excesivas cosas. En el 2007, todo eso se terminó.

El problema: más trabajo por el mismo precio

Con la llegada del iPhone, y con él, el boom de los smartphones y tablets, el diseño web se encontró con uno de los quebraderos de cabeza más engorrosos y a la vez emocionantes de su época. De repente, usuarios de todas las edades y segmentos eran capaces de acceder en cualquier momento a una página web. ¿Una página web? No, he ahí el problema.

En la actualidad, cualquier empresa dedicada al diseño web o programación de páginas web, necesita realizar hasta 3 diseños web distintos, anticipando la pantalla con la que el usuario va a disfrutar de los contenidos de la página.

Este trabajo extra evidentemente no se cobra. El cliente espera una página web que se visualice sin problema en todos los formatos. (Navegadores antiguos es ya otra historia mucho más tenebrosa a la que convendría dedicar su propio artículo).

Mismo tiempo y presupuesto para el doble de trabajo. ¿Cuál es la respuesta de las empresas de diseño web? Saquemos esto adelante con lo mínimo o, lo que es lo mismo, "vamos a saco".

Sin embargo, consideramos que es conveniente que el cliente esté atento frente a estas malas prácticas y desde aquí vamos a tratar de explicarlas para solventar todas las dudas posibles.

No es lo mismo diseñar para móviles que para pantallas de ordenador

La solución de las empresas de diseño web pasa por coger la maquetación de la página y encajarla sin más en la minúscula pantalla de un móvil. Después de todo, el tiempo es oro y los móviles son una forma adicional de navegar, pero en ningún caso la principal.

Pues no. Resulta que a día de hoy se navega más fuera de casa que en ella, y en situaciones muy diferentes a lo que supondría sentarse en un cómodo escritorio a tirarse horas navegando por Internet. Por lo tanto, la experiencia que esperamos por parte de un diseño web en un móvil, no es la misma que la que esperamos en un ordenador de sobremesa.

Pongamos por ejemplo el propio diseño de BCNWEB. Si nos fijamos en la página inicial o "Home", en la versión de ordenador obtenemos una larga descripción como resumen de contenidos. Si como otras empresas, nos limitáramos a encajar dichos contenidos en el diseño web de su versión móvil quedaría algo así:

Diseño web encajado en dispositivo móvil

Sí, se parece más a un sitio al que has llegado por tocar un anuncio que no debías por equivocación...

Tener en cuenta el primer impacto visual que se quiere dar a través de un móvil es importantísimo. ¿Qué mensaje rápido y conciso queremos que sea el primero al que se acceda? ¿Qué opciones son con las que más nos interesa que se interactúe desde un principio? Así quedaría la comparativa entre la versión rápida de hacer las cosas y el diseño web real de la versión móvil de BCNWEB:

Diseño web responsive correctamente aplicado Como se puede apreciar, se lanza un mensaje breve de presentación, junto a la información primordial de contacto; email y teléfono. Valoramos el tiempo del usuario y le ofrecemos dos opciones; pedir un presupuesto o indagar más en la web pulsando el botón de saber más. Este último inducirá al usuario a seguir haciendo scroll para encontrar información sobre servicios y proyectos.

Diseño web con imágenes responsive, el otro gran olvidado

Además de saber adecuar los contenidos a tu diseño web, es importante tener en cuenta otros detalles técnicos, que muchas veces las empresas olvidan, dando lugar a diseños web para móvil desastrosos.

Salvo que este conectado a una red Wi-Fi, un móvil se conecta a Internet a través de un plan de datos. Pese a que hoy en día las redes 4G ofrecen una velocidad de transferencia a la par con la que tendríamos en casa, el número de datos que una compañía telefónica te permite transferir mensualmente siempre es limitado. Las empresas de diseño web que se limitan a encajar tu página en un móvil, no tienen en cuenta esto, por lo que esas enormes imágenes de fondo que se ven en la pantalla de ordenador, también se descargan en la de tu móvil. Estas prácticas, además de consumir datos y batería del usuario, hacen que lo que a priori debería ser un diseño web sencillo y veloz, se convierta en algo más parecido a la descarga de un trasatlántico. Las consecuencias, además de una pobre experiencia de usuario, son también críticas para tu posicionamiento web en Google.

 

Logotipo pixel vs Logotipo vectorial

Logotipo en baja resoluciónLogotipo vectorial

Otro gran olvidado en el mundo de las imágenes dentro de los diseños web responsive es el tema de las resoluciones. Aunque la pantalla de un móvil pueda parecer minúscula, su resolución puede ser tan grande o incluso mayor que la de un ordenador de sobremesa. De ahí que imágenes pequeñas que quedan bien en pantallas grandes como iconos o incluso logos, al ser pasadas a móvil quedan difuminadas y borrosas, al no haberse tenido en cuenta este problema.

 

En definitiva, un buen diseño web responsive es aquél que, además de ser capaz de ofrecer la misma información en cualquier tipo de dispositivo móvil, también es capaz de ofrecer una experiencia adaptada a cada una de las situaciones. Nuestra recomendación es que antes de contratar los servicios de una empresa de diseño web, visites su página con tu móvil. Si el resultado es un mero "bocadillo" de su web original, probablemente el diseño web de la página que te ofrezcan no pase de perrito caliente.