I temi reattivi di WordPress per il business sono la scelta giusta?

temi wordpress reattivi per il business

Da alcuni anni, quando Google ha annunciato che l'ottimizzazione per i dispositivi mobili è un fattore di ranking, il web design mobile o reattivo non è più un elemento secondario per i siti Web di piccole e medie imprese.

I dispositivi mobili oggi costituiscono una percentuale significativa del traffico web (53% nel 2019).

Le aziende che offrono un'esperienza scadente agli utenti mobili rischiano di perdere clienti e ricavi. Esistono diversi modi per fornire una buona esperienza mobile, ma Design reattivo è la scelta migliore per le PMI che utilizzano WordPress.

Questo tipo di design è less costoso, offre un'esperienza unificata e un marchio coerente su tutti i dispositivi ed è migliore per la SEO: il design mobile-first è la strategia di ottimizzazione mobile preferita di Google. (Anche i loro crawler guardano un sito da un dispositivo mobile).

Contenuti[Mostra]

1. Che cos'è il responsive design e in che modo influisce sui temi WordPress aziendali?

Se non hai già familiarità con il concetto, ecco una spiegazione in breve: è il design che utilizza query multimediali CSS e un design a griglia proporzionale per modificare il modo in cui le pagine vengono visualizzate a seconda delle dimensioni del dispositivo.

Ad esempio, gli elementi che si estendono orizzontalmente su una pagina su un browser desktop verranno impilati verticalmente su un browser per smartphone. Le immagini e il tipo vengono ridimensionati per riflettere le dimensioni dello schermo del dispositivo.

Al centro del responsive design ci sono le media query CSS.

I fogli di stile CSS vengono utilizzati per controllare l'aspetto di una pagina Web: i colori che utilizza, il layout della pagina, la sua tipografia e così via. Le media query consentono a un designer di applicare selettivamente le regole CSS solo quando viene soddisfatta una determinata condizione. (Ad esempio, se la dimensione di uno schermo sembra uno schermo mobile, applica design appropriati per i telefoni cellulari, ma se è più grande, applica design per schermi più grandi ...).

Si spera che tu possa vedere come ciò sia utile per creare diversi design per diversi layout dello schermo. Le media query consentono a uno sviluppatore di dire, ad esempio, se la finestra del browser Web ha una larghezza particolare, è necessario applicare un insieme specifico di regole.

Una tipica media query è simile a questa:

.il mio contenitore {
larghezza: 800px;
}
@media (larghezza massima: 600 px) {
.mio_contenitore {
larghezza: 500px;
}
}

Nell'esempio sopra, la larghezza predefinita della classe .my_container è impostata su 800px.

Ovviamente, non vogliamo che sia così ampio su un dispositivo più stretto, quindi utilizziamo una media query.

La media query qui specifica una condizione: se la larghezza orizzontale del browser è 600 px o less, la larghezza di .my_container dovrebbe essere 500 px. Se viene attivato dal fatto che la condizione è vera, le regole nella media query hanno la precedenza sulla regola "predefinita".

Il responsive design per i temi aziendali sfrutta queste caratteristiche dei CSS per alterare la presentazione delle pagine web a seconda delle dimensioni dello schermo del dispositivo, delle dimensioni della finestra del browser, dell'orientamento del dispositivo e di molti altri fattori.

2. Quadri di progettazione reattiva

Unless hai già familiarità con i CSS e, anche se lo sei, potresti non apprezzare l'idea di scrivere query multimediali per ogni aspetto del tuo tema WordPress aziendale reattivo, ed è qui che entrano in gioco i framework di progettazione.

Un framework di progettazione reattiva si prende cura di gran parte della complessità della creazione di un sito che si rivolge a schermi di dimensioni variabili.

Il framework di progettazione più popolare è bootstrap - con le versioni dalla v3.0 in poi che sono completamente mobile-first. Bootstrap include un numero enorme di funzionalità che non ci riguardano qui, ma la chiave per l'implementazione della reattività di Bootstrap è la sua griglia.

Letture consigliate: Come convertire un tema PSD in WordPress utilizzando Bootstrap in 5 passaggi: un tutorial e Elementor vs Divi - che vale la pena spendere di più?

Invece di chiederti di scrivere le tue media query, Bootstrap implementa un sistema che divide una pagina HTML in una griglia di righe e colonne. Invece di scrivere query multimediali, gli utenti allegano classi all'HTML del tema WordPress per dividere la pagina in base alla griglia.

Per fare un esempio banale, pensa a una pagina web a due colonne.

Sugli schermi di grandi dimensioni, vogliamo che le colonne vengano visualizzate una accanto all'altra. Sugli schermi piccoli, vogliamo che si impilino uno sopra l'altro.

progettazione aziendale reattiva a due colonne

 

Il nostro HTML sarebbe simile a questo:

  Questa è la prima colonna
</div>

Questa è la colonna due
</div>
</div>

Con il Bootstrap Grid CSS incluso nella pagina, questo HTML creerebbe il layout che stiamo cercando.

Quando la pagina viene caricata in una finestra più piccola di quella specificata per le media query integrate di Bootstrap per le colonne medie, si impileranno l'una sull'altra invece di estendersi sulla pagina.

Puoi vedere esempi più complessi di come funziona in Documentazione Bootstrap.

Bootstrap non è l'unico framework che fornisce una griglia di questo tipo; in effetti, ce ne sono dozzine, che vanno da framework di web design completi come Bootstrap e Fondotinta, a framework di griglia leggeri come Simple Grid che non contengono nient'altro che la griglia.

Negli ultimi anni è diventato sempre più popolare un approccio alternativo che contenga tutte le modifiche al markup dei CSS (o SASS), piuttosto che sporcare le pagine HTML con markup non semantico.

SASS sistemi di griglia di design reattivo come Susy e Borbone pulito sfruttare il potere di SASS per creare framework che mantengano il codice del layout di pagina dove dovrebbe essere, nei file CSS, consentendo un HTML più pulito.

La scelta degli sviluppatori è una questione di gusti ed esperienza, ma noi personalmente preferiamo SASSsistemi di griglia basati su che mi permettono di scrivere pagine web semantiche che non sono piene di nomi di classi non semantici e nidificazione eccessiva di div.

3. Quadri tematici responsive design

Framework come Bootstrap e Foundation sono ottimi per i web designer, ma non fanno molto per aiutare gli sviluppatori di WordPress che cercano un vantaggio quando creano nuovi modelli.

Fortunatamente, ci sono molti framework di temi WordPress reattivi che forniscono una base predefinita.

1. Genesi

genesis framework per temi wordpress aziendali

Genesis è un framework di temi estremamente popolare di StudioPress (che abbiamo esaminato completamente qui). Sebbene sia rivolto più agli sviluppatori WordPress esperti che ai neofiti, non è troppo difficile da gestire se si dispone di un'infarinatura di conoscenza di PHP e CSS.

Genesis è un progetto genitore da cui è possibile creare un numero qualsiasi di temi figlio. Se preferisci acquistare un tema figlio standard e personalizzarlo, StudioPress offre molti temi figlio diversi adatti a tutti i tipi di siti.

Oltre a questo tema, spesso presentiamo temi WordPress molto apprezzati in modo che tu possa prendere una buona decisione se acquistare o meno.

2. Themify Builder

semplice tema aziendale di themify

Se non sei un mago di PHP e CSS, potresti prendere in considerazione un plug-in per la creazione di modelli come Themify.

Invece di farti rimboccarti le maniche e immergerti nel codice, Themify Builder offre un'interfaccia drag-and-drop intuitiva per la creazione di temi WordPress completamente reattivi. Con Themify puoi scegliere tra una gamma di temi predefiniti o progettarne uno personalizzato da zero.

Themify astrae tutti i dettagli di implementazione che sono alla base del web design per schermi di diverse dimensioni, rendendo più facile rendere il tuo sito web attivo e funzionante rapidamente.

3. Componenti

generatore di temi di componenti

Components è stata un'ottima soluzione per creare temi WordPress reattivi personalizzabili da Automattic, la società dietro WordPress.com.

Per utilizzare Components, è sufficiente scegliere un layout dall'elenco - blog classico, sito aziendale, portfolio, tra gli altri - e il sito Components sputerà un SASSmodello basato su dispositivi mobili con layout e menu desktop e mobili.

Purtroppo, Components è stato interrotto.

4. Divi

Divi, che menzioneremo anche di seguito come uno dei migliori temi WordPress da utilizzare per le imprese, è iniziato come tema.

Alla fine, si è evoluto fino a diventare un tema, un generatore di pagine drag and drop e ora, con le sue ultime versioni, anche un generatore di temi completo. A questo punto, Divi è un framework di temi WordPress completo che può essere utilizzato per creare qualsiasi tipo di tema di cui hai bisogno, con la sua vasta gamma di strumenti.

4. Temi reattivi di WordPress per il business

Se preferisci semplicemente acquistare qualcosa di pronto per la tua attività, ne hai migliaia tra cui scegliere, alcuni migliori di altri. La reattività è vista come una caratteristica "indispensabile" sul mercato dei temi di WordPress e quasi tutti gli sviluppatori affermeranno che il loro prodotto è reattivo. Tuttavia, questa funzione può essere complicata e anche sviluppatori esperti possono avere problemi con la sua corretta implementazione.

Prima di andare avanti, potresti voler dare un'occhiata alla nostra carrellata completa di Temi WordPress per siti aziendali e aziendali.

Detto questo, se scegli uno di questi design popolari, che possono essere personalizzati per soddisfare le esigenze delle tue attività, non sbaglierai molto.

Divi

divi elegant themes

Divi è un tema WordPress reattivo estremamente popolare per le aziende (o qualsiasi altra cosa in realtà), un generatore di pagine (Divi Builder), e anche un generatore di temi.

Il prodotto proviene da Elegant Themes — un'azienda affermata che ha creato molti dei miei prodotti WordPress preferiti. Divi è un tema "batterie incluse": viene fornito con tutte le funzionalità che potresti desiderare.

Tra i punti salienti ci sono i Divi builder, che consente agli utenti di creare layout senza codifica, diciotto layout predefiniti tra cui scegliere e implementati in modo intelligente reattività Ciò significa che il tuo sito avrà un bell'aspetto se visualizzato su un PC desktop con un monitor enorme o uno smartphone con schermo piccolo.

Prova subito Divi e ottieni il 10% di sconto fino al Settembre 2021

Consiglia a leggere: se sei incline a usare Divi controllare CollectiveRay's recensione completa di Divi.

Avada

Tema aziendale WordPress Avada

Avada è un altro oggetto molto popolare.

Avada è ricco di funzionalità come Divi e si adatta perfettamente alla costruzione di siti aziendali in grado di adattarsi a schermi di varie dimensioni. Come Divi, Avada consente agli utenti senza difficoltà di codifica di creare siti unici.

Il generatore di pagine visive Avada (Fusion) è un piacere da usare e il prodotto contiene un numero qualsiasi di tocchi premurosi che lo rendono una scelta eccellente per il less proprietario di un sito WordPress tecnicamente incline.

lettura consigliata: Ancora una volta, per i temi principali, abbiamo creato un file eccellente recensione del tema WordPress Avada così puoi capire appieno come può aiutarti.

Dai un'occhiata ad Avada Now

X

x wp tema reattivo aziendale

X è un altro tema WordPress reattivo per le aziende che mira a semplificare l'installazione e il funzionamento con un design bello e unico che sembra fantastico su qualsiasi dispositivo.

Una delle caratteristiche distintive di X è il suo sistema di estensione.

Piuttosto che implementare funzionalità all'interno del nucleo del modello, X fornisce numerose estensioni di funzionalità, tra cui una griglia, l'integrazione di TypeKit, un dispositivo di scorrimento e plug-in della galleria. La suddivisione della funzionalità in estensioni consente agli utenti di scegliere le funzionalità di cui hanno bisogno ed evitare di caricare il proprio sito con codice superfluo che potrebbe portare a problemi di prestazioni e sicurezza.

Dai un'occhiata alla demo di X ora

Altri modelli per affari su Themeforest

Se i temi che abbiamo esaminato qui non ti entusiasmano, non preoccuparti, ce ne sono centinaia Temi reattivi di WordPress (per tutti i tipi di attività, organizzazioni e in tutti i tipi di nicchie specifiche) tra cui scegliere su Themeforest.

Quando scegli un prodotto dalla selezione disponibile su Themeforest, assicurati di prestare molta attenzione alle valutazioni degli utenti: ti aiuteranno a separare il grano dalla pula. Dovresti anche prendere nota di quanto recentemente l'elemento è stato aggiornato.

Se non è stato aggiornato per diversi mesi, dovresti considerare di cercare altrove; temi obsoleti possono causare problemi di compatibilità e sicurezza.

5. Perché la reattività è la scelta migliore per il tuo sito aziendale?

La reattività non è l'unico modo per gestire il traffico web mobile.

Le alternative includono siti mobili dedicati e app native e PWA (un ibrido tra app e siti mobili). Il problema con ogni approccio è che richiedono più lavoro di un sito reattivo.

Se la tua azienda sceglie un'app mobile o una PWA, deve investire nella sua progettazione, sviluppo, manutenzione e promozione. Il denaro e il tempo sono suddivisi tra un sito Web e un'app o diverse app per ospitare piattaforme mobili popolari.

Questo design, tuttavia, consente alle PMI di mantenere una base di codice e dedicare risorse alla creazione del miglior sito web possibile. Ci sono circostanze in cui le app native sono la scelta migliore, ma per la maggior parte delle PMI la reattività è un uso migliore delle risorse.

Immagina che un potenziale cliente cerchi un servizio offerto dalla tua azienda mentre usa il suo iPhone. Trova quello che vuole e lo salva nei preferiti per dopo.

Quella sera apre il segnalibro sul suo computer desktop e il sito sembra terribile perché ha aggiunto ai segnalibri la versione mobile. Questo scenario non è così grave come se il sito non avesse una versione mobile, e lei è stata costretta a gestire la versione desktop non modificata sul suo telefono - a nessuno piace pizzicare e fare una panoramica per trovare quello che vogliono - ma questo design lo farebbe consentire allo stesso sito Web e agli stessi collegamenti di funzionare come previsto su entrambi i dispositivi.

Avere un sito che risponde al dispositivo dell'utente consente inoltre alle aziende di fornire un marchio coerente in tutti i punti di contatto.

Il sito avrà lo stesso aspetto, anche se adattato, e fornirà la stessa navigazione, lo stesso aspetto e la stessa esperienza. Le piccole imprese con budget limitati spesso non hanno le risorse per mantenere una qualità costante su più versioni e app del sito.

Reattività significa che non devono.

Proprio come agli utenti non dovrebbe essere offerta un'esperienza frammentata, è meglio per il traffico di ricerca se esiste una posizione online canonica per un'azienda. Secondo Google, i vantaggi del responsive design includono:

  • Mantenere il tuo contenuto desktop e mobile su un unico URL, che è più facile per i tuoi utenti interagire, condividere e collegarsi ae per gli algoritmi di Google per assegnare le proprietà di indicizzazione ai tuoi contenuti.

  • Google può scoprire i tuoi contenuti in modo più efficiente poiché non avremmo bisogno di eseguire la scansione di una pagina con i diversi agenti utente di Googlebot per recuperare e indicizzare tutto il contenuto.

Google è in grado di capire se gli utenti hanno una buona esperienza sul tuo sito. Se non offri un sito ottimizzato per i dispositivi mobili, le frequenze di rimbalzo per gli utenti di dispositivi mobili saliranno alle stelle. La maggior parte di loro tornerà al motore di ricerca. Google sa quando un utente torna immediatamente alla SERP dopo aver fatto clic su un risultato e utilizza le frequenze di rimbalzo come segnale di classificazione.

Infine, per gli utenti di WordPress, la reattività è il metodo più semplice e meno costoso per fornire una buona esperienza agli utenti mobili. Molti dei migliori temi premium sono progettati per essere reattivi e il costo di adattamento di un tema esistente per la reattività può essere significativamente less rispetto al costo di sviluppo di un'app nativa.

Dati questi vantaggi, per i proprietari di piccole e medie imprese che utilizzano temi WordPress, il responsive design è di gran lunga il modo migliore in un mondo in cui l'uso del Web mobile è destinato a crescere.


L'autore
David Attard
Autore: David AttardSito web: https://www.linkedin.com/in/dattard/
David ha lavorato nel o intorno al settore online / digitale negli ultimi 18 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali disponibili oggi.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Fatti un favore: lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!

Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...