Quali sono le migliori dimensioni dello schermo per il responsive web design?

Divulgazione: “Questo articolo è lopinione personale di una ricerca basata sulla mia esperienza di quasi 20 anni. Non ci sono pubblicità di terze parti in questa pagina o link monetizzati di qualsiasi tipo. I link esterni a siti di terze parti sono moderati da me. Disclaimer. “Shaun Anderson, Hobo

Non esiste una dimensione dello schermo migliore per cui progettare. I siti web dovrebbero trasformarsi in modo reattivo e veloce a tutte le risoluzioni dello schermo su diversi browser e piattaforme. Accessibile. Mobile-friendly. Progettare per il tuo pubblico, prima. Design da 360 × 640 a 1920 × 1080.

• Design per display desktop da 1024 × 768 a 1920 × 1080
• Design per display per dispositivi mobili da 360 × 640 a 414 × 896
• Design per tablet da 601 × 962 a 1280 × 800
• Controlla Google Analytics e ottimizza per le dimensioni di risoluzione più comuni del tuo pubblico di destinazione
• Non progettare per una dimensione del monitor o una risoluzione dello schermo. Le dimensioni dello schermo e lo stato della finestra del browser variano a seconda dei visitatori.
• Il design deve essere reattivo e veloce. Utilizza un layout liquido o reattivo che si trasformi in base alle dimensioni della finestra dellutente corrente.
• Monitora gli avvisi di ottimizzazione per dispositivi mobili e di usabilità di Google Search Console

Dovrebbe comunque avere un bellaspetto e funzionare bene a tutte le dimensioni, motivo per cui * ero solito * consigliare un layout liquido altamente accessibile utilizzando larghezze percentuali per controllare il layout. Ora il consiglio è un modello di sito web reattivo.

I tre criteri principali per lottimizzazione del layout di una pagina per una determinata dimensione dello schermo sono:

• Visibilità iniziale della pagina web: è tutto fondamentale informazioni visibili above the fold in modo che gli utenti possano vederle senza scorrere? Si tratta di un compromesso tra il numero di elementi visualizzati e la quantità di dettagli visualizzati per ogni elemento.
• Leggibilità della pagina Web: quanto è facile leggere il testo in varie colonne, data la larghezza assegnata?
• Estetica della pagina web: quanto è buona la tua pagina quando gli elementi hanno le dimensioni e la posizione corrette per queste dimensioni dello schermo? Tutti gli elementi si allineano correttamente, ovvero le didascalie sono immediatamente accanto alle foto e così via?

Le linee guida sullusabilità consigliano inoltre di considerare tutti e tre i criteri per lintera gamma di dimensioni. Controlla le risoluzioni dello schermo da 360 × 640 a 1920 × 1080 nella finestra del browser.

La tua pagina dovrebbe avere un punteggio elevato su tutti i criteri nellintero intervallo di risoluzione.

La tua pagina dovrebbe anche funzionare a dimensioni sempre più piccole, sebbene tali estremi siano meno importanti.

Sebbene tali utenti dovrebbero certamente essere in grado di accedere al tuo sito, dare loro un design meno che eccezionale a volte è un compromesso accettabile.

Prime dieci risoluzioni dello schermo più comuni

Analisi dei visitatori di quasi mezzo milione di visitatori nei primi 6 mesi del 2020:

Un modello di sito web reattivo è una buona scommessa

QUOTE: “Responsive Web Design: offre lo stesso codice HTML sullo stesso URL indipendentemente dal dispositivo dellutente (ad esempio, desktop, tablet, cellulare, non visual browser), ma può visualizzare il display in modo diverso in base alle dimensioni dello schermo. Google consiglia il Responsive Web Design perché è il modello di progettazione più semplice da implementare e mantenere “. Google Developer Guides, 2020

Nel mondo di oggi, molte persone utilizzano dispositivi portatili (tablet e smartphone) per navigare sul Web e la progettazione di siti Web reattivi ( RWD) è emersa come una soluzione molto probabile (è ancora dibattuta dagli appassionati) per le sfide relative alle dimensioni dello schermo.

Questo metodo si allontana dallutilizzo di siti Web a larghezza fissa e utilizza invece le query multimediali nei fogli di stile CSS per creare un sito Web che risponde in termini di dimensioni alle diverse visualizzazioni dei dispositivi portatili e degli schermi più piccoli utilizzati dalle persone.

Quindi, qualunque dispositivo una persona possa utilizzare per visualizzare il tuo sito web, puoi offrirgli la più completa esperienza possibile.

Sommario

Google preferisce i siti ottimizzati per i dispositivi mobili

Google determina il flusso e il riflusso del commercio online e ti hanno appena detto che devi progettare per unesperienza utente soddisfacente su più dispositivi SE vuoi aspettarti di avere un posizionamento elevato per parole chiave competitive su Google.

QUOTE: “Google utilizza due diversi crawler per la scansione dei siti web: un crawler mobile e un crawler desktop. Ogni tipo di crawler simula un utente che visita la tua pagina con un dispositivo di quel tipo. Google utilizza un tipo di crawler (mobile o desktop) come crawler principale per il tuo sito. Tutte le pagine del tuo sito sottoposte a scansione da Google vengono sottoposte a scansione utilizzando il crawler principale. Il crawler principale per tutti i nuovi siti Web è il crawler mobile. Inoltre, Google esegue nuovamente la scansione di alcune pagine del tuo sito con laltro tipo di crawler (mobile o desktop).Questa operazione è chiamata scansione secondaria e viene eseguita per verificare il funzionamento del tuo sito con laltro tipo di dispositivo “. Linee guida per i webmaster di Google, 2020

Dal 21 aprile 2015, a livello globale, il modo in cui un sito ottimizzato per i dispositivi mobili ha influito sul rendimento del posizionamento dei siti web su una varietà di dispositivi.

Se crei siti web per piccole imprese, saprai che desiderano un sito web che abbia un buon rendimento nelle inserzioni organiche di Google, sai che sono interessate allottimizzazione per i motori di ricerca:

CITAZIONE: “Ho 20 anni di esperienza nella pratica SEO professionale. Questo tutorial SEO è la mia raccolta di suggerimenti e best practice SEO che utilizzo per classificare i siti web su Google.” Shaun Anderson, Hobo 2020

La SEO si basa ora, in parte, su un buon UX del sito web, come Google quantifica, almeno per gli utenti di dispositivi mobili.

QUOTE: “Con le ricerche da dispositivi mobili che ora superano le ricerche da desktop, è importante che il tuo sito sia ottimizzato per i dispositivi mobili. Googlebot ora utilizza un crawler per dispositivi mobili come crawler predefinito per i siti web “. Istruzioni per i webmaster di Google, 2020

Al momento, ciò significa essenzialmente un design di siti web reattivo e ottimizzato per i dispositivi mobili, in particolare con Google “che rende il nostro indice mobile-first “.

Statistiche sulla risoluzione dello schermo del desktop in tutto il mondo, maggio 2019 – maggio 2020

Per riferimento, ecco un elenco delle attuali risoluzioni dello schermo principali in tutto il mondo registrate di recente (2020):

Dimensioni di risoluzione dello schermo desktop più comuni in tutto il mondo

• 1366 × 768 – 23,49%
• 1920 × 1080 – 19,91%
• 1536 × 864 – 8,65%
• 1440 × 900 – 7,38%
• 1280 × 720 – 4,89%
• 1600 × 900 – 4,01%
• 1280 × 800 – 3,33%

Statistiche sulla risoluzione dello schermo mobile in tutto il mondo da maggio 2019 a maggio 2020

Dimensioni di risoluzione dello schermo per dispositivi mobili più comuni in tutto il mondo

• 360 × 640 – 17,91%
• 375 × 667 – 7,61%
• 414 × 896 – 6,52%
• 360 × 780 – 5,56%
• 360 × 760 – 5,06%
• 414 × 7 36 – 3,74%

Statistiche sulla risoluzione dello schermo del tablet in tutto il mondo da maggio 2019 a maggio 2020

Dimensioni di risoluzione dello schermo per tablet più comuni in tutto il mondo

• 768 × 1024 – 51,98%
• 1280 × 800 – 7,11%
• 800 × 1280 – 5,34%
• 601 × 962 – 4,47%
• 600 × 1024 – 2,85%
• 1024 × 1366 – 1,96%

Statistiche sulla risoluzione dello schermo del desktop negli Stati Uniti da maggio 2019 a maggio 2020

Risoluzioni dello schermo principali negli Stati Uniti (2020)

Dimensioni di risoluzione dello schermo del desktop più comuni negli Stati Uniti dAmerica

• 1920 × 1080 – 19,15%
• 1366 × 768 – 14,91%
• 1440 × 900 – 9,59%
• 1536 × 864 – 7,7%
• 1280 × 720 – 4,89%
• 1600 × 900 – 4,28%
• 1280 × 800 – 3,92%

Statistiche sulla risoluzione dello schermo per dispositivi mobili negli Stati Uniti da maggio 2019 a maggio 2020

Dimensioni di risoluzione dello schermo per dispositivi mobili più comuni negli Stati Uniti dAmerica

• 414 × 816 – 17,89%
• 375 × 667 – 14,2%
• 375 × 812 – 11,97%
• 360 × 640 – 8,55%
• 414 × 736 – 8,54%
• 412 × 846 – 4,7%
• 360 × 740 – 4,39%

Statistiche sulla risoluzione dello schermo del tablet negli Stati Uniti maggio 2019 – maggio 2020

Dimensioni di risoluzione dello schermo del tablet più comuni negli Stati Uniti dAmerica

• 768 × 1024 – 54,68%
• 800 × 1280 – 5,75%
• 1280 × 800 – 5,73%
• 601 × 962 – 5,41%
• 1024 × 1366 – 3,06%
• 600 × 1024 -2,57%

Statistiche sulla risoluzione dello schermo del desktop nel Regno Unito da maggio 2019 a maggio 2020

Risoluzioni dello schermo principali nel Regno Unito (2020)

Dimensioni di risoluzione dello schermo desktop più comuni nel Regno Unito

• 1920 × 1080 – 20,62%
• 1366 × 768 – 17,32%
• 1440 × 900 – 11,65%
• 1536 × 864 – 8,38%
• 1280 × 720 – 5,2%
• 1280 × 800 – 4,73%

Statistiche sulla risoluzione dello schermo per dispositivi mobili nel Regno Unito, maggio 2019 – maggio 2020

Dimensioni di risoluzione dello schermo per dispositivi mobili più comuni nel Regno Unito

• 375 × 667 – 16,66%
• 414 × 816 – 14,11%
• 360 × 640 – 9,95%
• 375 × 812 – 8,55%
• 360 × 740 – 5,67%
• 360 × 780 – 5,39%
• 414 × 736 – 4,75%

Statistiche sulla risoluzione dello schermo del tablet nel Regno Unito da maggio 2019 a maggio 2020

Dimensioni di risoluzione dello schermo per tablet più comuni nel Regno Unito

• 768 × 1024 – 58,31%
• 1280 × 800 – 6,92%
• 800 × 1280 – 6,02%
• 601 × 962 – 3,68%
• 600 × 1024 – 3,26%
• 1024 × 1366 – 1,71%

Quota di mercato mondiale per desktop, dispositivi mobili e tablet

Quota di mercato di desktop vs dispositivi mobili vs tablet in tutto il mondo

1. Mobile – 50,48%
2. Desktop – 46,51%
3. Tablet – 3.0%

* Nota: le statistiche precedenti provengono da una fonte (sebbene credibile), quindi potrebbero essere distorte in modi che potremmo non conoscere. Grafici forniti da http://statcounter.com/.

Come posso progettare un sito che abbia lo stesso aspetto in ogni browser & Risoluzione?

Non puoi.

È impossibile progettare un sito web in modo che abbia lo stesso aspetto in ogni browser, piattaforma e risoluzione dello schermo, quindi evita di provare.

Potresti optare per un layout fluido senza tabelle per il tuo design, con larghezze% che si espandono e si contraggono per adattarsi alle impostazioni del browser dei visitatori OPPURE potresti considerare di cercare soluzioni di design reattivo che raggiungano più o meno la stessa cosa.

Google predilige il responsive design, che è una buona notizia per coloro che lo hanno adottato:

QUOTE: “siti che fanno uso del responsive web design e implementano correttamente la pubblicazione dinamica (che include tutto il contenuto desktop e il markup) generalmente non deve fare nulla. ” Google NOV 2017

IL MOBILE È IN AUMENTO, quindi se stai sviluppando un nuovo sito web, DEVI pensare a quanto sia realmente ottimizzato per i dispositivi mobili il tuo sito web fin dallinizio.

Il mio obiettivo è mantenere le cose semplici quando sto effettivamente programmando le cose.

Non farai – non puoi – accontentare tutti – e la domanda su quale sia la dimensione migliore del sito web è ancora un argomento caldo per dibattito da parte di designer con più usabilità ed esperienza UX di me.

Quello che so per esperienza è che è di fondamentale importanza per te identificare il TUO pubblico e i dispositivi che usano e costruire il tuo sito web (su il tutto) per soddisfare QUEL pubblico.

E quel pubblico include GOOGLEBOT.

Il tuo sito per dispositivi mobili reindirizza a un altro URL & Versione di Il tuo sito?

Beh, non è lideale. In effetti non lo è mai stato.

Nel passato, alcune persone usavano versioni SOLO TESTO di un sito web per produrre contenuti per gli utenti / browser che non supportavano gli elementi del loro web siti – nel tentativo (di solito vano) di rendere il loro contenuto più accessibile.

Il W3C lo consigliava persino, penso che se tutto il resto fallisse:

Una pagina di solo testo, con informazioni o funzionalità equivalenti, deve essere fornita per rendere un sito web conforme alle disposizioni di questa parte, quando la conformità non può essere realizzata in altro modo. Il contenuto delle pagine di solo testo deve essere aggiornato ogni volta che cambia la pagina principale. SEZIONE 508

È SEMPRE stato lideale fornire un URL a un visitatore per motivi di accessibilità e non cè differenza quando si distribuiscono contenuti per cellulari o smartphone, se lo sei pensando di creare una versione “mobile” del tuo sito. Questo, ovviamente, potrebbe essere ANCORA PIÙ IMPORTANTE se Google sta passando a un MOBILE FIRST INDEX.

Google potrebbe valutarti PRINCIPALMENTE sul tuo cellulare esperienza nel prossimo futuro, quindi dobbiamo davvero essere tutti consapevoli dei grandi cambiamenti che potremmo vedere molto presto nelle SERP di Google.

Quando Google è il “visitatore” di solito è ancora più importante fornire solo un URL a causa delle sfide dellURL canonico per i motori di ricerca – e questo era il caso prima dellimplementazione dellelemento link canonico qualche tempo fa.

Quindi la situazione ideale è fornire un URL in ogni momento.

Se hai contenuti “smartphone” (che vediamo come normali contenuti web, in quanto generalmente sono l Pagina HTML, appena modificata nel layout per schermi più piccoli) puoi usare rel = canonical per puntare alla tua versione desktop. Questo ci aiuta a concentrarci sulla versione desktop per la ricerca sul web. Quando gli utenti visitano quella versione desktop con uno smartphone, puoi reindirizzarli alla versione mobile. Funziona indipendentemente dalla struttura dellURL, quindi non è necessario utilizzare sottodomini / sottodirectory per i siti per smartphone e dispositivi mobili. Ancora meglio, tuttavia, è utilizzare gli stessi URL e mostrare la versione appropriata del contenuto senza un reindirizzamento John Mueller, Google

Ignorare i consigli di Google spesso non è una mossa intelligente

PREVENTIVO: Per ricapitolare, attualmente i nostri sistemi di scansione, indicizzazione e posizionamento in genere guardano al desktop versione del contenuto di una pagina, che potrebbe causare problemi agli utenti che effettuano ricerche su dispositivi mobili quando tale versione è notevolmente diversa dalla versione per dispositivi mobili. Lindicizzazione al primo posto significa che utilizzeremo la versione mobile dei contenuti per lindicizzazione e il posizionamento, per aiutare meglio i nostri utenti, principalmente i dispositivi mobili, a trovare ciò che stanno cercando. I webmaster vedranno un aumento significativo della scansione da parte di Googlebot per smartphone e gli snippet nei risultati, così come il contenuto delle pagine della cache di Google, proverranno dalla versione mobile delle pagine.Google novembre 2017

Google offre i seguenti suggerimenti per verificare che il tuo sito sia pronto per lindice mobile first, ma in sostanza, se utilizzi un responsive web design modello per il tuo sito dovresti avere problemi minimi con questa modifica:

• Assicurati che anche la versione mobile del sito contenga limportante , contenuti di alta qualità. Ciò include testo, immagini (con attributi alt) e video, nei consueti formati sottoponibili a scansione e indicizzabili.

• I dati strutturati sono importanti per le funzioni di indicizzazione e di ricerca apprezzate dagli utenti: dovrebbero trovarsi sia sulla versione mobile che desktop del sito. Assicurati che gli URL allinterno dei dati strutturati siano aggiornati alla versione per cellulari sulle pagine per cellulari.

• I metadati dovrebbero essere presenti su entrambe le versioni del sito. Fornisce suggerimenti sul contenuto di una pagina per lindicizzazione e la pubblicazione. Ad esempio, assicurati che i titoli e le meta descrizioni siano equivalenti in entrambe le versioni di tutte le pagine del sito.

• Non sono necessarie modifiche per linterconnessione con URL mobili separati (siti m.-punto). Per i siti che utilizzano URL per dispositivi mobili separati, mantieni gli elementi link rel = canonical e link rel = alternate esistenti tra queste versioni.

• Controlla i link hreflang su URL mobili separati. Quando si utilizzano elementi link rel = hreflang per linternazionalizzazione, collegare separatamente gli URL per dispositivi mobili e desktop. Lhreflang dei tuoi URL per dispositivi mobili dovrebbe puntare alle versioni di altre lingue / aree geografiche su altri URL per dispositivi mobili e collegare in modo simile il desktop con altri URL per desktop utilizzando gli elementi di collegamento hreflang.

• Assicurati che i server che ospitano il sito abbiano una capacità sufficiente per gestire una velocità di scansione potenzialmente maggiore. Ciò non influisce sui siti che utilizzano il responsive web design e la pubblicazione dinamica, solo i siti in cui la versione mobile si trova su un host separato, come m.example.com.

Gli utenti si aspettano di scorrere una pagina verso il basso

Come suggerisce il primo criterio, lo scorrimento è sempre una considerazione chiave. Agli utenti in genere non piaceva scorrere se non è necessario, anche se, nel corso degli anni, è cambiato.

Quindi, quando progetti, dovresti considerare quanto gli utenti possono vedere se scorrono solo un schermo intero o due. Più di cinque schermate potrebbero essere unindicazione che potrebbe esserci troppa copia sulla pagina. Ovviamente, questo è bilanciato dallidea che alcuni articoli sono pensati per essere informazioni approfondite e gli utenti si aspetterebbero di aspettare un po di più per visualizzare alcuni contenuti della pagina e tipi di contenuto.

Sia a scorrimento che iniziale la visibilità dipende ovviamente dalle dimensioni dello schermo: schermi più grandi mostrano più contenuti above the fold e richiedono meno scorrimento.

Il passaggio a un sito mobile reattivo genererà molto più traffico da Google?

Non necessariamente, ma forse.

Come molte cose da fare con lottimizzazione di Google, avere un sito web ottimizzato per i dispositivi mobili è più o meno per assicurarti di MANTENERE il traffico che stai già ricevendo, non necessariamente darti altro gratis traffico da Google.

Se non ricevi già molto traffico dai visitatori di dispositivi mobili, non sono sicuro che questo aggiornamento di Google avrà un effetto notevole sui tuoi livelli di traffico (almeno in analisi ) allinizio, ma nel tempo, probabilmente sarà una sfida estremamente importante da navigare.

Il qual Google e i suoi utenti stanno alzando il livello della città e se vuoi competere in SERP organiche sempre più competitive, questo è un altro ostacolo da superare per le piccole imprese.

A LUNGO termine – questa conversione da dispositivo mobile può essere solo una buona cosa per i tuoi utenti – ma a breve termine – sarà interessante vedere quale effetto ha sui tassi di conversione delle piccole imprese – poiché i tassi di conversione tramite dispositivo mobile sono spesso inferiori a quelli su desktop.

Google ha affermato che questo algoritmo ottimizzato per i dispositivi mobili avrà un impatto maggiore sulle SERP rispetto agli algoritmi di Google Penguin e Google Panda e ne scopriremo di più con il passare del tempo.

Come Per verificare la presenza di importanti problemi di usabilità sui dispositivi mobili sul tuo sito

Google Search Console

Dovresti essere in grado di monitorare gli errori sui dispositivi mobili in Google Search Console (AKA Strumenti per i Webmaster di Google) e vedere gli errori scomparire tempo se il tuo sito è configurato correttamente.

Strumento per testare la compatibilità del tuo sito con i dispositivi mobili

• Strumento di ispezione degli URL di Search Console
• Pagespeed Insights
• Think With Google
• Test di ottimizzazione mobile

Come rendere il tuo sito web ottimizzato per i dispositivi mobili

Parte 1 – Page Speed Insights, test di ottimizzazione mobile e usabilità su dispositivi mobili

Parte 2 – Viewport, zoom e plug-in

Parte 3 – Target dei tocchi, margini e dimensioni dei caratteri

Parte 4 – Reindirizzamenti

Gli sviluppatori web dovrebbero trovare il mio altro recente post utile ora che la velocità del sito è un fattore di ranking in Google:

QUOTE: “La versione mobile di un sito web dovrebbe caricarsi idealmente in meno di 3 secondi e il più veloce è, meglio è. UN SITO MOLTO LENTO può essere un fattore di ranking NEGATIVO (confermato da Google). Non esiste una soglia o un punteggio di velocità da raggiungere, ju st per rendere la tua pagina il più veloce possibile. ” Shaun Anderson, Hobo 2020

Dichiarazione di non responsabilità

Dichiarazione di non responsabilità: “Mentre ho fatto ogni sforzo per garantire che le informazioni che ho fornito siano corrette, non è un consiglio .; Non posso accettare alcuna responsabilità per eventuali errori od omissioni. Lautore non garantisce per siti di terze parti o servizi di terze parti. Visitare siti di terze parti a proprio rischio. Non sono direttamente partner di Google o di altre terze parti. Questo sito Web utilizza i cookie solo per analisi e funzioni di base del sito Web. Questo articolo non costituisce una consulenza legale. Lautore declina ogni responsabilità che possa derivare dallaccesso ai dati presentati su questo sito. I collegamenti a pagine interne promuovono i miei contenuti e servizi. ” Shaun Anderson, Hobo