¿Qué es el diseño web sostenible? Cómo diseñar una web para ser amigable con el mundo y bueno para los negocios.

¿Alguna vez has sentido que el mundo en línea de hoy es "rápido" pero "pesado" sorprendentemente? Tenemos un hermoso sitio web. Hay videos de alta resolución con animación espectacular, pero a veces ... antes de que termine el sitio web. Secretamente aramos accidentalmente las redes sociales.

Este problema no se trata solo de la "velocidad" o la "paciencia" de los usuarios, sino que oculta "costos" que nunca quizás pensemos tanto en los "costos comerciales" que son invisibles como los "costos ambientales" que el mundo está pagando en cada clic. ¡Pero es una estrategia importante que las empresas modernas deben saber!

El verdadero problema en la vida

Imagine que es un propietario de un negocio que invirtió en el sitio web por cientos de miles de baht. El sitio web es muy hermoso. La función está completa, pero encontrando problemas interminables.

• Los clientes se quejan de que "Web Slow" , especialmente cuando se abren en dispositivos móviles.
• La tasa de libros (tasa de retorno) es alta porque la mayoría de las personas no pueden esperar y presionar para cerrar antes de que la web termine de descargar.
• Hosting y CDN (red de entrega de contenido) más caros cada año, porque su sitio web utiliza muchos recursos (ancho de banda) en cada pantalla.
• El rango de SEO no se mueve, a pesar de hacer un buen contenido. Eso puede deberse a que Core Web Vitals no es bueno, lo que se debe en parte a la velocidad de la carga web.

Estos problemas parecen ser técnicos, pero en realidad son los "síntomas" del sitio web que "pesado de lo necesario" afecta directamente tanto a la experiencia del usuario como al costo de su negocio.

Aplicación de ilustraciones:

La imagen del usuario está mirando la pantalla móvil con irritabilidad. Hay un icono de carga. Gire en la pantalla. El lado tiene un gráfico de tasa de rebote más alta. Y el ícono de plata que voló transmite la lentitud tanto de los clientes como de los gastos.

¿Por qué ocurrió ese problema?

La razón por la que la mayoría de los sitios web son "pesados" y "energía residual" no es un asunto complicado. Es causado por los conceptos de diseño que han sido populares en el pasado, "lo más bueno", lo que lleva a la creación del sitio web:

• Empaquetado con imágenes grandes: use archivos de imagen de alta resolución (.png, .jpeg, 100%calidad) sin comprimir o usar un formato que sea adecuado para la era como la webp o AVIF, lo cual es mucho más pequeño.
• Use demasiado las fuentes personalizadas y los scripts externos: cada vez que la página web carga el navegador debe ejecutarse para descargar archivos de fuentes, rastrear scripts o herramientas de análisis de muchos lugares que causan algo llamado recursos de bloqueo de renderizado , que bloqueó la página web directamente.
• Código hinchado: Código HTML, CSS y JavaScript que están duplicados o no eliminando las partes no utilizadas que hacen que el tamaño general del sitio web aumente innecesariamente
• Confiar en videos pesados y animación: fondo de video o una animación compleja para verse hermosa. Pero es un factor importante que el sitio web debe usar una energía muy alta para procesar tanto el servidor como el lado del usuario

Todos estos componentes son como "exceso de grasa" que hace que nuestro sitio web sea solitario y lento y la causa de todos los problemas de los que hablamos al principio.

Aplicación de ilustraciones:

Las imágenes infográficas simples muestran la estructura del sitio web que "Fat" tiene un icono de imagen grande, archivo de video, código enredado y muchas fuentes. Señaló al servidor que está trabajando duro hasta que esté caliente (fumar)

Si se deja, ¿cómo afectará?

Tener un sitio web "pesado" y no ecológico puede parecer un pequeño problema, pero a la larga tiene un impacto más intenso tanto en nuestro "negocio" como en nuestro "mundo".

Impacto comercial:

• Mayores costos: cuanto más el sitio web use mucha información. El servicio de alojamiento y CDN serán aún más altos.
• PERDIDO Oportunidades de competencia: en la época en que el usuario espera velocidad si su sitio web es solo 1-2 segundos más tarde que los competidores, puede significar perder a los clientes ante los competidores para siempre.
• Tasa de conversión más baja: cada segundo que el sitio web cargue más lento eliminará el pedido o la tasa de contacto significativamente
• Destruir la imagen de la marca: los sitios web lentos y difíciles crean una mala experiencia y hacen que su marca se vea ininterrumpida en los ojos de los usuarios

El impacto en el mundo:

• Aumente la emisión de carbono: ¡ Internet es uno de los liberadores de carbono más grandes del mundo! Todos los datos que se envían desde el servidor a su pantalla requieren una enorme energía eléctrica del centro de datos de todo el mundo. De acuerdo con los principios de la comunidad de diseño web sostenible
• Despertar energía en el lado del usuario: web pesada, CPU forzada y baterías del dispositivo de usuario. (Tanto móvil como computadora) debe trabajar más duro, lo cual es un desperdicio de energía por razón

Ignorar este problema no es diferente de abrir el agua sin saber que tiene costos que deben pagarse todo el tiempo. Tanto en forma de dinero como en el impacto ambiental

Aplicación de ilustraciones:

La imagen del lado izquierdo es un gráfico que muestra la tasa de conversión y los ingresos disminuyen. Junto con una mayor factura de alojamiento, el lado derecho es el mundo que se ve caliente. Hay una chimenea de humo del centro de datos, que está vinculada desde un sitio web pesado.

¿Hay alguna solución? ¿Y dónde debería comenzar?

La buena noticia es que podemos resolver este problema directamente con los principios del diseño web sostenible , que su corazón no es para que el sitio web sea "aburrido", sino que es hacer la web. "Eficiencia" (eficiencia) en todas las dimensiones

El principio principal de que puede comenzar de inmediato es el siguiente:

1. El diseño que enfatiza la simplicidad (diseño de Lean & Clean): Básico Pregúntese si todos los elementos en la página web son realmente necesarios o no. El diseño es simple, no complicado, no solo para verse cómodo y fácil de usar. Pero también ayuda a reducir el tamaño del archivo y los recursos que deben usarse para cargar enormes
2. Optimización de medios inteligentes:
   • Figura: use siempre la herramienta de compresión de imagen antes de cargar.
   • Elija el formato correcto: cambie a nuevos formatos, WebP o AVIF que brinde buena calidad, pero el archivo es mucho más pequeño que JPEG o PNG.
   • Use técnicas de carga perezosa: configure la imagen o el video debajo de la pantalla. (Todavía no se ve) se carga solo cuando el usuario se desliza solo hacia abajo
3. Escritura efectiva (código eficiente):
   • Minify HTML, CSS, JavaScript: Elimine las brechas y caracteres innecesarios del archivo de código para reducir el tamaño del archivo.
   • Elimine el código no utilizado: verifique regularmente y elimine CSS o JS que no se están ejecutando.
4. Utilice la estrategia de almacenamiento en caché para ser útil: hacer el cobro del sitio web es pedir el riel de usuario de los componentes de "recordar" de su sitio web. Cuando regrese, no es necesario descargar todo nuevamente haciendo que el sitio web se descargue mucho más rápido en la próxima visita
5. Elija un proveedor de servicios de alojamiento verde: buscando proveedores de servicios que usen energía renovable (energía renovable) en sus operaciones de centro de datos.

El mejor comienzo es hacer desde el punto más fácil, como comenzar a comprimir toda la imagen en su sitio web. Esta es la "victoria rápida" que se puede ver inmediatamente en términos de velocidad y tamaño de la página web. Si desea consejos profundos, mire el manual de diseño web para su sostenibilidad. Nuestra versión completa

Aplicación de ilustraciones:

Resumen infigérico 5 formas de resolver problemas con cada componente: 1), icono de la lámpara (simple), 2) icono de imagen+plumas (luz), 3) icono+escoba (limpia), 4) icono+engranaje (almacenamiento en caché), 5)

Ejemplos de lo real que solía tener éxito

Para ser más claro, me gustaría dar un ejemplo de "tiendas en línea venden productos hechos a mano"

Problema original: el sitio web original de esta tienda es muy hermoso. Use imágenes de pantalla completa. Hay una demostración de video. Pero el resultado es que el sitio web se carga muy lentamente (toma un promedio de 8-10 segundos), lo que hace que los clientes que usan teléfonos móviles presionen y cerca de la mayoría del valor de alojamiento aumenta. Según la cantidad de productos agregados

Cómo resolver el problema según las pautas. Diseño web sostenible:

1. Revisión. Figura: El equipo ha convertido todos los archivos de imagen del producto de .png a .webp y comprimir archivos. Dando como resultado el tamaño general de la imagen de la primera página disminuyó en más del 70%
2. Cambie el video en una pequeña animación: en lugar de usar videos pesados, cambiaron para usar archivos lottie (animación vectorial) que son decenas de veces más pequeñas para alguna animación.
3. Actualización del código: han utilizado el servicio. Experto en desarrollo web para limpiar el código (limpieza del código) y establecer el almacenamiento en caché apropiado
4. Cambiaron a alojamiento verde: se movieron para usar el servicio de alojamiento que anunció una política de energía limpia al 100%.

Resultados sorprendentes:

• Tiempo de carga de la página reducido a 2.5 segundos.
• La tasa de libros disminuyó en un 45%.
• La tasa de conversión aumentó en un 20% porque los clientes tienen una experiencia buena y suave.
• Los costos mensuales de alojamiento disminuyeron en un 30%.

Esta es una prueba de que el diseño web sostenible no es solo "hacer buenas acciones" sino también "inversión inteligente", lo que proporciona enormes rendimientos comerciales.

Aplicación de ilustraciones:

Fotos del sitio web de la tienda en línea, la primera pantalla con el primer puesto muestra una pantalla de carga lenta y un gráfico de conversión baja. Después de mostrar la pantalla completa, hermosa, con el gráfico de conversión y las ventas que están claramente aumentando.

Si quieres seguir, ¿qué hacer? (Se puede usar de inmediato)

Lea aquí a muchas personas les gustaría comenzar a mejorar su propio sitio web, ¿verdad? ¡No tienes que esperar! Esta es una lista de verificación simple que puede verificar y hacer de inmediato:

1. Verifique la velocidad y el tamaño. Web actual: use herramientas gratuitas como Google PageSpeed Insights o Gtmetrix para ver cuánto es su sitio web ahora un tamaño de web y cuánto tiempo tarda en descargarse.
2. Comience con la imagen (fruta baja):
   • Use herramientas en línea como TinyPng o Squosh.App para grabar imágenes disponibles en su sitio web.
   • Considere usar complemento o configurar para convertir archivos de imagen en WebP automáticamente.
3. Explorar fuentes y guiones:
   • ¿Cuántos tipos de fuentes personalizadas estás usando? ¿Solo puede reducir los tipos 1-2 que se necesitan? O considere usar las fuentes del sistema (la fuente estándar conectada a la máquina), que no tiene que descargar en absoluto
   • ¿Comprueba si hay un scripts o complemento de seguimiento que no se usa o no? Si lo hay, retire de inmediato.
4. Active la captura: verifique la configuración en su CMS o alojando si el almacenamiento en caché del navegador ya ha habilitado. Si aún así, date prisa para usarlo.
5. Haga una pregunta importante con su diseño: mire su página web y pregunte "¿Es realmente necesario este video de fondo?" O "¿Podemos contar la historia con una imagen fija en lugar de gif?" Estas preguntas lo ayudarán a diseñar con más eficiencia. Como sitios web líderes como Awwwards han compilado muchos sitios web hermosos y sostenibles.

Hacer estos pequeños pasos definitivamente hará un gran cambio para su sitio web.

Aplicación de ilustraciones:

Hermosas imágenes de la lista de verificación, fáciles de entender, con 5 temas principales según la lista de arriba. Con íconos claros, el lector puede usarse como una guía para verificar sus propios sitios web de inmediato.

Preguntas que las personas tienden a preguntarse y las respuestas que se limpian

P: El diseño sostenible hará que mi sitio web se vea "aburrido" o "demasiado suave"?

Respuesta: ¡No es cierto! El diseño sostenible no significa "aburrido", sino que significa "diseño intental", un diseño de estilo mínimo, el uso del espacio libre (espacio en blanco) y la selección de la tipografía que se destaca es el corazón del diseño sostenible y moderno . Ayudará a crear un sitio web que sea hermoso y efectivo

P: El alojamiento verde es mucho más costoso que el alojamiento general?

Respuesta: En la actualidad, el precio no es significativamente diferente. Y al considerar el costo que puede ahorrar del ancho de banda, lo que disminuye al hacer que la web sea más suave, elegir un alojamiento verde puede valer aún más que a la larga.

P: ¿Cómo medimos el impacto ambiental del sitio web?

Respuesta: Hay herramientas en línea gratuitas que pueden ayudar a evaluar, como la calculadora de carbono del sitio web. Simplemente agregue su URL. La herramienta calculará la cantidad de carbono que su sitio web lanzó aproximadamente. Que es una buena manera de medir antes y después de la mejora

Pregunta: ¿El diseño web sostenible es solo una tendencia y ha pasado o no?

Respuesta: ¡Este es el futuro de la web! Debido a que es consistente con 3 cosas importantes que están impulsando el mundo digital: 1) las expectativas de los usuarios que necesitan velocidad, 2) la importancia de los vitales de la red central que afectan el SEO y 3) la tendencia global de conciencia ambiental. La adaptación de hoy es crear una ventaja para su negocio a largo plazo.

Aplicación de ilustraciones:

Icono de imagen, una bombilla con un signo de interrogación en el interior y aparece una respuesta clara que aparece transmite la solución a varias preguntas

Resumen para ser fácil de entender + quiero intentar hacer

En este punto, podemos ver que el diseño web sostenible no es un asunto lejano. Pero es una práctica tangible y proporciona beneficios "un tiro con cuatro pájaros":

1. Bueno para usuarios (mejor UX): el sitio web es más rápido de usar, no es frustrante, no es frustrante
2. Bueno para negocios (mejor negocio): agregue la tasa de conversión, reduzca los costos y beneficie el SEO.
3. Mejor (mejor planeta): reduzca las emisiones de carbono y ayude a ahorrar energía.
4. Bueno para la imagen (mejor marca): demuestre que su marca se preocupa tanto para los clientes como para este mundo.

La clave es cambiar la vista de "Comprimir todo lo que se puede hacer" es "elegir solo las cosas más necesarias y efectivas"

No espere al sitio web que sea lento y pesado para lograr el crecimiento de su negocio. Es hora de comenzar "perder peso" para su sitio web a partir de hoy. ¡Comience con una materia simple como la compresión de la imagen, se considera un gran primer paso!

Desea que su sitio web sea hermoso, rápido, respetuoso con el medio ambiente y cree resultados comerciales sorprendentes, ¿verdad? Consulte a un equipo de expertos de Vision X Brain. Estamos listos para ayudarlo a crear un sitio web sostenible y en crecimiento con su negocio.

‍