Desarrollo y Diseño de Landing Page
Tabla de Contenidos
En este post vamos a conectar nuestro formulario de WordPress realizado con Contact Form 7 con la API de Sendinblue con código sin necesidad de usar plugins
Así pues, hoy quiero describir el Desarrollo y Diseño de Landing Page o pagina de aterrizage. La forma en que funciona para mí.
La idea del post surgió cuando recibí el enlace del blog de un diseñador web. Aunque yo lo llamaría webmaster más que diseñador web. El hombre crea sitios web, en su mayoría basados en WordPress. Lo hace utilizando Visual Composer. Permítanme explicar de inmediato…
Visual Composer es un plugin para WordPress. Una especie de constructor de páginas visual. Con él puedes montar páginas sin saber HTML y CSS. Esto se hace simplemente arrastrando y soltando bloques.
No tengo nada en contra de este tipo de desarrollo de sitios y páginas web ya que suelo utilizarlo bastante a diario. Pero para mis clientes, prefiero también ofrecer crear las páginas web de otra manera. Aunque, lo admito, los gestores de contenido pueden ahorrar mucho tiempo y no son menos eficientes.
Desarrollo y Diseño de Landing Page en código límpio
No es ningún secreto que todos los constructores son bastante voraces y suponen una gran carga para el servidor. Esto no es crítico para un sitio nuevo o recien creado. El contenido no abunda, el tráfico es pequeño.
Pero con el aumento del tráfico o del contenido puede encontrarse con el error 508 Resource Limit Reached…
Ante todo me gustaría comentar que para mayores cargas les puedo ofrecer un servidor dedicado que soportará la carga de las páginas creadas con gestores de contenido. El Desarrollo y Diseño de Landing Page en código limpio es algo que segun la necesidad del cliente se procede a realizar. Teniendo un coste bastante más elevado.
Este error se produce si su cuenta de alojamiento comienza a superar los límites de sus recursos asignados.
Puede haber muchas razones para este error, desde ataques DDoS hasta scripts muy cargados y plugins voraces. Los ataques DDoS pueden ser manejados por el bloqueo de ip y los controles de captcha. Pero si su sitio es demasiado «pesado», entonces hay que optimizarlo o pasar a un plan de alojamiento más caro.
En otras palabras, un sitio poco optimizado – es un dolor de cabeza innecesario. Y es mejor pensarlo de antemano…
Evitar insertar código innecesario
Cuando se crea un sitio web utilizando un constructor de sitios web, hay muchos divs redundantes con diferentes clases en el código. La mayoría de los especialistas en SEO están convencidos de que, en porcentaje, debe haber más contenido en una página que código. Sostengo el mismo punto de vista pero siempre hay remedios para hacerlo más rápido.
Si no estoy mal informado el CSS y el Javascript se pueden comprimir utilizando servicios de cache por ejemplo. Incluso hay plugins de compresión de HTML. Asi que no pasaría nada si el gestor de contenido esta optimizado.
Consejo Desarrollo y Diseño de Landing Page
Por supuesto, si el cliente necesita una página para 1 mes, y el tráfico sólo va a ser pagado, entonces tiene sentido crear una página en un constructor. Pero si las intenciones del cliente son serias y ha llegado a Internet a largo plazo, entonces es mejor hacer una página de alta calidad de una vez. Con un diseño único, con un código limpio. Optimizado, con micro-marcas establecidas…
Etapas Desarrollo y Diseño de Landing Page
Te diré los pasos que hay que seguir para Desarrollo y Diseño de Landing Page …
Información
El trabajo comienza con un informe. Lo tengo redactado de tal manera que cubre todas las cuestiones básicas necesarias para empezar el trabajo.
Algunos clientes piensan que el informe es una formalidad o una burocracia innecesaria. Y aborda el llenado como una formalidad. De hecho, todas las preguntas son extremadamente importantes para mí. Por lo tanto, si el informe está incompleto, tengo que mantener correspondencia con el cliente para averiguar los detalles que faltan.
Competidores
Después de revisar el informe, empiezo a mirar los sitios web de la competencia. Los analizo en términos de diseño, presentación de la información, usabilidad, etc. Si sólo estoy familiarizado superficialmente con el nicho, intento estudiar el tema más a fondo. Tengo que entender cómo presentar la información en función del nicho y del público objetivo.
Texto y contenido
No se puede trabajar en un sitio web con Desarrollo y Diseño de Landing Page sin un texto preparado. Y a menudo, incluso en el texto terminado hay que hacer cambios a medida que se trabaja en el sitio.
Esto sucede porque no todos los redactores publicitarios, prevén todos los matices. Por ejemplo, las viñetas sobre el volumen de texto deberían ser más o menos las mismas. El bloque de «hechos» debe ser conciso.
Diseño
A continuación, se seleccionan las referencias y la paleta de colores. Luego se toman las decisiones estilísticas. Se selecciona el emparejamiento de fuentes y la apariencia de los elementos de la interfaz de usuario.
Y sólo después de todo esto se empieza a trabajar en el diseño ya sea en el gestor de contenidos o a código. Puede tener lugar de dos maneras.
- Primero. De arriba a abajo. Es el momento en el que el diseño se representa en pantalla, empezando por la cabecera. Es decir, primero se piensa y se dibuja cuidadosamente una pantalla, luego la siguiente, y así sucesivamente.
- El segundo. De una mayor a una menor. En este caso, los elementos más grandes y los bloques de texto se lanzan primero sobre toda la banda. Fondo, los encabezados, los botones. Vamos de más a menos, añadiendo cada vez más detalles. En este caso, podemos ver de un vistazo cómo será el diseño de la página de aterrizaje. Al principio, obtenemos una especie de prototipo (wireframe), en el que podemos ver claramente lo fácil que será para los visitantes percibir el sitio.
Al final, como extra, siempre dibujo un favicon para el sitio web. Se trata de un pequeño icono, en la pestaña del navegador.
Responsive Desarrollo y Diseño de Landing Page
Una vez terminado el diseño de la pantalla principal, comienza el diseño responsive. La adaptación también se realiza sobre una base de «mayor a menor». En esta fase, hay que pensar en cómo se verá cada elemento en la pequeña pantalla del smartphone y la tableta. Piensa en lo que pasará con el texto. Cómo se redimensionará las imagenes y el texto.
Si hay un menú de anclaje en la página, asegúrese de pensar en cambiarlo también. Si se diseña en un botón desplegable o si debe eliminarse por completo.
Composición
Una vez terminado el diseño de todos los términos básicos, se confecciona el sitio web. No hacemos una versión HTML, sino que directamente tiramos del sitio en el motor (en nuestro caso WordPress). En este caso, el cliente podrá modificar él mismo los textos e imágenes del sitio web, si es necesario.
Optimización y personalización
Durante la composición tipográfica se tienen en cuenta todos los detalles. Se prescriben todos los títulos y descripciones, se incluyen los encabezados en las etiquetas H1-H3, se realizan micromarcas.
Tras el maquetado, se lleva a cabo el ajuste principal y la optimización SEO de la página de aterrizaje. Se crea un archivo robots.txt, así como un mapa del sitio .xml. Poner los contadores estadísticos.
Por supuesto, nadie puede garantizarte que el tráfico gratuito hacia tu sitio de una sola página fluya como un río, pero créeme, el SEO da sus frutos.
Aunque no inmediatamente, pero digamos, unos meses, hay una posibilidad de que el sitio (gracias al texto único y la optimización adecuada) suba en las SERP. Esto significa que le traerá de forma constante, y sobre todo gratuita, visitantes adicionales.
Conclusion
De este modo, la página de aterrizaje es estructuralmente sólida, técnicamente correcta y fácil de usar.
No estoy en absoluto en contra de los constructores. Y qué elegir como herramienta depende de ti.
Lo tengo todo. Si necesitas más información para que te realice el Desarrollo y Diseño de Landing Page no dudes en contactarme.
Otro post interesante: 10 Herramientas Online para diseñar Logotipo