Come riprogettare un sito Web WordPress: la checklist definitiva

Aaah, il restyling di un sito Web WordPress...

Quando pensi ai diversi problemi che questa missione comporta, di solito tendi a stressarti un po'.

Chi non sogna, in questo momento chiave, di fare un semplice Command + Option + Escape o Ctlr + Alt + Canc sul proprio server e ricominciare da capo facilmente?

Sfortunatamente, riprogettare il tuo sito web è sempre un po' più complesso di così . E una svista, un errore, un errore, accade così in fretta...

WPMarmite ha voluto condividere con te le sue migliori pratiche per affrontare questo grande progetto con tranquillità.

Siete pronti? In questo post, descrivo in dettaglio tutti gli elementi a cui devi pensare per riprogettare il tuo sito WordPress , dalla strategia upstream al lancio online.

I tuoi migliori progetti WordPress hanno bisogno del miglior host!

WPMarmite consiglia Bluehost: ottime prestazioni, ottimo supporto. Tutto quello che ti serve per iniziare alla grande.

Prova Bluehost

Per sapere come creare un sito Web WordPress da zero, consulta la nostra guida completa .

I 4 passi prima del restyling del tuo sito WordPress

Prima ancora di mettere le mani su WordPress per riprogettare il tuo sito web, dovrai lavorare su vari elementi strutturali.

Esatto: non pensavi di iniziare senza sapere in cosa ti stavi cacciando?

1. Stabilisci gli obiettivi della tua riprogettazione

Come ogni progetto, per riprogettare un sito WordPress, devi avere degli obiettivi, che devi definire con precisione (che tu sia un libero professionista, una web agency o un webmaster non professionista).
Sono questi obiettivi chiari e concisi che guideranno i tuoi prossimi passi .

Si tratta di porsi la seguente domanda: perché vuoi riprogettare il tuo sito web? Ci possono essere molte ragioni per questo:

• Modifica il design del tuo sito selezionando un nuovo tema o optando per un generatore di pagine.
• Aggiorna l'amministrazione del tuo sito . Questo può essere il caso se i tuoi plug-in o la tua versione del CMS di WordPress non sono mai stati aggiornati, se ci sono conflitti tra diversi plug-in o se il tuo tema è stato modificato in modo irregolare. Queste sono tutte preoccupazioni che possono influenzare le prestazioni del tuo sito Web e la sua gestione quotidiana.
• Ottimizza la tua SEO . Un obiettivo da chiedersi, soprattutto se il tuo traffico è diminuito o non sta decollando, se la tua esperienza utente è attualmente traballante o se il tuo codice HTML non è ottimizzato per i robot di Google.
• Aggiungi nuove funzionalità al tuo sito che il tuo design attuale non può ospitare. Potresti anche voler renderlo più intuitivo e più facile da usare per i tuoi visitatori.
• Migliora la struttura tecnica del tuo sito web (o e-commerce) per rafforzarne la sicurezza, migliorarne la velocità di caricamento e modificarne la struttura ad albero.
• Migra il tuo sito su un altro server di hosting web .
• Fai più vendite , soprattutto se hai un negozio WooCommerce.
• Aggiorna il tuo sito con la concorrenza , che offre siti Web più aggiornati. Ne approfitterai per migliorare l'immagine del tuo marchio e la tua reputazione.

Annotare, in un documento ben strutturato, questi diversi obiettivi. Vedrai che costituiranno elementi strutturanti, per organizzare il restyling del tuo sito web.

2. Struttura il tuo progetto di riprogettazione

Ora che hai un'idea chiara dello scopo del tuo restyling, parliamo dei diversi passaggi che determinano le linee principali del tuo progetto.

Crea i tuoi wireframe

Il termine wireframe suona un campanello?

È necessaria una rapida revisione dell'argomento, poiché questo passaggio è cruciale.

I wireframe sono modelli strutturali che ti aiutano a organizzare i diversi elementi delle tue pagine web su un unico documento.

L'idea è proprio quella di tracciare la struttura delle diverse pagine del tuo sito, per avere un'idea chiara dell'esperienza utente che andrai a creare.

Ti ho fornito un esempio in questo articolo, ed eccolo ancora una volta per illustrare il mio punto:

Se il metodo del millennio carta + matita può essere sufficiente per una leggera riprogettazione, ti consiglio comunque di utilizzare uno strumento digitale per progettare i tuoi wireframe .

Questo non solo ti permetterà di modificarli facilmente se necessario, ma anche di condividere questi wireframe con il tuo team (o con tuo cugino che lavora nel web marketing).

Posso solo consigliare diversi strumenti per farlo :

• Balsamiq Wireframes : è un software a pagamento, ma la versione di prova gratuita di 30 giorni ti dà tutto il tempo per progettare wireframe ben realizzati.
• MockFlow : questo è un pratico strumento online freemium. La sua versione gratuita ti consente di creare fino a 3 pagine, per iniziare.
• Schizzo : una piattaforma di web design collaborativa molto potente, a condizione che tu sappia come usarla correttamente. Offre una versione di prova gratuita di 30 giorni, quindi un'offerta a pagamento a partire da $ 9 al mese.
• Canva : Non è uno strumento dedicato al wireframing, ma ti permette di avvicinarti ad esso grazie alle sue numerose funzionalità. E, soprattutto, ha una versione gratuita con molte funzionalità.

E a questo punto, hai un'idea più chiara di cosa aspettarti dal riprogettare il tuo sito Web WordPress.

Progettare i tuoi modelli

Laddove i wireframe ti daranno una visione della struttura delle tue pagine ridisegnate, i mockup integreranno il design stesso.

Creato tramite un software di impaginazione (come InDesign), il layout delle tue pagine Web può richiedere un certo tecnicismo ed è un passaggio piuttosto dispendioso in termini di tempo.

Quindi la domanda è: hai davvero bisogno di creare modelli grafici per il tuo redesign? La risposta è semplice:

• Sì, se vuoi creare il tuo tema . In questo caso, dovrai progettare da zero il tuo sito web ridisegnato, e quindi essere in grado di visualizzare facilmente tutti gli elementi grafici.
• No, se vuoi semplicemente utilizzare un tema esistente e riprogettarlo. Una soluzione più semplice. Ma in questo caso, assicurati di scegliere il tuo nuovo tema in base ai tuoi obiettivi.
  Per aiutarti, WPMarmite ha la risorsa di cui hai bisogno: un elenco dei migliori temi gratuiti. Divertiti!
  

Unisciti agli abbonati WPMarmite

Ottieni gli ultimi post di WPMarmite (e anche risorse esclusive).

ISCRIVITI ORA

Pensa alla tua nuova struttura ad albero

Sì, vi rassicuro, stiamo ancora parlando di restyling del sito web, non di orticoltura!

Progettare la propria struttura ad albero significa immaginare i collegamenti che esisteranno tra le diverse pagine e pensare a tutti i modi in cui un visitatore può orientarsi all'interno del sito.

In breve, creando la tua struttura ad albero, pensi ai diversi percorsi di navigazione dei tuoi utenti.

Quindi come si fa?

Progetta una struttura ad albero e ricorda di includere:

• Il tuo menu di navigazione principale, così come i tuoi potenziali menu secondari.
• Il tuo piè di pagina e i collegamenti che potrebbe contenere.
• Le tue possibili barre laterali, specialmente sul tuo blog.
• Le diverse categorie del tuo blog ecc.

Con un diagramma del genere, non puoi dimenticare di creare una mesh ben realizzata tra le tue diverse pagine , che garantirà un'esperienza utente fluida.

Proprio come i wireframe, puoi creare questo diagramma su un foglio di carta o utilizzare uno strumento online come GlooMaps o Octopus.

Progettare la tua specifica

Bene, in questa fase, sei ben fornito di elementi strutturanti. È giunto il momento di raccogliere tutto questo in un documento chiave: una specifica.

La specifica della riprogettazione del tuo sito Web è un documento molto ampio, che ti consente di indirizzare le diverse aspettative che hai per riprogettare il tuo sito Web.

Troverai sul web molti modelli di specifiche. Tuttavia, il tuo deve contenere imperativamente:

• Una descrizione del tuo progetto web e della tua azienda , oltre al ruolo che il tuo sito web svolge in questo progetto.
• Il pubblico di destinazione del tuo nuovo sito web , descritto con precisione se possibile.
• Gli obiettivi del tuo redesign , illustrati il ​​più possibile con le cifre. Se uno dei tuoi obiettivi è, ad esempio, aumentare il tuo traffico, ricorda di specificare il traffico del tuo attuale sito web.
• Gli elementi da recuperare dal tuo attuale sito web : il contenuto delle tue pagine, le possibili immagini, ecc.
• I percorsi grafici che desideri seguire . Per fare ciò, integra i tuoi wireframe e modelli nelle tue specifiche, così come la tua guida di stile (che definisce la tua identità visiva).
• I nuovi elementi funzionali del tuo sito web ridisegnato, come l'aggiunta di un negozio di e-commerce, un blog, un modulo di opt-in, una nuova amministrazione (back-office), ecc.
• Le tappe principali del tuo progetto di restyling : quando vuoi avere un'anteprima del tuo sito web? Quando vuoi che vada in onda?

Adesso è molto più chiaro, vero?

3. Pensa alle risorse a tua disposizione

Ora è il momento di mettersi al lavoro.

La tua sfida, se la accetti, ora è elencare le risorse che hai a disposizione in termini di :

• Budget : quanto vuoi investire nel tuo restyling?
• Tempo : quanto tempo hai a disposizione per riprogettare il tuo sito WordPress?
• Abilità : hai la capacità di raggiungere tutti i tuoi obiettivi da solo?
• Strumenti : plugin, temi, page builder... Questi tipi di strumenti possono aiutarti a raggiungere i tuoi obiettivi, anche se hai competenze web limitate?

Questo elenco ti consentirà di sapere se dovrai rivolgerti a un fornitore esterno o se ritieni di poter lavorare in modo indipendente, con i membri del tuo team o con i tuoi mezzi.

Trova i migliori esperti di WordPress

Codeable è dedicato a metterti in contatto con esperti che possono aiutarti con qualsiasi cosa, dalla progettazione o installazione di temi WordPress allo sviluppo di plug-in personalizzati.

Prova codificabile

4. Crea un piano di reindirizzamento

"Va bene, eccoci qua, ecco qua!"

Facile! C'è un ultimo passaggio che troppo spesso viene trascurato durante il restyling del tuo sito web: la creazione del tuo piano di reindirizzamento .

Lasciatemi spiegare.

Spesso, nella riprogettazione di un sito Web, ci saranno modifiche all'URL. Questo sarà particolarmente vero se crei nuove pagine.

Ma cosa succede se metti online il tuo nuovo sito web senza pensare a fare i tuoi reindirizzamenti? 404 errori in abbondanza, che avranno un impatto sulla tua SEO e sulla navigazione dei tuoi visitatori.

Per progettare il tuo piano di reindirizzamento, niente potrebbe essere più facile. Apri Excel o Fogli Google e crea una tabella come segue:

Una volta che il tuo sito Web è online, puoi impostare il plug-in di reindirizzamento e importare direttamente questa tabella.

Intelligente, non è vero?

Va bene: fai un respiro profondo e parliamo della riprogettazione stessa.

Velocizza il tuo sito web con WP Rocket

Trasforma il tuo sito in un razzo con il plug-in di memorizzazione nella cache più potente riconosciuto dagli esperti di WordPress.

Prova WP Rocket

I 3 passaggi per avviare la tua riprogettazione

Allora come lo fai, ora che il tuo progetto è ben strutturato e organizzato? Questi 3 passaggi essenziali ti guideranno.

1. Scegli di lavorare localmente o direttamente sul tuo sito attuale

Prima di entrare nell'aspetto tecnico, inizia scegliendo di lavorare:

• O direttamente sul tuo attuale sito e integra le modifiche "in tempo reale".
• Oppure su server di sviluppo e pre-produzione , per testare il tuo nuovo sito prima di darlo al tuo pubblico.

Cosa comportano queste due opzioni?

Lavorare online direttamente sul tuo sito è barbaro.

In questo caso, tutti i tuoi visitatori vedono le modifiche in tempo reale e fungono da "cavie" delle tue nuove funzionalità... con tutti i bug che questo può indurre.

Tieni inoltre presente che se si verifica un errore durante le modifiche, avrà un impatto sul sito Web fino a quando non avrai rilevato e risolto il problema. Sito non disponibile, funzionalità non funzionante...

Per evitare tutti questi problemi, puoi riprogettare il tuo sito web in locale.

I vantaggi di lavorare in loco sono numerosi:

• Apporta le tue modifiche in sicurezza.
• Testa i tuoi plugin senza rischi.
• Avere un'anteprima del rendering finale prima di andare online.

È anche la soluzione ideale se vuoi mantenere l'amministrazione di WP come l'hai attualmente configurata. In altre parole, sarai in grado di modificare un sito Web WordPress senza eliminare quello esistente.

Tuttavia, se vuoi ricominciare da zero, in un'amministrazione completamente nuova, dai un'occhiata a come dovresti procedere per installare WordPress in locale.

Il consiglio di WPMarmite : “Naturalmente, puoi recuperare elementi dal tuo vecchio sito Web, grazie a un plugin come UpdraftPlus o Duplicator. Questi plug-in ti consentono di importare nuovamente sul tuo amministratore ciò che desideri: i tuoi contenuti, i tuoi temi, i tuoi plug-in, i tuoi media, ecc."

2. Acquisisci gli strumenti necessari per la riprogettazione

Ora è il momento di elencare e ottenere tutto ciò di cui hai bisogno per occuparti della riprogettazione del tuo sito Web WordPress.

Ricorda: li hai elencati nelle tue specifiche.

Questo può includere :

• Un nuovo tema , se uno dei tanti disponibili sulla directory ufficiale ha attirato la vostra attenzione (come la popolarissima Astra).
• Un page builder , come Elementor o Beaver Builder, se vuoi evitare di mettere le mani nel codice.
• Nuovi plugin , per integrare funzionalità sorprendenti.

Non sei sicuro di quali plugin usare? Forse troverai quello che stai cercando nella nostra lista dei must-have.

La tua cassetta degli attrezzi è pronta? Prepariamo tutto e passiamo all'ultimo passaggio cruciale della tua riprogettazione: il contenuto.

3. Prepara il contenuto del tuo nuovo sito web

Innanzitutto un punto cruciale da non dimenticare.

Durante la riprogettazione di un sito web, ci sono inevitabilmente contenuti del precedente sito web che possono essere recuperati.

Immagini, testi, configurazione plugin: pensaci!

Quindi fai un backup del tuo attuale sito Web WordPress e tieni nascosto ciò che vuoi mettere nella tua riprogettazione.

Immagino però che, se fai un restyling, sia anche per modificare il contenuto del tuo sito web, per renderlo più rilevante, più attraente per i tuoi target… e per i motori di ricerca, ovviamente!

Quindi pensa alla tua strategia SEO , così importante per classificare bene il tuo nuovo (fantastico) sito web.

Se è complesso riassumere i passaggi da seguire, posso comunque darvi le linee principali qui:

• Da un lato, definisci le parole chiave su cui vuoi posizionarti . Queste sono le espressioni che i tuoi target inseriscono spontaneamente su Google, per trovare le informazioni che stanno cercando.
• D'altra parte, determina dove devi integrarli, in ogni pagina . I tuoi tag del titolo (hn) , ovvero il testo alternativo delle immagini, deve ad esempio essere ottimizzato per la SEO: a Google piacciono, è lì che cercherà prima di capire il tuo sito!
• Una volta che questi nuovi contenuti sono stati integrati nel sito Web riprogettato, puoi verificare che tutto sia a posto . Pensa in particolare ai nomi delle immagini, ai titoli e alle meta descrizioni delle pagine, troppo spesso trascurate.

Per aiutarti con la SEO on-page del tuo sito web (ottimizzazione dei contenuti), affidati a un plugin SEO dedicato.

WPMarmite utilizza il più famoso di questi, Yoast SEO, ma non è l'unico ad essere efficace sul mercato. Scopri il nostro confronto dettagliato dei suoi concorrenti in questo articolo.

Una cosa tira l'altra, sul tuo server di sviluppo, in locale e con tutti gli strumenti WordPress necessari, puoi vedere l'avanzamento del tuo progetto... e il tuo lancio online si avvicina.

I 3 passaggi per un lancio di successo del tuo sito web

Sento che sei entusiasta di svelare al mondo il tuo nuovo sito Web WordPress.

Prenditi del tempo per guardare questi 3 passaggi e seguili attentamente: sarai felice di averlo fatto, te lo prometto.

1. Scegli un server di produzione diretta o di pre-produzione

Il termine "server di pre-produzione" non significa nulla per te? Non preoccuparti, facciamo una breve pausa per una definizione.

Un server di pre-produzione condivide lo stesso server su cui si troverà il tuo sito web una volta pubblicato . Se WPMarmite dovesse riprogettarlo, Alex potrebbe ad esempio scegliere di mettere la sua pre-produzione su preprod.wpmarmite.com : questo sarebbe lo stesso ambiente di wpmarmite.com .

Allora perché dovresti usare questo server preprod?

• Per convalidare la tua riprogettazione con il tuo cliente, se sei uno sviluppatore WordPress.
• Per verificare la presenza di bug prima che il sito venga pubblicato.
• Per adattare la tua strategia SEO, assicurati che tutte le tue parole chiave siano incluse in ogni pagina.

Una volta che tutto questo è stato convalidato, solo allora puoi andare online e distribuire il tuo nuovo sito web. Se sei fiducioso, puoi ovviamente scegliere di passare direttamente alla produzione.

2. Testare il tuo nuovo sito web per potenziali problemi

Dal tuo server di pre-produzione (o dal vivo, se sei un avventuriero di WordPress), dovrai testare il tuo nuovo sito web.

La chiave per testare con successo i problemi è metterti nei panni di un visitatore medio , fare clic e annotare tutti i problemi che incontri...

Probabilmente vedrai problemi di progettazione e struttura. Ma non dimenticare di controllare anche:

• Reindirizzamenti che non sono stati eseguiti e generano link morti o pagine bianche.
• Le prestazioni del sito web , testandolo su GTMetrix, Pingdom, o il test PageSpeed ​​Insights di Google.
• I punti di opt-in , controllando se funzionano bene.
• Moduli di contatto, moduli di preventivo...
• Pagamento , se possiedi un sito e-commerce (incluse email di conferma, accesso al sito membro...).

Tutto è bello, funzionale, ben collegato e ben assemblato? Congratulazioni! L'ultimo passaggio migliorerà il grande sorriso che vedo sui tuoi volti da qui.

3. Riattiva e ricollega tutti i servizi di terze parti

Dai, ci sei quasi!

Ora puoi riattivare tutti i servizi e i plugin collegati al tuo sito WordPress . Pensa in particolare a:

• Il tuo plugin per la cache.
• Plugin che utilizzano Google Analytics, come MonsterInsights.
• Plugin che utilizzano i social network, come Facebook o Instagram.
• Le varie chiavi di licenza per i tuoi plugin e temi.

E poiché la sicurezza è affare di tutti (e soprattutto tuo), ricordati di riattivare tutti gli elementi che proteggono il tuo sito web .

Pronto ad andare? Quindi inizia a indicizzare il tuo nuovo sito web in Google Search Console. Questa manipolazione costringe i robot di Google a visitare il tuo nuovo bambino e quindi a indicizzarlo più rapidamente nella sua nuova versione.

Tadam! Ridisegnato, più performante, più suggestivo, meglio strutturato, il tuo nuovo sito web è pronto a ricevere il traffico che merita. È stato un duro lavoro, ma ne è valsa la pena, no?

E tu, hai recentemente condotto una riprogettazione di un sito Web WordPress?

Quali sono i problemi che hai incontrato o l'orgoglio che ne hai preso?

Raccontacelo nei commenti: il team di WPMarmite li legge tutti con attenzione.