Crisis comunes en el diseño receptivo y cómo resolverlas

Sin nada establecido en una base sólida y elementos de diseño tan flexibles como el agua, ni siquiera es 'diseñar' en el sentido tradicional. El diseño receptivo va con (y se adapta) al flujo de dispositivos en el mercado. Todo el mundo está experimentando y nunca ha sido más maravilloso ser diseñador web.

Hay tantas prácticas para el diseño receptivo que es difícil mirar un conjunto y llamarlo el mejor. No podemos tener una lista de 'Qué hacer'. Sin embargo, podemos aprender de los errores de los demás.

Esto es lo que aprendí diseñando para una web receptiva:

Diseño para su audiencia. No usted mismo.

Supongamos que está tratando de llegar a una audiencia mayoritariamente india con un sitio web súper rápido y brillantemente diseñado y una gran experiencia de usuario para esos usuarios móviles. Hay 1.200 millones de personas allí; debería ser un éxito instantáneo y masivo. Los propios números están a tu favor. O lo serían si hubieras sabido que apenas el 13% de las personas tienen teléfonos inteligentes. (Fuente: Google Mobile Planet).

Esta es solo una de las razones por las que aprender y comprender a tu audiencia es crucial.

La diversidad cultural, la edad, el género, la profesión, el idioma, los dispositivos populares, etc. pueden ser factores muy importantes que harán o romperán su marca/sitio web.
Es más fácil de lo que parece.

Se sabe que los diseñadores pierden de vista para quién están diseñando.

Entonces, si no tiene un arquitecto UX a mano, hará bien en investigar esto por su cuenta. Eventualmente se reflejará en su trabajo, así que no se encoja de hombros y diga que no es su fuerte.

Para números específicos de móviles, utilice Mobile Planet de Google. Pregunta a tus clientes sobre su audiencia.

Si puede ponerse en el lugar de su audiencia, podrá crear diseños intuitivamente fáciles de usar. No es ciencia espacial, solo psique humana básica.

Un 'wireframe' necesita una historia

Su proyecto de diseño receptivo estará incompleto sin interacciones. Lo mismo se aplica a tu maqueta.

Su diseño (probablemente) no será un concierto de una página donde aparece el contenido y no sucede nada más.

Sin interacciones, sin estados, sin animaciones o efectos: básicamente se elimina todo lo que puede hacer que su sitio sea un éxito (o un fracaso, si se usa sin pensar). Si bien Style Tiles es un clásico por una buena razón (como dijo su fundador, "Para iniciar una conversación sobre el diseño"), es demasiado simple para ser sofisticado en los términos de diseño actuales.

INVIERTE TIEMPO EN CREAR PROTOTIPOS INTERACTIVOS DE TUS IDEAS. COLABORE EN ÉSOS AMPLIAMENTE ANTES DE COMENZAR CON EL DESARROLLO FRONTAL.

No se limite a lanzar ideas. ¿Has oído hablar de la narración?

Cuente una historia receptiva e interactiva a sus clientes con nada más que su prototipo e intuición.

Usa herramientas como Balsamiq, Axure, UXPin, etc. para crear versiones visuales de esas 'historias'. Acaricia su imaginación con palabras; alimentarlo con un prototipo bien elaborado.
Servirá para agilizar su trabajo de diseño y desarrollo para más adelante y le dará una pista algo definida para seguir. Y como bonificación: las primeras impresiones siguen siendo importantes. Un buen prototipo muestra que estás entusiasmado con el proyecto.

Contenido: Primero, Visible y Adaptable. Siempre

La razón por la que vas a responder es para que tu mensaje tenga un alcance más amplio al ser uniformemente accesible y agnóstico del dispositivo.

Derrotas todo el propósito del diseño receptivo al tener que ocultar tu contenido.

Su audiencia móvil va a descargar los datos de todos modos, entonces, ¿cuál es el punto de ocultarlos? Cree un inventario de elementos de contenido. Identifique qué elementos van en todas las páginas y cuáles en algunas específicas. Por ejemplo, sus botones CTA pueden estar en cada página o en páginas específicas (como página de destino, páginas de recursos relacionados, etc.).

Comienza poniendo los elementos de contenido primero y luego construye a partir de ahí. Las campanas y los silbatos van al final.

Primero: comprenda los objetivos de los usuarios y lo que quieren del sitio web, y luego adapte su contenido para facilitar el acceso a través de sus dispositivos.

En lugar de simplemente exprimir un artículo de un millón de palabras para que se ajuste a una página móvil, brinde a sus usuarios la oportunidad de leer detenidamente la información sin desplazarse sin cesar. Y las secuencias de comandos front-end o del lado del servidor no son la respuesta (real) para ello.

Una buena manera de hacerlo es usar un resumen breve y preciso para la vista previa .

Deje que el usuario decida si quiere desplazarse por su contenido para ver el resto. TL; DR es común entre todos (incluso las organizaciones de medios, razón por la cual publicamos historias sin una verificación de hechos real y basadas en nada más que exageraciones). Así que agrega una sección al final de tu contenido y hazlo más fácil.

Segundo: SÍ proporcione a los usuarios información completa en lugar de solo una versión fragmentada de la misma.

Utilice columnas y tipos de letra receptivos. Use Zurb Responsive Tables para tablas de datos fluidas. Comprima los medios (use CDN y almacenamiento en caché para aumentar el rendimiento).
El contenido es su mensaje. Asegúrese de que sea claro y visible, independientemente del tamaño del dispositivo.

Bonificación: el contenido primero te recuerda la jerarquía del contenido, y eso hace que el diseño de la navegación sea un proceso más fluido.

Respete las limitaciones y capacidades del dispositivo

Cuando hablamos de 'primero móvil' o 'mejora progresiva', ¿realmente entendemos y nos adaptamos a lo mínimo? Aquí hay un resumen de lo que debería ser "mínimo":

• Ancho de pantalla utilizable: 120 píxeles, mínimo.
• Soporte de lenguaje de marcado: XHTML Basic 1.1 entregado con tipo de contenido application/xhtml + xml.
• Codificación de caracteres: UTF-8
• Soporte de formato de imagen: JPEG, GIF 89a.
• Colores: 256 Colores, mínimo.
• Compatibilidad con hojas de estilo: CSS nivel 1, CSS nivel 2 @media rule junto con la computadora de mano y todos los tipos de medios
• HTTP: HTTP/1.0 o más reciente HTTP1.1
• Script: No hay soporte para secuencias de comandos del lado del cliente.

Según estas especificaciones, no es difícil crear un diseño funcional. El problema es escalar.
Es bueno considerar las dimensiones del dispositivo, pero eso es solo el comienzo y no todo. Aquí es importante minimizar y normalizar los scripts (rendimiento y experiencia), diseñar interfaces limpias con suficiente espacio en blanco (para tocar), respetar las limitaciones de conectividad y carga de los dispositivos (rendimiento) y siempre realizar pruebas rigurosas.

Por favor, aligere la carga

No quiero insistir en esto (tenemos muchas opiniones sobre este tema), pero no se puede negar la importancia de la velocidad de la página para obtener clasificaciones más altas y una mejor experiencia del usuario.

En pocas palabras: si su página tarda en cargarse, nadie se molestará en esperar a que se ponga al día.

Un enfoque como mobile-first en realidad funciona muy bien para esto. En la mejora progresiva, comenzamos con un mínimo de todo: elementos de la interfaz de usuario, funciones y el hecho de que estamos diseñando para los anchos de banda más estrechos de todos los dispositivos. Aquellos que aún desacreditan los méritos del enfoque móvil primero estarán de acuerdo en que esto pone a uno en mente el rendimiento y la velocidad por encima de todo lo demás .

Además, y no debería necesitar que se lo recuerden, debe controlar el tamaño de sus medios.

Por lo tanto, emplee CDN (factible para sitios web de tráfico medio a alto) y técnicas de desarrollo de back-end que aligeren específicamente las cargas de página. Utilice el almacenamiento en caché. Mejore el rendimiento percibido (qué tan rápido se siente el sitio para el usuario) marcando la casilla correspondiente antes de guardar una imagen JPG para la web.

Mantenga su diseño limpio y elegante (menos de todos sus clientes y usuarios).

TL; DR

Esto es lo que aprendí diseñando para una web receptiva:

• Diseño para una audiencia. Investigue un poco y use Google Mobile Planet (y otras herramientas similares) para los números.
• Un Wireframe puede cobrar vida a través de una historia. 'Prototipo' significa la versión preliminar de un dispositivo/sistema. Que sea algo que realmente funcione. Utilice herramientas de creación de prototipos interactivos.
• Haz que el contenido sea visible y adaptable. No oculte contenido de los móviles cuando se descargará de todos modos. Si hay una publicación original, agregue un breve resumen relevante que sea más adecuado para leer en dispositivos móviles.
• Respete las limitaciones y capacidades del dispositivo. Dejando a un lado el debate del mouse/toque con el dedo o las dimensiones a un lado, diseñe para las especificaciones mínimas del dispositivo utilizado por su público objetivo.
• Presta atención al rendimiento. No solo para mejores clasificaciones de búsqueda, sino también experiencia.

Biografía del autor: Lucy Barret está asociada con HireWPGeeks Ltd. Brinda servicios de conversión de HTML a WordPress y cuenta con un equipo de desarrolladores expertos para ayudarla. También es una bloguera apasionada y le encanta compartir sus conocimientos con la gran comunidad de WordPress. Siga a su empresa en las redes sociales como Facebook y Google+.