Actualización sobre maquetación de landings

Nuevos cambios

Como todos sabemos este es un producto que va evolucionando y a medida que evoluciona tendremos que ir adaptándonos. Todos ya somos conscientes hasta ahora a la hora de maquetar hay que centrarse en móvil. Esto nos implica tener en cuenta ciertas cosas:

1. La cabecera tiene que ser fija, el logo tiene que estar presente siempre.
   1. Generalmente también se está pidiendo que en las landings la cabecera el menú sea el móvil para evitar que naveguen de primeras por el resto de la web.
2. Los botones de contacto tienen que estar o en la cabecera o flotantes al alcance del dedo de forma sencilla.
   1. Los botones tienen que tener cada uno un color para que sea fácilmente diferenciable la acción que se hace con ellos a simple vista:
      1. Si el de llamada es en naranja y el correo en azul en la parte superior a lo largo del resto de la landing tienen que seguir la misma estética, no ir cambiando al tun-tún o que tengan los 2 el mismo color.
3. En la primera impresión tiene que verse toda la información SIEMPRE (sobre todo en versiones móviles). Para esto hay que tener en cuenta el alto de la barra de navegación del dispositivo.
   1. Se va a dejar un código en la fábrica para que calcule de forma automática ese alto y así no tengamos problemas entre cambios de sistemas operativos.
      1. http://fabrica.pgpruebas.es/landings.html

En la parte de diseño

1. Pensar el diseño en móvil y tratar de llevarlo a PC. No hacer 2 planteamientos totalmente distintos ni utilizar distintos contenidos dependiendo del dispositivo (imágenes diferentes o textos que se ocultan). La tablet no es la más importante, pero es la herramienta con la que trabajan los comerciales. Ahí el diseño tiene que ser correcto.
2. Tiene que verse correctamente en cualquier dispositivo. Comprobar también si en los móviles horizontales se ve bien (obviamente no tiene que salir toda la información en la primera pantalla porque es imposible, pero tiene que estar correcto)
3. La primera impresión tiene que ofrecer al usuario el siguiente contenido en una altura del 100% de la altura del dispositivo móvil:
   1. Una imagen que centre la atención, sin oscurecerla, ni taparla. Si es del cliente, que esté correctamente editada (sombras, iluminación, rotación...)
   2. Una primera frase que describa el objetivo de la landing. Recomendable que sea el H1.
   3. Una serie de características breves o los beneficios que ofrecemos (ofertas, descuentos, objetivos…)
   4. El CTA tiene que ser claro y visible, que se entienda la acción que estamos realizando. Si se trata de un formulario, podemos mostrarlo directamente si es breve, pero ponerlo en modal nos permite ahorrar espacio.
4. Mantener la cabecera fija puede ser una forma de preservar la imagen corporativa durante toda la navegación. Lo mismo sucede con los botones de acción que se mantienen flotados o en la cabecera fija.
5. Los CTA tienen que seguir la misma línea de diseño durante toda la landing. No cambiar los colores (se pueden "negativar" si fuese necesario).
   1. Los CTA tienen que tener el icono correspondiente si es un botón de llamar el de teléfono si es de envío de formulario el sobrecito.
   2. Hay que hacer que destaquen sobre el contenido pero con sentido.

Si no vienen los titles para los enlaces que hay a lo largo de la landing hay que pedirlos a composición

En la parte técnica

1. Ver si tiene checklist_DatosSEO_Dpto para Edición y está completo
2. Comprobar que tenga Analytics
3. Geolocalizar todas las fotos.
4. Incorporar las etiquetas OG. (preferiblemente en todas las páginas de la web, acordándose que en los complementos NO deben ir para no interferir en su funcionamiento)
5. Personalizar el formulario: placeholders y texto. Si no vienen indicados en la composición hay que pedirlos
6. Registrar el evento del envío (data-regid=“formulario-lo-que-sea-de-la-landing”)
7. Registrar el evento de llamada (data-regid=“telefono-lo-que-sea-de-la-landing”)
8. Registrar el evento de WhatsApp (data-regid=“whatsapp-lo-que-sea-de-la-landing”)