Checklist para publicar BIEN un nuevo diseño de página web

Hoy te voy a mostrar una lista de consejos que no debes pasar por alto a la hora de publicar un nuevo diseño de página web. Son 33 puntos que debes tener en cuenta antes de poner en público el nuevo diseño de tu web. He preparado una lista que puedes ir marcando para ver cuales ya tienes hechos.

Para que tu web transmita la mayor profesionalidad posible debes pulir una serie de detalles que van a marcar la diferencia. El objetivo principal de este checklist es evitar todos aquellos errores que puedan transmitir una mala imagen de marca, empeorar tu SEO o mejorar la experiencia de usuario posible.

Checklist marcable de los 33 puntos:

Primera impresión

Funciona bien en todos los dispositivos

Coherente con tu branding

Coherencia en las tipografías

Incluye favicon

Consistencia en el diseño

Enlaces

Política de cookies

Contenidos legales

Enlaces a redes sociales

Enlaces para compartir en redes dociales

Formularios de contacto funcionan correctamente

Comprueba la categoría por defecto de tus entradas

Urls amigables

Revisa tu web en todos los navegadores

Navegabilidad

Feed RSS

Comprueba tus textos

Menú estable con tus secciones finales

Títulos y metadescripciones

Elimina todo el contenido Demo

Redirección de urls

Roles de usuarios correctos

Datos de ubicación

Copyright

Llamada a la acción (CTA)

Target de los enlaces

Diferencia la publicidad de los contenidos

Evita los Captchas

Textos en el mismo idioma en toda la web

Evita imágenes de Stock que transmiten poco

Precios claros y transparentes

Contraste entre texto e imágenes

Cada uno de los puntos explicados:

Primera impresión:

Los usuarios que lleguen a tu web deben identificar a primera vista tu mensaje principal. Debes ponerte en la piel de tu target y determinar si van a recibir el mensaje correcto.

También deben ver a primera vista a que te dedicas, que ofreces o que vendes. Esta primera impresión es muy importante.

No te interesa que tus visitantes no tengan ni idea sobre que trata tu web cuando llegan a ella, por eso asegúrate de que en la Home de tu sitio has colocado información suficiente que transmita un mensaje principal claro y potente.

Comprueba que funcione bien en todos los dispositivos.

Que tu plantilla sea responsive no quiere decir que todos sus elementos se vayan a adaptar correctamente a todos los dispositivos.

Hay muchos niveles de responsividad, y a pesar de que tu web se vea correctamente en ordenadores y teléfonos móviles, debes comprobar que todos los elementos que la conforman se adaptan de la mejor forma posible.

Revisa que todos los textos se escalen correctamente en las pantallas de menores dimensiones, así como los shortcodes, elementos que contengan animaciones, formularios de suscripción y contacto, y textos de los Sliders.

También conviene hacer pruebas en las pantallas mas grandes. Dependiendo de las dimensiones de tus fotos puede ocurrir que en algunas de tus filas a full width, o sliders, la imagen no llegue a cubrir el ancho completo de estas pantallas.

Coherencia con tu branding.

Debes seguir una línea estética acorde a tu marca personal o branding de tu negocio. Utiliza siempre los mismos colores para todos los elementos de tu web, botones, enlaces, y demás elementos visuales.

Utilizar demasiados colores distrae la atención en los elementos principales y puede resultar confuso, al igual que utilizar colores muy chillones. Una buena solución es utilizar una única gama cromática con diferentes niveles de saturación.

Lo mismo ocurre con los botones, iconos, cabeceras del blog, etc. Lo lógico será que alijas un mismo diseño de botones para toda tu web, y no que cada uno tenga un borde o colores aleatorios sin motivo alguno.

Si tus iconos a redes sociales de tu home tienen unos colores y estilo concretos, elige los mismos si decides ponerlos en cualquier otra sección.

Coherencia con las combinaciones tipográficas.

No conviene utilizar mas de dos fuentes tipográficas en una página web. Lo mas común es elegir una Tipografía para los titulares y otra diferente para el cuerpo de texto.

Al igual que con los colores, las tipografías de tu web deben seguir una misma línea para mejorar la estética y legibilidad.

Piensa en tus lectores y adapta el tamaño de letra para que no sea ni muy pequeño ni excesivamente grande.

La finalidad principal de una buena tipografía es la legibilidad, para hacer mas llevadera la lectura de los contenidos, mas allá de la estética. Por este motivo te recomiendo alejarte de las tipografías extravagantes y centrarte en buscar principalmente fuentes elegantes para los textos de tu web.

Incluir un favicon.

El favicon es el icono que aparece junto a la barra de búsqueda del navegador. Si no lo has hecho ya, personaliza un favicon con tu logotipo, o algún elemento descriptivo de tu marca.

Debes asegurarte de subir un favicon personalizado desde el panel de administración de WordPress para no transmitir una imagen de dejadez, y sobre todo si utilizas una plantilla de WordPress que trae un favicon propio preestablecido.

El formato típico de los favicon es un formato cuadrado de 16px por 16px.

Consistencia en el diseño.

En todo momento se debe saber que estas en la misma web. Que no parezca que hemos cambiado de web al cambiar de página. Para ello mantén un diseño consistente en todas las secciones de tu sitio. Que todo el diseño y secciones sigan una misma coherencia gráfica.

Aún así evita poner las misma imagen de cabecera o slider en todas tus secciones para evitar que parezca que no te has movido de sección.

Revisa todos los enlaces.

Este punto es de los mas importantes. Asegúrate de que todos tus botones, links y secciones estén bien enlazadas y dirijan a la página de destino correcta.

Es posible que hayas cambiado las urls de algunas secciones de tu web después de haber sido creadas y enlazadas. En ese caso deberás revisar los enlaces ya que si contienen la antigua url no funcionarán.

Con esto evitarás tener errores 404 en tu web, cosa mal vista a los ojos de Google. Si quieres comprobar rápidamente si tienes enlaces rotos en tu web puedes hacerlo con Brokenlinkcheck.

Política de cookies.

Para cumplir con la normativa vigente debes incluir un aviso de que tu sitio web utiliza cookies. Hay ciertas cookies que requieren ser aprobadas por los usuarios para su utilización.

Hay varios plugins en WordPress que permiten introducir un aviso sobre la utilización de cookies. De esta forma desplegarás un mensaje de texto en el que informarás de forma clara y completa sobre su utilidad.

Elige un plugin que ofrezca posibilidades de personalización y que no sea muy intrusivo. Te recomiendo, preferiblemente, colocarlo en la parte inferior de tu web.

Contenidos legales.

Asegúrate de incluir los textos de política legal y de política de privacidad en tu sitio web. Podrás encontrar varios modelos que simplemente debes rellenar con tus propios datos.

Queda muy mal encontrarte con textos legales de páginas web en los cuales no han sustituido el nombre del la empresa de donde los han copiado. No te llevará mucho tiempo sustituir los campos y crear un documento a tu medida.

Enlaces a tus redes sociales.

Revisa que todos tus iconos sociales están enlazados. Puede ocurrir que hayas enlazado los principales, pero te hayas dejado sin enlazar otros iconos de otras secciones como el footer o sidebar.

Muchas plantillas te piden introducir tu nombre de usuario, o tu ID, y no la url completa de tu perfil como podríamos pensar, por lo que si tus enlaces no funcionan correctamente, puede deberse a eso.

Comprueba además que tu iconos sociales se ven correctamente en dispositivos móviles y tienen un buen tamaño para se clicables.

Si aún no has incluido enlaces a tus redes sociales en tu web, deberías hacerlo, ya que los usuarios que aterrizan a tu web podrían interesarse en permanecer conectados a tu marca a través de las redes, ya que son canales de comunicación que todos solemos visitar a diario y que te van a permitir ir construyendo una comunidad alrededor de tu marca.

Plugins para compartir en redes sociales.

Si tu nuevo diseño web tiene un blog en el que vas a compartir contenidos deberás incluir los iconos de compartir en redes sociales. De esa manera facilitarás la difusión de dichos contenidos y conseguirás mucho mas tráfico de los canales sociales.

No todos los plugins funcionan igual. Revisa de que manera se van a mostrar las publicaciones cuando sean compartidas desde tu blog en las diferentes redes sociales.

Revisa si incluyen correctamente una mención con @ en Twitter, que no muestre texto no deseado o publicidad, y que se muestre correctamente la foto en Facebook.

Con la gran variedad de plugins gratuitos que hay para implementar esta funcionalidad en WordPress es preferible que escojas los más versátiles en cuanto a personalización, visibilidad (en pantalla y móviles) y estadísticas.

Comprueba que tus formularios de contacto funcionen correctamente.

A pesar de haber personalizado los campos de tu formulario de contacto asegúrate de haber introducido un email de destino de la persona que deba recibir dichos emails.

Es conveniente que hagas varias pruebas ficticias enviándote emails desde el formulario para comprobar cómo recibirás los correos en tu bandeja de entrada.

Asegúrate de que los campos que contienen información relevante para ti están marcados como “campo requerido”, y personaliza los textos de “Mensaje enviado satisfactoriamente” o “Error al enviar el mensaje”, para que aparezcan en tu idioma y no en el establecido por defecto.

Comprueba la categoría por defecto de tus entradas.

Puede ocurrir que si te olvidas de categorizar correctamente tus artículos tengas muchas entradas agrupadas en categorías creadas por defecto que pueden tener nombres como “sin categoría” “uncategorized” o “ninguna”.

Esto también da impresión de dejadez, por lo que es recomendable hacer un repaso de todas las entradas de un blog para que todas tengan sus categorías bien definidas.

Urls amigables.

No está de mas recordar que es preferible que nuestras urls muestren el nombre de las entradas o páginas, en vez de una serie de caracteres consecutivos que no dicen nada.

Este punto cobra especial importancia desde el punto de vista del posicionamiento en buscadores. Podrás introducir palabras claves en tus urls y ganar algunos puntos de cara a mejorar tu SEO.

En WordPress puedes cambiar tus permalinks desde Ajustes > Enlaces permanentes. Debes seleccionar “nombre de entrada”.

Revisa tu web en todos los navegadores.

Puede ser que tu web se vea correctamente en Chrome, por ejemplo, pero ¿la has probado en Internet Explorer?¿Y en Mozilla Firefox? Algunos navegadores como Internet Explorer pueden darte problemas para visualizar algunos elementos de tu web y no mostrarlos como debería.

Sobretodo puedes tener problemas con algunos elementos que contengan javascript.

Además no todas las tipografías pueden verse igual. Los navegadores no son iguales, y en ocasiones muestran algunas tipografías con ligeras variaciones en el grosor. Revisa que esos cambios visuales están dentro de lo normal antes de seguir adelante.

Navegabilidad.

La navegabilidad es muy importante. Seguramente tu, como creador de la web sepas manejarte en tu web perfectamente.

Pero no está de mas que se la enseñes a amigos o familiares que nunca la hayan visto, para ver si se mueven de forma fluida, entienden la estructura de la misma, los enlaces, y no se quedan atascados donde no deberían.

Un punto de vista externo está muy bien para pulir detalles y quizá ver errores que habían pasado desapercibidos.

Así podrás recolocar los elementos mas destacados de tu web en el lugar idóneo para aumentar los clics en las secciones que mas te interesa.

Para una buena experiencia de usuario debes conseguir que tu web sea lo mas sencilla posible. Se recomienda que la sección mas alejada de tu web no debe estar a mas de cuatro clics de la página de inicio.

Feed RSS.

Si tienes un blog puedes proporcionar un enlace a tu RSS para que la gente pueda seguir tus publicaciones y estar actualizados con tus contenidos.

En WordPress puedes añadir tu feed RSS en un Widget, desde Apariencia > Widgets, o incluir un banner, de Feedly, por ejemplo en tu sidebar. Feedly es un lector RSS muy usado que te recomiendo usar, y proporciona botones de distintos tamaños diseñados para que los puedas incluir en tu web o blog.

Comprueba tus textos.

Revisa y relee absolutamente todos los textos de tu web. Si los has creado hace tiempo te vendrá bien releerlos para reestructurar algunos párrafos, simplificar otros, o argumentar algo de forma diferente.

También te servirá para corregir errores ortográficos, signos de puntuación, o actualizar enlaces.

Menú estable y con tus secciones finales.

Es recomendable que tu menú superior sea siempre el mismo y no cambie de una sección a otra ya que puede resultar confuso.

Antes de publicar asegúrate de que en tus menús o enlaces personalizados has dejado visibles solo las secciones que te interesa mostrar.

Si has trabajado con contenido demo en WordPress, deberás borrar todas aquellas pestañas que ya no te sirvan.

Revisa tus títulos y metadescripciones.

Revisa que has añadido títulos y metadescripciones óptimos para mejorar la indexabilidad de tu web y aumentar el CTR.

No solo es cuestión de que el resultado de búsqueda quede bonito, sino que los títulos metadescripciones correctamente optimizados tienen mucha importancia de cara al posicionamiento en buscadores.

Elimina todo el contenido Demo si usas WordPress.

Si has utilizado un CMS como WordPress y has importado el contenido Demo de tu plantilla, asegúrate de eliminar las páginas, entradas y contenido multimedia de prueba que te sobren.

Antes de permitir a los motores de búsqueda que indexen tu sitio es importante haber eliminado, o dejar como borrador las entradas y páginas de prueba.

Si te saltas este paso tendrás un montón de contenido duplicado y Google te penalizará por ello.

Si ya has publicado tu web y habías pasado por alto este punto, comprueba que páginas tienes indexadas escribiendo site: tudominio.com en la barra de búsqueda. Así podrás identificar si tienes algo de contenido demo pendiente de eliminar.

Redirección de urls

Comprueba que tu dominio dirige a la misma url, tanto si se escribe con www o sin ellas.

Si has renovado tu web y has cambiado de dominio, haz una redirección 301. Así todo el que llegue a alguna de tus antiguas urls será redirigido hacia la nueva y te asegurarás de no perder tráfico.

hoy en día muchos Hosting tienen un apartado para hacer este tipo de redirecciones facilmente. Si el tuyo no lo tiene deberás hacerlo editando el archivo .htaccess.

Roles de usuarios.

Si en tu web van a participar varios usuarios de forma colaborativa asígnales el rol de usuario que estimes correcto para que cada uno tenga los permisos adecuados. A continuación te dejos los roles de usuario que podrás encontrar:

• Super Admin: Acceso a la administración de toda una red de blogs completa.
• Administrador:  Acceso a todas las opciones de administración de un sitio web.
• Editor: Puede publicar y editar sus propias entradas y de otros usuarios.
• Autor: Puede publicar y editar sus propias entradas.
• Colaborador: Puede crear y editar sus propias entradas, pero no publicarlas.
• Subscriptor: Solamente puede editar su perfil.

Datos de ubicación.

Ubica tu negocio en el mapa correctamente. Si te interesa atraer a tus visitantes hacia un local comercial o establecimientos físicos esto es muy importante.

Crea una sección visible en la que muestras cómo llegar y muestra una dirección real. También puedes incluir información sobre cómo llegar en transporte público.

Copyright.

Puedes incluir información de tu marca registrada en algunas zonas de tu web. Lo mas común en diseño web es colocarlo en el footer Bottom de tu web, es decir en la zona fija que aparece al final de todas tus páginas.

Llamadas a la acción (CTA).

Incluye alguna llamada a la acción (Call to action) visible que incite a tus usuarios a llevar acabo un determinado comportamiento, como realizar una llamada, pedir un presupuesto, suscribirse a una lista, apuntarse a un curso, o simplemente compartir un contenido.

Target de los enlaces.

Los enlaces internos no tienen porque abrirse en nuevas pestañas o ventanas, no es necesario.

Por el contrario, los enlaces externos, es preferible que si se abran en nuevas pestañas, así tus usuarios no abandonarán tu web.

El objetivo principal es que los usuarios sigan en tu página web, por lo que te recomiendo que todos los enlaces que dirijan hacia webs ajenas los abras en nuevas pestañas. Podrás hacer esto eligiendo entre  «self» o «blank» en el Target del enlace.

Diferencia la publicidad de los contenidos.

Si colocas banners publicitarios intenta que se vea claramente lo que son, y no intentes engañar para ganar mas clics en tus contenidos publicitarios. Con eso solo lograrías empeorar la experiencia de usuario y no transmitirías buena imagen.

Evita los Captchas.

¿Tienes tanto spam como para colocar un captcha? Está comprobado que utilizar captchas puede reducir haste un 40% de los formularios de contactos rellenados por tus usuarios. Razón mas que suficiente para no incluirlos a no ser que sea muy necesario.

Los captchas son molestos y mucha gente se lía con ellos, por lo que cuantos menos, mejor. Así aumentarás tus conversiones y ofrecerás mejor experiencia de usuario.

Textos en el mismo idioma en toda la web.

La utilización de plantillas de WordPress puede dejar algunos elementos en ingles u otro idioma. Es típico en los botones de “read more”, “Share”, “Author” o “date”.

Adapta estos textos al idioma general de tu web. Para ello existen varios plugins para WordPress como WPML String Translations, Loco Translate o Codestyling Localization.

Evita imágenes de Stock que transmiten poco.

Evita abusar de las típicas imágenes de stock de oficinas o personas trajeadas. Estas imágenes son ampliamente usadas en muchas otras webs y no transmiten cercanía si no todo lo contrario. Se nota mucho que son imágenes cogidas de fuera, y a pesar de tener mucha calidad pueden provocar rechazo.

Es preferible poner imágenes propias que humanicen tu sitio y generen mas confianza a los visitantes.

Precios claros y transparentes.

En el caso de que vayas a lanzar una tienda online, muestra tus precios de forma clara, así como los impuestos que tienen asociados y los gastos de envío.

El comprador debe ver en todo momento un desglose claro de todo lo que se le va a cobrar durante todo el proceso de compra, y es muy interesante que automatices el envío de facturas en todos tus pedidos.

Contraste entre texto e imágenes.

Observa que haya suficiente contraste entre tu texto y tus fondos. Elige correctamente las combinaciones entre textos, imágenes y colores de tus fondos para que todo sea legible.

Sobre las imágenes muy oscuras debe ir texto en blanco o texto en tonos claros, y lo mismo ocurre con los menús. Ocurre lo contrario con las imágenes o colores claros que utilices como fondos, a los que les corresponderán textos oscuros.

¿Se te ocurre algún otro punto importante?

Si quieres mejorar tu marketing, aquí te proponemos 615 acciones de marketing y publicidad según 25 expertos