Hvad er de bedste skærmstørrelser til responsivt webdesign?

Offentliggørelse: “Denne artikel er personlig opfattelse af forskning baseret på min erfaring i næsten 20 år. Der er ingen tredjepartsannoncering på denne side eller indtægtsgenereret links af enhver art. Eksterne links til tredjepartswebsteder modereres af mig. Ansvarsfraskrivelse. “Shaun Anderson, Hobo

Der er ingen bedste skærmstørrelse at designe til. Websteder skal transformere responsivt og hurtigt ved alle skærmopløsninger på forskellige browsere og platforme. Tilgængelig. Mobilvenlig. Design til dit publikum, først. Design fra 360 × 640 til 1920 × 1080.

• Design til desktop-skærme fra 1024 × 768 til 1920 × 1080
• Design til mobile skærme fra 360 × 640 til 414 × 896
• Design til tablet-skærme fra 601 × 962 til 1280 × 800
• Kontroller Google Analytics og optimer til din målgruppes mest almindelige opløsningsstørrelser
• Design ikke til en skærmstørrelse eller skærmopløsning. Skærmstørrelser og browservinduet varierer blandt besøgende.
• Designet skal være lydhørt og hurtigt. Brug et flydende eller responsivt layout, der omdannes til den aktuelle brugers vinduesstørrelse.
• Overvåg Google Search Console mobilvenlige og brugervenlige advarsler

Det skal stadig se godt ud og fungere godt i alle størrelser, hvorfor jeg * plejede * at anbefale et meget tilgængeligt flydende layout ved hjælp af procentbredder til at kontrollere layout. Anbefalingen er nu en responsiv webstedsskabelon.

De tre hovedkriterier for at optimere et sidelayout til en bestemt skærmstørrelse er:

• Webside Indledende synlighed: Er alt nøgle oplysninger synlige over folden, så brugerne kan se dem uden at rulle? Dette er en afvejning mellem, hvor mange elementer der vises vs. hvor meget detaljer der vises for hver vare.
• Web-læsbarhed: Hvor let er det at læse teksten i forskellige kolonner i betragtning af deres tildelte bredde?
• Æstetik til webside: Hvor god ser din side ud, når elementerne har den rigtige størrelse og placering til denne skærmstørrelse? Stemmer alle elementerne korrekt – det vil sige, er billedtekster umiddelbart ved siden af fotos osv.?

Retningslinjer for brugervenlighed anbefales også, at du overvejer alle tre kriterier i hele størrelsen. Tjek browservinduet fra 360 × 640 til 1920 × 1080 skærmopløsninger.

Din side skal score højt på alle kriterier i hele opløsningsområdet.

Din side skal også fungere jævnt mindre og større størrelser, selvom sådanne ekstremer er mindre vigtige.

Selvom sådanne brugere bestemt burde have adgang til dit websted, er det undertiden et acceptabelt kompromis at give dem et mindre end godt design.

Top ti mest almindelige skærmopløsninger

Besøgsanalyse af næsten en halv million besøgende i de første 6 måneder af 2020:

En responsiv webstedsskabelon er en god indsats

CITAT: “Responsivt webdesign: Serverer den samme HTML-kode på den samme URL uanset brugernes enhed (for eksempel desktop, tablet, mobil, ikke- visuel browser), men kan gengive skærmen forskelligt baseret på skærmstørrelsen. Google anbefaler Responsive Web Design, fordi det er det nemmeste designmønster at implementere og vedligeholde. ” Google Developer Guides, 2020

I nutidens verden bruger mange mennesker håndholdte enheder (tablets og smartphones) til at surfe på nettet og responsivt webstedsdesign ( RWD) er fremkommet som en meget sandsynlig løsning (det debatteres stadig af aficionados) for skærmstørrelsesudfordringer.

Denne metode bevæger sig væk fra at bruge websteder med fast bredde og bruger i stedet medieforespørgsler i CSS-stilark til at skabe et websted, der reagerer i størrelse på de forskellige visningsportar på håndholdte enheder og mindre skærme, som folk bruger.

Så uanset hvilken enhed en person måtte bruge til at se dit websted, er du i stand til at give dem den bedst mulige oplevelse.

Indholdsfortegnelse

Google foretrækker mobilvenlige websteder

Google dikterer ebbe og strøm af onlinehandel og de har netop dikteret, at du skal designe til en tilfredsstillende brugeroplevelse på tværs af flere enheder, HVIS du vil forvente at placere dig højt for konkurrencedygtige søgeord i Google.

CITAT: “Google bruger to forskellige webcrawlere til webcrawling: en mobilcrawler og en desktopcrawler. Hver crawlertype simulerer en bruger, der besøger din side med en enhed af den type. Google bruger en crawlertype (mobil eller desktop) som den primære crawler til dit websted. Alle sider på dit websted, der crawles af Google, gennemgås ved hjælp af den primære crawler. Den primære crawler for alle nye websteder er mobilcrawleren. Derudover genindlæser Google et par sider på dit websted med den anden crawlertype (mobil eller desktop).Dette kaldes den sekundære gennemgang og gøres for at se, hvor godt dit websted fungerer med den anden enhedstype. ” Googles retningslinjer for webmastere, 2020

Siden 21. april 2015, hvor mobilvenligt et websted har påvirket placeringseffektiviteten for websteder på en række forskellige enheder.

Hvis du opretter websteder til små virksomheder – ved du, at de vil have et websted, der klarer sig godt i Googles organiske lister – du ved, at de er interesserede i søgemaskineoptimering:

CITAT: “Jeg har 20 års erfaring med at praktisere professionel SEO. Denne SEO-tutorial er min samling af tip og SEO-bedste praksis, jeg bruger til at rangere websteder på Google.” Shaun Anderson, Hobo 2020

SEO er nu til dels baseret på et godt websted UX, som Google kvantificerer det, i det mindste for mobilbrugere.

CITAT: “Da mobilsøgninger nu overstiger desktop-søgninger, er det vigtigt, at dit websted er mobilvenligt. Googlebot bruger nu en mobilcrawler som standardcrawler til websteder. ” Googles retningslinjer for webmastere, 2020

I øjeblikket – det betyder i det væsentlige nu responsivt webstedsdesign og mobilvenligt, især med Google “gør vores indeks mobil-først “.

Opløsningsstatistikker på skrivebordet på verdensplan maj 2019 – maj 2020

Til reference er her en liste over de aktuelle topskærmopløsninger på verdensplan som optaget for nylig (2020): >

Mest almindelige skrivebordsopløsningsstørrelser over hele verden

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

Mobil skærmopløsningsstatistik over hele verden maj 2019 – maj 2020

Mest almindelige størrelser på mobilskærmopløsningen over hele verden

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

Statistik for tabletskærmopløsning på verdensplan maj 2019 – maj 2020

Mest almindelige tabletskærmopløsningsstørrelser over hele verden

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

Skærmopløsningsstatistikker i USA maj 2019 – maj 2020

Topskærmopløsninger i USA (2020)

Mest almindelige skrivebordsopløsningsstørrelse i USA

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

Statistik for mobil skærmopløsning i USA maj 2019 – maj 2020

Mest almindelige størrelse på mobilskærmopløsning i USA

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

Tablets skærmopløsningsstatistik i USA maj 2019 – maj 2020

Mest almindelige tabletskærmsopløsningsstørrelse i USA

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

Opløsningsstatistikker på skrivebordet i Storbritannien maj 2019 – maj 2020

Topskærmopløsninger i Storbritannien (2020)

Størstedelen af skrivebordsskærmopløsningen i Storbritannien

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

Statistik for mobil skærmopløsning i Storbritannien maj 2019 – maj 2020

Største opløsningsstørrelse på mobilskærm i Storbritannien

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

Tablets skærmopløsningsstatistik i Storbritannien maj 2019 – maj 2020

Mest almindelige tabletskærmopløsningsstørrelser i Storbritannien

• 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 versus tablet markedsandel over hele verden

Desktop vs mobil vs tablet Markedsandel over hele verden

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

* Bemærk – statistikkerne ovenfor er fra en (omend troværdig) kilde, så de kan være skæve på måder, vi muligvis ikke kender. Grafer leveret af http://statcounter.com/.

Hvordan kan jeg designe et sted, der ser ens ud i hver browser & Opløsning?

Du kan ikke.

Det er umuligt at designe et websted, der skal se ens ud i hver browser, platform og skærmopløsning, så undgå at prøve.

Du kan vælge et flydende layout uden tabeller til dit design med% bredder, der udvides og trækker sig sammen for at passe til en besøgende browserindstilling ELLER du kan overveje at undersøge responsive designløsninger, der opnår meget det samme.

Google favoriserer responsivt design, hvilket er en god nyhed for dem, der har vedtaget det:

CITAT: “websteder, der bruger responsivt webdesign og implementerer korrekt dynamisk visning (der inkluderer alt desktopindhold og markering) behøver generelt ikke gøre noget. ” Google NOV 2017

MOBIL ER I RISE – så hvis du udvikler et nyt websted – SKAL du tænke på, hvor mobilvenligt dit websted virkelig er fra starten.

Jeg sigter mod at holde tingene enkle, når jeg faktisk koder ting.

Du vil ikke – kan ikke – behage alle – og spørgsmålet om, hvilken webstørrelse der er bedst, er stadig et varmt emne for debat af designere med mere brugervenlighed og UX-ekspertise end jeg.

Hvad jeg ved af erfaring er, at det er af afgørende betydning for dig at identificere DIT publikum og de enheder, de bruger, og opbygge dit websted (på det hele), der passer til DET publikum.

Og det publikum inkluderer GOOGLEBOT.

Omdirigerer dit mobilwebsite til en anden URL & Version af Dit websted?

Nå, det er ikke ideelt. Det har det faktisk aldrig været.

Langt tilbage på dagen – nogle folk brugte KUN TEKST-versioner af et websted til at producere indhold til brugere / browsere, der ikke understøtter elementer på deres web websteder – i et (normalt forgæves) forsøg på at gøre deres indhold mere tilgængeligt.

W3C plejede endda at anbefale det, tror jeg, hvis alt andet mislykkedes:

En side med kun tekst med tilsvarende information eller funktionalitet skal leveres for at få et websted til at overholde bestemmelserne i denne del, når overholdelse ikke kan opnås på nogen anden måde. Indholdet af de kun tekst-sider skal opdateres, hver gang den primære side ændres. AFSNIT 508

Det har ALTID været ideelt at levere en URL til en besøgende med henblik på tilgængelighed, og der er ingen forskel, når man leverer mobil- eller smartphone-indhold, hvis man er tænker på at oprette “en mobil” version af dit websted. Dette kan selvfølgelig meget vel være EVENTUELT VIGTIGERE, hvis Google flytter til en MOBIL FØRSTE INDEKS.

Google kan meget vel bedømme dig PRIMÆRT på din mobil oplevelse i den nærmeste fremtid – så vi er alle sammen nødt til at være opmærksomme på de store ændringer, som vi meget snart kan se i Googles SERPer.

Når Google er besøgende, er det normalt endnu vigtigere at levere bare en URL på grund af kanoniske URL-udfordringer for søgemaskiner – og dette har været tilfældet før implementeringen af det kanoniske linkelement for nogen tid siden.

Så den ideelle situation er at levere en URL til enhver tid.

Hvis du har “smartphone” -indhold (som vi ser som normalt webindhold, da det generelt er en norma l HTML-side, netop justeret i layout til mindre skærme) kan du bruge rel = canonical til at pege på din desktopversion. Dette hjælper os med at fokusere på desktopversionen til websøgning. Når brugere besøger den stationære version med en smartphone, kan du omdirigere dem til mobilversionen. Dette fungerer uanset URL-strukturen, så du behøver ikke bruge underdomæner / underkataloger til smartphones-mobilwebsites. Endnu bedre er det dog at bruge de samme webadresser og vise den passende version af indholdet uden en omdirigering John Mueller, Google

At ignorere Googles anbefalinger er ofte ikke en smart bevægelse

CITAT: For at resumere ser vores gennemgangs-, indekserings- og rangordningssystemer i øjeblikket typisk på skrivebordet version af en sides indhold, hvilket kan forårsage problemer for mobilsøgere, når den version er meget forskellig fra mobilversionen. Indeksering af mobil først betyder, at vi bruger mobilversionen af indholdet til indeksering og rangordning for bedre at hjælpe vores – primært mobile – brugere med at finde det, de leder efter. Webmastere vil se markant øget gennemsøgning af Smartphone Googlebot, og uddragene i resultaterne såvel som indholdet på Googles cache-sider kommer fra mobilversionen af siderne.Google Nov 2017

Google tilbyder følgende tip til at kontrollere, at dit websted er forberedt til det første mobilindeks, men i det væsentlige, hvis du bruger et responsivt webdesign skabelon til dit websted, skal du have minimale problemer med denne ændring:

• Sørg for, at mobilversionen af webstedet også har det vigtige indhold af høj kvalitet. Dette inkluderer tekst, billeder (med alt-attributter) og videoer – i de sædvanlige crawlbare og indekserbare formater.

• Strukturerede data er vigtige for indekserings- og søgefunktioner, som brugerne elsker: det skal være både på mobil- og desktopversionen af webstedet. Sørg for, at webadresser i de strukturerede data opdateres til mobilversionen på mobilsiderne.

• Metadata skal være til stede i begge versioner af webstedet. Det giver tip om indholdet på en side til indeksering og visning. Sørg for eksempel for, at titler og metabeskrivelser er ækvivalente på tværs af begge versioner af alle sider på webstedet.

• Ingen ændringer er nødvendige for sammenkædning med separate mobile URLer (m.-dot-sites). For websteder, der bruger separate mobil-URLer, skal du holde det eksisterende link rel = canonical og link rel = alternative elementer mellem disse versioner.

• Kontroller hreflang-links på separate mobile URLer. Når du bruger link rel = hreflang-elementer til internationalisering, skal du linke mellem mobil- og desktop-URLer separat. Dine mobile URLers hreflang skal pege på de andre sprog / regionversioner på andre mobile URLer og ligeledes linke desktop til andre desktop URLer ved hjælp af hreflang-linkelementer der.

• Sørg for, at serverne, der er vært for webstedet, har tilstrækkelig kapacitet til at håndtere potentielt øget gennemgangshastighed. Dette påvirker ikke websteder, der bruger responsivt webdesign og dynamisk visning, kun websteder, hvor mobilversionen er på en separat vært, såsom m.example.com.

Brugere forventer at rulle ned på en side

Som det første kriterium indebærer, er rulning altid en vigtig overvejelse. Brugere kunne generelt ikke lide at rulle, hvis de ikke har brug for det – selvom det gennem årene er ændret.

Så når du designer, skal du overveje, hvor meget brugere kan se, hvis de kun ruller en skærm fuld eller to. Mere end fem skærmbilleder lange kan være en indikation for dig, at der muligvis er for meget kopi på siden. Dette er naturligvis afbalanceret med den opfattelse, at nogle artikler er beregnet til at være dybdegående informationsstykker, og brugerne forventer at vente lidt længere på at se noget sideindhold og indholdstyper.

Både rulning og initial synlighed afhænger naturligvis af skærmstørrelse: Større skærme viser mere indhold over folden og kræver mindre rulning.

Vil en ændring til et responsivt mobilwebsite resultere i meget mere trafik fra Google?

Ikke nødvendigvis, men måske.

Så mange ting at gøre med Google-optimering – at have et mobilvenligt websted er mere eller mindre for at sikre, at du BEHOLDER den trafik, du allerede får, ikke nødvendigvis giver dig mere gratis trafik fra Google.

Hvis du ikke allerede får meget trafik fra mobilbesøgende – er jeg ikke sikker på, om denne opdatering fra Google vil have en mærkbar effekt på dine trafikniveauer (i det mindste i analytics ) fra starten – men over tid – vil det sandsynligvis være en ekstremt vigtig udfordring at navigere.

Qual it-bar hæves – igen – af Google og dets brugere – og hvis du vil konkurrere i stadig mere konkurrencedygtige organiske SERPer, er dette endnu en hindring for små virksomheder at komme over.

På lang sigt – denne mobilkonvertering kan kun være en god ting for dine brugere – men på kort sigt – vil det være interessant at se, hvilken effekt det har på små virksomheders konverteringsfrekvenser – da konverteringsfrekvenser via mobil ofte er mindre end på desktop.

Google har sagt, at denne mobilvenlige algoritme vil have større indflydelse på SERPer end både Google Penguin og Google Panda-algoritmer – og vi finder ud af mere, når tiden går.

Hvordan For at kontrollere vigtige problemer med mobilanvendelighed på dit websted

Google Search Console

Du bør kunne spore mobilfejl i Google Search Console (AKA Google Webmaster Tools) og se fejl forsvinde over tid, hvis dit websted er konfigureret korrekt.

Værktøj til at teste dit websted for mobilvenlighed

• Søgningskonsol Url-inspektionsværktøj
• Pagespeed Insights
• Think With Google
• Mobilvenlig test

Sådan gør du dit websted mobilvenligt

Del 1 – PageSpeed Insights, mobilvenlig test og mobil brugbarhed

Del 2 – Viewports, zoom og plugins

Del 3 – Tryk på mål, margener og skriftstørrelser

Del 4 – Omdirigeringer

Webudviklere skal finde mine andre nyere post nyttigt nu, at webstedshastighed er en placeringsfaktor i Google:

CITAT: “Den mobile version af et websted skal ideelt indlæses på under 3 sekunder, og hurtigere jo bedre. ET MEGET SLOW SITE kan være en NEGATIV Rankingfaktor (bekræftet af Google). Der er ingen indstillet tærskel eller hastighedsscore, der skal opfyldes st for at gøre din side så hurtig som muligt. ” Shaun Anderson, Hobo 2020

Ansvarsfraskrivelse

Ansvarsfraskrivelse: “Mens jeg har gjort alt for at sikre, at de oplysninger, jeg har givet, er korrekte. Det er ikke rådgivning .; Jeg kan ikke påtage mig noget ansvar eller erstatningsansvar for fejl eller mangler. Forfatteren garanterer ikke tredjepartswebsteder eller nogen tredjepartstjeneste. Besøg tredjepartswebsteder på egen risiko. Jeg har ikke direkte partnerskab med Google eller nogen anden tredjepart. Dette websted bruger kun cookies til analyse og grundlæggende webstedsfunktioner. Denne artikel udgør ikke juridisk rådgivning. Forfatteren påtager sig intet ansvar, der måtte opstå i form af adgang til de data, der præsenteres på dette websted. Links til interne sider fremmer mit eget indhold og mine tjenester. ” Shaun Anderson, Hobo