Cómo adoptar un diseño web responsive en tu sitio

CÓMO CONSEGUIR UN DISEÑO WEB RESPONSIVE

¡TE EXPLICAMOS TODAS LAS CLAVES!

Ya vimos en el anterior artículo ¿Diseño Web Adaptativo, qué es? cómo podemos analizar nuestra página web para saber si es responsive en móviles o no.

En esta ocasión, vamos a ver cómo conseguir un diseño web responsive y qué solución podemos dar a todos aquellos que hayan verificado que su web no es útil en móvil. No hay nada que no se pueda arreglar.

MI PÁGINA WEB NO ES RESPONSIVE ¿QUÉ HAGO?

Bien, como dijimos, lo primero es no entrar en pánico. No te pongas en lo peor de pensar que no sirve para nada o que vas a tener que costear una nueva web.

No tiene porqué ser así.

Lo primero que debes hacer es una auditoría web profesional. ¿Cuesta dinero? Sí, lo cuesta, pero es bastante asequible y te permitirá ahorrarte futuros costes mucho más altos y eso es un ahorro considerable.

Como hacer mi web responsive

En esa auditoría te darán todos lo puntos clave que hay que solucionar y que, seguramente en una parte importante, serán los que vimos con anterioridad:

  • Rendimiento en carga de navegador móvil
  • Adaptación de todos los elementos visuales y textos a pantallas móvil
  • Uso de botones e interacción con el contenido (UX/UI)

ELEMENTOS PARA CONSEGUIR UN DISEÑO WEB RESPONSIVE

Pero además existen otros elementos que hay que considerar para que tu web se adapte con facilidad a todo tipo de dispositivos:

  • Tema responsive
  • No usar formato Flash (es antiquisisisisimo)
  • Eliminar widgets innecesarios
  • Actualización técnica
  • Optimizado de imágenes
  • Fuentes siempre estándar
  • Atención a los procesos de navegación de usuario

Vamos a verlos uno por uno.

USA UN TEMA RESPONSIVE

El tema de tu página web es la plantilla de diseño que se ha usado para crearla. Cada vez más, estas plantillas son totalmente capaces de adaptarse a todos los dispositivos, sobre todo aquellas que se han desarrollado especialmente para un cliente de forma personalizada. No obstante, si tu diseño web es relativamente antiguo, de unos 4 o 5 años atrás, es probable que tu tema no esté preparado para adaptarse a un cambio de pantalla o a un giro de la misma.

Hacer un cambio de tema puede ser relativamente fácil para un profesional y no tienes porque perder el contenido de tu web.

Además, ese re-styling le dará probablemente un aire más fresco a tu diseño y te permitirá estar más cerca de tus usuarios porque tendrá mejoras de usabilidad.

Pasa tu web a temas de última generación con todo tipo de funcionalidades responsive

NO UTILICES ELEMENTOS PROGRAMADOS CON FLASH

Flash es el programa con el que hasta hace relativamente poco se creaban las animaciones y los textos interactivos para páginas web.

Hoy en día es como un Pterodáctilo. Cualquier rastro que quede de él, debería estar en un museo. Pero no en una página web. Los navegadores ya no vienen preparados para leerlo por lo que, si tu página web lo tiene, dará muchos problemas de carga acabando irremediablemente en un error de seguridad y el propio navegador pedirá al usuario que lo desactive.

Es totalmente inservible para SEO, con lo que te lo pondrá aún más difícil para que tu web alcance puestos de interés en la lista de resultados de Google. Y por si esto no fuera suficiente, añadiremos que es completamente inadaptable a móviles.

Es difícil ver ya páginas web que contengan el formato Actionscript, pero si tu web es una de ellas…

Sustituye todos los elementos flash que pueda tener por HTML5, ya!

ELIMINA WIDGETS INECESARIOS

Antes que nada advertirte que, si no eres un profesional del diseño web…. NO TOQUES NADA. Si eliminas algún elemento que esté haciendo de soporte a otros puedes arruinar, no solo el diseño de tu página web, sino todo su funcionamiento.

Dicho esto, es normal que en un diseño web encontremos muchos widgets o módulos de diseño que no son necesarios. Bien porque se han utilizado para construir una determinada estética de la página, bien porque tienen funcionalidades puntuales y no se han eliminado una vez concluida esta.

Para que tu diseño web sea perfecto en un móvil tendrás que sacrificar parte de ese diseño superrevolucionario y genial que hace parecer tu web una auténtica maravilla.

Lo móviles requieren simplicidad, limpieza de líneas y alto contraste. Nada de Ad-ons con imágenes que giran 360º, cambios de color y sliders en 3D.

Menos es más

DISEÑO WEB MOBILE - FIRST

Es una forma de enfocar el diseño de una página web. Conseguir un diseño web mobile first significa comenzar el diseño partiendo de su versión móvil y trabajar, más tarde a partir de ella, hasta su versión de escritorio. Así te aseguras al 100% que será perfecta para móviles.

En CLEVER ponemos la mayor atención en la versión móvil de tu web ya que será, al final, la más utilizada por tus clientes.

Diseño web Responsivo

ACTUALIZACIÓN TÉCNICA

Las páginas web deben actualizarse constantemente. No solo su contenido, sino sus tripas técnicas: plugins, temas, robots txt, comprobación de redirecciones, indexación, etc.

Es la mejor forma de mantener la web segura y con buenos resultados en todos los rastreos de Google (crawleos).

Página web siempre actualizada

OPTIMIZAR IMÁGENES

Ten en cuenta que la resolución de imágenes que requiere una pantalla pequeña, no puedes ser la misma que la de una pantalla grande. Reducir y optimizar las imágenes hará tu web más rápida, y adaptar las imágenes para la versión móvil hará tu web más eficiente y responsive.

Con frecuencia los propios temas traen soluciones para que puedas implementar diferentes tamaños de imagen según que versión estemos montando (móvil o pc) Hay que respetar las resoluciones que requieren cada uno de ellos para que conseguir la mayor adaptabilidad.

Imágenes optimizadas y adaptadas a resoluciones de pantallas

FUENTES ESTÁNDAR

Puede parecerte una tontería pero el tipo de fuente (tipografía) que usas para tu diseño web es importante. Al igual que ocurre con el diseño demasiado elaborado, la adaptabilidad a navegadores en versión móvil no se lleva demasiado bien con las fuentes de diseño complicado, personalizadas o creativas.

Mucho mejor utilizar fuentes estándar, comunes a todos: Arial, Times New Roman, Helvética.

Ten en cuenta que si usas fuentes demasiado especiales, tu usuario puede no tenerlas y la experiencia que se lleve de tu web puede ser desastrosa.

Siempre fuentes sencillas y comunes

ATENCIÓN A LOS PROCESOS DE NAVEGACIÓN DE USUARIOS

Esto es, sin duda, uno de los elementos más importantes a los que se enfrenta un diseñador o desarrollador web.

Hay que pensar en los usuarios. En como navegan a través de la red, en qué hace que se decidan por una página web u otra y, sobre todo, qué es lo que hace que se queden tiempo navegando dentro de ella.

Esta es la clave: mantener al usuario dentro de tu página web tanto tiempo como sea posible. 

¿Cómo conseguir que el usuario permanezca dentro de la página web?

En primer lugar, planificando al milímetro la navegación de dicha web atendiendo a la finalidad que puede tener tu usuario objetivo para utilizarla. ¿Qué espera encontrar? ¿Cómo? Y siempre de la forma más fácil posible para él.

De acuerdo a ello, mantenemos la máxima de la simpleza: una estructura simple, clara, bien definida y fácil de seguir y, sobre todo, de llevar a los usuarios a donde nos interesa. Una jerarquía de páginas sencilla, categorizaciones lógicas que hagan posible que el usuario encuentre lo que busca a la mayor brevedad posible.

Contenido útil, muy útil. La información que ofrezca debe ser siempre relevante para los usuarios.

Interacción bien colocada y visible. La arquitectura de tu página web debe estar muy bien organizada con botones visibles, opciones de contacto accesibles y unas claras invitaciones a participar en un diálogo.

CONCLUSIÓN

Estos son los puntos que necesitas controlar para que tu diseño web sea totalmente responsive o adaptable a todo tipos de dispositivos.

Unidos a los que ya explicamos en el articulo anterior suponen un buen repaso a los componentes necesarios para un diseño web perfectamente útil y eficaz en todo tipo de dispositivos.

Nos reiteramos en comentar que el hecho de que tu web sea perfectamente visionada en móviles es de vital importancia. Todos usamos el móvil para movernos por el mundo digital, es nuestro acceso más rápido y nos posibilita conseguir todo lo que queremos / necesitamos lo más rápidamente posible.

Nos movemos en la inmediatez total. Así que, démosles a los usuarios lo que quieren.

#BECLEVER