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

Non c’è una migliore dimensione dello schermo 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. Design per il vostro pubblico, in primo luogo. Design da 360×640 a 1920×1080.

  • Design per desktop display da 1024×768 a 1920×1080
  • Design per il mobile display da 360×640 attraverso 414×896
  • Design per schermi dei tablet da 601×962 attraverso 1280×800
  • Controllo di Google Analytics e ottimizzazione per il tuo target di pubblico più comuni delle dimensioni di risoluzione
  • non progettare per un monitor di dimensioni o la risoluzione dello schermo. Le dimensioni dello schermo e lo stato della finestra del browser variano tra i visitatori.
  • Design dovrebbe essere reattivo e veloce., Utilizzare un layout liquido o reattivo che si trasforma nella dimensione della finestra dell’utente corrente.
  • Monitor Google Search Console mobile-friendly e usabilità avvisi

Dovrebbe ancora guardare bene e funzionare bene a tutte le dimensioni, che è il motivo per cui *usato per* raccomandare un layout liquido altamente accessibile utilizzando larghezze percentuali per controllare il layout. Ora la raccomandazione è un modello di sito web reattivo.,

I tre criteri principali per ottimizzare un layout di pagina per una certa dimensione dello schermo sono:

  • Visibilità iniziale della pagina Web: tutte le informazioni chiave sono visibili sopra la piega in modo che gli utenti possano vederla senza scorrere? Questo è un compromesso tra il numero di elementi visualizzati e la quantità di dettagli visualizzati per ciascun elemento.
  • Leggibilità della pagina Web: quanto è facile leggere il testo in varie colonne, data la larghezza allocata?
  • Estetica della pagina Web: quanto è buona la tua pagina quando gli elementi sono nelle dimensioni e nella posizione corrette per questa dimensione dello schermo?, Tutti gli elementi si allineano correttamente-cioè, sono didascalie immediatamente accanto alle foto,ecc.?

Linee guida di usabilità anche raccomandato di prendere in considerazione tutti e tre i criteri per l’intera gamma di dimensioni,. Controllare la finestra del browser da 360×640 a 1920×1080 risoluzioni dello schermo.

La tua pagina dovrebbe ottenere un punteggio elevato su tutti i criteri dell’intero intervallo di risoluzione.

La tua pagina dovrebbe funzionare anche a dimensioni ancora più piccole e più grandi, anche se tali estremi sono meno importanti.,

Anche se tali utenti dovrebbero certamente essere in grado di accedere al tuo sito, dando loro un design meno-che-grande è a volte un compromesso accettabile.,

Top Ten dei Più Comuni Risoluzioni dello Schermo

l’analisi dell’Ospite di quasi mezzo milione di visitatori nei primi 6 mesi del 2020:

Un Reattivo, Modello di Sito web È Una Buona Scommessa

CITAZIONE: “Responsive Web Design: Serve lo stesso codice HTML sullo stesso URL indipendentemente dal dispositivo dell’utente (ad esempio, desktop, tablet, mobili, camere non-visual browser), ma può rendere il display in modo diverso in base alla dimensione dello schermo. Google consiglia 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 palmari (tablet e smartphone) per navigare sul Web e il responsive website design (RWD) è emerso come una soluzione molto probabile (è ancora dibattuta dagli appassionati) per le sfide delle dimensioni dello schermo.

Questo metodo si allontana dall’utilizzo 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 finestre di dispositivi palmari e schermi più piccoli utilizzati dalle persone.,

Quindi, qualunque dispositivo una persona può utilizzare per visualizzare il tuo sito web si è in grado di dare loro la massima esperienza possibile.

Sommario

Google preferisce siti mobile-Friendly

Google detta il flusso e riflusso del commercio online e hanno appena dettato è necessario progettare per un’esperienza utente soddisfacente su più dispositivi, se si vuole aspettare di rango elevato per le parole chiave competitive in Google.

CITAZIONE: “Google utilizza due diversi crawler per la scansione di 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 che vengono scansionate da Google vengono scansionate utilizzando il crawler principale. Il crawler principale per tutti i nuovi siti web è il crawler mobile. Inoltre, Google recrawls alcune pagine del tuo sito con l’altro tipo di crawler (mobile o desktop). Questo è chiamato crawl secondario, ed è fatto per vedere quanto bene il vostro sito funziona con l’altro tipo di dispositivo.,”Google Webmaster Guidelines, 2020

Dal 21 aprile 2015, a livello globale, come un sito mobile-friendly ha influenzato le prestazioni di classifica per i siti Web attraverso una varietà di dispositivi.

Se si fanno siti web per le piccole imprese – saprete che vogliono un sito web che si esibirà bene in Google organic listings – sai che sono interessati a search engine optimisation:

CITAZIONE: “Ho 20 anni di esperienza nella pratica SEO professionale. Questo tutorial SEO è la mia collezione di consigli e migliori pratiche SEO che uso per classificare i siti web in Google.,”Shaun Anderson, Hobo 2020

SEO è ora basato, in parte, su un buon sito web UX, come Google quantifica, almeno per gli utenti mobili.

CITAZIONE: “Con le ricerche mobili che ora superano le ricerche desktop, è importante che il tuo sito sia mobile-friendly. Googlebot ora utilizza un crawler mobile come crawler predefinito per i siti web.”Google Webmaster Guidelines, 2020

Al momento – che essenzialmente ora significa responsive website design e mobile-friendly, in particolare con Google”rendere il nostro indice mobile-first”.,

Risoluzione dello Schermo Desktop Statistiche di tutto il Mondo Possono 2019 – Maggio 2020

Per il riferimento, qui, è riportato un elenco di migliori risoluzioni dello schermo in tutto il mondo come registrati di recente (2020):

la Maggior parte dei Comuni del Desktop la Risoluzione dello Schermo Dimensioni in tutto il Mondo

  • 1366×768 – 23.49%
  • 1920×1080 – 19.91%
  • 1536×864 – 8.65%
  • 1440×900 – 7.38%
  • risoluzione di 1280×720 – 4.89%
  • risoluzione di 1600×900 – 4.01%
  • risoluzione di 1280×800 – 3.,33%

Mobile della Risoluzione dello Schermo Statistiche di tutto il Mondo Possono 2019 – Maggio 2020

la Maggior parte dei Comuni Mobile della Risoluzione dello Schermo Dimensioni 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×736 – 3.74%

Tablet Risoluzione dello Schermo Statistiche di tutto il Mondo Possono 2019 – Maggio 2020

la Maggior parte dei Comuni del Tablet Risoluzione dello Schermo Dimensioni in tutto il Mondo

  • 768×1024 – 51.98%
  • risoluzione di 1280×800 – 7.11%
  • 800×1280 – 5.,34%
  • 601×962 – 4.47%
  • 600×1024 – 2.85%
  • 1024×1366 – 1.96%

Risoluzione dello Schermo Desktop Statistiche di NOI Può 2019 – Maggio 2020

Top Risoluzioni dello Schermo in USA (2020)

la Maggior parte dei Comuni del Desktop la Risoluzione dello Schermo Dimensioni in Stati Uniti D’America

  • 1920×1080 – 19.15%
  • 1366×768 – 14.91%
  • 1440×900 – 9.59%
  • 1536×864 – 7.7%
  • risoluzione di 1280×720 – 4.89%
  • risoluzione di 1600×900 – 4.28%
  • risoluzione di 1280×800 – 3.,92%

Mobile della Risoluzione dello Schermo Statistiche di NOI Può 2019 – Maggio 2020

la Maggior parte dei Comuni Mobile della Risoluzione dello Schermo Dimensioni in Stati Uniti D’America

  • 414×816 – al 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%

Tablet Risoluzione dello Schermo Statistiche di NOI Può 2019 – Maggio 2020

la Maggior parte dei comuni del Tablet Risoluzione dello Schermo Dimensioni in Stati Uniti D’America

  • 768×1024 – 54.,68%
  • 800×1280 – 5.75%
  • risoluzione di 1280×800 – 5.73%
  • 601×962 – 5.41%
  • 1024×1366 – 3.06%
  • 600×1024 -2.57%

Risoluzione dello Schermo Desktop Statistiche nel regno UNITO Maggio 2019 – Maggio 2020

Top Risoluzioni dello Schermo in UK (2020)

la Maggior parte dei Comuni del Desktop la Risoluzione dello Schermo Dimensioni nel Regno Unito

  • 1920×1080 – 20.62%
  • 1366×768 – 17.32%
  • 1440×900 – 11.65%
  • 1536×864 – 8.38%
  • risoluzione di 1280×720 – 5.2%
  • risoluzione di 1280×800 – 4.,Il 73%

Mobile della Risoluzione dello Schermo Statistiche nel regno UNITO Maggio 2019 – Maggio 2020

la Maggior parte dei Comuni Mobile dello Schermo, la Risoluzione del 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%

Tablet Risoluzione dello Schermo Statistiche nel regno UNITO Maggio 2019 – Maggio 2020

la Maggior parte dei Comuni del Tablet Risoluzione dello Schermo Dimensioni nel Regno Unito

  • 768×1024 – 58.,31%
  • risoluzione di 1280×800 – 6.92%
  • 800×1280 – 6.02%
  • 601×962 – 3.68%
  • 600×1024 – 3.26%
  • 1024×1366 – 1.71%

Desktop vs Mobile vs Tablet Quota di Mercato in tutto il Mondo

Desktop vs Mobile vs Tablet Quota di Mercato in tutto il Mondo

  1. Mobile – 50.48%
  2. Desktop – 46.51%
  3. Tablet – 3.0%

*Nota – le statistiche di cui sopra sono da una (seppur credibile) di origine, in modo che possa essere inclinata in modi che potrebbero 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 per avere 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 % di larghezze che si espandono e si contraggono per adattarsi a un’impostazione del browser dei visitatori O potresti considerare di esaminare soluzioni di design reattivo che otterranno più o meno la stessa cosa.,

Google favorisce i design responsive, il che è una buona notizia per coloro che l’hanno adottato:

QUOTE: “i siti che utilizzano il web design reattivo e implementano correttamente il servizio dinamico (che include tutti i contenuti del desktop e il markup) in genere non devono fare nulla.”Google NOV 2017

MOBILE È IN AUMENTO – quindi se lo sviluppo di un nuovo sito web – si DEVE pensare a come mobile friendly il tuo sito web è davvero fin dall’inizio.

Miro a mantenere le cose semplici quando sto effettivamente codificando le cose.,

non – non – tutti – e la domanda che il sito web dimensione è ancora un tema caldo di dibattito da parte di designer con più di usabilità e UX esperienza di me.

Quello che so per esperienza è che è di fondamentale importanza per identificare IL pubblico e i dispositivi che utilizzano, e costruire il tuo sito web (sul totale) per soddisfare il pubblico.

E quel pubblico include GOOGLEBOT.

Il tuo sito mobile reindirizza a un altro URL& Versione del tuo sito?

Beh, non è l’ideale. Non lo è mai stato, in realtà.,

Nel lontano giorno – alcune persone usavano versioni SOLO TESTUALI di un sito Web per produrre contenuti per utenti / browser che non supportavano elementi dei loro siti web-in un (di solito vano) tentativo di rendere il loro contenuto più accessibile.

Il W3C lo raccomandava anche se tutto il resto falliva:

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 compiuta in nessun altro modo., Il contenuto delle pagine di solo testo è aggiornato ogni volta che la pagina principale cambia. SEZIONE 508

È sempre stato ideale fornire un URL a un visitatore per scopi di accessibilità, e non c’è differenza quando si forniscono contenuti mobili o smartphone se si sta pensando di creare una versione “mobile” del proprio sito. Questo, naturalmente, potrebbe essere ancora più IMPORTANTE se Google si sta muovendo per un INDICE MOBILE FIRST.,

Google può benissimo votare in primo luogo sulla vostra esperienza mobile in un prossimo futuro – così tutti abbiamo davvero bisogno di essere consapevoli dei grandi cambiamenti che potremmo vedere molto presto in SERP di Google.

Quando Google è il “visitatore”, di solito è ancora più importante fornire un solo URL a causa delle sfide URL canoniche per i motori di ricerca – e questo è stato il caso prima dell’implementazione dell’elemento link canonico qualche tempo fa.

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

Se si dispone di contenuti “smartphone” (che vediamo come normale contenuto web, in quanto è generalmente una normale pagina HTML, appena ottimizzato nel layout per display più piccoli) è possibile utilizzare il rel=canonical per puntare alla 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, è possibile reindirizzare alla versione mobile. Funziona indipendentemente dalla struttura dell’URL, quindi non è necessario utilizzare sottodomini / sottodirectory per siti mobili per smartphone., Ancora migliore è di utilizzare lo stesso Url e a mostrare la versione appropriata del contenuto senza un redirect John Mueller, Google

Ignorando Google Raccomandazioni, Spesso, Non È Una Mossa Intelligente

QUOTE: Per ricapitolare, attualmente la nostra ricerca per indicizzazione, indicizzazione, e sistemi di classificazione in genere guardare la versione desktop del contenuto di una pagina, che può causare problemi per il cellulare ricercatori quando tale versione è molto diverso dalla versione mobile., Mobile-first indicizzazione significa che useremo la versione mobile del contenuto per l’indicizzazione e la classifica, per aiutare meglio i nostri – soprattutto mobile – utenti a trovare quello che stanno cercando. I webmaster vedranno significativamente aumentato strisciando da Smartphone Googlebot, e gli snippet nei risultati, così come il contenuto delle pagine della cache di Google, sarà dalla versione mobile delle pagine., Google Nov 2017

Google offre i seguenti suggerimenti per controllare il vostro sito è pronto per il primo mobile indice, ma, in sostanza, se si utilizza un web design responsive template per il tuo sito dovrebbe avere problemi con questa modifica:

  • assicurarsi che la versione mobile del sito, ha anche l’importante, contenuti di alta qualità. Questo include testo, immagini (con attributi alt) e video-nei soliti formati indicizzabili e indicizzabili.,

  • I dati strutturati sono importanti per le funzioni di indicizzazione e ricerca che gli utenti amano: dovrebbero essere sia nella versione mobile che desktop del sito. Assicurarsi che gli URL all’interno dei dati strutturati siano aggiornati alla versione mobile nelle pagine mobili.

  • I metadati devono essere presenti su entrambe le versioni del sito. Fornisce suggerimenti sul contenuto di una pagina per l’indicizzazione 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 l’interconnessione con URL mobili separati (siti m.-dot). Per i siti che utilizzano URL mobili separati, mantenere gli elementi esistenti link rel=canonical e link rel=alternate tra queste versioni.

  • Controlla i collegamenti hreflang su URL mobili separati., Quando si utilizzano gli elementi link rel=hreflang per l’internazionalizzazione, collegamento tra URL mobili e desktop separatamente. hreflang dei tuoi URL mobili dovrebbe puntare alle altre versioni di lingua / regione su altri URL mobili e allo stesso modo collegare il desktop con altri URL desktop utilizzando gli elementi di collegamento hreflang lì.

  • Assicurarsi che i server che ospitano il sito abbiano una capacità sufficiente per gestire la velocità di scansione potenzialmente aumentata., Ciò non influisce sui siti che utilizzano il Web design reattivo e la pubblicazione dinamica, ma solo sui siti in cui la versione mobile si trova su un host separato, ad esempio m.example.com.

Gli utenti si aspettano di scorrere una pagina

Come implica il primo criterio, lo scorrimento è sempre una considerazione chiave. Gli utenti in genere non piace scorrere se non hanno bisogno di – anche se, nel corso degli anni, che è cambiato.

Quindi, quando si progetta, si dovrebbe considerare quanto gli utenti possono vedere se scorrono solo uno schermo pieno o due., Qualsiasi più di cinque schermi lungo potrebbe essere un’indicazione a voi che ci potrebbe essere troppa copia sulla pagina. Naturalmente, questo è bilanciato con l’idea che alcuni articoli sono pensati per essere pezzi di informazioni approfondite e gli utenti si aspetterebbero di aspettare un po ‘ più a lungo per visualizzare alcuni contenuti di pagina e tipi di contenuto.

Sia lo scorrimento che la visibilità iniziale dipendono ovviamente dalle dimensioni dello schermo: schermi più grandi mostrano più contenuti sopra la piega e richiedono meno scorrimento.

Una modifica a un sito mobile reattivo comporterà molto più traffico da Google?

Non necessariamente, ma forse.,

Come molte cose da fare con l’ottimizzazione di Google – avere un sito web mobile-friendly è più o meno per essere sicuri di mantenere il traffico che si sta già ottenendo, non necessariamente dare più traffico gratuito da Google.

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

La barra della qualità viene sollevata – di nuovo – da Google e dai suoi utenti – e se vuoi competere in SERP organici sempre più competitivi, questo è un altro ostacolo per le piccole imprese.

A LUNGO termine – questa conversione 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 via mobile sono spesso inferiori rispetto al desktop.,

Google ha detto che questo algoritmo mobile-friendly avrà un impatto maggiore sulle SERP rispetto sia Google Penguin e Google Panda algoritmi – e scopriremo di più col passare del tempo.

Come verificare importanti problemi di usabilità mobile sul tuo sito

Google Search Console

Dovresti essere in grado di monitorare gli errori mobili in Google Search Console (AKA Google Webmaster Tools) e vedere gli errori scomparire nel tempo se il tuo sito è configurato correttamente.,”>

Parte 1 – PageSpeed Insights, Mobile-Friendly Test e Mobile-Usabilità

Parte 2 – Finestre, zoom e plugins

Parte 3 – Toccare i bersagli, i margini e le dimensioni del carattere

Parte 4 – Reindirizza

gli sviluppatori Web devono trovare altri miei ultimi post utile ora che la velocità del sito è un fattore di ranking in Google:

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

Disclaimer

Disclaimer: “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 o omissioni. L’autore non garantisce per siti di terze parti o qualsiasi servizio di terze parti. Visitare siti di terze parti a proprio rischio., Non sono direttamente partner con Google o qualsiasi altra terza parte. Questo sito web utilizza i cookie solo per le funzioni analitiche e di base del sito web. Questo articolo non costituisce consulenza legale. L’autore non si assume alcuna responsabilità che possa derivare dall’accesso ai dati presentati su questo sito. I collegamenti a pagine interne promuovono i miei contenuti e servizi.”Shaun Anderson, Hobo