Cómo rediseñar un sitio web de WordPress: la lista de verificación definitiva

Aaah, el rediseño de un sitio web de WordPress…

Cuando piensas en los diferentes temas que involucra esta misión, por lo general tiendes a estresarte un poco.

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

Desafortunadamente, rediseñar su sitio web siempre es un poco más complejo que eso . Y un descuido, un error, una metedura de pata, sucede tan rápido...

WPMarmite quería compartir contigo sus mejores prácticas para abordar este gran proyecto con tranquilidad.

¿Estás listo? En esta publicación, detallo todos los elementos en los que debe pensar para rediseñar su sitio web de WordPress , desde la estrategia ascendente hasta el lanzamiento en línea.

¡Tus mejores proyectos de WordPress necesitan el mejor anfitrión!

WPMarmite recomienda Bluehost: gran rendimiento, gran soporte. Todo lo que necesitas para un gran comienzo.

Prueba Bluehost

Para aprender a crear un sitio web de WordPress desde cero, consulta nuestra guía completa .

Los 4 pasos antes del rediseño de tu web WordPress

Antes incluso de tener en sus manos WordPress para rediseñar su sitio web, deberá trabajar en varios elementos estructurales.

Así es: ¿no pensaste que empezarías sin saber en lo que te metías?

1. Establece los objetivos de tu rediseño

Como cualquier proyecto, para rediseñar un sitio web de WordPress, debe tener objetivos, que debe definir con precisión (ya sea que sea un profesional independiente, una agencia web o un webmaster no profesional).
Son estos objetivos claros y concisos los que guiarán sus próximos pasos .

Todo se reduce a hacerte la siguiente pregunta: ¿por qué quieres rediseñar tu sitio web? Pueden haber muchas razones para esto:

• Cambie el diseño de su sitio , seleccionando un nuevo tema u optando por un creador de páginas.
• Actualice la administración de su sitio . Este puede ser el caso si sus complementos o su versión del CMS de WordPress nunca se han actualizado, si hay conflictos entre diferentes complementos o si su tema se ha modificado de manera errática. Todas estas son preocupaciones que pueden afectar el rendimiento de su sitio web y su gestión diaria.
• Optimiza tu SEO . Un objetivo que debe preguntarse, especialmente si su tráfico ha disminuido o no despega, si su experiencia de usuario es actualmente inestable o si su código HTML no está optimizado para los robots de Google.
• Agregue nuevas características a su sitio que su diseño actual no puede acomodar. También es posible que desee que sea más intuitivo y fácil de usar para sus visitantes.
• Mejora la estructura técnica de tu web (o ecommerce) para reforzar su seguridad, mejorar su velocidad de carga y modificar su estructura de árbol.
• Migre su sitio a otro servidor de alojamiento web .
• Realiza más ventas , especialmente si tienes una tienda WooCommerce.
• Ponga su sitio al día con la competencia , que ofrece sitios web más actualizados. Lo aprovecharás para mejorar tu imagen de marca y tu reputación.

Escriba, en un documento bien estructurado, estos diferentes objetivos. Verás que constituirán elementos estructurantes, para organizar el rediseño de tu sitio web.

2. Estructura tu proyecto de rediseño

Ahora que tienes una idea clara del propósito de tu rediseño, hablemos de los diferentes pasos que determinan las líneas principales de tu proyecto.

Crea tus wireframes

¿Te suena familiar el término wireframes?

Es necesaria una revisión rápida del tema, ya que este paso es crucial.

Los wireframes son maquetas estructurales que lo ayudan a organizar los diferentes elementos de sus páginas web en un solo documento.

La idea es realmente establecer el marco de las diferentes páginas de su sitio, para tener una idea clara de la experiencia de usuario que va a crear.

Te di un ejemplo en este artículo, y aquí está de nuevo para ilustrar mi punto:

Si el método lápiz y papel del milenio puede ser suficiente para un ligero rediseño, igual te recomiendo que uses una herramienta digital para diseñar tus wireframes .

Esto no solo le permitirá modificarlos fácilmente si es necesario, sino también compartir estos esquemas con su equipo (o con su primo que trabaja en marketing web).

Solo puedo recomendar varias herramientas para hacer esto :

• Balsamiq Wireframes : es un software de pago, pero la versión de prueba gratuita de 30 días le da mucho tiempo para diseñar wireframes bien elaborados.
• MockFlow : esta es una práctica herramienta gratuita en línea. Su versión gratuita te permite crear hasta 3 páginas, para empezar.
• Sketch : una plataforma de diseño web colaborativo muy poderosa, siempre que sepas cómo usarla correctamente. Ofrece una versión de prueba gratuita de 30 días, luego una oferta paga a partir de $ 9 / mes.
• Canva : no es una herramienta dedicada al wireframing, pero te permite acercarte a él gracias a sus numerosas funciones. Y, sobre todo, tiene una versión gratuita con un montón de funciones.

Y en este punto, tiene una idea más clara de qué esperar para rediseñar su sitio web de WordPress.

Diseñando tus maquetas

Mientras que los wireframes te darán una visión de la estructura de tus páginas rediseñadas, las maquetas integrarán el diseño en sí.

Creado a través de un software de diseño de página (como InDesign), el diseño de sus páginas web puede requerir un cierto tecnicismo y es un paso bastante lento.

Entonces la pregunta es: ¿realmente necesitas crear maquetas gráficas para tu rediseño? La respuesta es simple:

• Sí, si quieres crear tu propio tema . En este caso tendrás que diseñar tu web rediseñada desde cero, y así poder visualizar todos los elementos gráficos fácilmente.
• No, si solo desea utilizar un tema existente y rediseñarlo. Una solución más simple. Pero en este caso, asegúrese de elegir su nuevo tema de acuerdo con sus objetivos.
  Para ayudarte, WPMarmite tiene el recurso que necesitas: una lista de los mejores temas gratuitos. ¡Disfrutar!
  

Únase a los suscriptores de WPMarmite

Obtenga las últimas publicaciones de WPMarmite (y también recursos exclusivos).

SUSCRÍBASE AHORA

Piensa en tu nueva estructura de árbol

Sí, les aseguro que todavía estamos hablando de rediseño del sitio 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 que un visitante puede orientarse en el sitio.

En resumen, al crear su estructura de árbol, piensa en las diferentes rutas de navegación de sus usuarios.

Así que ¿cómo se hace?

Diseña una estructura de árbol y recuerda incluir:

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

Con un diagrama de este tipo, no hay forma de que te olvides de crear una malla bien elaborada entre tus diferentes páginas , lo que garantizará una experiencia de usuario fluida.

Al igual que las estructuras alámbricas, puede crear este diagrama en una hoja de papel o usar una herramienta en línea como GlooMaps o Octopus.

Diseñando su especificación

Bueno, en esta etapa, estás bien provisto de elementos estructurantes. Ahora es el momento de reunir todo esto en un documento clave: una especificación.

La especificación del rediseño de su sitio web es un documento muy extenso, que le permite orientar las diferentes expectativas que tiene para rediseñar su sitio web.

Encontrarás en la web muchas plantillas de especificaciones. Sin embargo, el suyo debe contener imperativamente:

• Una descripción de tu proyecto web y de tu empresa , así como el papel que juega tu web en este proyecto.
• El público objetivo de tu nueva web , descrito con precisión si cabe.
• Los objetivos de tu rediseño , ilustrados en la medida de lo posible con figuras. Si uno de tus objetivos es, por ejemplo, aumentar tu tráfico, recuerda especificar el tráfico de tu sitio web actual.
• Los elementos a recuperar de su sitio web actual : el contenido de sus páginas, las posibles imágenes, etc.
• Los caminos gráficos que desea seguir . Para ello, integra tus wireframes y maquetas en tus especificaciones, así como tu guía de estilo (que define tu identidad visual).
• Los nuevos elementos funcionales de su sitio web rediseñado, como la adición de una tienda de comercio electrónico, un blog, un módulo de suscripción, una nueva administración (back-office), etc.
• Los principales hitos de su proyecto de rediseño : ¿cuándo desea tener una vista previa de su sitio web? ¿Cuándo quieres que salga a la luz?

Está mucho más claro ahora, ¿no?

3. Piensa en los recursos a tu disposición

Ahora es el momento de ponerse manos a la obra.

Su desafío, si lo acepta, es ahora enumerar los recursos que tiene a su disposición en términos de :

• Presupuesto : ¿cuánto quieres invertir en tu rediseño?
• Tiempo : ¿cuánto tiempo tienes disponible para rediseñar tu sitio web de WordPress?
• Habilidades : ¿tienes la capacidad de lograr todas tus metas por ti mismo?
• Herramientas : complementos, temas, creadores de páginas… ¿Este tipo de herramientas pueden ayudarlo a lograr sus objetivos, incluso si tiene habilidades técnicas web limitadas?

Esta lista te permitirá saber si tendrás que recurrir a un proveedor externo , o si sientes que puedes trabajar de forma independiente, con los miembros de tu equipo o por tus propios medios.

Encuentra los mejores expertos en WordPress

Codeable se dedica a conectarlo con expertos que pueden ayudarlo con cualquier cosa, desde el diseño o la instalación de temas de WordPress hasta el desarrollo de complementos personalizados.

Prueba Codificable

4. Crea un plan de redirección

"Está bien, aquí vamos, ¡esto es todo!"

¡Fácil! Hay un último paso que se descuida con demasiada frecuencia durante el rediseño de su sitio web: la creación de su plan de redirección .

Dejame explicar.

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

Pero, ¿qué sucede si pones tu nuevo sitio web en línea sin pensar en hacer tus redirecciones? 404 errores en abundancia, lo que afectará su SEO y la navegación de sus visitantes.

Para diseñar su plan de redirección, nada podría ser más fácil. Abra Excel o Google Sheets y cree una tabla de la siguiente manera:

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

Inteligente, ¿no?

Muy bien: respira hondo y hablemos sobre el rediseño en sí.

Acelera tu sitio web con WP Rocket

Convierta su sitio en un cohete con el complemento de almacenamiento en caché más poderoso reconocido por los expertos de WordPress.

Prueba WP Rocket

Los 3 pasos para poner en marcha tu rediseño

Entonces, ¿cómo lo hace, ahora que su proyecto está bien estructurado y organizado? Estos 3 pasos esenciales te guiarán.

1. Elija trabajar localmente o directamente en su sitio actual

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

• Ya sea directamente en su sitio actual , e integre los cambios “en vivo”.
• O en servidores de desarrollo y preproducción , para probar tu nuevo sitio antes de dárselo a tu audiencia.

¿Qué implican estas dos opciones?

Trabajar en línea directamente en su sitio es bárbaro.

En este caso, todos sus visitantes ven los cambios en vivo y actúan como "conejillos de indias" de sus nuevas características... con todos los errores que esto puede inducir.

También tenga en cuenta que si se produce un error durante las modificaciones, afectará al sitio web hasta que haya detectado y resuelto el problema. Sitio no disponible, la funcionalidad no funciona...

Para evitar todos estos problemas, puede rediseñar su sitio web localmente.

Las ventajas de trabajar localmente son numerosas:

• Realice sus modificaciones de forma segura.
• Prueba tus plugins sin riesgo.
• Obtenga una vista previa del renderizado final antes de conectarse.

También es la solución ideal si quieres mantener la administración de WP tal y como la tienes configurada actualmente. En otras palabras, podrá modificar un sitio web de WordPress sin eliminar el existente.

No obstante, si quieres empezar de cero, en una administración completamente nueva, echa un vistazo a cómo debes proceder para instalar WordPress de forma local.

Consejo de WPMarmite : “Por supuesto, puede recuperar elementos de su antiguo sitio web, gracias a un complemento como UpdraftPlus o Duplicator. Estos complementos le permiten volver a importar en su administrador lo que desea: su contenido, sus temas, sus complementos, sus medios, etc.

2. Adquiere las herramientas que necesitas para el rediseño

Ahora es el momento de que haga una lista y obtenga todo lo que necesitará para hacerse cargo del rediseño de su sitio web de WordPress.

Recuerde: usted los enumeró en sus especificaciones.

Esto puede incluir :

• Un tema nuevo , si te ha llamado la atención alguno de los muchos disponibles en el directorio oficial (como el popularísimo Astra).
• Un creador de páginas , como Elementor o Beaver Builder, si quiere evitar meterse en el código.
• Nuevos complementos , para integrar características sorprendentes.

¿No está seguro de qué complementos usar? Tal vez encuentre lo que está buscando en nuestra lista imprescindible.

¿Está lista su caja de herramientas? Preparémoslo todo y pasemos al último paso crucial de su rediseño: el contenido.

3. Prepara el contenido de tu nueva web

En primer lugar, un punto crucial para no olvidar.

Durante el rediseño de un sitio web, inevitablemente hay contenidos del sitio web anterior que se pueden recuperar.

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

Así que haga una copia de seguridad de su sitio web actual de WordPress y mantenga en secreto lo que desea poner en su rediseño.

Sin embargo, imagino que, si haces un rediseño, es también para modificar el contenido de tu web, para hacerla más relevante, más atractiva para tus target… ¡y para los buscadores, por supuesto!

Así que piensa en tu estrategia de SEO , tan importante para clasificar bien tu nuevo (impresionante) sitio web.

Si es complejo resumir los pasos a seguir, sin embargo, puedo darte las líneas principales aquí:

• Por un lado, define las palabras clave sobre las que quieres posicionarte . Estas son las expresiones que tus objetivos ingresan espontáneamente en Google, para encontrar la información que buscan.
• Por otro lado, determina dónde necesitas integrarlos, en cada página . Sus etiquetas de título (hn) , o el texto alternativo de las imágenes, debe, por ejemplo, estar optimizado para SEO: a Google le gustan, ¡ahí es donde intentará comprender su sitio primero!
• Una vez integrados estos nuevos contenidos en la web rediseñada, podrás comprobar que todo está en su sitio . Piense en particular en los nombres de las imágenes, los títulos y las metadescripciones de las páginas, que con demasiada frecuencia se descuidan.

Para ayudarlo con el SEO en la página de su sitio web (optimización de contenido), confíe en un complemento de SEO dedicado.

WPMarmite utiliza el más famoso de ellos, Yoast SEO, pero no es el único que es efectivo en el mercado. Descubre nuestra comparativa detallada de sus competidores en este artículo.

Una cosa lleva a la otra, en su servidor de desarrollo, localmente y con todas las herramientas necesarias de WordPress, puede ver cómo avanza su proyecto… y se acerca su lanzamiento en línea.

Los 3 pasos para un lanzamiento exitoso de su sitio web

Puedo sentir que te emocionas al presentar tu nuevo sitio web de WordPress al mundo.

Tómese el tiempo para ver estos 3 pasos y sígalos cuidadosamente: se alegrará de haberlo hecho, lo prometo.

1. Elija un servidor de producción directa o preproducción

¿El término "servidor de preproducción" no significa nada para usted? No se preocupe, tomemos un breve descanso para una definición.

Un servidor de preproducción comparte el mismo servidor en el que estará su sitio web una vez que esté activo . Si WPMarmite tuviera que rediseñarlo, Alex podría, por ejemplo, optar por poner su preproducción en preprod.wpmarmite.com : este sería el mismo entorno que wpmarmite.com .

Entonces, ¿por qué usarías este servidor preprod?

• Para validar tu rediseño con tu cliente, si eres desarrollador de WordPress.
• Para probar errores antes de que el sitio se active.
• Para ajustar su estrategia de SEO, asegúrese de que todas sus palabras clave estén incluidas en cada página.

Una vez que todo esto esté validado, solo entonces puede comenzar a funcionar e implementar su nuevo sitio web. Si está seguro, puede optar por ir directamente a la producción.

2. Pruebe su nuevo sitio web para detectar posibles problemas

Desde su servidor de preproducción (o en vivo, si es un aventurero de WordPress), deberá probar su nuevo sitio web.

La clave para probar con éxito los problemas es ponerse en el lugar de un visitante promedio , hacer clic y anotar cualquier problema que encuentre...

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

• Redirecciones que no se han hecho y generan enlaces muertos o páginas blancas.
• El rendimiento del sitio web , probándolo en GTMetrix, Pingdom o la prueba PageSpeed ​​Insights de Google.
• Los puntos de opt-in , comprobando si funcionan bien.
• Formularios de contacto, formularios de cotización…
• Pago , si tiene un sitio de comercio electrónico (incluidos los correos electrónicos de confirmación, acceso al sitio de miembros...).

¿Todo es hermoso, funcional, bien conectado y bien ensamblado? ¡Felicidades! El último paso realzará la gran sonrisa que veo en sus rostros desde aquí.

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

¡Vamos, ya casi estás!

Ahora puede reactivar todos los servicios y complementos vinculados a su sitio web de WordPress . Piense en particular en:

• Su complemento de caché.
• Complementos que utilizan Google Analytics, como MonsterInsights.
• Complementos que utilizan redes sociales, como Facebook o Instagram.
• Las diversas claves de licencia para sus complementos y temas.

Y como la seguridad es asunto de todos (y en especial tuyo), recuerda volver a habilitar todos los elementos que aseguran tu sitio web .

¿Listo para ir? Luego comience a indexar su nuevo sitio web en Google Search Console. Esta manipulación obliga a los robots de Google a visitar a su nuevo bebé, y así indexarlo más rápidamente en su nueva versión.

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

¿Y tú, has realizado un rediseño de un sitio web de WordPress recientemente?

¿Cuáles son los problemas con los que te encontraste o el orgullo que sentiste al respecto?

Cuéntanoslo todo en los comentarios: el equipo de WPMarmite los lee todos detenidamente.