Care sunt cele mai bune dimensiuni ale ecranului pentru un design web receptiv?

Divulgare: „Acest articol este o opinie personală a cercetărilor bazate pe experiența mea de aproape 20 de ani. Nu există nicio publicitate terță parte pe această pagină sau linkuri monetizate de orice fel. Linkurile externe către site-uri terțe sunt moderate de mine. Declinare de responsabilitate. „Shaun Anderson, Hobo

Nu există pentru nimeni cea mai bună dimensiune a ecranului pentru care să proiectați. Site-urile web ar trebui să se transforme rapid și rapid la toate rezoluțiile ecranului pe diferite browsere și platforme. Accesibil. Compatibil cu dispozitivele mobile. Proiectați pentru publicul dvs., mai întâi. Proiectare de la 360 × 640 la 1920 × 1080.

• Proiectare pentru afișaje desktop de la 1024 × 768 la 1920 × 1080
• Proiectare pentru afișaje mobile de la 360 × 640 la 414 × 896
• Proiectați pentru afișaje pentru tablete de la 601 × 962 la 1280 × 800
• Verificați Google Analytics și optimizați pentru dimensiunile de rezoluție cele mai comune ale publicului dvs. țintă
• Nu proiectați pentru dimensiunea unui monitor sau rezoluția ecranului. Dimensiunile ecranului și starea ferestrei browserului variază în funcție de vizitatori.
• Proiectarea trebuie să fie receptivă și rapidă. Utilizați un aspect lichid sau receptiv care se transformă în dimensiunea ferestrei a utilizatorului actual.
• Monitorizați Google Search Console alerte de utilizare mobilă și de utilizare

Ar trebui să arate în continuare bine și să funcționeze bine la toate dimensiunile, motiv pentru care * obișnuiam să * recomand un aspect lichid foarte accesibil folosind lățimi procentuale pentru a controla aspectul. Acum, recomandarea este un șablon de site web adaptabil.

Cele trei criterii principale pentru optimizarea unui aspect de pagină pentru o anumită dimensiune a ecranului sunt:

• Vizibilitate inițială a paginii web: este cheia informații vizibile deasupra pliantei, astfel încât utilizatorii să le poată vedea fără derulare? Acesta este un compromis între câte articole sunt afișate și cât de multe detalii sunt afișate pentru fiecare articol.
• Citibilitatea paginii web: Cât de ușor este de citit textul din diferite coloane, având în vedere lățimea alocată lor?
• Estetică a paginii web: cât de bine arată pagina dvs. atunci când elementele sunt la dimensiunea și locația adecvate pentru această dimensiune a ecranului? Toate elementele se aliniază corect – adică sunt subtitrări imediat lângă fotografii etc.?

De asemenea, recomandările de utilizare vă recomandă să luați în considerare toate cele trei criterii la întreaga gamă de dimensiuni. Verificați fereastra browserului de la rezoluțiile ecranului 360 × 640 până la 1920 × 1080.

Pagina dvs. ar trebui să obțină un scor ridicat pe toate criteriile pe întreaga gamă de rezoluții.

Pagina dvs. ar trebui să funcționeze și la niveluri uniforme dimensiuni mai mici și mai mari, deși astfel de extreme sunt mai puțin importante.

Deși acești utilizatori ar trebui cu siguranță să poată accesa site-ul dvs., oferirea unui design mai mic decât unul este uneori un compromis acceptabil.

Cele mai frecvente zece rezoluții de ecran cele mai frecvente

Analiza vizitatorilor a aproape jumătate de milion de vizitatori în primele 6 luni ale anului 2020:

Un șablon de site web receptiv este un pariu bun >

CITARE: „Responsive Web Design: servește același cod HTML pe aceeași adresă URL, indiferent de dispozitivul utilizatorilor (de exemplu, desktop, tabletă, mobil, non- browser vizual), dar poate reda afișarea în mod diferit în funcție de dimensiunea ecranului. Google recomandă Design Web receptiv, deoarece este cel mai simplu model de proiectare de implementat și întreținut. ” Ghiduri pentru dezvoltatori Google, 2020

În lumea actuală, o mulțime de oameni folosesc dispozitive portabile (tablete și smartphone-uri) pentru a naviga pe web și pentru proiectarea site-ului receptiv ( RWD) a apărut ca o soluție foarte probabilă (este încă dezbătută de pasionați) pentru provocările legate de dimensiunea ecranului.

Această metodă se îndepărtează de utilizarea site-urilor web cu lățime fixă și utilizează în schimb interogări media în foile de stil CSS pentru a crea un site web care răspunde în dimensiuni diferitelor ferestre de vizualizare ale dispozitivelor portabile și ale ecranelor mai mici pe care oamenii le folosesc.

Deci, orice dispozitiv ar putea folosi o persoană pentru a vizualiza site-ul dvs. web, îi puteți oferi cea mai completă experiență posibilă.

Cuprins

Google preferă site-urile pentru dispozitive mobile

Google dictează refluxul și fluxul comerțului online și tocmai au dictat că trebuie să proiectați pentru o experiență de utilizare satisfăcătoare pe mai multe dispozitive DACĂ doriți să vă așteptați să vă poziționați la cuvinte cheie competitive în Google.

CITARE: „Google folosește două crawlerele diferite pentru accesarea cu crawlere a site-urilor web: un crawler mobil și un crawler desktop. Fiecare tip de crawler simulează un utilizator care vă vizitează pagina cu un dispozitiv de acel tip. Google folosește un tip de crawler (mobil sau desktop) ca crawler principal pentru site-ul dvs. Toate paginile de pe site-ul dvs. care sunt accesate cu crawlere de Google sunt accesate cu crawlere folosind crawlerul principal. Crawlerul principal pentru toate site-urile web noi este crawlerul mobil. În plus, Google răsfoiește câteva pagini de pe site-ul dvs. cu celălalt tip de crawler (mobil sau desktop).Aceasta se numește accesarea cu crawlere secundară și se face pentru a vedea cât de bine funcționează site-ul dvs. cu celălalt tip de dispozitiv. ” Regulamentul Google pentru webmasteri, 2020

Începând cu 21 aprilie 2015, la nivel global, modul în care un site este compatibil cu dispozitivele mobile, a afectat performanțele de clasare pentru site-urile web de pe o varietate de dispozitive.

Dacă creați site-uri web pentru întreprinderi mici – veți ști că vor un site web care să funcționeze bine în listările organice Google – știți că sunt interesați de optimizarea motorului de căutare:

CITARE: „Am 20 de ani de experiență practicând SEO profesional. Acest tutorial SEO este colecția mea de sfaturi și cele mai bune practici SEO pe care le folosesc pentru a clasifica site-urile web în Google.” Shaun Anderson, Hobo 2020

SEO se bazează acum, parțial, pe un site web UX bun, deoarece Google îl cuantifică, cel puțin pentru utilizatorii de dispozitive mobile.

CITARE: „În cazul în care căutările mobile depășesc acum căutările pe desktop, este important ca site-ul dvs. să fie compatibil cu dispozitivele mobile. Googlebot folosește acum un crawler mobil ca crawler implicit pentru site-uri web. ” Ghidul Google pentru webmasteri, 2020

În acest moment – asta înseamnă acum, în esență, un design al site-ului web receptiv și compatibil cu dispozitivele mobile, mai ales că Google „face ca indexul nostru să fie primul pe mobil „.

Statisticile rezoluției ecranului desktopului la nivel mondial mai 2019 – mai 2020

Pentru referință, iată o listă cu rezoluțiile actuale ale ecranului de top la nivel mondial, înregistrate recent (2020):

Cele mai frecvente dimensiuni de rezoluție a ecranului desktopului la nivel mondial

• 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%

Statistici privind rezoluția ecranului mobil la nivel mondial mai 2019 – mai 2020

Cele mai frecvente dimensiuni de rezoluție a ecranului mobil la nivel mondial

• 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%

Statistici privind rezoluția ecranului tabletei la nivel mondial mai 2019 – mai 2020

Cele mai frecvente dimensiuni ale rezoluției ecranului tabletelor la nivel mondial

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

Statistici privind rezoluția ecranului desktop în SUA mai 2019 – mai 2020

Rezoluțiile ecranului de sus în SUA (2020)

Dimensiunea cea mai comună a rezoluției ecranului desktop în Statele Unite ale Americii

• 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%

Statistici de rezoluție a ecranului mobil în SUA mai 2019 – mai 2020

Dimensiunea cea mai comună a rezoluției ecranului mobil în Statele Unite ale Americii

• 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%

Statistici privind rezoluția ecranului tabletei în SUA mai 2019 – mai 2020

Dimensiunea cea mai comună a rezoluției ecranului tabletei în Statele Unite ale Americii

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

Statisticile rezoluției ecranului desktop în Marea Britanie mai 2019 – mai 2020

Rezoluțiile ecranului de sus în Marea Britanie (2020)

Dimensiunea cea mai comună a rezoluției ecranului desktopului în Regatul Unit

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

Statistici privind rezoluția ecranului mobil în Marea Britanie mai 2019 – mai 2020

Dimensiunea cea mai comună a rezoluției ecranului mobil în Regatul Unit

• 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%

Statistici privind rezoluția ecranului tabletei în Marea Britanie mai 2019 – mai 2020

Cele mai frecvente dimensiuni ale rezoluției ecranului tabletelor din Regatul Unit

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

Cota de piață desktop vs mobil vs tabletă la nivel mondial

Cota de piață desktop vs mobil vs tabletă la nivel mondial

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

* Notă – statisticile de mai sus provin dintr-o sursă (deși credibilă), deci ar putea fi distorsionate în moduri pe care s-ar putea să nu le cunoaștem. Grafice furnizate de http://statcounter.com/.

Cum pot proiecta un site care arată la fel în fiecare browser & rezoluție?

Nu puteți.

Este imposibil să proiectați un site web care să arate la fel în fiecare browser, platformă și rezoluție a ecranului, deci evitați să încercați.

Ați putea opta pentru un aspect fluid, fără tabele pentru designul dvs., cu% lățimi care se extind și se contractă pentru a se potrivi cu setarea browserului vizitator SAU ați putea lua în considerare căutarea unor soluții de proiectare receptive care vor realiza aproape același lucru. > Google favorizează design-urile receptive, ceea ce este o veste bună pentru cei care l-au adoptat:

CITARE: „site-uri care utilizează designul web receptiv și implementează corect difuzarea dinamică (care include tot conținutul și marcajul pentru desktop), în general, nu trebuie să facă nimic. ” Google NOV 2017

MOBILE ESTE ÎN CURS – deci, dacă dezvolți un nou site web, TREBUIE să te gândești la cât de prietenos este site-ul tău mobil de la bun început.

Îmi propun să mențin lucrurile simple atunci când de fapt codific lucrurile.

Nu veți putea – nu vă rog – vă rog tuturor – și întrebarea care este dimensiunea site-ului web cea mai bună este încă un subiect fierbinte pentru dezbaterea de către designeri cu mai multă utilizare și expertiză UX decât mine.

Ceea ce știu din experiență este că este de o importanță crucială pentru dvs. să identificați publicul și dispozitivele pe care le utilizează și să vă construiți site-ul web (pe întregul) pentru a se potrivi acelui public.

Și acel public include GOOGLEBOT.

Site-ul dvs. mobil se redirecționează către o altă adresă URL & Versiunea de Site-ul dvs.?

Ei bine, acest lucru nu este ideal. De fapt, nu a fost niciodată.

Cu mult timp în urmă – unii oameni foloseau doar versiunile TEXT ale unui site web pentru a produce conținut pentru utilizatori / browsere care nu au acceptat elemente de pe web site-uri – într-o încercare (de obicei zadarnică) de a-și face conținutul mai accesibil.

W3C chiar îl recomanda, cred că dacă toate celelalte nu reușesc:

O pagină numai text, cu informații sau funcționalități echivalente, va fi furnizată pentru a face un site web să respecte prevederile acestei părți, atunci când conformitatea nu poate fi realizată în alt mod. Conținutul paginilor numai text trebuie actualizat ori de câte ori se modifică pagina principală. SECȚIUNEA 508

A fost întotdeauna ideal să livrați o adresă URL unui vizitator în scopuri de accesibilitate și nu există nicio diferență atunci când livrați conținut mobil sau smartphone dacă sunteți gândindu-vă să creați o versiune „mobilă” a site-ului dvs. Acest lucru, desigur, poate fi chiar MAI IMPORTANT dacă Google trece la un PRIM INDICE MOBIL.

Google ar putea foarte bine să vă evalueze PRIMAR pe mobilul dvs. experiență în viitorul apropiat – deci cu toții trebuie să fim conștienți de marile schimbări pe care le-am putea vedea foarte curând în SERP-urile Google.

Când Google este „vizitatorul”, este de obicei și mai important să livrăm doar o adresă URL din cauza provocărilor de adrese URL canonice pentru motoarele de căutare – și acest lucru a fost cazul înainte de implementarea elementului de legătură canonică cu ceva timp în urmă.

Deci, situația ideală este să livrați o adresă URL tot timpul.

Dacă aveți conținut „smartphone” (pe care îl vedem ca conținut web normal, deoarece este în general o normă l pagină HTML, doar modificată în aspect pentru afișaje mai mici) puteți utiliza rel = canonical pentru a indica versiunea desktop. Acest lucru ne ajută să ne concentrăm pe versiunea desktop pentru căutarea pe web. Când utilizatorii accesează acea versiune desktop cu un smartphone, îi puteți redirecționa către versiunea mobilă. Acest lucru funcționează indiferent de structura URL-ului, deci nu este nevoie să utilizați subdomenii / subdirectoare pentru site-uri smartphone-mobile. Cu toate acestea, mai bine este să folosiți aceleași adrese URL și să afișați versiunea adecvată a conținutului fără o redirecționare John Mueller, Google

Ignorarea recomandărilor Google nu este adesea o mișcare inteligentă

CITARE: Pentru a recapitula, în prezent sistemele noastre de accesare cu crawlere, indexare și clasificare se uită de obicei la desktop versiunea conținutului unei pagini, care poate provoca probleme pentru căutătorii mobili atunci când acea versiune este foarte diferită de versiunea mobilă. Prima indexare pe mobil înseamnă că vom folosi versiunea mobilă a conținutului pentru indexare și clasare, pentru a ajuta mai bine utilizatorii noștri – în primul rând pe dispozitive mobile – să găsească ceea ce caută. Webmasterii vor vedea cu crawlere semnificativ creșterea prin Smartphone Googlebot, iar fragmentele din rezultate, precum și conținutul de pe paginile cache Google, vor fi din versiunea mobilă a paginilor.Google noiembrie 2017

Google oferă următoarele sfaturi pentru a verifica dacă site-ul dvs. este pregătit pentru primul index mobil, dar, în esență, dacă utilizați un design web receptiv șablon pentru site-ul dvs. ar trebui să aveți probleme minime cu această modificare:

• Asigurați-vă că și versiunea mobilă a site-ului are importanța , conținut de înaltă calitate. Aceasta include text, imagini (cu atribute alt) și videoclipuri – în formatele obișnuite care pot fi accesate cu crawlere și indexabile.

• Datele structurate sunt importante pentru indexarea și funcțiile de căutare pe care utilizatorii le plac: ar trebui să fie atât pe versiunea mobilă, cât și pe cea desktop a site-ului. Asigurați-vă că adresele URL din datele structurate sunt actualizate la versiunea mobilă de pe paginile mobile.

• Metadatele ar trebui să fie prezente în ambele versiuni ale site-ului. Oferă indicii despre conținutul unei pagini pentru indexare și difuzare. De exemplu, asigurați-vă că titlurile și meta descrierile sunt echivalente în ambele versiuni ale tuturor paginilor de pe site.

• Nu sunt necesare modificări pentru interconectarea cu adrese URL mobile separate (site-uri cu puncte M.). Pentru site-urile care utilizează adrese URL mobile separate, păstrați linkul existent rel = canonical și link rel = elemente alternative între aceste versiuni.

• Verificați linkurile hreflang pe adrese URL mobile separate. Când utilizați elemente de legătură rel = hreflang pentru internaționalizare, legați separat între adresele URL de pe mobil și desktop. Hreflang-ul adreselor URL mobile ar trebui să indice versiunea în alte limbi / regiuni de pe alte URL-uri mobile și să asocieze în mod similar desktopul cu alte URL-uri desktop folosind elemente de link hreflang acolo.

• Asigurați-vă că serverele care găzduiesc site-ul au suficientă capacitate pentru a gestiona rata potențială de accesare cu crawlere. Acest lucru nu afectează site-urile care utilizează designul web receptiv și difuzarea dinamică, doar site-urile în care versiunea mobilă se află pe o gazdă separată, cum ar fi m.example.com.

Utilizatorii se așteaptă să deruleze o pagină

După cum sugerează primul criteriu, derularea este întotdeauna o considerație cheie. Utilizatorilor, în general, nu le-a plăcut să deruleze dacă nu au nevoie – deși, de-a lungul anilor, acest lucru s-a schimbat.

Deci, atunci când proiectați, ar trebui să luați în considerare cât de mult pot vedea utilizatorii dacă derulează doar un ecran complet sau două. Orice lungime mai mare de cinci ecrane ar putea fi un indiciu pentru dvs. că ar putea exista prea multe copii pe pagină. Desigur, acest lucru este echilibrat cu opinia că unele articole sunt menite să fie informații detaliate, iar utilizatorii s-ar aștepta să aștepte puțin mai mult pentru a vizualiza conținutul paginii și tipurile de conținut.

Atât defilarea, cât și inițial vizibilitatea depinde în mod evident de dimensiunea ecranului: ecranele mai mari prezintă mai mult conținut deasupra pliantei și necesită mai puține derulare.

O schimbare într-un site mobil receptiv va avea ca rezultat mult mai mult trafic de la Google?

Nu neapărat, dar poate.

La fel de multe lucruri de făcut cu optimizarea Google – a avea un site web pentru dispozitive mobile este mai mult sau mai puțin pentru a vă asigura că PĂSTRAȚI traficul pe care îl primiți deja, nu vă oferă neapărat mai mult gratuit trafic de la Google.

Dacă nu primiți deja mult trafic de la vizitatorii de pe dispozitive mobile – nu sunt sigur dacă această actualizare de la Google va avea un efect vizibil asupra nivelurilor dvs. de trafic (cel puțin în analiză ) la început – dar în timp – va fi probabil o provocare extrem de importantă de navigat.

bara este ridicată – din nou – de Google și de utilizatorii săi – și dacă doriți să concurați în SERP organice din ce în ce mai competitive, acesta este încă un obstacol pentru depășirea întreprinderilor mici.

Pe termen lung – această conversie mobilă poate fi un lucru bun numai pentru utilizatorii dvs. – dar pe termen scurt – va fi interesant să vedeți ce efect are asupra ratelor de conversie ale întreprinderilor mici – întrucât ratele de conversie prin telefonul mobil sunt adesea mai mici decât pe desktop.

Google a spus că acest algoritm compatibil cu dispozitivele mobile va avea un impact mai mare asupra SERP-urilor decât algoritmii Google Penguin și Google Panda – și vom afla mai multe pe măsură ce trece timpul.

Cum Pentru a verifica problemele importante de utilizare a dispozitivelor mobile pe site-ul dvs.

Google Search Console

Ar trebui să puteți urmări erorile mobile în Google Search Console (AKA Google Webmaster Tools) și să vedeți erorile care dispar timp dacă site-ul dvs. este configurat corect.

Instrument pentru a testa site-ul dvs. pentru prietenie cu dispozitivele mobile

• Instrumentul de inspecție a adreselor URL a consolei de căutare
• Statistici privind viteza de pagină
• Gândiți-vă cu Google / li>
• Test pentru dispozitive mobile

Cum să îți faci site-ul mobil pentru dispozitive mobile

Partea 1 – PageSpeed Insights, Test compatibil cu dispozitivele mobile și utilizare mobilă

Partea 2 – Afișaje, zoom și pluginuri

Partea 3 – atingeți ținte, margini și dimensiuni de font

Partea 4 – Redirecționări

Dezvoltatorii web ar trebui să găsească celelalte mele recente postare utilă acum că viteza site-ului este un factor de clasare în Google:

CITARE: „Versiunea mobilă a unui site web ar trebui să se încarce în mod ideal în mai puțin de 3 secunde și mai rapid, cu atât mai bine. Un SITE FOARTE LENT poate fi un factor de clasare NEGATIV (confirmat de Google). Nu există un prag stabilit sau un scor de viteză de atins, ju st pentru a vă face pagina cât mai rapidă posibil. ” Shaun Anderson, Hobo 2020

Disclaimer

Disclaimer: „În timp ce am am depus toate eforturile pentru a mă asigura că informațiile pe care le-am furnizat sunt corecte, nu este un sfat .; Nu pot accepta nicio responsabilitate sau răspundere pentru orice erori sau omisiuni. Autorul nu garantează site-uri terțe sau servicii terțe. Accesați site-uri terțe pe propria răspundere. Nu sunt parteneriat direct cu Google sau cu alte terțe părți. Acest site web folosește cookie-uri numai pentru analize și funcții de bază ale site-ului web. Acest articol nu constituie consultanță juridică. Autorul nu își asumă nicio răspundere care ar putea apărea din accesarea datelor prezentate pe acest site. Linkurile către pagini interne îmi promovează propriul conținut și servicii. ” Shaun Anderson, Hobo