Rediseño Web de Código SEO, proceso y novedades

device-codigo-seo

Hace algunos días lanzamos el rediseño Web de nuestro sitio y ahora ya está en producción.  Fue un arduo trabajo para darle forma a lo que queríamos expresar.

Este es un artículo no muy extenso donde básicamente te presento algunos cambios que hicimos en el rediseño de nuestra Web y cómo facilita la navegabilidad.

Razones de un Rediseño Web nuevo y fresco

El primer punto era darle un rediseño web más amigable y fresco y al mismo tiempo moderno, que mantenga los estándares de diseño web actuales.

Hemos estado mejorando nuestro sitio Web adaptándolo a las nuevas tendencias de visualización, pero un cambio total del sitio teníamos cerca de 2 años de no hacerlo.

Ya era un tiempo adecuado para un nuevo rostro.

Colores usados en el nuevo rediseño Web

Desde que iniciamos nos hemos enfocado al color azul el cual mantenemos.

Le sumamos el morado y negro.

Nos identificamos con el azul ya que simboliza negocio y seriedad por ello el énfasis en el tono azul.

Sigue siendo Responsive

Hemos rediseñado la Web adaptándola perfectamente a los dispositivos móviles, sin tener el inconveniente de visualización en smartphones que en muchas ocasiones hay un desplazamiento a izquierda o derecha.

La adaptabilidad móvil comienza desde los 980px para tablets y al llegar a los tamaños actuales de smatphones toma correspondientemente el tamaño adecuado.

Bueno, casi en todos.

Posiblemente en algunos navegadores antiguos o con pantallas muy pequeñas genere algún tipo de inconveniente, por lo que aún seguimos revisando que se visualice bien en ellos.

Rediseñar una página Web trae novedades

Nuevo Logo Imagotipo

El primer punto de cambio en el Rediseño Web fue el logo imagotipo.  Este ya lo habíamos lanzado un par de meses antes, donde pasamos de este:

Logo anterior código SEO

 

 

A este:

nvo logo codigo seo

 

 

La base primordial en el logo actual es el símbolo <> que generalmente se usa en el código HTML de cualquier sitio Web para expresar las etiquetas y el contenido que se incluye.

Toda Web en su código HTML inicia por: <!DOCTYPE html> seguido luego de <html lang=”es”> con la declaración del lenguaje y que termina en </html>

Te puede interesar:   5 Consejos de seguridad en WordPress y Plugins Efectivos

El símbolo “/” lo expresamos como tilde en la O de la palabra CÓDIGO.

Lo explico por si no habías caído a cuenta del por qué del símbolo adoptado.

Te dejo un enlace explicando qué es el imagotipo. (link: https://www.significados.com/imagotipo/)

Porcentaje de rebote

En el proceso de rediseño web, además de mantener el menú “Inicio, Soluciones, Clientes, Blog, Contacto” en cada página interna ahora lleva la información necesaria para no cansar al visitante y se está reflejando en el porcentaje de rebote.

Actualmente el porcentaje de rebote lo tenemos en 56.82% y bajando, manteniendo un aumento de 12.8% en los visitantes que se mantienen más tiempo dentro de cada página que compone el sitio, es decir, un aproximado de 4 minutos de visualización por página.

analytics rediseño web

Aún hay que mejorar, pero creemos ir por buen camino.

Botón “Solicita Presupuesto”

En algunos casos es difícil, por no decir complicado, establecer precios fijos para las distintas campañas y lo más conveniente es trabajar con precio bajo demanda, es decir, precio basados de acuerdo al tipo de negocio y objetivos a lograr.

Eso aplica en gran medida al desarrollo de sitios Web o a los trabajos SEO.

El formulario de solicitud de presupuesto actual, lo basamos con lógica condicional, así que puedes solicitar presupuesto para Diseño Web, E-commerce, SEO, Google Ads, gestión de redes sociales y otros de una manera rápida, fácil y sencilla.

Los datos los recibiremos y nos pondremos en contacto contigo a la brevedad.

Efectos

Hemos añadido efectos en algunas partes en el rediseño web y una con mayor énfasis que afecta a todo el sitio: “El efecto de honda”.

A pesar de ser un efecto de movimiento continuo se puede creer que afecta la velocidad de carga y realmente no tiene mayor impacto o es nulo en ello.

Imágenes Lottie las hemos usado poco porque éstas si afectan la velocidad de carga del sitio por lo que no queremos afectar la web, así como el hecho de no poder añadir etiqueta ALT a estas imágenes.

“El texto titular en disminución scroll” es otro punto a considerar, ya que se añadió a cada página del sitio y se hace con la finalidad de mantener al visitante.

Los efectos, además de brindar una nueva manera de visualización Web, considero que la verdadera finalidad es crear un sitio Web vivo, que se exprese por sí mismo y no el tradicional sitio Web con imágenes estáticas sin vida.

Te puede interesar:   ¿Cómo migrar wordpress a otro servidor muy facilmente?

En el área de blog ahora verás una barra de lectura justo en la parte inferior de la pantalla y en cada artículo que estima el tiempo que lleva leer cada artículo.

Además, se ha creado una barra scroll personalizada para el sitio.

Velocidad de Carga

Mejorar la velocidad de carga en WordPress no es tarea fácil, eso debido a la cantidad de código que WordPress y el tema usado genera.

El aumento de JS y CSS ralentiza las webs en WordPress, por lo que usar un sistema de caché efectivo es importante.

Influye además el hosting donde se tiene alojada la Web y la ubicación de los data centers, así ayudará a una carga más rápida en los navegadores.

Actualmente con todas las mejoras de optimización de imágenes, sistema de caché, minificación CSS y JS y demás, actualmente contamos con un porcentaje (según los parámetros de Page Speed  Insight) de 60% para dispositivos móviles y 94% para PCs.

No hemos usado sistema CDN.

Estamos conscientes que para aumentar este porcentaje el servidor influye en gran medida, por lo que estamos analizando y evaluando trasladarnos a un hosting mejor en el rendimiento.

Análisis SEO gratis

Seguimos manteniendo el servicio de análisis SEO gratuito para tu web, el cual lo hemos añadido en este enlace: https://codigoseo.es/posicionamiento-seo/#analisisseo así que puedes seguir solicitando tu análisis SEO completamente gratis.

Tipografía

Para darle una nueva cara de visualización a nuestra Web, también hicimos el cambio en la tipografía utilizada, pasando de Poppins a Varela Round que es una tipografía de Google fonts muy adaptada a nuestros propósitos, de fácil lectura y visualmente elegante y moderna.

Imágenes Isométricas

El uso de imágenes isométricas es la tendencia actual y en gran parte de nuestra Web las hemos implementado tomándolas de repositorios gratuitos para no incurrir en derechos de autor.

Voy a dejar este artículo informativo hasta aquí.

Si tienes alguna sugerencia para mejorar el rediseño web de nuestro sitio estaré encantado de leer tus comentarios, siempre y cuando sea posible aplicarlos.

Un saludo.

Wilfredo Rojas.

P.D.; Recuerda que puedes ponerte en contacto con nosotros.

No olvides compartir este artículo

Wilfredo Rojas

Wilfredo Rojas

Consultor SEO

Me gusta este trabajo, es un quebradero de cabeza; trabajo en Marketing Digital y el SEO más o menos desde el 2009, así que pongo toda mi experiencia en ayudarte. ¿Me quieres escribir? No hay problema, hablemos. Mi Linkedin

También te puede interesar…

¿Te ha gustado el artículo? ¡Déjanos tu comentario!

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.