Diseño responsivo

Desde el año 2012, los teléfonos inteligentes y tabletas han superado el número de ordenadores portátiles o de escritorio en posesión de usuarios de la web. Debido a esto, ha surgido una nueva tendencia del diseño llamada diseño responsivo, que establece que reajustar el tamaño en que se muestra el sitio, dependiendo el dispositivo en que se visualice no es suficiente, sino que el sitio debe adaptarse al tamaño y modo de empleo del dispositivo, logrando la mejor experiencia de visualización posible para el usuario. Algunos de estos dispositivos son: consolas de videojuegos, teléfonos inteligentes, televisiones inteligentes, computadoras portátiles, computadoras de escritorio y tabletas, ipads, iphones, entre otros.

La tecnología que está en constante avance nos llevará a explorar nuevas opciones para lograr que los proyectos que antes teníamos solamente en físico se transformen y se abran paso en el mundo digital; al igual que en un negocio físico, existen varios puntos que podemos explotar para lograr posicionarnos como lo sería nuestro local comercial, un letrero en la fachada, los anaqueles para desplegar nuestro producto; del mismo modo en el mundo digital y del desarrollo web existen herramientas gráficas como videos, animaciones, textos efectivos que pueden apoyarnos a que los usuarios que visiten nuestra web permanezcan por más tiempo, y esto los lleve tomar la decisión de adquirir nuestros servicios o productos.

Es muy importante diseñar correctamente los sitios web de internet de una empresa, porque de esto dependerá la interacción del usuario con el sitio y si logra cumplir sus objetivos (obtener información, hacer una compra, compartir información etc.).

En términos generales, un buen diseño responsivo web debe estar adecuado a las necesidades, habilidades y objetivos de los usuarios, por lo tanto debe seguir un proceso similar al siguiente:

1. Planificación

Dentro de la planificación se involucran varios procesos; antes de comenzar a diseñar el sitio es requisito indispensable realizar una reunión con el cliente, en donde se puedan medir los objetivos principales, el mensaje principal a comunicar con el sitio y los resultados esperados del mismo; se hablará acerca de la trascendencia del negocio, los años que lleva la empresa en el mercado, cuáles son sus servicioa y/o productos estrella y las diferencias competitivas de la marca; aunado a esta investigación se revisará el impacto gráfico buscado y más conveniente, el léxico que debemos manejar al usuario final, los colores corporativos y adjetivos que logren describir la visión del sitio web de diseño responsivo.

2. Diseño

El primer paso para lograr un diseño responsivo efectivo es la estructura del discurso visual, con ello queremos decir que debemos de ordenar la información que el cliente quiere comunicar dentro de la web para que sus clientes potenciales puedan leerlo en un orden adecuado y entenderlo, además de impulsar a generar acciones de navegación por parte de los visitantes.

Posteriormente se realizarán bocetos generales para llevar una guía del discurso visual; aunado a color y ritmo en la composición, añadiremos llamados a la acción, materiales gráficos como fotografías y videos, ya sean de apoyo al texto o como destacados para comunicar de una mejor forma la misión empresarial.

Finalmente se realiza la maquetación directamente en una URL online para que el sitio vaya adquiriendo las características digitales de animación de las partes, botones con acción, entradas de textos y materiales gráficos, menú de navegación, buscadores, formularios, etc.

3. Evaluación

La versión preliminar del sitio será probada en diversos aspectos, uno de los más importantes es la comprención del usuario para asegurar que tengamos el objetivo UX (User Experience) asegurado.

El sitio web de diseño responsivo no sería óptimo si no se revisa la visual en cada uno de los dispositivos, al tener un sitio web flexible podemos otorgar una mayor funcionalidad para los usuarios en cualquier tamaño de pantalla, la evaluación en consecuencia se realiza para tabletas, teléfonos celulares diversos, así como pantallas de escritorio.

4. Implementación y lanzamiento

Al finalizar el diseño de cada una de las secciones contenidas en el sitio tendremos una web completa para poder implementar en la URL real de nuestra empresa, permitiendo así que los clientes potenciales puedan navegarla.

Un buen diseño web de la tendencia antes mencionada también debe ser:

• Comprensible

Que sea sencillo entender cómo está distribuida la información en el sitio, nos dé la información necesaria para impulsar la acción concreta en el usuario, dicha acción puede variar desde dar a conocer un producto nuevo, una gama de servicios, lograr la venta directa en línea, o bien, contactar con la empresa.

• Claro

Que tenga instrucciones claras o titulares obvios sobre lo que el usuario podría necesitar al visitar el sitio, cada una de sus partes debe estar correctamente delimtada para evitar confundir al usuario con demasiada información al mismo tiempo.

• Amigable

Debe tener una navegación sencilla en la medida de el rubro o ncho de mercado, la mayoria de las empresa B2B business to business, no se tomarán el tiempo para navegar una web intrincada, buscarán la que les ofrezca información inmediata.

• Impacto visual

Esto no quiere decir que el sitio deba estar plagado de color, animación, videos, más bien refiere a que debe tener una vista agradable para el tipo de usuario específico que buscamos visite nuestra web y adquiera nuestros servicios.

• Informativo

Si bien muchas de las veces los usuarios de internet buscan dentro de la web para adquirir algun servicio o porducto, no podemos dejar de lado que el mercado actual es informado, busca recabar la mayor cantidad de información antes de realizar una inverisón, es por ello que el sitio debe contener una cierta cantidad de información de utilidad independientemente de los productos o servicios que busca vender.

Una gran ventaja de los diseños flexibles es que no asumen las proporciones de la pantalla del dispositivo en el que se muestran, sino que se adaptan al tamaño del dispositivo en que se visualizan, esto significa que modifican el tamaño de los elementos para lograr la mejor visual en cada tamaño de pantalla.

Es importante mencionar que el contenido que se presente dentro de nuestro sitio web será el mismo para cualquier dispositivo, ya que es la misma versión, a diferencia del diseño web adaptativo en el que se cuentan con varias versiones del sitio web para cada tamaño de pantalla. El diseño web adaptativo recientemente se anunció que será penalizado por Google, y en consecuencia se encuentra en desuso, tiene la desventaja de contener una mayor cantidad de información y peso dentro de nuestros servidores, así como contenido basura por la repetición de elementos gráficos adaptados a cada tamaño requerido.

Por su parte, en el diseño web responsivo se programa con proporciones en vez de medidas fijas, es decir que si en un sitio web normal trabajamos nuestros anchos de pantalla a 1280 px, para el responsivo indicaremos la medida como 100%, aquí es en donde entra el módulo de CSS3 llamado ‘media queries’, que son una serie de órdenes incluidas en la hoja de estilos, que permiten adaptar la representación del contenido de manera mucho más profunda y exhaustiva a características específicas del dispositivo, como la resolución de su pantalla o características de accesibilidad como el braille. Funciona básicamente por columnas entonces, dependiendo del tamaño y proporciones de la pantalla en que se visualizará el sitio, se modifica el número de columnas necesarias para distribuir apropiadamente la información visual: la resolución de una computadora de escritorio requiere cinco columnas, la de una tableta requiere cuatro y un teléfono inteligente de tamaño estándar requiere sólo tres.

Esta tendencia fue creada y difundida por el diseñador y autor norteamericano Ethan Marcotte, y busca que se pueda visualizar una página web igual de bien en un dispositivo ‘viejo’ que en uno con tecnología de punta. Lo que lo hace tan funcional y popular hoy en día es que con una sola versión del código en HTML y CSS se cubren todas las resoluciones de pantalla, y por lo tanto, el sitio queda optimizado para todo tipo de dispositivos. También es muy útil porque ayuda a posponer o incluso evitar la necesidad de crear una aplicación para cada sistema operativo de dispositivos móviles, como iOS 8 o Android KitKat.

El diseño web adaptable ayuda a evitar redirecciones y los errores que se derivan de estas, así como evitar los errores al acceder desde enlaces de las redes sociales o ‘social links’ desde cualquier aparato.

Al tener solamente una URL para el sitio completo, es ideal para la optimización en motores de búsqueda porque facilita el análisis del sitio para Google y otros motores.

El siguiente punto es la usabilidad, es decir qué tan fácil le es al usuario navegar e interactuar con el sitio web y su contenido; la interactividad es un punto de la mano, clave en el diseño web responsivo.

Otro aspecto es la velocidad de carga, que es indispensable en los dispositivos móviles, en los que se requiere una mayor velocidad, de lo contrario los usuarios podrían abandonar la web antes de que esta se haya descargado por completo.

En la actualidad, el mercado online es muy competitivo y debemos aprovechar todas las herramientas a nuestro alcance para destacar y ofrecer más y mejores servicios, del mismo modo debemos tener los recuersos visuales para hacerlo; el 86% de las personas que navegan en internet durante el día lo hace al menos una ves por medio de su dispositivo móvil, ya sea para informarse acerca de algún producto o servicio o para adquirirlo, es por ello que nuestra empresa debe contar con una web que se adapte a estas resoluciones de pantalla de forma que al usuario le resulte sencillo encontrar lo que está buscando.

En Optimización Online podemos apoyarte para que la planeación de tu proyecto web sea efectiva desde el primer día, asegurando que su inversión rendirá frutos a mediano y largo plazo, ya que será un producto de valor e importancia competitiva en el nicho de mercado en el que se encuentra tu negocio. No lo pienses más, el éxito para tu negocio en línea está al alcance de un clic, llámanos hoy mismo y solicita tu cotización.