Ten en cuenta el contenido, el diseño y el diseño gráfico cuando crees elementos para una variedad de usuarios y dispositivos.
Cómo leen las personas en la Web
La guía de escritura del Gobierno de EE.UU. resume lo que las personas esperan de la escritura en la Web:
Las investigaciones demuestran que las personas no leen las páginas web, sino que las exploran. En promedio, las personas solo leen entre el 20 y el 28% del contenido de las páginas web. Leer desde pantallas es mucho más lento que leer desde papel. Los usuarios abandonarán tu sitio si la información no es fácil de acceder y comprender.
Cómo escribir para dispositivos móviles
Enfócate en el tema en cuestión y cuenta la historia de inmediato. Para que la escritura funcione en una variedad de dispositivos y ventanas gráficas, asegúrate de transmitir tus puntos principales al principio: como regla general, lo ideal es en los primeros cuatro párrafos, en alrededor de 70 palabras.
Pregúntate qué buscan las personas en tu sitio. ¿Están tratando de averiguar algo? Si las personas visitan tu sitio para obtener información, asegúrate de que todo el texto esté orientado a ayudarlas a alcanzar su objetivo. Escribe en voz activa y ofrece acciones y soluciones.
Publica solo lo que quieren tus visitantes y nada más.
La investigación del Gobierno del Reino Unido también muestra lo siguiente:
En otras palabras, usa un lenguaje sencillo, palabras más cortas y estructuras de oraciones simples, incluso para un público técnico y alfabetizado. A menos que haya un buen motivo para no hacerlo, mantén un tono de voz conversacional. Una antigua regla del periodismo es escribir como si le hablaras a un niño inteligente de 11 años.
Los próximos mil millones de usuarios
El enfoque de escritura simplificado es especialmente importante para los lectores en dispositivos móviles y es fundamental cuando se crea contenido para teléfonos de bajo costo con ventanas gráficas pequeñas que requieren más desplazamiento y pueden tener pantallas de menor calidad y pantallas menos responsivas.
La mayoría de los próximos mil millones de usuarios que se conecten a Internet tendrán dispositivos económicos. No querrán gastar su presupuesto de datos en navegar por contenido extenso y es posible que no estén leyendo en su idioma principal. Recorta el texto: usa oraciones cortas, la menor cantidad posible de signos de puntuación, párrafos de cinco líneas o menos y encabezados de una sola línea. Considera usar texto adaptable (por ejemplo, usar títulos más cortos para los viewport más pequeños), pero ten cuidado con las desventajas.
Una actitud minimalista hacia el texto también facilitará la localización e internacionalización de tu contenido, y aumentará las probabilidades de que se cite en las redes sociales.
En resumen:
- Opta por la sencillez
- Evite el desorden
- Ve al grano
Elimina el contenido innecesario
En términos de tamaño en bytes, las páginas web son grandes y cada vez más grandes.
Las técnicas de diseño responsivo permiten publicar contenido diferente para viewports más pequeños, pero siempre es recomendable comenzar por optimizar el texto, las imágenes y otros tipos de contenido.
Los usuarios web suelen estar orientados a la acción y "se inclinan hacia adelante" en la búsqueda de respuestas a su pregunta actual, en lugar de recostarse para absorber un buen libro.
Jakob Nielsen
Pregúntate qué intentan lograr las personas cuando visitan mi sitio.
¿Cada componente de la página ayuda a los usuarios a alcanzar su objetivo?
Quita los elementos de página redundantes
Según HTTP Archive, los archivos HTML constituyen casi 70,000 y más de nueve solicitudes para la página web promedio.
Muchos sitios populares usan varios miles de elementos HTML por página y varios miles de líneas de código, incluso en dispositivos móviles. El tamaño excesivo del archivo HTML quizás no haga que las páginas se carguen más lentamente, pero una carga útil de HTML pesada puede ser un signo de exceso de contenido: los archivos .html más grandes significan más elementos, más contenido de texto o ambos.
Reducir la complejidad del HTML también reducirá el peso de la página, ayudará a habilitar la localización y la internacionalización, y facilitará la planificación y la depuración del diseño responsivo. Para obtener información sobre cómo escribir código HTML más eficiente, consulta HTML de alto rendimiento.
Cada paso que le pidas a un usuario que realice antes de obtener valor de tu app te costará el 20% de los usuarios.
Gabor Cselle, Twitter
Lo mismo se aplica al contenido: ayuda a los usuarios a encontrar lo que desean lo más rápido posible.
No solo ocultes el contenido a los usuarios de dispositivos móviles. Intenta lograr la paridad de contenido, ya que adivinar qué funciones no extrañarán los usuarios de dispositivos móviles seguramente fallará para alguien. Si tienes los recursos, crea versiones alternativas del mismo contenido para diferentes tamaños de viewport, incluso si solo es para los elementos de la página de alta prioridad.
Considera la administración de contenido y el flujo de trabajo: ¿los sistemas heredados generan contenido heredado?
Simplifica el texto
A medida que la Web se vuelve móvil, debes cambiar tu forma de escribir. Mantén la presentación simple, reduce el desorden y ve directo al grano.
Quita las imágenes redundantes
Las imágenes pueden ser atractivas, divertidas e informativas, pero también ocupan espacio en la página, aumentan su peso y la cantidad de solicitudes de archivos. La latencia empeora a medida que empeora la conectividad, lo que significa que el exceso de solicitudes de archivos de imagen es un problema cada vez mayor a medida que la Web se vuelve móvil.
Las imágenes también consumen energía. Después de la pantalla, la radio es el segundo mayor factor de agotamiento de la batería. Más solicitudes de imágenes, más uso de la radio y más baterías descargadas. Incluso para renderizar imágenes se necesita energía, y esta es proporcional al tamaño y la cantidad. Consulta el informe de Stanford Who Killed My Battery?
Si puedes, elimina las imágenes.
A continuación, se muestran algunas sugerencias:
- Considera diseños que eviten las imágenes por completo o que las usen con moderación. El texto puede ser hermoso. Pregúntate: "¿Qué intentan lograr los visitantes de mi sitio? ¿Las imágenes ayudan en ese proceso?"
- En el pasado, era común guardar los encabezados y otros textos como gráficos. Ese enfoque no responde bien a los cambios de tamaño del viewport y aumenta el peso y la latencia de la página. Usar texto como gráfico también significa que los motores de búsqueda no pueden encontrar el texto y que los lectores de pantalla y otras tecnologías de asistencia no pueden acceder a él. Usa texto "real" siempre que sea posible. Las fuentes web y CSS pueden habilitar una tipografía atractiva.
- Usa CSS en lugar de imágenes para los degradados, las sombras, las esquinas redondeadas y las texturas de fondo, funciones compatibles con todos los navegadores modernos. Sin embargo, ten en cuenta que CSS puede ser mejor que las imágenes, pero aún puede haber una penalización por procesamiento y renderización, especialmente significativa en dispositivos móviles.
- Las imágenes de fondo rara vez funcionan bien en dispositivos móviles. Puedes usar consultas de medios para evitar las imágenes de fondo en los puertos de vista pequeños.
- Evita las imágenes de la pantalla de presentación.
- Usa CSS para las animaciones de la IU.
- Conoce tus glifos; usa símbolos e íconos Unicode en lugar de imágenes, con fuentes web si es necesario.
- Considera usar fuentes de íconos, que son gráficos vectoriales que se pueden escalar de forma infinita, y se puede descargar un conjunto completo de imágenes en una sola fuente. (Sin embargo, ten en cuenta estas inquietudes).
- El elemento
<canvas>se puede usar para crear imágenes en JavaScript a partir de líneas, curvas, texto y otras imágenes. - Las imágenes SVG intercaladas o con URI de datos no reducirán el peso de la página, pero pueden disminuir la latencia, ya que reducen la cantidad de solicitudes de recursos. Los SVG intercalados tienen gran compatibilidad con los navegadores para computadoras y dispositivos móviles, y las herramientas de optimización pueden reducir significativamente el tamaño de los SVG. Del mismo modo, los URIs de datos son bien compatibles. Ambos se pueden insertar en CSS.
- Considera usar
<video>en lugar de GIFs animados. Todos los navegadores para dispositivos móviles admiten el elemento de video (excepto Opera Mini).
Para obtener más información, consulta Optimización de imágenes y Cómo eliminar y reemplazar imágenes.
Diseña contenido que funcione bien en diferentes tamaños de viewport
"Crea un producto, no reinventes uno para pantallas pequeñas. Los excelentes productos para dispositivos móviles se crean, no se portan".
Diseño y desarrollo para dispositivos móviles, Brian Fling
Los grandes diseñadores no "optimizan para dispositivos móviles", sino que piensan de forma responsiva para crear sitios que funcionen en una variedad de dispositivos. La estructura del texto y el resto del contenido de la página son fundamentales para tener éxito multidispositivo.
Muchos de los próximos mil millones de usuarios que se conectarán a Internet usan dispositivos de bajo costo con ventanas gráficas pequeñas. Leer en una pantalla de 3.5" o 4" de baja resolución puede ser difícil.
Aquí hay una fotografía de los dos juntos:
En la pantalla más grande, el texto es pequeño, pero legible.
En la pantalla más pequeña, el navegador renderiza el diseño correctamente, pero el texto es ilegible, incluso cuando se acerca. La pantalla se ve borrosa y tiene una "dominante de color" (el blanco no se ve blanco), lo que hace que el contenido sea menos legible.
Diseña contenido para dispositivos móviles
Cuando desarrolles para un rango de ventanas gráficas, ten en cuenta el contenido, así como el diseño gráfico y el diseño de la página. Diseña con texto e imágenes reales, no con contenido de marcador de posición.
"El contenido precede al diseño. El diseño sin contenido no es diseño, es decoración".
Jeffrey Zeldman
- Coloca el contenido más importante en la parte superior, ya que los usuarios suelen leer las páginas web siguiendo un patrón en forma de F.
- Los usuarios visitan tu sitio para alcanzar un objetivo. Pregúntate qué necesitan para lograr ese objetivo y deshazte de todo lo demás. Sé estricto con los adornos visuales y textuales, el contenido heredado, los vínculos excesivos y otros elementos innecesarios.
- Ten cuidado con los íconos de uso compartido en redes sociales, ya que pueden sobrecargar los diseños y el código puede ralentizar la carga de la página.
- Diseña diseños responsivos para el contenido, no para tamaños de dispositivos fijos.
Contenido de prueba
- Verifica la legibilidad en ventanas gráficas más pequeñas con las Herramientas para desarrolladores de Chrome y otras herramientas de emulación.
- Prueba tu contenido en condiciones de ancho de banda bajo y latencia alta. Prueba el contenido en una variedad de situaciones de conectividad.
- Intenta leer tu contenido e interactuar con él en un teléfono de bajo costo.
- Pídeles a tus amigos y colegas que prueben tu app o sitio.
- Compila un laboratorio de pruebas de dispositivos simple. El repo de GitHub del Mini Mobile Device Lab de Google incluye instrucciones para crear tu propio dispositivo. OpenSTF es una aplicación web simple para probar sitios web en varios dispositivos Android.
Aquí se muestra OpenSTF en acción:
Los dispositivos móviles se usan cada vez más para consumir contenido y obtener información, no solo como dispositivos para la comunicación, los juegos y los medios.
Por lo tanto, es cada vez más importante planificar el contenido para que funcione bien en una variedad de ventanas gráficas y priorizar el contenido cuando se considera el diseño, la interfaz y el diseño de interacción en varios dispositivos.
Comprende el costo de los datos
Las páginas web son cada vez más grandes.
Según HTTP Archive, el peso promedio de la página de los principales millones de sitios ahora supera los 2 MB.
Los usuarios evitan los sitios o las apps que perciben como lentos o costosos, por lo que es fundamental comprender el costo de cargar los componentes de las páginas y las apps.
Reducir el peso de la página también puede ser rentable. Chris Zacharias de YouTube descubrió que, cuando redujeron el tamaño de la página de reproducción de 1.2 MB a 250 KB, sucedieron los siguientes cambios:
En otras palabras, reducir el peso de la página puede abrir mercados completamente nuevos.
Cómo calcular el peso de la página
Existen varias herramientas para calcular el peso de la página. El panel de red de las herramientas para desarrolladores de Chrome muestra el tamaño total en bytes de todos los recursos y se puede usar para determinar los pesos de los tipos de recursos individuales. También puedes verificar qué elementos se recuperaron de la caché del navegador.
Firefox y otros navegadores ofrecen herramientas similares.
WebPagetest permite probar las cargas de página iniciales y posteriores. Puedes automatizar las pruebas con secuencias de comandos (por ejemplo, para acceder a un sitio) o con sus APIs de REST. En el siguiente ejemplo (carga de developers.google.com/web), se muestra que el almacenamiento en caché se realizó correctamente y que las cargas de página posteriores no requirieron recursos adicionales.
WebPagetest también proporciona un desglose del tamaño y las solicitudes por tipo de MIME.
Calcula el costo de la página
Para muchos usuarios, los datos no solo cuestan bytes y rendimiento, sino también dinero.
El sitio What Does My Site Cost? te permite estimar el costo financiero real de cargar tu sitio. En el siguiente histograma, se muestra cuánto cuesta (con un plan de datos prepagado) cargar amazon.com.
Ten en cuenta que esto no considera la asequibilidad en relación con los ingresos. Los datos de blog.jana.com muestran el costo de los datos.
| Costo del plan de datos de 500 MB (USD) |
Salario mínimo por hora (USD) |
Horas de trabajo para pagar el plan de datos de 500 MB |
|
| India | USD 3.38 | $0.20 | 17 horas |
| Indonesia | USD 2.39 | $0.43 | 6 horas |
| Brasil | USD 13.77 | $1.04 | 13 horas |
El peso de la página no es solo un problema para los mercados emergentes. En muchos países, las personas usan planes para dispositivos móviles con datos limitados y evitarán tu sitio o aplicación si perciben que son pesados y costosos. Incluso los planes de datos móviles y Wi-Fi "ilimitados" suelen tener un límite de datos más allá del cual se bloquean o se limitan. Por estos motivos, es mejor ser lo más transparente posible sobre la cantidad de datos que consume tu página. En la siguiente entrada de blog, se proporcionan prácticas recomendadas específicas: Cómo fomentar la confianza a través de la transparencia de costos
En resumen, el peso de la página afecta el rendimiento y cuesta dinero. En Optimizing content efficiency, se muestra cómo reducir ese costo.