Constatando il crescente utilizzo dei dispositivi mobili, dalla fine di aprile 2015 Google ha penalizzato i siti web le cui pagine non sono mobile ready. Conseguenza, per il tuo SEO, devi assicurarti che il tuo sito web venga visualizzato in modo decente sia sugli schermi grandi che su quelli piccoli.
In questo articolo, ti mostrerò come puoi mettere il tuo sito Web nella pagina usando la regola @media di CSS3.
È importante notare che i termini "reattivo" e "compatibile con i dispositivi mobili" sono spesso usati in modo intercambiabile nonostante la differenza nel loro significato reale. Capire cosa significa ciascuno è importante per essere in grado di garantire che il tuo sito web soddisfi i criteri necessari per adattarsi a schermi di tutte le dimensioni.
Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog
Quindi, torniamo al perché siamo qui.
Responsive e Mobile-compatibile
Siti Web che non lo sono né reattivo né cellulare compatibile, vengono visualizzati in modo identico su tutti gli schermi, ovvero la versione per schermi di grandi dimensioni viene visualizzata ovunque. Sugli schermi più piccoli, devi scorrere la pagina in orizzontale per vedere tutto il loro contenuto. Sono difficili da navigare su questi schermi.
Scopri anche questi Plugin 8 WordPress per personalizzare l'aspetto del tuo sito web
Un sito Web è cellulare compatibile quando soddisfa solo il minimo indispensabile per essere visto sui dispositivi mobili, il che non lo rende un sito Web reattivo. Ad esempio, un sito Web può essere considerato compatibile con i dispositivi mobili se non è necessario navigare in orizzontale. Ciò fa sì che i suoi elementi diventino piccoli e indistinguibili. È quindi necessario ingrandire per leggere il suo contenuto.
Dalla loro parte i siti web di risposta si adattano perfettamente alle diverse dimensioni dello schermo. Ridefiniscono i loro elementi in modo che possano essere facilmente visti e utilizzati sugli schermi più piccoli. Questo è il tipo di design che desideri per il tuo sito web.
Vedi anche il nostro Plugin 10 WordPress per creare un modulo di prenotazione sul tuo sito web
Ora conosci la differenza tra cellulare reattivo e compatibile. Vedremo ora la regola @media di CSS3 che ti consente di aggiornare il tuo sito Web per renderlo reattivo o per creare abbastanza facilmente Temi WordPress con contenuti reattivi.
La regola @media di CSS3
Per rendere il tuo tema reattivo, avrai bisogno della regola @media di CSS3. Fondamentalmente, ti consente di definire gli stili che desideri utilizzare per un particolare tipo (dimensione) di schermo. Lo userai come un'altra regola CSS (con parentesi graffe) con l'unica differenza che si sovrappone ad altre regole CSS.
@media media-type (espressione) {css-test-selector {property1: value1; proprietà2: valore2; }}
In questa struttura gli elementi all'interno della regola @ dei media solo il lavoro quando la tipo-di-media specificato per essere stato rilevato con successo. Il tipo di supporto scelto, è possibile specificare le caratteristiche in termini di dimensioni.
Scopri Come applicare l'interfaccia e l'esperienza utente a WordPress
La regola @media rileva per te il tipo di schermo con cui viene visitato il tuo sito web e sceglie le regole che meglio si adattano a questo tipo di schermo. Tutti i principali browser hanno già integrato la regola @media.
Ecco l'elenco per tua informazione: Chrome , Safari, Firefox, IE, Opera et bordo.
Definire le schermate di destinazione
Se vuoi modificare un tema WordPress esistente, si prega di fare una copia di backup del CSS di quest'ultimo per poter tornare indietro se necessario.
Leggi anche il nostro articolo su Come caricare gradualmente i commenti di Facebook e Disqus
Come abbiamo visto nella sua struttura, per definire il tipo di schermo, è necessario inoltrarlo @media il tipo di schermo scelto come target. Ecco l'elenco dei diversi tipi di schermo:
- contro tutti i : per tutti i tipi di schermi o per le dimensioni specificate in espressione
- schermo : per tutti gli schermi, mobili, tablet, laptop o desktop
- stampare : per le stampanti, se desideri stili specifici per le pagine che possono essere stampate
- discorso : per lettori di schermo, se desideri stili per non vedenti.
Ci sono anche operatori che puoi mettere prima del tipo di schermata; come non per visualizzare gli stili per le schermate di tipo diverso da quello specificato o esclusivamente per applicare gli stili solo a schermate specificate. Puoi quindi avere:
@media solo schermo
Definisci gli stili per le dimensioni dello schermo
È possibile utilizzare espressione per fornire dettagli sulle caratteristiche dello schermo. Dopo @media entrare ed seguito dall'espressione. Se utilizzi più espressioni, dovrebbero essere tutte separate da ed. Ecco un esempio della struttura:
@media only screen e (max-width: 640px) {selector-css-example {/ * Your usual CSS here * /}}
In questo esempio utilizzo max-width con un valore di 640px. Questo per impostare una larghezza massima dello schermo delle dimensioni di un iPhone o di un piccolo smartphone Android. Con questo tipo di struttura, hai il controllo sull'aspetto del tuo sito web su diversi dispositivi. Di seguito è riportato un elenco di proprietà relative alle dimensioni che puoi utilizzare espressione :
Scopri anche il nostro 8 SEO WordPress plugin per ottimizzare il SEO del tuo sito web
- min larghezza et max-width : rispettivamente la larghezza minima e massima richiesta per la visualizzazione degli stili contenuti nella regola @media. Un altro pixel e stili non vengono visualizzati.
- min altezza et max-height : rispettivamente l'altezza minima e massima richiesta per la visualizzazione degli stili contenuti nella regola @media. Poiché la maggior parte degli schermi sono progettati per srotolare le pagine in verticale, le proprietà min-height et max-height sono poco usati.
Di seguito è riportato un elenco delle dimensioni dello schermo per alcuni terminali:
- IPhone: 640px
- IPad: 1024px
- Tablet: 1366px
- Smartphone Android: 640px, 720px, 854px, 960px
- Android extra large: 1024px, 1066px
- Telefono Windows: 480
- Windows phone grande: 768px
- giovani e vecchi: 320px
- Ultrabook / laptop: 1366px
- Desktop e TV: 1920px
Ci sono molte altre proprietà che puoi usare espressione. Ad esempio, se scegli come target desktop o schermi televisivi in grado di visualizzare immagini con proporzioni 16: 9, potresti utilizzare una struttura come questa:
@media only screen and (min-width: 1920px) and (device-aspect-ratio: 16/9) {selector-css-example {/ * Your usual CSS here * /}}
Per elenchi ed esempi più completi, consultare w3schools et Mozilla sviluppatori.
Prova la funzionalità reattiva del tuo sito Web
Mentre modifichi o costruisci il tuo tema WordPress o alla fine se ti piacciono le sorprese, devi testare il risultato per vedere se è finalmente reattivo. Ricorda, Google controlla i siti Web che non rispondono.
Vedi anche questi Plugin 10 WordPress per creare schede sul tuo blog
Non riuscendo a disporre di tutti i dispositivi mobili a cui ti rivolgi, ci sono (fortunatamente per le nostre borse) un buon numero di strumenti per vedere come il tuo sito web si adatta ai diversi schermi.
Direttamente nel browser del computer è possibile utilizzare Window Resizer Chrome Extension Browser, ResponsiveResize, ResizeMe ou Firesizer. Di seguito un'immagine di BlogPasCher nella vista Responsive Design che viene fornita di default con Firefox.
Esistono anche siti Web dedicati all'attività:
Questo sito ha la particolarità di permetterti di scegliere tu stesso le dimensioni dello schermo. Tieni presente che questo sito Web carica il tuo in un frame. Quindi se il tuo tema WordPress è stato progettato per non essere visualizzato in una cornice, quindi è del tutto possibile che non venga visualizzato qui.
iPad Peek
https://blogpascher.com/wp-admin/post.php?post=60969&action=edit
Questo sito web è utile per testare il tuo sito web sugli ultimi dispositivi Apple, iPad e iPhone. Basta inserire il tuo URL. Nota che è soggetto allo stesso problema di frame di responsivepx.
In questo sito web puoi testare il tuo su schermi piccoli e su vecchi modelli di telefoni che selezioni sul lato destro dello schermo. È inoltre possibile configurare alcune proprietà dello schermo.
Google Mobile amichevole di prova
Questo è uno dei test più importanti, se non il più importante. Basta inserire il tuo indirizzo nella barra e fare clic su Analizzi i dati per iniziare il test. Dopo il test, lo strumento visualizza un report e un punteggio. Se il test è positivo, tanto meglio, non sarai penalizzato da Google.
Se non sei uno sviluppatore ti consiglio un elenco di temi WordPress reattivi per iniziare.
Risorse raccomandate
Scopri anche altre risorse consigliate che ti aiuteranno ad attrarre meglio i tuoi partner e abbonati, ma anche a migliorare la sicurezza del tuo sito web.
- Come creare collegamenti personalizzati corsi su WordPress
- Plugin 5 WordPress per aggiungere recensioni dei clienti al tuo blog
- Come creare una ruota della fortuna per i coupon su WooCommerce
- Scopri le migliori offerte e coupon per il tuo blog
Conclusione
Ecco ! sai tutto quello che c'è da sapere su come rendere reattivo il tuo sito web o il tuo tema WordPress usando la regola @media di CSS3. Se ci siamo persi un tema WordPress che ti è caro o che preferisci, lascia un link nella sezione commentaires qui di seguito.
Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ti invitiamo anche a condividi sui tuoi diversi social network.
...
