Care Sunt Cele Mai Bune Dimensiuni De Ecran Pentru Design Web Receptiv?

dezvăluire: „acest articol este opinia personală a cercetării bazate pe experiența mea de aproape 20 de ani. Nu există publicitate terță parte pe această pagină sau link-uri monetizate de orice fel. Link-urile externe către site-uri terțe sunt moderate de mine. Disclaimer. „Shaun Anderson, Vagabond

nu e nimeni mai bun ecran de dimensiuni de proiectare pentru. Site-urile web ar trebui să se transforme în mod responsabil și rapid la toate rezoluțiile de ecran pe diferite browsere și platforme., Accesibil. Mobile-friendly. Design pentru publicul dvs., în primul rând. Proiectare de la 360×640 până la 1920×1080.

• Design pentru afișaje desktop de la 1024×768 până la 1920×1080
• Design pentru afișaje mobile de la 360×640 până la 414×896
• Design pentru afișaje pentru tablete de la 601×962 până la 1280×800
• verificați Google Analytics și optimizați cele mai comune dimensiuni de rezoluție ale publicului țintă
• rezoluție. Dimensiunile ecranului și starea ferestrei browserului variază în funcție de vizitatori.
• designul trebuie să fie receptiv și rapid., Utilizați un aspect lichid sau receptiv care se transformă la dimensiunea ferestrei utilizatorului curent.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 extrem de accesibil folosind lățimi procentuale pentru a controla aspectul. Acum recomandarea este un șablon de site web receptiv.,cele trei criterii principale pentru optimizarea aspectului unei pagini pentru o anumită dimensiune a ecranului sunt:
  • vizibilitatea inițială a paginii web: toate informațiile cheie sunt vizibile deasupra pliului, astfel încât utilizatorii să o poată vedea fără a derula? Acesta este un compromis între cât de multe elemente sunt afișate vs.cât de mult detaliu este afișat pentru fiecare element.
  • lizibilitatea paginii Web: cât de ușor este să citiți textul în diferite coloane, având în vedere lățimea alocată?
  • estetica paginii Web: cât de bine arată pagina dvs. atunci când elementele sunt la dimensiunea și locația corespunzătoare pentru această dimensiune a ecranului?, Faceți toate elementele aliniate corect-adică sunt subtitrări imediat lângă fotografii etc.?

  instrucțiuni de utilizare, de asemenea, a recomandat să ia în considerare toate cele trei criterii la întreaga gamă de dimensiuni,. Verificați fereastra browserului de la rezoluțiile ecranului 360×640 la 1920×1080.

  pagina dvs. ar trebui să obțină un scor ridicat pe toate criteriile de-a lungul întregului interval de rezoluție.de asemenea, pagina dvs. ar trebui să funcționeze la dimensiuni chiar mai mici și mai mari, deși astfel de extreme sunt mai puțin importante.,deși astfel de utilizatori ar trebui cu siguranță să poată accesa site-ul dvs., oferindu-le un design mai puțin decât grozav este uneori un compromis acceptabil.,

  Top Zece cele Mai Frecvente Rezoluții de Ecran

  analiza Vizitatorilor de aproape jumătate de milion de vizitatori în primele 6 luni ale anului 2020:

  Un Șablon site-Ul Receptiv Este Un Pariu Bun

  CITAT: „Responsive Web Design: Servește același cod HTML pe același URL, indiferent de utilizatori dispozitiv (de exemplu, desktop, tablet, mobile, non-vizuale browser-ul), dar se poate face pe ecran diferit în funcție de dimensiunea ecranului. Google recomandă designul web Responsive, deoarece este cel mai ușor model de design de implementat și întreținut.,”Google Developer Ghiduri, în 2020,

  În lumea de astăzi, o mulțime de oameni folosesc dispozitive portabile (tablete și smartphone-uri) pentru a naviga pe web și responsive web design (RWD) a apărut ca un foarte probabil soluție (este încă dezbătută de către pasionații) la dimensiunea ecranului provocări.această metodă se îndepărtează de utilizarea site-urilor web cu lățime fixă și, în schimb, folosește interogări Media în foile de stil CSS pentru a crea un site web care răspunde ca mărime la diferitele vizualizări ale dispozitivelor portabile și ecrane mai mici pe care le folosesc oamenii.,deci, indiferent de dispozitivul pe care o persoană îl poate utiliza pentru a vizualiza site-ul dvs., puteți să le oferiți cea mai completă experiență posibilă.

  Cuprins

  Google Preferă Mobile-Friendly site-Uri

  Google dictează fluxul și refluxul de comerț on-line și au dictat aveți nevoie pentru a proiecta pentru un satisfăcătoare experiență de utilizator pe mai multe dispozitive, DACĂ doriți să se aștepte la rang de mare pentru cuvinte cheie competitive în Google.

  citat: „Google utilizează două crawlere 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 acest tip. Google utilizează 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 crawlerul Google sunt accesate cu crawlerul principal. Crawlerul principal pentru toate site-urile noi este crawlerul mobil. În plus, Google recrawls câteva pagini de pe site-ul dvs. cu celălalt tip de crawler (mobil sau desktop). Aceasta se numește crawl secundar și se face pentru a vedea cât de bine funcționează site-ul dvs. cu celălalt tip de dispozitiv.,”Google pentru Webmasteri, în 2020,

  Din aprilie 21, 2015, la nivel global, cum mobile-friendly site-ul a afectat clasamentul de performanță pentru site-uri web pe o varietate de dispozitive.

  Dacă vă face site-uri web pentru întreprinderile mici – veți ști că doriți un site web care va efectua bine în Google organic anunturi – știi că ei sunt interesați în optimizarea motorului de căutare:

  CITAT: „am 20 de ani de experienta practica SEO profesionist. 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 bun UX, așa cum Google îl cuantifică, cel puțin pentru utilizatorii de telefonie mobilă.

  citat: „cu căutările mobile care depășesc acum căutările pe desktop, este important ca site-ul dvs. să fie prietenos cu dispozitivele mobile. Googlebot utilizează acum un crawler mobil ca crawler implicit pentru site-uri web.”Google pentru Webmasteri, în 2020,

  În acest moment – care în esență înseamnă acum responsive web design și mobile-friendly, mai ales cu Google „face indexul nostru mobil-primul”.,

  Desktop Rezolutie Ecran Statistici la nivel Mondial Mai 2019 – ar Putea 2020

  Pentru referință, aici este o listă de top actuale rezoluțiile de ecran din întreaga lume înregistrate recent (2020):

  

  cele Mai Frecvente pe Ecran Desktop Rezoluție Dimensiunile din întreaga Lume

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

  Mobile Rezoluția Ecranului Statistici la nivel Mondial Mai 2019 – ar Putea 2020

  

  cele Mai Frecvente Mobile Rezoluție a Ecranului de Dimensiuni din întreaga Lume

  • 360×640 – 17.91%
  • 375×667 – 7.61%
  • 414 x 896 – 6.52%
  • 360×780 – 5.56%
  • 360×760 – 5.06%
  • 414 x 736 – 3.74%

  Tableta cu Ecran de Rezoluție Statistici la nivel Mondial Mai 2019 – ar Putea 2020

  

  cele Mai Frecvente Tableta cu Ecran de Rezoluție Dimensiunile din întreaga Lume

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

  Desktop Rezolutie Ecran Statistici din SUA Poate 2019 – ar Putea 2020

  Sus Rezoluțiile de Ecran în SUA (2020)

  

  cele Mai Frecvente Desktop Dimensiune Rezoluția Ecranului î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%

  Mobile Rezoluția Ecranului Statistici din SUA Poate 2019 – ar Putea 2020

  

  cele Mai Frecvente Mobile Dimensiune Rezoluția Ecranului în Statele Unite Ale Americii

  • 414×816 – 17.89%
  • 375×667 – 14.2%
  • 375×812 – 11.97%
  • 360×640 – 8.55%
  • 414 x 736 – 8.54%
  • 412×846 – 4.7%
  • 360×740 – 4.39%

  Tableta cu Ecran de Rezoluție Statistici din SUA Poate 2019 – ar Putea 2020

  

  cele Mai frecvente Tablet Dimensiune Rezoluția Ecranului î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%

  Desktop Rezolutie Ecran Statistici din marea BRITANIE Poate 2019 – ar Putea 2020

  Sus Rezoluțiile de Ecran în marea BRITANIE (2020)

  

  cele Mai Frecvente Desktop Dimensiune Rezoluția Ecranului în Marea Britanie

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

  Mobile Rezoluția Ecranului Statistici din marea BRITANIE Poate 2019 – ar Putea 2020

  

  cele Mai Frecvente Mobile Dimensiune Rezoluția Ecranului în Marea Britanie

  • 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 x 736 – 4.75%

  Tableta cu Ecran de Rezoluție Statistici din marea BRITANIE Poate 2019 – ar Putea 2020

  

  cele Mai Frecvente Tableta cu Ecran de Rezoluție Dimensiunile în Marea Britanie

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

  Desktop vs Mobil vs Tableta Cota de Piață la nivel Mondial

  

  Desktop vs Mobil vs Tableta Cota de Piață la nivel Mondial

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

  *Notă – statisticile de mai sus sunt de la o (deși credibile) source, astfel încât ar putea fi denaturate în moduri de care nu știm. Grafice furnizate de http://statcounter.com/.,

  Cum pot proiecta un Site care arată la fel în fiecare browser & rezoluție?este imposibil să proiectați un site web pentru a arăta la fel în fiecare browser, platformă și rezoluție a ecranului, deci evitați să încercați.puteți opta pentru un layout fluid fără tabele pentru design-ul dvs., cu % lățimi care se extind și se contractă pentru a se potrivi cu o setare a browserului vizitatorilor sau puteți lua în considerare căutarea unor soluții de design responsive care vor obține cam același lucru.,

  Google favorizează modele receptiv, care este o veste bună pentru cei care au adoptat-o:

  CITAT: „site-uri care fac uz de web design receptiv și pună corect în aplicare dinamic de servire (care include toate conținut desktop și marcare), în general, nu trebuie să faci nimic.”Google NOV 2017

  mobilul este în creștere – deci dacă dezvoltați un nou site web – trebuie să vă gândiți la cât de mobil este site-ul dvs. de la început.

  am scopul de a păstra lucrurile simple atunci când eu sunt de fapt de codificare lucruri.,

  nu va – nu poate mulțumi pe toată lumea – și întrebarea care-ul dimensiunea este cel mai bun este încă un subiect fierbinte de dezbatere de designeri cu mai mult gradul de utilizare și UX expertiza decât mine.

  ceea Ce știu din experiență că este de o importanță critică pentru tine de a identifica publicul și dispozitivele pe care le folosesc, și de a construi site-ul dvs. (pe ansamblu) pentru a se potrivi cu publicul.

  și că publicul include GOOGLEBOT.

  site-ul dvs. mobil redirecționează către o altă adresă URL & versiunea Site-ului dvs.?

  Ei bine, nu este ideal. Nu a fost niciodată, de fapt.,

  drumul înapoi în ziua – unii oameni folosit TEXT Numai versiuni ale unui site web pentru a produce conținut pentru utilizatorii / browsere care nu acceptă elemente de site-urile lor – într-o încercare (de obicei, în zadar) pentru a face conținutul lor mai accesibil.

  W3C chiar folosit pentru a recomanda eu cred că dacă tot nu a reușit:

  Un text-numai de pagini, cu informații echivalente sau funcționalitate, trebuie să fie furnizate pentru a face un site web conforme cu dispozițiile din această parte, atunci când conformitatea nu poate fi realizat în orice alt mod., Conținutul paginilor exclusiv text se actualizează ori de câte ori pagina principală se modifică. SECȚIUNEA 508

  A fost ÎNTOTDEAUNA ideal pentru a oferi un URL pentru un vizitator pentru accesibilitate scopuri, și nu există nici o diferență, atunci când livrarea mobil sau smartphone conținut dacă sunteți de gândire despre crearea „un mobil” versiune a site-ului tău. Desigur, acest lucru poate fi și mai IMPORTANT dacă Google trece la un prim INDEX mobil.,Google vă poate evalua foarte bine în primul rând pe experiența dvs. mobilă în viitorul apropiat – așa că 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ă livreze o singură adresă URL din cauza provocărilor URL canonice pentru motoarele de căutare – și acesta a fost cazul înainte de implementarea elementului de legătură canonică cu ceva timp în urmă.

  deci, situația ideală este de a oferi un URL în orice moment.,

  Dacă aveți „smartphone” conținut (care vom vedea ca normale web-conținut, cât este în general normală pagină HTML, doar în layout optimizat pentru ecrane mai mici), puteți utiliza rel=canonical pentru a indica versiunea desktop. Acest lucru ne ajută să se concentreze pe versiunea desktop pentru web-căutare. Când utilizatorii vizitează acea versiune desktop cu un smartphone, îi puteți redirecționa către versiunea mobilă. Aceasta funcționează indiferent de structura URL-ului, deci nu este necesar să utilizați subdomenii / subdirectoare pentru site-urile smartphone-mobile., Chiar mai bine, cu toate acestea este de a utiliza același Url-uri și de a arăta versiunea corespunzătoare de conținut fără o redirecționare John Mueller, Google

  Ignorarea Google Recomandări Este de multe ori O Mișcare Inteligentă

  CITAT: Pentru a recapitula, în prezent, accesarea cu crawlere, indexare, și sisteme de clasament, de obicei, uita-te la versiunea desktop a unei pagini de conținut, care pot provoca probleme pentru căutătorilor de telefonie mobilă atunci când această versiune este foarte diferit de versiunea mobilă., Mobile-first indexing î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 mobili – să găsească ceea ce caută. Webmasterii vor vedea o creștere semnificativă a crawling-ului de către smartphone Googlebot, iar fragmentele din rezultate, precum și conținutul de pe paginile cache Google, vor fi din versiunea mobilă a paginilor., Google Nov 2017

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

  • Asigurați-vă că versiunea mobilă a site-ul are, de asemenea, important, conținut de înaltă calitate. Acestea includ text, imagini (cu atribute alt) și videoclipuri-în formatele obișnuite crawlabile și indexabile.,

  • date Structurate este important pentru indexare și de căutare caracteristici pe care utilizatorii de dragoste: ar trebui să fie atât pe versiunea mobilă și desktop a site-ului. Asigurați-vă că adresele URL din datele structurate sunt actualizate la versiunea mobilă din paginile mobile.

  • Metadate ar trebui să fie prezente pe ambele versiuni ale site-ului. Oferă indicii despre conținutul unei pagini pentru indexare și servire., 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 mobil separat Url-uri (m.-dot-uri). Pentru site-urile care utilizează URL-uri mobile separate, păstrați link-ul existent rel=canonical și link rel=elemente alternative între aceste versiuni.

  • verificați link-uri hreflang pe URL-uri mobile separate., Când utilizați link rel = hreflang elements pentru internaționalizare, link-ul între URL-uri mobile și desktop separat. Hreflang de la adresele URL mobile ar trebui să indice către versiunile de altă limbă/regiune de pe alte adrese URL mobile și, în mod similar, să conecteze desktopul cu alte adrese URL de pe desktop folosind elementele de legătură hreflang de acolo.

  • Asigura servere de hosting site-ului au capacitate suficientă pentru a gestiona potențial crescut rata de crawl., Acest lucru nu afectează site-uri care folosesc web design receptiv și dinamic de servire, numai site-uri în cazul în care versiunea de mobil este pe un alt host, cum ar fi m.example.com.

  Utilizatorii se Așteaptă Să Defilați în Jos O Pagină

  Ca primul criteriu presupune, defilare este întotdeauna un element-cheie. În general, utilizatorilor 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ă., Mai mult de cinci ecrane lungi ar putea fi un indiciu pentru tine că ar putea fi prea mult copia pe pagina. Desigur, acest lucru este echilibrat, având în vedere 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 unele tipuri de conținut și conținut.

  atât derularea, cât și vizibilitatea inițială depind în mod evident de dimensiunea ecranului: ecranele mai mari arată mai mult conținut deasupra pliului și necesită mai puțin defilare.

  o schimbare la un site mobil receptiv va duce la 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 mobil este mai mult sau mai puțin pentru a vă asigura că păstrați traficul pe care îl primiți deja, nu neapărat să vă oferiți mai mult trafic gratuit de la Google.dacă nu obțineți deja mult trafic de la vizitatorii mobili – nu sunt sigur dacă această actualizare de la Google va avea un efect vizibil asupra nivelului dvs. de trafic (cel puțin în analiză) de la început – dar în timp – probabil va fi o provocare extrem de importantă pentru a naviga.,

  bara de calitate este ridicată – din nou – de Google și de utilizatorii săi-și dacă doriți să concurați în SERP-uri organice din ce în ce mai competitive, acesta este încă un obstacol pentru întreprinderile mici.pe termen lung – această conversie mobilă nu poate fi decât un lucru bun pentru utilizatorii dvs. – dar pe termen scurt – va fi interesant să vedem ce efect are asupra ratelor de conversie ale întreprinderilor mici – deoarece ratele de conversie prin mobil sunt adesea mai mici decât pe desktop.,Google a spus că acest algoritm prietenos 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 să verificați problemele importante de utilizare mobilă 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 că erorile dispar în timp dacă site-ul dvs. este configurat corect.,”>