Si quieres tener páginas webs profesionales hechas en Framer, deberás comprobar que cumples con estos 10 criterios para asegurarte de que tu página cumple con todos los requisitos para ser publicada con garantías.
Uno de los aspectos que separan las webs profesionales de las que no lo son es que se vean bien en todos los dispositivos, no únicamente en los 3 breakpoints (Desktop, Tablet y Mobile) que vienen por defecto.
Sin embargo luego los usuarios lo verán desde una gran cantidad de dispositivos, cada uno con su tamaño diferente. Es por eso que te recomendamos que hagas pruebas en dispositivos de diferente tamaño, tanto móviles, tablets o pc.
Para facilitar esto puedes usar herramientas como BrowserStack para comprobar cómo se ve en diferentes dispositivos.
Es muy importante que nombres adecuadamente los Frames y elementos de tu proyecto. Deben tener nombres lo más indicativo posible de lo que hacen.
Intenta evitar siempre elementos como “Frame 212313” y dale un nombre que tenga contexto como “Section - Hero - Wrapper”.
Esto es verdaderamente importante en los Componentes, que es necesario darle un buen nombre como por ejemplo Button / Main o Card / Testimonial. Es especialmente fácil que se te quede alguno en “Variant1”, así que revisalo.
Piensa que tiene que entenderlo una persona que no haya visto nunca el proyecto y entender para qué sirve.
Si quieres que la página posicione mejor en los ránkings de Google, debes decirle qué es cada una de las imágenes de tu sitio, de la manera más descriptiva posible. Por ejemplo, si añades una imagen de dos personas usando tu producto, añádeselo como Alt.
Esto facilitará no solo a Google si no a usuarios con baja velocidad de conexión o necesidades de accesibilidad.
Como buena práctica, siempre que añadas una imagen a tu proyecto asegúrate de que está Optimizada y que le añades el Alt Description.
Por regla general, siempre JPEG, excepto que tenga transparencia (ahí usa PNG) o sea un logo (.svg en ese caso)
Si bien crear Frames es muy sencillo, cuando desarrollamos una página queremos que la estructura del código resultante tenga sentido.
Es por eso que debemos indicarle a los elementos relevantes, como las barras de navegación, secciones, contenedores, etc… su etiqueta HTML para que se pueda entender mucho mejor la estructura.
Esto puede ser una tarea ardua que te recomiendo que hagas justo al terminar de diseñar para no incurrir en el mismo trabajo dos veces.
Los botones en Framer se pueden optimizar realmente para que sean botones y no “Frames en los que se hace click”.
Para ello debes hacer lo siguiente:
Si las Alt Text son útiles para los elementos que sean imágenes, cuando tengamos elementos que no son imágenes pero es útil describir, como por ejemplo el logo de tu página web o algún asset, puedes añadirle una aria label para describir qué es lo que hace.
Esto ayudará a las personas que ven tu web a través de lectores de pantallas, facilitándole la comprensión del sitio.
Estos dos elementos son realmente importantes para el posicionamiento de tu web en Framer. Esto es así porque te va a permitir decirle a Google y a los usuarios que ven tu página qué es lo que se pueden encontrar.
Debe ser un título llamativo y que contenga la propuesta de valor de la web, para que los usuarios se sientan atraidos a hacer click.
Es importante que definas cuál es el lenguaje principal de tu web. Es un selector que tardas no más de 2 segundos en configurarlo pero que ayudará a traductores automáticos a entender en qué idioma está tu web.
Esta imagen es la que aparecerá cuando compartes tu página en una red social como Twitter o Linkedin. Te recomendamos que tenga unas dimensiones de 1200x630px y que sea igual que el Title y la Description llamativo.
También intenta optimizar la imagen para que pese lo menos posible.
El Favicon es la imagen que aparece cuando estás en una pestaña de un navegador. Debe ser de mínimo 32x32 px aunque puedes subir una versión con más calidad para que luego Framer te haga la versión correspondiente.
En estos tamaños intenta que sea fácilmente percibible y no añadas elementos con mucha complejidad.
Una vez que hayas hecho todos estos cambios solo queda comprobar que está todo correcto, conectarlo a un dominio si lo necesitas y publicarlo.
Siguiendo estas prácticas estarás creando páginas web profesionales que los usuarios agradecerán a la hora de usar, consumir y posteriormente editar.
Descubre el mundo del no-code en 1 hora
Conoce proyectos creados en No-code y descubre las mejores herramientas.
Aprende Gratis
Crea 5 proyectos reales en 6 semanas
Descubre cómo utilizar las mejores herramientas No-code en esta formación práctica.
Empieza a aprender
Academia de herramientas no-code y low–code
.svg){kind=icon}
