Cómo rediseñar un sitio de WordPress: checklist definitiva

Cómo rediseñar un sitio de WordPress: checklist definitiva
5 (100%) 1 vote

Cuando piensas en los diferentes temas involucrados en esta misión, generalmente tiendes a estar un poco estresado.

¿Quién no sueña, en este momento clave, con hacer un simple Ctlr+Alt+Delete en su servidor, y empezar de nuevo fácilmente?

Desafortunadamente, el rediseño de su sitio web es siempre un poco más complejo que eso. Y una omisión, un error, un error, un error, un error, ocurrió tan rápido…

Por ello, La Marmite ha querido compartir con ustedes sus mejores prácticas para abordar con calma este gran proyecto.

Con el equipo, estamos justo en el medio, ya que el blog está preparando su rediseño. En la agenda: un diseño modernizado, una optimización de las páginas de presentación de la formación y, sobre todo, una nueva estructura que le ayuda a sacar el máximo partido de WordPress.

Hay que decir que la maceta ha crecido considerablemente en los últimos meses. Cada semana se publica un nuevo artículo, la mayoría de los videos son transcritos, sin mencionar el glosario y los fragmentos.

Vamos, ¿estás listo? En este artículo, detallo todos los elementos en los que debes pensar durante el rediseño de tu sitio web de WordPress, desde la estrategia inicial hasta el lanzamiento en línea.

Los 4 pasos previos al rediseño de su sitio web WordPress

Antes incluso de que tengas en tus manos WordPress para rediseñar tu sitio, tendrás que trabajar en diferentes elementos de estructuración.

Así es: ¿no pensabas que lo ibas a hacer sin saber lo que ibas a hacer?

1. Fijar los objetivos de su rediseño

Como cualquier proyecto, el rediseño de un sitio de WordPress tiene objetivos, que deben ser definidos con precisión. Son estos objetivos concisos y claros los que guiarán sus pasos después.

Hay muchas razones para querer rediseñar un sitio web.

¿Te gustaría hacerlo:

  • ¿Cambiar el diseño de su sitio web, seleccionando un nuevo tema?
  • ¿Actualizar la administración de su sitio? Este puede ser el caso si sus plugins o su versión de WordPress nunca han sido actualizados, si hay conflictos entre diferentes plugins, o si su tema ha sido cambiado erráticamente. Todas estas preocupaciones pueden afectar el rendimiento de su sitio web y su gestión diaria.
  • Optimice su SEO? Un objetivo para preguntarse, especialmente si su experiencia de usuario es actualmente defectuosa, si su HTML no está optimizado para los robots de Google, o si tiene problemas para integrar AMP.
  • ¿Agregar nuevas características a su sitio que su diseño actual no puede integrar?
  • ¿Migrar su sitio a otro servidor?

Anote estos diferentes objetivos en un documento bien estructurado. Verá que constituirán elementos estructuradores, para organizar bien el rediseño de su sitio web.

2. Estructurar su proyecto de rediseño

Ahora que tienes ideas claras sobre el propósito de tu rediseño, hablemos un poco sobre las diferentes etapas que determinan las líneas principales de tu proyecto.

Cree sus wireframes

¿Significa algo para usted el término”alambres”?

Es necesario hacer un pequeño comentario sobre el tema, ya que este paso es crucial.

Los Wireframes son modelos estructurales que le ayudan a organizar los diferentes elementos de sus páginas web en un solo documento.

La idea es realmente poner la estructura de sus diferentes páginas en su lugar, para tener una idea clara de la experiencia de usuario que va a crear.

Les he dado un ejemplo en este artículo, que está de nuevo aquí para ilustrar mi punto de vista:

Si el método milenario de papel + lápiz puede ser suficiente para un rediseño de la luz, todavía recomiendo usar una herramienta digital para diseñar sus alambres.

Esto no sólo le permitirá modificarlos fácilmente si es necesario, sino también compartir estos wireframes con su equipo (o con su primo que trabaja en webmarketing).

Sólo puedo recomendar 2 herramientas para hacer esto:

  • MockFlow, una herramienta online muy práctica y gratuita.
  • Balsamiq Mockups 3, un software de pago, pero cuya versión de prueba gratuita de 30 días le da tiempo para diseñar estructuras de alambre bien hechas.

Y en este punto, usted tiene una idea más clara de lo que puede esperar para el rediseño de su sitio.

Diseñe sus modelos

Donde los marcos de alambre le darán una visión de la estructura de sus páginas rediseñadas, los modelos integrarán el diseño como tal.

Creado a través de un software de maquetación (como InDesign), la maquetación de sus páginas web puede requerir un cierto tecnicismo, y es un paso que consume bastante tiempo.

Por lo tanto, surge la siguiente pregunta: ¿realmente necesita crear modelos gráficos para su rediseño? La respuesta es simple:

  • Sí, si quieres crear tu propio tema. En este caso, tendrá que diseñar su sitio web rediseñado de la A a la Z, y por lo tanto ser capaz de visualizar todos los elementos gráficos fácilmente.
  • No, si sólo quieres usar un tema existente y rediseñarlo. Una solución más simple, especialmente con el ebook creado por Alex, “Relooker son thème”. Pero en este caso, asegúrese de elegir el nuevo tema cuidadosamente de acuerdo con sus objetivos.

El consejo de Maxence Barbou, un experimentado desarrollador de WordPress:
“Entre los elementos a tener en cuenta a la hora de elegir un tema, no olvides comprobarlo:

  • Que su tema está optimizado para SEO;
  • Que se optimice para todos los navegadores utilizados por los usuarios de Internet (al menos Chrome, Safari, Firefox, Internet Explorer 11 y EDGE);
  • Debe ser receptivo, es decir, estar optimizado para todos los medios (pantalla de escritorio, smartphone y tableta).

Esto le evitará tener que lidiar con cualquier problema al rediseñar su sitio”

Piense cuidadosamente sobre su nueva estructura de árbol

Sí, le aseguro que todavía estamos hablando de rediseño de sitios web, no de horticultura!

Diseñar su estructura de árbol significa imaginar los enlaces que existirán entre las diferentes páginas, y pensar en todas las formas en las que un visitante puede orientarse en su sitio.

En resumen, cuando cree su estructura de árbol, piense en las diferentes rutas de navegación de sus usuarios.

Entonces, ¿cómo lo hacemos?

Diseñar un esquema de estructura de árbol, incluyendo la inclusión de:

  • Su menú principal de navegación, así como sus menús secundarios potenciales;
  • Su pie de página y los enlaces que puede contener;
  • Tus posibles barras laterales, especialmente en tu blog;
  • Las diferentes categorías de su blog…..

Con este esquema, no se trata de olvidarse de crear una malla bien hecha entre sus diferentes páginas, garantizando una experiencia de usuario sin problemas.

Al igual que los wireframes, puede crear este esquema en una hoja de papel, o utilizar una herramienta en línea como GlooMaps.

Diseñe sus especificaciones

Bueno, en esta etapa, usted está bien provisto de elementos estructurales. Por lo tanto, es hora de reunir todo esto en un documento clave: una especificación.

Las especificaciones para el rediseño de su sitio web es un documento muy extenso, que le permite orientar las diferentes expectativas que usted tiene para el rediseño de su sitio web.

Encontrará en la web muchos modelos de especificaciones. En cualquier caso, la tuya debe contener:

  • Una descripción de su proyecto y de su empresa, así como del papel que desempeña su sitio web en este proyecto
  • El público objetivo de su nuevo sitio, descrito con precisión si es posible
  • Los objetivos de su rediseño, ilustrados en la medida de lo posible con cifras. Si uno de sus objetivos es aumentar su tráfico, por ejemplo, piense en especificar el tráfico de su sitio actual.
  • Los elementos a recuperar de su sitio actual: el contenido de sus páginas, las imágenes….
  • Las pistas gráficas que desea seguir. Para ello, integre sus wireframes y modelos en sus especificaciones, así como su carta gráfica.
  • Los nuevos elementos funcionales de su sitio rediseñado, como la adición de una tienda en línea, un blog, un módulo opt-in, una nueva administración…
  • Los principales hitos de su proyecto de rediseño: ¿cuándo desea obtener una visión general de su sitio? ¿Cuándo desea que se ponga en línea?

Puedes ver mucho más claro de inmediato, ¿no?

3. Piense en los recursos disponibles para ello

Vamos, es hora de ir al grano.

Su reto, si lo aceptan, es ahora enumerar los recursos que tienen disponibles en términos de:

  • Presupuesto: ¿cuánto quieres invertir en tu rediseño?
  • Tiempo: ¿cuánto tiempo tienes para enfrentarte a ti mismo para rediseñar tu sitio de WordPress?
  • Habilidades: ¿Tiene la habilidad de lograr todos sus objetivos usted mismo?
  • Herramientas: plugins, temas, creadores de páginas… ¿Puede este tipo de herramienta ayudarle a alcanzar sus objetivos, incluso si sus habilidades técnicas web son limitadas?

Esta lista le ayudará a saber si tendrá que recurrir a un proveedor de servicios externo o si cree que puede trabajar de forma independiente, con los miembros de su equipo o por sus propios medios.

4. Crear un plan de redireccionamiento

“¡Muy bien, vamos, eso es todo!”

¡Tranquilo, tranquilo, tranquilo! Un último paso, demasiado a menudo descuidado durante el rediseño de un sitio web, debe ser seguido: el de crear su plan de redireccionamiento.

Déjame explicarte.

A menudo, en el rediseño de un sitio web, los cambios de URL se notarán. Este será el caso si crea nuevas páginas.

Pero, ¿qué pasa si pones tu nuevo sitio en línea sin pensar en hacer tus redirecciones? 404 errores por el cubo, que afectarán a su SEO y la navegación de sus visitantes. O como diría Maxence Barbou, “crear un canal interestelar en su SEO”.

Para diseñar su plan de redireccionamiento, es fácil: sólo tiene que abrir Excel o Google Sheets y crear una tabla como la siguiente:

Una vez que su sitio esté en línea, puede configurar el plugin de redirección e importar esta tabla directamente.

Inteligente, ¿verdad?

Vamos: respira hondo y pasemos al rediseño como tal.

Los 3 pasos para lanzar su rediseño

Entonces, ¿cómo vas a actuar ahora que tu proyecto está bien estructurado, bien organizado? Estos 3 pasos esenciales le guiarán.

1. Elija trabajar localmente o directamente en su sitio actual

Antes de entrar en el aspecto técnico, empiece por elegir trabajar:

  • ya sea directamente en su sitio actual, y para integrar los cambios “en vivo”;
  • o para trabajar en servidores de desarrollo y pre-producción, para probar su nuevo sitio antes de mostrarlo a su audiencia.

¿Qué implican estas dos opciones?

Trabajar en línea directamente en su sitio web es una barbaridad.

En este caso, todos sus visitantes verán los cambios en vivo, y actuarán como “conejillos de indias” de sus nuevas características…. con todos los errores que pueda inducir. Tenga en cuenta también que si se produce un error durante los cambios, afectará al sitio hasta que haya detectado y resuelto el problema. Sitio no disponible, característica que no funciona…. outch.

Para evitar todos estos problemas, puede trabajar localmente.

Las ventajas de trabajar localmente son muchas:

  • Realice sus modificaciones con total seguridad;
  • Pruebe sus plugins sin riesgo;
  • Obtenga una vista previa del renderizado final antes de la carga.

Esta es la solución ideal si desea mantener la administración de WordPress tal y como la ha configurado actualmente.

Sin embargo, si quieres empezar de cero, en una administración completamente nueva, no dudes en seguir la guía que el pote ha preparado sobre este tema.

El truco de Maxence Barbou, que siempre trabaja localmente: “Por supuesto, puedes obtener elementos de tu antiguo sitio, gracias a un plugin como UpdraftPlus o Duplicator. Estos plugins te permiten importar a tu administrador lo que quieras: tu contenido, tus temas, tus extensiones, tus medios…”

2. Adquirir las herramientas necesarias para el rediseño

Ahora es el momento de hacer una lista y obtener todo lo que necesita para apoyar el rediseño de su sitio web de WordPress.

Recuerde: usted las enumeró en sus especificaciones.

Puede ser una cuestión de:

  • Un nuevo tema, si uno de los muchos disponibles en la web te ha llamado la atención (como Divi);
  • Un constructor de páginas, como Elementor o Beaver Builder, si quieres evitar tener en tus manos el código;
  • Nuevos plugins, para integrar características increíbles.

¿Te estás secando un poco con los plugins a usar? Quizás su felicidad se encuentra en la serie “Bonjour Plugin” de la Marmite: ¡mírela atentamente!

¿Está lista tu caja de herramientas? Así que instalen todo esto por mí, y pasemos al último paso crucial de su rediseño: el contenido.

3. Preparar el contenido de su nuevo sitio web

En primer lugar, un punto crucial que no hay que olvidar.

Cuando se rediseña un sitio web, necesariamente hay contenido del sitio anterior que puede ser recuperado.

Imágenes, textos, configuración de plugins… ¡Piénsalo!

Así que haz una copia de seguridad de tu sitio actual de WordPress, y mantén lo que quieras poner en tu rediseño debajo de tu codo.

Sin embargo, me imagino que si rediseña, es también para modificar el contenido de su sitio, para hacerlo más relevante, más atractivo para sus objetivos…. y para los motores de búsqueda, por supuesto!

Así que mire su estrategia de SEO, tan importante para referir correctamente su nuevo sitio, caliente.

Si bien es complejo resumir el proceso que se ha de seguir, puedo, no obstante, exponer aquí los puntos principales:

  • Por un lado, defina las palabras clave sobre las que desea posicionarse. Estas son las expresiones que sus destinatarios introducen espontáneamente en Google, para encontrar la información que buscan.
  • Por otro lado, determine dónde necesita integrarlas en cada página. Sus etiquetas de título <hn>, o el texto alternativo de las imágenes, por ejemplo, debe ser optimizado para la referenciación: Google es aficionado a ellos, que es donde tratará de entender su sitio en primer lugar!
  • Una vez que este nuevo contenido se integre en el sitio web rediseñado, usted puede comprobar que todo está en su lugar. Piense en particular en los nombres de las imágenes, títulos y descripciones de meta-páginas, que con demasiada frecuencia se pasan por alto.

Hacer referencia a un sitio es una profesión por derecho propio. Sin embargo, con algunas buenas prácticas, es posible hacerlo bien, y rastrear con éxito las solicitudes de sus objetivos.

Si está interesado en este tema, el Kettle le ofrece un curso de formación verdaderamente operativo, que le da consejos concretos sobre SEO y WordPress. Y lleva bien su nombre: “Finalmente visible gracias a la referenciación”!

Una cosa lleva a la otra, en su servidor de desarrollo, localmente, y con todas las herramientas necesarias de WordPress, usted ve el progreso de su proyecto…. y su lanzamiento en línea se acerca.

Los 3 pasos para una presencia en línea óptima

Siento que estás emocionado de presentar tu nueva creación de WordPress al mundo.

Tómese el tiempo para consultar estos 3 pasos y seguirlos bien: los acogerá más tarde, se lo prometo.

1. Elija un lanzamiento de producción directo o en un servidor de pre-producción

¿La expresión “servidor de preproducción” no significa nada para usted? No te preocupes, tomemos un pequeño descanso de la definición.

Un servidor de pre-producción comparte el mismo servidor que el servidor en el que su sitio será puesto en línea. Si el bote fuera a ser rediseñado, Alex podría, por ejemplo, elegir poner su preproducción en preprod.wpmarmite.com: sería el mismo entorno que wpmarmite.com.

¿Por qué usar este servidor preprod?

  • Para validar su rediseño con su cliente, si usted es un desarrollador de WordPress;
  • Para probar cualquier error antes de que el sitio esté en línea;
  • Para ajustar su estrategia de SEO, asegurándose de que todas sus palabras clave están bien integradas en cada página.

Una vez que todo esto haya sido validado, sólo entonces podrá entrar en producción y desplegar su nuevo sitio. Si tiene confianza, por supuesto que puede optar por la producción directa.

El truco de Alex, que conoce bien el tema: “Mientras su sitio está siendo desplegado, piense en el hecho de que tendrá que activar el modo de mantenimiento, el tiempo para poder dar acceso a los visitantes a su sitio de nuevo.

Para ello, no dude en consultar la selección de plugins “Coming Soon” que Thibaut ha realizado en el pote. Podrá mostrar páginas de mantenimiento, e incluso continuar convirtiendo visitantes a pesar de su actual rediseño”

2. Recibir cualquier problema con su nuevo sitio web

Desde su servidor de pre-producción (o en vivo, si usted es un aventurero de WordPress), tendrá que probar su nuevo sitio web.

La clave para tener éxito en esta recepción de posibles problemas: ponerse en el lugar de un visitante típico, hacer clic en todas partes, y anotar todos los problemas encontrados….

Probablemente verá problemas de diseño y estructurales. Pero no olvides comprobarlo también:

  • Redirecciones que no se han hecho, y generan enlaces muertos o páginas en blanco;
  • El rendimiento del sitio, probándolo en GTMetrix, Pingdom, o en la prueba PageSpeed de Google;
  • Los puntos de inclusión voluntaria, comprobando si funcionan bien;
  • Formularios de contacto, formularios de cotización…………………………………………………………………………………………………………………………………..;
  • Pago, si usted tiene un sitio de comercio electrónico (incluyendo correos electrónicos de confirmación, acceso al sitio del miembro…).

Todo es hermoso, funcional, bien conectado y bien atado? Felicitaciones! El paso final completará la gran sonrisa que veo desde aquí en sus caras.

3. Reactivar y volver a conectar todos los servicios de terceros

Anímate, ya casi llegas!

Ahora podrá reactivar todos los servicios y plugins vinculados a su sitio WordPress. Piensa en particular en:

  • Tu plugin de caché;
  • Plugins que utilizan Google Analytics, como MonsterInsights;
  • Los que utilizan las redes sociales, como Facebook o Instagram;
  • Las diferentes claves de licencia de sus plugins y temas.

Y como la seguridad es asunto de todos (y especialmente suyo), recuerde reactivar todos los elementos que protegen su sitio web. Sí, recuerda, todo lo que Alex y Julio te contaron en los Espacios Secos!

¿Están listos? Por último, inicie la indexación de su nuevo sitio en la Consola de Búsqueda de Google. Esta manipulación obliga a los robots de Google a venir a ver a su nuevo bebé, y así hacer referencia a él más rápidamente en su nueva versión.

¡Tadam! Rediseñado, más eficiente, más potente, mejor estructurado, su nuevo sitio está listo para recibir el tráfico que se merece. Fue mucho trabajo, pero valió la pena, ¿no?

Y tú, ¿has rediseñado recientemente un sitio web de WordPress? ¿Qué problemas has encontrado, o el orgullo que has derivado de ellos? Cuéntanos todo en comentarios: el equipo de la Olla los lee todos cuidadosamente.