El proyecto que no me dejaba en paz
Hay proyectos a los que quieres volver. Funcionan, el cliente los usa, pero tú misma sabes que el resultado podía ser mucho mejor. Para mí, durante mucho tiempo ese proyecto fue ProCoffee, un sitio de alquiler de cafeteras profesionales. Tres años después del primer desarrollo, por fin tuve la oportunidad de rehacerlo en Tilda. Y ahora el resultado de verdad me convence.
Mi relación con ProCoffee empezó hace varios años. Entonces desarrollaba para el cliente dos proyectos a la vez en 1C-Bitrix: un sitio de alquiler de cafeteras profesionales y una gran tienda online de equipamiento de café. Fue un trabajo de gran envergadura que duró unos seis meses.
Yo me encargaba de la gestión de los proyectos, el diseño, la maquetación, los materiales visuales y la coordinación del desarrollo. La parte de programación la hizo un especialista en Bitrix contratado para el proyecto. En paralelo se promocionaban los sitios, así que tenía que tener en cuenta el SEO, configurar los módulos correspondientes y acordar las mejoras técnicas.
La experiencia no fue sencilla. El trabajo remoto con varios participantes exigía una coordinación constante. Algunas cuestiones no se podían resolver sin llamar al programador, y los tiempos de respuesta no siempre coincidían con el ritmo que yo quería llevar.
Pero el motivo de mi descontento con el resultado iba mucho más allá de las dificultades de organización.
Cómo personalicé una plantilla de ThemeForest para Bitrix
En aquel momento el proyecto tenía limitaciones de presupuesto y de plazos. Por eso, en lugar de un diseño propio y una maquetación desarrollada aparte, el cliente y yo decidimos usar una plantilla ya hecha.
La compramos en ThemeForest. Además, la plantilla era de la categoría WordPress, mientras que el sitio se desarrollaba en 1C-Bitrix.
Tengo mucha experiencia en maquetación HTML, así que la adaptación la hice yo misma. Cambiaba el aspecto, rehacía bloques, ajustaba los elementos a la estructura del proyecto, corregía estilos y la posición de componentes concretos. Este trabajo se llama personalización de plantilla.
Y fue precisamente en este proyecto donde sentí con más claridad lo discutible que puede ser ese enfoque.
Una plantilla ya hecha suele verse bastante armoniosa en su forma original. Se creó como un sistema único, donde los autores pensaron de antemano la relación entre los elementos, los espacios, el diseño y el comportamiento de la interfaz. Pero cuando empiezas a cambiar buena parte de ese sistema, la lógica original se va rompiendo poco a poco.
Un cambio exige otro. Aparecen estilos adicionales, soluciones provisionales y la necesidad de tener siempre en cuenta el código que ya existe.
En algún momento surge la pregunta: ¿no habría sido más fácil encargar desde el principio un diseño propio y desarrollar la maquetación específicamente para este proyecto? Ahora creo que en nuestro caso esa opción podría haber sido mejor.
¿Influyó la adaptación de la plantilla en la velocidad del sitio? No lo descarto. Como la plantilla estaba pensada para otra plataforma y se rehízo bastante, en el proyecto podían haber quedado estilos, scripts u otros elementos sobrantes.
Pero eso es solo una suposición. No hice una auditoría técnica independiente de la versión antigua que permitiera determinar con exactitud las causas del bajo rendimiento. Por eso no afirmaré que el problema fuera la plantilla o la forma de adaptarla. Quizá las causas fueron varios factores a la vez.
En aquellas condiciones hice todo lo posible. El sitio se lanzó, el cliente lo usaba, la promoción continuaba. Pero a mí me quedó una sensación de algo inacabado.
Por qué, después de más de diez proyectos en Bitrix, empecé a buscar otra plataforma
Durante muchos años desarrollé sitios principalmente en 1C-Bitrix. En ese tiempo se hicieron más de una decena de proyectos y conocí bien tanto las posibilidades de la plataforma como las particularidades de la organización del desarrollo.
Considero que Bitrix es un sistema serio, con su propio ámbito de uso. Pero poco a poco me preocupaba cada vez más depender de otros especialistas.
Y el problema no era que los programadores trabajaran mal. Entre ellos hay muchos profesionales excelentes. La dificultad estaba en la propia organización del proceso.
Seguramente muchos de los que desarrollan sitios web se han encontrado con una situación parecida. Al empezar el proyecto se forma un equipo. Todos tienen tiempo, interés y un plan común. Pero hacia el final la situación empieza a cambiar.
Los especialistas contratados reciben nuevos proyectos, cambian las prioridades y la carga de trabajo. Hacer pequeños ajustes se vuelve más difícil, los plazos de aprobación se alargan. Y tras la entrega del sitio, el ejecutor original puede dejar por completo de participar en su mantenimiento. Es perfectamente comprensible: la persona tiene otras obligaciones y no puede estar disponible indefinidamente para cada proyecto terminado.
Pero para quien responde ante el cliente del resultado, la situación se convierte en un problema serio. Hay que hacer un cambio urgente, corregir una función o eliminar un error, y el especialista que escribió esa parte del código no está disponible.
Entonces hay que buscar a otro desarrollador. La persona nueva ve el proyecto por primera vez. Tiene que entender la arquitectura, estudiar el código existente y averiguar qué decisiones se tomaron antes y por qué. Eso lleva tiempo. A veces, mucho. Surgen gastos adicionales, se desplazan los plazos y el cliente, con toda razón, espera que el sitio funcione y se desarrolle.
Me encontré muchas veces con estas situaciones y poco a poco comprendí que quería cambiar el propio enfoque de trabajo. Necesitaba más autonomía: poder implementar yo misma la mayoría de las funciones, hacer cambios y mantener el sitio sin montar cada vez una nueva cadena de aprobaciones.
Por qué Tilda
Poco a poco empecé a trabajar cada vez más con Tilda. Al principio me atraía la sencillez del desarrollo y la comodidad del editor visual. Pero con el tiempo se abrieron posibilidades mucho más interesantes.
Los bloques estándar se pueden modificar. Con CSS y JavaScript se puede cambiar el aspecto y el comportamiento de los elementos, crear interfaces no estándar y ampliar la funcionalidad. Al mismo tiempo, la mayor parte del sitio sigue siendo gestionable desde el panel de administración habitual.
Mi experiencia en maquetación resultó muy útil aquí. Podía diseñar páginas por mi cuenta, escribir estilos y scripts, adaptar bloques estándar y resolver cuestiones técnicas. Poco a poco Tilda se convirtió en mi plataforma principal de desarrollo.
Eso no significa que se pueda o se deba hacer en ella absolutamente cualquier proyecto. Pero para la clase de sitios comerciales con los que trabajo con más frecuencia, me dio justo la autonomía que antes me faltaba. Y ProCoffee fue uno de los proyectos en los que las ventajas de este enfoque se vieron especialmente bien.
Tres años después propuse rehacerlo todo
Para entonces, las posibilidades de Tilda ya permitían crear un catálogo de equipamiento profesional con filtrado, páginas independientes para cada modelo y las funciones comerciales necesarias. También había acumulado experiencia desarrollando sitios multipágina y tiendas online con modificaciones propias.
Por eso propuse al cliente trasladar ProCoffee de Bitrix a Tilda. Quería resolver varias cuestiones a la vez. Primero, mejorar la velocidad del sitio. Segundo, simplificar el mantenimiento posterior. Tercero, llevar por fin el diseño y la implementación técnica al nivel que me satisface.
El cliente aceptó y nos pusimos con la nueva versión.
Un rediseño cuidadoso: cuando al cliente le gusta el sitio antiguo
Aquí surgió un momento interesante. A pesar de mi actitud crítica hacia la versión anterior, al cliente le gustaba su diseño. En unos años el sitio se había vuelto familiar. La gama de colores, los iconos y algunos elementos de diseño se percibían como parte de la identidad de marca.
Por eso no cambié por completo el concepto visual. Conservé la paleta principal y algunos elementos característicos, pero hice el diseño más sereno. En mi opinión, el sitio antiguo era algo demasiado llamativo. Quería reducir la sobrecarga visual, llevar los bloques a un sistema más unificado y colocar los acentos con más cuidado.
El resultado fue un rediseño cuidadoso. El aspecto cambió, pero ProCoffee siguió siendo reconocible. Me gusta este enfoque: respetar las preferencias del cliente y la historia de un proyecto que ya funciona, mejorando a la vez su diseño.
Mes y medio en lugar de seis
El desarrollo inicial de los dos sitios en Bitrix llevó unos seis meses. La nueva versión de ProCoffee en Tilda la montamos, rellenamos y lanzamos en aproximadamente mes y medio.
Por supuesto, comparar directamente estos plazos no sería justo. En el desarrollo repetido ya teníamos la estructura, el contenido listo y la comprensión de las particularidades del negocio. Pero la diferencia en el propio proceso de trabajo fue enorme.
La mayoría de las cuestiones podía resolverlas yo sola. No hacía falta acordar cada mejora con un programador independiente, esperar a poder hacer un pequeño cambio ni explicar de nuevo las particularidades del proyecto. Eso era justo lo que buscaba cuando empecé a buscar una alternativa al enfoque anterior.
Cómo hice la migración y qué pasó con el SEO
En la migración era importante conservar al máximo la estructura existente. ProCoffee llevaba varios años promocionándose en los buscadores. El sitio tenía secciones indexadas, fichas de equipos y páginas informativas.
Por eso intenté conservar las URL anteriores siempre que fuera posible. Si la dirección de una página cambiaba, configurábamos de inmediato una redirección 301. La transición en sí fue rápida, sin una interrupción prolongada del sitio.
Pero con las posiciones en los buscadores todo resultó más complicado. Tras la migración, ProCoffee perdió parte de sus posiciones en los resultados de búsqueda, a pesar de haber conservado la estructura y configurado las redirecciones. No quiero fingir que no ocurrió.
Un cambio de plataforma siempre afecta a la parte técnica del sitio. Cambian el marcado HTML, la forma de generar las páginas, algunos elementos de la estructura interna y otros parámetros. Todo esto puede influir en los buscadores. Qué factor resultó decisivo en nuestro caso no se puede decir sin un análisis adicional.
Ahora seguimos con la promoción SEO de ProCoffee, y recuperar las posiciones anteriores sigue siendo una de las tareas principales. Para mí es parte del trabajo posterior en el proyecto.
El catálogo de cafeteras: aquí Tilda me sorprendió gratamente
El catálogo es una de las partes más importantes de ProCoffee. En el sitio hay cafeteras profesionales automáticas, superautomáticas y de portafiltro, además de molinillos de café. El equipo es caro y tiene muchas características, por lo que es importante que el visitante pueda encontrar rápido el modelo adecuado.
Para organizar el catálogo usé el módulo integrado «Catálogo de productos» de Tilda. Permitió implementar la visualización de fichas, las vistas previas de los equipos y el filtrado en las páginas de sección.
Para cada categoría preparé su propio conjunto de filtros. Por ejemplo, las características importantes al elegir una cafetera de portafiltro pueden diferir mucho de los parámetros de un equipo superautomático. Los filtros están en la columna izquierda y permiten elegir modelos según los criterios necesarios.
La mayor parte de la funcionalidad se logró con las herramientas estándar de Tilda. Y donde las posibilidades de la plataforma no bastaban, usé modificaciones propias.
Landings SEO: por fin hechas como quería
En el sitio anterior intentamos organizar un sistema de landings SEO temáticas con un módulo de Bitrix. Pero entonces no logré implementarlo como lo necesitaba. En Tilda la tarea resultó mucho más sencilla.
El principio es el siguiente. Tomamos una categoría de equipos, formamos una selección según los criterios necesarios, creamos una página aparte con una URL legible y la completamos con un texto optimizado para SEO.
Por ejemplo, en ProCoffee hay una página de cafeteras automáticas para salones de belleza: procoffee.pro/catalog/avtomaticheskie/dlya-salona-krasoty. En ella se presentan los equipos para ese escenario de uso.
Los enlaces a estas páginas los mostré en forma de nube en las páginas de las secciones principales del catálogo. Cada categoría tiene su propio grupo de landings temáticas. Para mostrar los enlaces como necesitaba, tuve que modificar los bloques estándar de Tilda. Pero el resultado fue justo la estructura que quería.
La sección de fabricantes está organizada con un principio parecido. Cada página de marca contiene los equipos de una marca concreta, permite filtrar los modelos además por características e incluye un texto optimizado para SEO.
Así, el catálogo puede crecer por categorías, marcas y distintos escenarios de uso de los equipos. Me gusta que esta arquitectura permita ampliar el sitio poco a poco sin tener que cambiar constantemente su base.
Fichas de equipos y dos programas de alquiler
Tras años desarrollando catálogos y tiendas online en Tilda, me formé un enfoque propio para las fichas de producto. Intento que sean lo más informativas y cómodas posible para el cliente potencial. Esto es especialmente importante para un equipo profesional caro.
La persona debe entender qué es una cafetera concreta, qué características tiene, para qué uso es adecuada y en qué condiciones puede conseguirla. Por eso, al desarrollar las fichas presté atención a la estructura de la información, las descripciones, las características y los elementos comerciales.
Además, el proyecto tiene una particularidad: dos programas de alquiler. El visitante puede elegir el alquiler comercial con cuota fija o el alquiler a condición de comprar una determinada cantidad de café. Decidí mostrar ambas opciones directamente en la ficha del equipo.
En un botón figura el coste del alquiler comercial. En el otro, la cantidad de café que hay que comprar según el programa correspondiente. Cada botón abre su propio formulario de solicitud. Resulta un escenario cómodo: la persona estudia la cafetera, ve las condiciones y puede enviar enseguida la solicitud de la opción elegida.
Para comparar en detalle los programas de alquiler hay una sección independiente del sitio.
En el futuro quiero completar las fichas con la posibilidad de generar automáticamente una propuesta comercial. El visitante podrá descargar a su ordenador un documento con información sobre un modelo concreto. Por ahora esta función está en los planes.
ProCoffee es mucho más que un catálogo de alquiler
El sitio tiene varias secciones adicionales. Una está dedicada al mantenimiento y la reparación de equipos de café profesionales. Otra, al café de tueste propio de Brasil que la empresa ofrece a sus clientes. Aparte se presentan las condiciones detalladas de los programas de alquiler.
Había que unir todas estas líneas en una estructura clara, para que el visitante pudiera pasar con facilidad de elegir una cafetera a conocer las condiciones de colaboración y los servicios adicionales. Para mí es importante que un sitio multipágina se perciba como un sistema único, aunque presente distintas líneas de negocio.
Un blog que seguimos desarrollando
Otra parte importante de ProCoffee es el blog. Trabajamos con regularidad en su contenido: preparamos artículos extensos, materiales analíticos y reseñas de cafeteras profesionales. Me gustan las publicaciones desarrolladas, con ilustraciones, un tratamiento detallado del tema y una estructura clara.
En los artículos usamos enlaces internos a modelos concretos de equipos. Esto permite al lector pasar de estudiar el material a la ficha correspondiente del catálogo. Además, el blog ayuda a ampliar la parte informativa del sitio y a trabajar con las búsquedas relacionadas con la elección y el uso de equipos profesionales.
La impresión principal tras el lanzamiento: el sitio por fin es rápido
Cuando abrí por primera vez la nueva versión de ProCoffee, fue un placer aparte. Después del sitio anterior, donde a veces había que mirar mucho rato un icono de carga animado, la diferencia se notó enseguida. La nueva versión en Tilda funciona claramente más rápido.
No hice pruebas comparativas independientes con mediciones antes y después, así que no daré porcentajes de mejora inventados. Pero en el trabajo diario la diferencia es realmente considerable.
Y lo más agradable: el cliente también está contento con el resultado. Ahora puedo hacer cambios por mi cuenta, trabajar con el catálogo, desarrollar las landings y ocuparme del diseño sin necesidad de recurrir siempre a un especialista aparte para cada mejora. Justo esa autonomía me faltó durante mucho tiempo.
Un rediseño que el cliente no tuvo que pagar aparte
Hay un detalle más que quiero destacar. La reforma de ProCoffee la hicimos dentro de la cuota mensual vigente por el soporte informativo y la promoción. Es decir, el cliente no tuvo que pagar adicionalmente el desarrollo de la nueva versión.
Por mi parte fue una decisión consciente. Hacía tiempo que quería volver al proyecto y corregir lo que no me convencía de la implementación anterior. Por fin había una posibilidad técnica de hacerlo todo de otra manera y, de paso, simplificar mucho el mantenimiento posterior. En cierto sentido fue de verdad cerrar un asunto pendiente. Ahora, al abrir ProCoffee, veo un sitio con cuyo resultado estoy satisfecha.
Qué quiero hacer a continuación
Ahora seguimos con el soporte informativo y la promoción SEO de ProCoffee. Una de las tareas prioritarias es recuperar las posiciones en los buscadores tras el cambio de plataforma.
En paralelo planeamos completar las fichas de equipos con reseñas en vídeo. Esperamos los materiales del departamento de marketing del cliente. También quiero implementar la generación automática de propuestas comerciales para cafeteras concretas.
Pero hay también una idea de mayor alcance. Estamos hablando de crear una aplicación que amplíe las posibilidades del sitio existente. Los clientes necesitan cuentas personales con distintos roles de usuario y los derechos de acceso correspondientes.
Por ahora estamos en la fase de recopilar requisitos y definir los escenarios de uso. Consideramos una Telegram Mini App y una PWA. Elegiremos la tecnología definitiva cuando definamos la funcionalidad necesaria y las formas de integración con el sitio.
Me interesa justo ese planteamiento: primero entender qué posibilidades necesitan realmente los usuarios y solo después elegir la implementación técnica. Será un proyecto bastante complejo, así que no quiero precipitarme con las decisiones de arquitectura.
Qué me llevo de esta historia
ProCoffee se convirtió para mí en un proyecto al que pude volver con nueva experiencia y otras posibilidades técnicas.
El primer desarrollo en Bitrix no fue fácil. Trabajamos con un presupuesto limitado, usamos una plantilla de ThemeForest pensada para WordPress, la adaptamos a otra plataforma y la retocamos mucho. Entonces hice todo lo que pude en las circunstancias dadas, pero el resultado quedó lejos del que quería obtener.
Tres años después pude replantear el enfoque. En mes y medio trasladamos el sitio a Tilda, actualizamos el diseño con cuidado, conservamos la estructura principal e implementamos un catálogo cómodo, el filtrado y las landings SEO. El sitio es claramente más rápido y trabajar con él es ahora mucho más cómodo.
Por supuesto, quedan tareas. Recuperar las posiciones en los buscadores, desarrollar el contenido, nuevas funciones y la futura aplicación: todo eso está aún por delante. Pero ahora el proyecto tiene una base técnica con la que me siento cómoda y que es interesante desarrollar. Y lo principal: por fin estoy satisfecha con el resultado.
Ver ProCoffee: procoffee.pro.
Trasladar un sitio a Tilda sin perder su estructura
Si su sitio se ha vuelto lento e incómodo de mantener, puedo trasladarlo a Tilda conservando las direcciones y las redirecciones, actualizar el diseño con cuidado y configurar el catálogo y las páginas SEO.