Módulo 7: SEO, Performance, Integraciones y Recursos
SEO
SEO
Cada vez son más las herramientas de NoCode, combinándolas entre ellas está naciendo un nuevo tipo de profesional, cada uno con su NoCode Stack. Puede ser un profesional del marketing, de diseño, etc.
Performance
Performance: Lighthouse
Lighthouse es una herramienta automatizada de código abierto para mejorar la calidad de las páginas web. Puede ejecutarlo en cualquier página web, pública o que requiera autenticación. Tiene auditorías de rendimiento, accesibilidad, aplicaciones web progresivas, SEO y más.
Puedes ejecutar Lighthouse en Chrome DevTools como extensión de Google Chrome o desde web dev. Lighthouse ejecuta una serie de auditorías en la página y luego genera un informe sobre la página en base a cuatro métricas: performance, accesibilidad, prácticas y SEO. A partir de ahí, utiliza las auditorías fallidas como indicadores sobre cómo mejorar la página. Cada auditoría tiene un documento de referencia que explica por qué la auditoría es importante y cómo solucionarlo.
Lighthouse Green Zone
Lo ideal es estar en "la zona verde" dentro de las cuatro áreas. Lo más complicado es siempre performance. Para llegar aquí es necesario siempre hace QA y ajustar una a una todas las imágenes,p
Performance
Cada vez son más las herramientas de NoCode, combinándolas entre ellas está naciendo un nuevo tipo de profesional, cada uno con su NoCode Stack. Puede ser un profesional del marketing, de diseño, etc.
The Gap
The Gap: El salto entre diseño y desarrollo
Ya sea vuestra SSOT un Style guide, un sistema de diseño, un repositorio Github o un Design Token, siempre va a haber dudas a la hora de llevar a cabo la maquetación de un diseño. Aquí algunas pautas que pueden ayudarte.p
Utiliza software de diseño vectorial: Figma, Adobe XD, Sketch.
Diseña con las mismas medidas que utiliza Webflow: Desktop , Tablet 768, M Landscape 658, M Portrait 320
Utiliza un Style guide, al menos para las fuentes de los elementos principales (headings y párrafos).
Utiliza un Handoff y haz que fluya la comunicación entre ppplos equipos de diseño y programación.
Utiliza rem para los textos (no uses em salvo que tengas mucha experiencia). Puedes usar em en padding, margin, line-height, width y height.
No uses rem y em Layouts multicolumna o cuando un elemento sea estrictamente no escalable.
¿Dónde buscar ayuda?
Ayuda en bloqueos
¿Dónde encontrar ayuda en el caso de vernos bloqueados? Muchas veces alguien ha pasado por ese problema antes y la comunidad de Webflow está encantada de ayudarte.
Recursos
Recursos
WEBFLOW RESOURCES
Colección de recursos Webflow de todo tipo