La deformación profesional me puede. Y cuando entro a ver páginas web, los ojos se me van enseguida. Y creo que a todos nos pasa que dudamos antes de comprar o contratar un servicio en una web que no se vea profesional. Echa para atrás y genera desconfianza. Así que voy a darte algunos consejos para mejorar tu web y que se vea más profesional.

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 se vea más profesional. Porque no todo es verse bonita, también debe ser funcional y generar confianza.

Y sobre todo, te explico cómo implementar cada uno, para que vayas cumpliendo todos los elementos de una web de alta calidad, lo que mejorará la imagen de tu marca.

(1) – Usa una plataforma seria y profesional para crear tu web

Tener tu página web o tu blog en un servicio gratuito como wordpress.com en vez de .org, blogger o Wix resta muchísima profesionalidad. Tus visitantes pensarán si es realmente un negocio serio y fiable.

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 y no se vea como una web gratuita.

No es tan caro, pueden ser menos de 60 € al año incluyendo alojamiento y dominio. Además, 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.

Además, los dominios gratuitos hacen mucho más difícil posicionar en Google, y te costará mucho más aumentar tus visitas.

Puedes leer…


(2) – Usa un dominio propio

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. Es uno de los elementos básicos de una web de alta calidad.

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.

Si igualmente tienes poco presupuesto, te recomiendo leer la entrada 5 plataformas para crear una web gratis.

(3) – Configura el certificado digital (SSL / HTTPS).

El certificado digital es un método de seguridad que protege la información entre tu web y los visitantes, y tu web se verá mucho más profesional. Esto evita 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.

  • Afecta a tu SEO.
  • Según qué datos gestiones en tu web, puede suponer un problema de seguridad.
  • Influye en el aspecto de tu página, ya que se indica en el navegador.

¿Pasearías por un lugar con un cartel que dice «No es seguro»?

Pues no esperes que la gente lo haga por tu web si no lo es…

Porque el navegador da ese 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?

Casi seguro que tu plan de alojamiento incluye un certificado de forma gratuita
¿Por qué no lo usas?

Cómo configurar correctamente el certificado en tu web

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 sí es la más sencilla.

La forma más correcta si te lo preguntas sería modificar la url en tu web, y configurar el fichero htacces. Pero esto implica mayor riesgo, por lo que si no te manejas bien, es mejor que uses el plugin.

Recuerda también revisar que todos los enlaces que van a tu propia web estén con https y no con http o sin nada.

Yo 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) – Añade un favicon a tu web

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!

Cuidar los detalles hará que tu web se vea más profesional

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. Si lo pones, tu web se verá más profesional.



¿Cómo poner el Favicon?

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

Cómo 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 HTML

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 buena plantilla (Tema en WordPress)

Usar un buen tema es importante. Hay temas WordPress incluso gratuitos que son sencillos, pero están muy bien. Tampoco necesitas comprar un tema. Además hay temas de pago que son incluso contraproducentes, porque tienen demasiadas cosas que no necesitarás, o no están hechos del todo 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.

Temas gratuitos que puedes usar para WordPress

Algunos temas que puedes probar son:

  • Los temas por defecto de WordPress suelen ser buena opción. Y con un poco de personalización básica (sin código) se les puede hacer un buen cambio de aspecto.
  • Otro tema gratuito muy utilizado es Astra.

Temas de pago: Elegant Themes y Divi

Luego claro está, hay plantillas de pago. Si quieres algo un poco más original, ya que las gratuitas es más posible que te encuentres con mucha gente con la misma, claro. Además son muy flexibles.

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 ver más información en mi curso de Divi, Divi Builder y EXTRA.

(6) – Cuida las combinaciones de colores

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 (3-6), definir unos principales y otros secundarios, y ceñirse a ellos.

Estos son los primeros colores de Taisa-Designer por ejemplo:

Paleta de Colores
Paleta de colores


(7) – Corrige los 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) – Evita los 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) – Adaptar tu web a dispositivos móviles

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

Porque el cuidado a los detalles, es uno de los elementos de una web de alta calidad.

Lee aquí qué debes revisar para ver si tu web está adaptada a móviles.

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.

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).

Además, ahora Google rastrea tu web desde el móvil… Por lo que es más importante aún tener un buen tema adaptado a móviles. Y ten en cuenta también que lo que esté en la vista desde el móvil, no se indexará.

¿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éntame 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 quieres mejorarla, puedes contactar conmigo.