La deformación profesional me puede. Y cuando entro a ver páginas web, los ojos se me van enseguida. Entiendo que posiblemente no sea yo sola… Pero yo al menos, me lo pienso mucho antes de comprar algo o contratar un servicio en una web que no se vea profesional. Me echa para atrás y no me genera confianza. Y aunque algunas cosas serán más evidentes que otras, y según la persona… hay más gente como yo.

Por ello, me parece fundamental tener una página web profesional si quieres que tu negocio vaya bien.

Porque la imagen de tu web dice mucho de tí.

Voy a contarte algunos de los detalles que pueden hacer que tu blog o tu web no se vea profesional. Y sobre todo, cómo solucionarlos.

(1) – Usar un servicio gratuito para tu web o blog.

Tener tu página web o tu blog en un servicio gratuito como wordpress.com, blogger o Wix resta muchísima profesionalidad. ¿Vas realmente en serio con tu negocio? Porque si quieres ir en serio, no tiene sentido mantenerse en estos planes gratuitos.

Como mínimo, debes disponer de un dominio propio. Pero lo ideal sería que contrates un alojamiento para tu página web propio que tú puedas gestionar. No es tan caro, pueden ser unos 60 € al año. A nada que quieras hacer “algo más” en estos supuestos servicios gratuitos, te tocará mirar los planes premium o similar, que te van a costar mucho más.



(2) – No tener dominio propio es poco profesional

Estaría relacionado con lo anterior, pero en algunos casos, cuando arrancas podrías llegar a usar un servicio gratuito pero siempre siempre deberías tener un dominio propio si se trata de un negocio.

Aquí te explicaba los conceptos de alojamiento y de dominio, para que entiendas la diferencia.

Y aquí te explicaba porqué debes usar una dirección de email de dominio propio cuando das datos de contacto de tu negocio.

(3) – No tener certificado digital.

El certificado digital es un método de seguridad que protege la información entre tu web y los visitantes para evitar hasta cierto punto que sea interceptada, y especialmente, que alguien pueda “hacerse pasar por tu página web”.

Es algo que cada día se está haciendo más importante.

¿Pasearías por lugares no seguros?

Por ello, no entiendo como hay páginas que no lo tienen.

Porque además el navegador da un mensaje que no va a generar mucha confianza a tus visitantes más observadores: 

¿Tú te pasearías tranquila por un camino con carteles que digan “No es seguro”?

¿Cómo instalar un certificado SSL y quitar el indicador de”No seguro” de tu web?

La mayor parte de los hostings te incluyen un certificado gratuito. No suele ser muy complicado instalarlo, normalmente es activar alguna opción en tu panel de control. Y sino, pregunta a soporte de tu compañía de alojamiento que te indiquen cómo hacerlo o puede que incluso te lo puedan activar.

Es decir, no tiene ningún coste adicional ¿Por qué no hacerlo entonces?

Luego puedes usar un plugin tipo “Easy SSL” en tu página de WordPress para completar el cambio. No es la forma más óptima de hacerlo, pero es la más sencilla.

Yo ahora ya lo primero que hago antes de empezar a trabajar en una página web nueva, es activar el certificado SSL en el dominio. Así luego todo es más sencillo.

(4) – No tener favicon

El favicon es el icono que aparece en la pestaña del navegador cuando estás en una página. También aparece más grande en accesos directos a la web, o desde los móviles.

Esta me exaspera, especialmente cuando son páginas web por las que alguien ha pagado a un diseñador o desarrollador web para que le haga… ¡Y no le ponen el icono!

Cuida todos los detalles de tu marca

En la imagen siguiente podéis ver dónde aparece el Favicon en mi web, y también cómo se muestra el candado del certificado de seguridad activado que comentaba antes.

Sin embargo, a la izquierda podéis ver una web en la que no se ha establecido un Favicon, y sale el icono por defecto del documento.

Lo siento, pero me resulta cutre.



¿Cómo poner el Favicon?

Además es que normalmente es muy sencillo el añadir este icono.

Añadir el Favicon en WordPress

Añadir el favicon en WordPress aunque a veces depende del tema, suele ser tan sencillo como ir a Apariencia > Personalizar > Ajustes generales > Identidad del sitio. ¡Y ya está!

¿Cómo debe ser el favicon en Wordress?

Elige una imagen cuadrada de unos 512×512 con fondo transparente. A poder ser que se vea bien tanto en fondo claro como oscuro.


Y si en tu tema no funcionase o no incluye esta opción, hay plugins que lo hacen, como por ejemplo este.

Añadir el favicon en otros tipos de páginas web

En otros sistemas también es tan sencillo como elegir una opción y cargar la imagen.

Y en caso de tener acceso al código o de tratarse de páginas en HTML puro, una solución sencilla por ejemplo es añadir la imagen con el nombre “favicon.ico” a la carpeta principal e incluir el siguiente código:

<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">



(5) – Usar una plantilla cutre

Hay plantillas incluso gratuitas que son sencillas, pero están muy bien.

Hay miles de temas gratuitos que puedes usar más que decentes.

La mayoría son razonables, algunas son un poco de dar de comer aparte. Y luego obviamente también entra el gusto y aptitudes de diseño que tengas para que la maquetación de los contenidos quede agradable a la vista.

Yo recomiendo Elegantthemes y Divi

Luego claro está, hay plantillas de pago. Si quieres algo un poco más único, ya que las gratuitas es más posible que te encuentres con alguien con la misma, claro.

Las plantillas de Elegantthemes (que son las que yo uso actualmente), por ejemplo las de DIVI o Extra tienen un aspecto estupendo, son muy configurables. Si os fijais en las webs de mi portfolio de diseño, son muy diferentes aún usando algunas la misma plantilla de base.

Y además incluyen un constructor muy potente y fácil de usar.

Puedes leer más aquí sobre DIVI y el constructor DIVI Builder y ver un ejemplo práctico en vídeo de cómo se utiliza.

(6) – Combinaciones de colores que no encajan.

Hay quien tiene ojo con los colores, y quien no lo tiene demasiado entrenado. Hay cosas que se ven a la legua.

Además, en cuanto a colores en una web, menos es más. Lo ideal es definir unos colores de marca, y ceñirse a ellos.

Estos son los colores de Taisa-Designer por ejemplo:

Paleta de Colores
Paleta de colores



(7) – Fallos en la web que hacen que se vea menos profesional

Hay veces que navegas por una página, y te encuentras con fallos muy obvios que dan una imagen muy poco profesional. Especialmente si te dedicas al diseño web, pero si has hecho tu propia página, también puedes cuidarlos y dar mejor imagen de tu marca.

Esto es algo que hay que tener en cuenta antes de publicar una web, y probarla tanto en escritorio como en móvil o tablet. Porque tenemos que tener en cuenta que cada vez más gente navega desde su teléfono.

Está claro que siempre se puede escapar alguna cosa. Pero hay que prevenir en lo posible revisando toda la web.

Algunos fallos muy evidentes de las páginas web que dan una imagen poco profesional

  • Enlaces que no llevan a ningún sitio (error 404, página no encontrada), incluso desde la página principal.
  • O enlaces que lleven a donde no corresponde y confunden al visitante.
  • Iconos o imágenes que no cargan (puede que los hayas borrado, que estuvieran referenciados externamente y ya no existan, o que sean de algún complemento antiguo).
  • Fallos directos: Haces algo y aparece un error o la web deja de funcionar.
  • Pop-ups no deseados. Por ejemplo, de publicidad tipo scam. 
  • Caídas o bloqueo por límite de tráfico. Si tu servidor te da problemas, tiene poca capacidad o tiene límite de tráfico, tendrás que evaluar si aumentar tu plan o cambiar de hosting. (Aquí puedes leer sobre qué tener en cuenta al buscar un servidor para montar tu web).

Todo esto resta mucha profesionalidad y da sensación de descuido. En especial si es en la página principal o en páginas importantes, como las de servicios. Una cosa es un fallo en una página o entrada antigua, que a veces es más complicado de controlar sobre todo si tienes muchas, y otra directamente en tu home.

Como prevenirlo y resolverlo

En general no queda otra que realizar revisiones periódicas.

Algunas cosas pueden controlarse por medio de plugins en WordPress o servicios. Por ejemplo el plugin Broken link checker o por medio de la Search console (Puedes conectarla fácilmente desde el plugin Yoast, que es un básico para ayudarte con el SEO).

Otros tendrás que detectarlos a base de hacer pruebas.

Por ello es importante revisar de cuando en cuando nuestra página, o contar con un servicio de mantenimiento web que pueda ayudarnos a ello.

(8) – Elementos desubicados

A veces hay problemas de maquetación, o a veces uno mismo no es capaz de dejar las cosas como le gustaría.

En ocasiones es necesario aplicar algunos ajustes de css para retocar el diseño (aquí te explicaba cómo funciona una página web y qué es el css). O para hacerlo adaptativo (ver el punto 8 también).

Algunos ejemplos de problemas de maquetación que dan mala imagen

A veces algo no queda del todo alineado o se apelotonan los campos, o aparecen elementos donde no deben. Líneas o imágenes que aparecen por encima del texto.
Aquí podéis ver un ejemplo en que los campos del formulario de comentarios en el móvil quedan bastante mal. Desalineados, y pequeños.



¿Cómo resolver problemas de maquetación del contenido de tu web?

Está claro que esto no siempre es algo que vayas a poder resolver tú mismo. Normalmente, si usas una buena plantilla, como comentaba antes, es poco probable que tengas de base estos problemas en el contenido estándar. Ya que una buena plantilla estará ya preparada y programada de forma adaptativa para mostrarse correctamente en cualquier dispositivo.

Si te puede ocurrir en la maquetación que realices tú del contenido. Que te sea complicado hacer que se muestre como quieres o adaptada.


(9) – Que tu web no esté adaptada para móviles

Por suerte hoy día esto es también sencillo como ya comentaba en el punto anterior. La mayoría de las plantillas ya vienen adaptadas (responsive). Pero siempre viene bien hacer algunos ajustes.

Y sobre todo, también insisto: 

Siempre revisar bien tu web.

Que todo se vea bien tanto en escritorio, como en tablet como en un teléfono móvil medio o pequeño.

Tendrás que hacer un recorrido por tu página web desde un teléfono o un simulador, para asegurarte que se vea bien.

Aunque siempre es buena idea echar un vistazo desde tu teléfono una vez tienes todo listo, también existen simuladores que te permiten ver tu web en el ordenador como si fuera desde un teléfono o tablet.

Te explico varias formas para hacerlo.

Cómo ver una web como un móvil desde el ordenador

Con las herramientas de Chrome

Botón para entrar a las opciones Chrome - Tres puntos verticales

En Chrome tienes una herramienta que te permite revisar esto directamente desde tu ordenador. Para ello, entra en el menú de Chrome con el botón de los tres puntos.

Accede a Más herramientas > Herramientas para desarrolladores.

Botón para cambiar de vista de dispositivo - Icono con un smartphone y una tablet

Una vez hecho esto, se abrirá un panel con el código, y algunas opciones interesantes. Ahí tienes que buscar el icono “Toggle device” que te permite simular cómo se vería la web como se vería en distintos dispositivos. 

Ver tu web como en un movil desde chrome


Con el constructor Divi Builder: La más sencilla

Dentro del constructor Divi Builder también se incluye una herramienta que te permite visualizar tu web como si de un móvil o tablet se tratase.

Además, incluye opciones para configurar la maquetación de forma diferente según el dispositivo. Por ello creo que es la forma más fácil de hacer tu web adaptativa y normalmente no necesitarás recurrir a código.

Puedes ver más información sobre Divi Builder en esta otra tentrada.

Con extensiones de Chrome

También existen extensiones para Chrome que te permiten realizar esto de forma sencilla, por ejemplo esta.

Uso de temas móviles

Hay veces que aún se ve el uso de temas más básicos para el móvil. Como el que ofrece Jetpack por ejemplo.

Esto en algún caso te puede salvar del apuro si tu tema no se adapta nada bien a los móviles… Pero le quita mucha personalidad a tu página web. Y si te estabas currando tu imagen visual de marca, y tu impacto para que te recuerden, con tu logo, tus colores… lo pierdes todo en el dispositivo que cada vez se utiliza más.

Es mucho más recomendable utilizar un tema adaptativo. Y si acaso, puedes implementar AMP en tu página web (os hablaré de esto más adelante), pero manteniendo tus elementos principales de la imagen visual de tu marca (logo, colores, y fuentes).



¿Se ve tu web profesional?

¿Cuántos de los puntos de la lista tenías en tu web? ¿Has podido resolverlos todos? ¿Tienes problemas para resolver alguno?
Cuéntanos en los comentarios.


¿Quieres una página web profesional?

Si estás decidida a dar el paso, y quieres ayuda para que tu web muestre tu profesionalidad, echa un vistazo a mi servicio de diseño web para emprendedoras.

O si ya tienes tu web y necesitas ayuda con algunos retoques, puedes contactar conmigo.

Newsletter Taisa Designer

¡Mejora tu página web!

Apúntate a mi lista VIP para recibir un montón de información interesante para tí. 

Además, si ya tienes una página web, te enviaré un diagnóstico de tu web con al menos 3 consejos personalizados que podrás aplicar tú misma.

¡Gracias por suscribirte! Tus datos se han enviado correctamente. Ahora sólo tienes que confirmar tu suscripción desde el e-mail que habrás recibido.

Newsletter Taisa Designer

MEJORA TU WEB

Aprende a mejorar tu página web tú misma.

You have Successfully Subscribed!