La estrategia detras del rediseño del sitio web de Rootstack

Cada día surgen nuevas tecnologías y mejoras cuyo objetivo es facilitarnos la vida. En el mundo de la tecnología, entendemos que si no nos adaptamos a estos cambios y nos subimos al tren de esta revolución, nuestra empresa perderá terreno y, en consecuencia, podría fracasar. Sin embargo, esta no es la única razón; el factor clave es aprovechar las herramientas disponibles para continuar creciendo y madurando la organización.

Cada compañía opera de manera distinta, pero existen razones generales para el rediseño del sitio web con las que muchas empresas se sentirán identificadas.

¿Por qué una organización debe rediseñar su sitio web?

Para ponerlo en contexto, podemos analizar el caso de Banvivienda, donde nuestro cliente decidió rediseñar su sitio para mejorar la experiencia de usuario mediante la implementación de módulos de calculadora de préstamos y mejorando la presentación de la información.

En el caso de Rootstack, estamos en el proceso de rediseño de nuestro sitio web, ya que, como empresa de desarrollo, debemos transmitir las posibilidades, beneficios y escalabilidad de las tecnologías con las que trabajamos, como Drupal, Angular JS, y Symfony.

Factores clave para el rediseño del sitio web

Antes de tomar la decisión de rediseñar nuestro sitio web, consideramos varios factores que nos diferencian en el mercado y reflejan nuestra evolución institucional:

• El enfoque actual y el flujo de información.
• La percepción de los usuarios sobre lo que hacemos como empresa.
• Un sitio que represente la marca y organización.
• Transmitir lo que hemos hecho y lo que podemos hacer.

Estos factores nos permitieron hacer un análisis interno y comprender que debíamos ajustarnos al cambiante mundo de la tecnología.

Planificación

Ya teníamos un sitio construido en Drupal, por lo que queríamos mantener la administración de la información que hemos acumulado durante años y construir sobre esta estructura. Una de las principales necesidades era identificar cómo agrupar los servicios, tecnologías y soluciones de la compañía en distintos canales. Una vez definidos, y considerando el futuro crecimiento de la empresa, cada canal debía sostener su contenido basado en los servicios y soluciones.

Estrategia

En la primera fase del rediseño, buscamos refrescar la línea gráfica del sitio y encontrar una mejor manera de transmitir lo que hacemos. Para aplicar los conocimientos que hemos desarrollado para nuestros clientes, decidimos separar el backend del frontend del sitio para mejorar el tiempo de carga.

Para lograr esto, utilizamos Angular JS junto con Webpack para el frontend. Al mantener la administración y la estructura de información existente, decidimos mantener el backend en Drupal.

Desarrollo

Construimos servicios web para consumir la información e ingresar datos al backend en Drupal. Usamos Services API y Views para crear los servicios que consumirían la información: portafolio, blogs, eventos, testimonios y casos de estudio. Para el formulario de contacto y el formulario de carreras, desarrollamos servicios personalizados.

En el frontend, utilizamos Angular junto con Webpack, pensando en el crecimiento futuro del sitio. Nuestro objetivo es que el sitio sea fluido para los visitantes, y este bundler nos brinda la flexibilidad y robustez que buscábamos.

Retos

1. Migración Gradual a Angular

El primer reto fue cambiar la página de inicio y migrar poco a poco las secciones del sitio a la aplicación en Angular. Para lograrlo, necesitábamos que el sitio en Drupal fuera cargado por la aplicación en Angular, eliminando el header y footer del sitio "viejo". Implementamos un servicio que hace el llamado a Drupal y, al recibir la respuesta, ajusta la información en el HTML antes de cargarlo.

2. Optimización SEO

El segundo reto fue minimizar el impacto en el posicionamiento en buscadores. Dado que la aplicación se construyó en JavaScript, utilizamos Prerender.io para generar versiones HTML de las páginas para que los buscadores pudieran indexar el contenido. Una herramienta útil para verificar el correcto funcionamiento de estos caches y redirecciones fue GoogleBot Fetch.

También quisimos mantener la estructura de URLs existente y evitar redirecciones. Desarrollamos controladores para cada patrón de URLs y un servicio que obtiene la información de títulos, meta descriptions y meta keywords desde Drupal para cada página renderizada a través de Angular.

Conclusión

Al culminar el desarrollo, logramos un nuevo sitio que seguirá creciendo con el tiempo, migrando gradualmente hacia una separación total entre frontend y backend. La experiencia ha sido enriquecedora, y seguiremos mejorando el sitio con nuevos conocimientos que vayamos desarrollando.

Cualquier duda, comentario, o si desean realizar un proyecto o simplemente saludar, no duden en contactarnos.

Te recomendamos este video