Hva er de beste skjermstørrelsene for responsivt webdesign?

Opplysning: «Denne artikkelen er en personlig oppfatning av forskning basert på min erfaring fra nesten 20 år. Det er ingen tredjepartsannonsering på denne siden eller inntektsgenererte lenker av noe slag. Eksterne lenker til tredjeparts nettsteder er moderert av meg. Ansvarsfraskrivelse. «Shaun Anderson, Hobo

Det er ingen beste skjermstørrelse å designe for. Nettsteder bør transformere responsivt og raskt i alle skjermoppløsninger på forskjellige nettlesere og plattformer. Tilgjengelig. Mobilvennlig. Design for publikum, først. Design fra 360 × 640 til 1920 × 1080.

• Design for stasjonære skjermer fra 1024 × 768 til 1920 × 1080
• Design for mobile skjermer fra 360 × 640 til 414 × 896
• Design for nettbrettskjermbilder fra 601 × 962 til 1280 × 800
• Sjekk Google Analytics og optimaliser for målgruppens vanligste oppløsningsstørrelser
• Ikke design for en skjermstørrelse eller skjermoppløsning. Skjermstørrelser og nettleservinduestatus varierer blant besøkende.
• Designet skal være responsivt og raskt. Bruk et flytende eller responsivt oppsett som forvandler seg til den nåværende brukerens vindusstørrelse.
• Overvåk Google Search Console mobilvennlige og brukervennlige varsler

Det skal fortsatt se bra ut og fungere vel i alle størrelser, og det er grunnen til at jeg * pleide * å anbefale et svært tilgjengelig flytende oppsett ved bruk av prosentvise bredder for å kontrollere oppsettet. Nå er anbefalingen en responsiv nettsidemal.

De tre hovedkriteriene for å optimalisere et sidelayout for en viss skjermstørrelse er:

• Nettside Innledende synlighet: Er alt viktig informasjon synlig over brettet slik at brukerne kan se den uten å bla? Dette er en avveining mellom hvor mange elementer som vises vs. hvor mye detaljer som vises for hvert element.
• Lesbarhet på websiden: Hvor enkelt er det å lese teksten i forskjellige kolonner, gitt deres tildelte bredde?
• Estetikk på websiden: Hvor bra ser siden din ut når elementene har riktig størrelse og plassering for denne skjermstørrelsen? Stemmer alle elementene riktig – det vil si er bildetekster rett ved siden av bildene osv.?

Retningslinjer for brukervennlighet anbefales også at du vurderer alle de tre kriteriene i hele størrelsen. Sjekk nettleservinduet fra 360 × 640 til 1920 × 1080 skjermoppløsninger.

Siden din skal score høyt på alle kriterier i hele oppløsningsområdet.

Siden din skal også fungere jevnt mindre og større størrelser, selv om slike ekstremer er mindre viktige.

Selv om slike brukere absolutt burde ha tilgang til nettstedet ditt, er det noen ganger et akseptabelt kompromiss å gi dem en mindre enn flott design.

Topp ti mest vanlige skjermoppløsninger

Besøksanalyse av nesten en halv million besøkende de første 6 månedene i 2020:

En responsiv nettstedmal er en god innsats

SITAT: «Responsivt nettdesign: Serverer den samme HTML-koden på samme URL, uavhengig av brukernes enhet (for eksempel skrivebord, nettbrett, mobil, ikke- visuell nettleser), men kan gjengi skjermen annerledes basert på skjermstørrelsen. Google anbefaler Responsive Web Design fordi det er det enkleste designmønsteret å implementere og vedlikeholde. » Google Developer Guides, 2020

I dagens verden bruker mange mennesker håndholdte enheter (nettbrett og smarttelefoner) for å surfe på nettet og responsivt nettstedsdesign ( RWD) har dukket opp som en svært sannsynlig løsning (det diskuteres fortsatt av entusiaster) for utfordringer med skjermstørrelse.

Denne metoden går bort fra å bruke nettsteder med fast bredde og bruker i stedet Media Queries i CSS-stilark for å lage et nettsted som responderer i størrelse på de forskjellige visningsportene på håndholdte enheter og mindre skjermer som folk bruker.

Så uansett hvilken enhet en person bruker for å se nettstedet ditt, kan du gi dem den fulle opplevelsen mulig.

Innholdsfortegnelse

Google foretrekker mobilvennlige nettsteder

Google dikterer ebb og flyt av online handel og de har nettopp diktert at du må designe for en tilfredsstillende brukeropplevelse på flere enheter HVIS du vil forvente å rangere høyt for konkurransedyktige søkeord i Google.

SITAT: «Google bruker to forskjellige crawlere for gjennomgang av nettsteder: en mobil-crawler og en desktop-crawler. Hver crawler-type simulerer en bruker som besøker siden din med en enhet av den typen. Google bruker én crawler-type (mobil eller desktop) som den viktigste crawler for nettstedet ditt. Alle sider på nettstedet ditt som blir gjennomsøkt av Google, blir gjennomsøkt ved hjelp av den primære søkeroboten. Den primære søkeroboten for alle nye nettsteder er mobilroboten. I tillegg gjennomsøker Google noen få sider på nettstedet ditt med den andre typen crawler (mobil eller stasjonær).Dette kalles sekundær gjennomsøking, og er gjort for å se hvor godt nettstedet ditt fungerer med den andre enhetstypen. » Retningslinjer for Googles nettredaktører, 2020

Siden 21. april 2015, globalt, hvor mobilvennlig et nettsted har påvirket rangeringsytelsen for nettsteder på en rekke enheter.

Hvis du lager nettsteder for små bedrifter – vet du at de vil ha et nettsted som vil fungere bra i Googles organiske oppføringer – du vet at de er interessert i søkemotoroptimalisering:

Sitat: «Jeg har 20 års erfaring med å praktisere profesjonell SEO. Denne SEO-opplæringen er min samling av tips og beste SEO-fremgangsmåter jeg bruker for å rangere nettsteder på Google.» Shaun Anderson, Hobo 2020

SEO er nå delvis basert på et godt nettsted UX, slik Google kvantifiserer det, i det minste for mobilbrukere.

Sitat: «Når mobilsøk nå overstiger stasjonære søk, er det viktig at nettstedet ditt er mobilvennlig. Googlebot bruker nå en mobil-crawler som standard-crawler for nettsteder. ” Retningslinjer for Googles nettredaktører, 2020

For øyeblikket – det betyr egentlig nå responsivt nettsteddesign og mobilvennlig, spesielt med Google «som gjør indeksen vår mobil først «.

Skjermoppløsningsstatistikker på skrivebordet over hele verden Mai 2019 – Mai 2020

For referanse, her er en liste over gjeldende toppskjermoppløsninger over hele verden som nylig er registrert (2020):

Vanligste skjermoppløsningsstørrelser på skrivebordet 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 skjermoppløsningsstatistikk over hele verden Mai 2019 – Mai 2020

Vanligste mobilskjermoppløsningsstørrelser 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%

Skjermoppløsningsstatistikker for nettbrett over hele mai 2019 – mai 2020

De vanligste størrelsene på skjermoppløsningen på nettbrettet 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%

Statistikk for skjermoppløsning på skrivebordet i USA Mai 2019 – Mai 2020

Toppskjermoppløsninger i USA (2020)

Vanligste skrivebordsskjermopplø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%

Oppløsningsstatistikk for mobilskjerm i USA mai 2019 – mai 2020

Vanligste størrelse på mobilskjermopplø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%

Oppløsningsstatistikk for nettbrett i USA Mai 2019 – Mai 2020

Vanligste skjermoppløsningsstørrelse for nettbrett 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%

Oppløsningsstatistikker for skrivebordet i Storbritannia Mai 2019 – Mai 2020

Toppskjermoppløsninger i Storbritannia (2020)

Vanligste størrelse på stasjonær skjermoppløsning i Storbritannia

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

Oppløsningsstatistikk for mobilskjerm i Storbritannia mai 2019 – mai 2020

Vanligste størrelse på mobilskjermoppløsning i Storbritannia

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

Oppløsningsstatistikker for nettbrett i Storbritannia mai 2019 – mai 2020

Vanligste skjermoppløsningsstørrelser for nettbrett i Storbritannia

• 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 Mobile vs Tablet Market Share Worldwide

Desktop vs Mobile vs Tablet Market Share Worldwide

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

* Merk – statistikken ovenfor er fra en (om enn troverdig) kilde, så den kan være skjev på måter vi kanskje ikke kjenner til. Grafer levert av http://statcounter.com/.

Hvordan kan jeg designe et nettsted som ser likt ut i hver nettleser & Oppløsning?

Du kan ikke.

Det er umulig å designe et nettsted for å se likt ut i alle nettlesere, plattformer og skjermoppløsninger, så unngå å prøve.

Du kan velge et flytende oppsett uten tabeller for designet ditt, med% bredder som utvides og trekkes sammen for å passe til en innstilling for besøkende, ELLER du kan vurdere å se på responsive designløsninger som vil oppnå omtrent det samme.

Google favoriserer responsive design, som er gode nyheter for de som har vedtatt det:

QUOTE: «nettsteder som bruker responsivt webdesign og implementerer riktig dynamisk visning (som inkluderer alt skrivebordsinnhold og markering) trenger generelt ikke å gjøre noe. » Google NOV 2017

MOBIL ER I RISE – så hvis du utvikler et nytt nettsted – MÅ du tenke på hvor mobilvennlig nettstedet ditt egentlig er fra starten.

Jeg tar sikte på å holde ting enkle når jeg faktisk koder ting.

Du vil ikke – kan ikke – vær så snill alle – og spørsmålet om hvilken nettstedstørrelse som er best er fortsatt et populært tema for debatt av designere med mer brukervennlighet og UX-ekspertise enn jeg.

Det jeg vet fra erfaring er at det er av avgjørende betydning for deg å identifisere DITT publikum og enhetene de bruker, og bygge nettstedet ditt (på helheten) for å passe DETTE publikum.

Og det publikummet inkluderer GOOGLEBOT.

Viderekobler mobilnettstedet ditt til en annen nettadresse & Versjon av Nettstedet ditt?

Vel, det er ikke ideelt. Det har det aldri vært.

Helt tilbake på dagen – noen mennesker brukte KUN TEKST-versjoner av et nettsted for å produsere innhold for brukere / nettlesere som ikke støttet elementer på nettet nettsteder – i et (vanligvis forgjeves) forsøk på å gjøre innholdet deres mer tilgjengelig.

W3C pleide til og med å anbefale det, jeg tror at hvis alt annet mislyktes:

En tekstsiden side, med tilsvarende informasjon eller funksjonalitet, skal leveres for å få et nettsted til å overholde bestemmelsene i denne delen, når samsvar ikke kan oppnås på annen måte. Innholdet på tekstsidene skal oppdateres når den primære siden endres. AVSNITT 508

Det har ALLTID vært ideelt å levere en URL til en besøkende for tilgjengelighetsformål, og det er ingen forskjell når du leverer mobil- eller smarttelefoninnhold hvis du er tenker å lage «en mobil» -versjon av nettstedet ditt. Dette kan selvfølgelig godt være ENDRE VIKTIGERE hvis Google flytter til et MOBILT FØRSTE INDEKS.

Google kan veldig godt rangere deg PRIMÆRT på mobilen din opplevelse i nær fremtid – så vi trenger alle å være klar over de store endringene vi kan se veldig snart i Googles SERPer.

Når Google er «besøkende», er det vanligvis enda viktigere å levere bare en URL på grunn av kanoniske URL-utfordringer for søkemotorer – og dette har vært tilfelle før implementeringen av det kanoniske koblingselementet for en tid tilbake.

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

Hvis du har «smarttelefon» -innhold (som vi ser på som vanlig nettinnhold, da det generelt er en norma l HTML-side, bare justert i layout for mindre skjermer), kan du bruke rel = canonical til å peke på din stasjonære versjon. Dette hjelper oss å fokusere på desktopversjonen for nettsøk. Når brukere besøker den stasjonære versjonen med en smarttelefon, kan du omdirigere dem til mobilversjonen. Dette fungerer uavhengig av URL-struktur, så du trenger ikke å bruke underdomener / underkataloger for smarttelefon-mobile nettsteder. Enda bedre er det imidlertid å bruke de samme nettadressene og å vise den riktige versjonen av innholdet uten en omdirigering John Mueller, Google

Å ignorere Googles anbefalinger er ofte ikke et smart trekk

SITAT: For å oppsummere ser for tiden våre gjennomsøkings-, indekserings- og rangeringssystemer vanligvis på skrivebordet versjon av innholdet på en side, noe som kan forårsake problemer for mobilsøkere når den versjonen er veldig forskjellig fra mobilversjonen. Indeksering av mobil først betyr at vi bruker mobilversjonen av innholdet til indeksering og rangering, for bedre å hjelpe våre – først og fremst mobile – brukere å finne det de leter etter. Nettredaktører vil se betydelig økt gjennomsøking av Smartphone Googlebot, og kodebitene i resultatene, så vel som innholdet på Googles cache-sider, kommer fra mobilversjonen av sidene.Google nov 2017

Google tilbyr følgende tips for å sjekke at nettstedet ditt er forberedt på den første indeksen for mobil, men egentlig hvis du bruker et responsivt webdesign mal for nettstedet ditt, bør du ha minimale problemer med denne endringen:

• Sørg for at mobilversjonen av nettstedet også har det viktige , innhold av høy kvalitet. Dette inkluderer tekst, bilder (med alt-attributter) og videoer – i de vanlige gjennomsøkbare og indekserbare formatene.

• Strukturerte data er viktig for indekserings- og søkefunksjoner som brukerne elsker: det skal være både på mobil- og desktopversjonen av nettstedet. Sørg for at nettadresser i de strukturerte dataene oppdateres til mobilversjonen på mobilsidene.

• Metadata skal være tilstede i begge versjoner av nettstedet. Det gir hint om innholdet på en side for indeksering og visning. Forsikre deg for eksempel om at titler og metabeskrivelser er likeverdige i begge versjoner av alle sidene på nettstedet.

• Ingen endringer er nødvendige for interlinking med separate mobile URL-er (m.-dot-nettsteder). For nettsteder som bruker separate mobil-URL-er, beholder du den eksisterende lenken rel = canonical og link rel = alternative elementer mellom disse versjonene.

• Sjekk hreflang-koblinger på separate mobile URL-er. Når du bruker link rel = hreflang-elementer for internasjonalisering, kobler du mellom mobile og stasjonære URL-adresser hver for seg. Mobil-URL-ene deres hreflang skal peke på andre språk / regionversjoner på andre mobile URL-er, og på lignende måte knytte skrivebordet til andre desktop-URL-er ved hjelp av hreflang-koblingselementer der.

• Forsikre deg om at serverne som er vert for nettstedet har nok kapasitet til å håndtere potensielt økt gjennomsøkningshastighet. Dette påvirker ikke nettsteder som bruker responsivt webdesign og dynamisk visning, bare nettsteder der mobilversjonen er på en egen vert, for eksempel m.example.com.

Brukere forventer å rulle ned en side

Som det første kriteriet tilsier, er det alltid viktig å rulle. Brukere likte generelt ikke å bla hvis de ikke trenger det – selv om det i løpet av årene har blitt endret.

Så når du designer, bør du vurdere hvor mye brukere kan se om de bare blar skjermen full eller to. Mer enn fem skjermer lange kan være en indikasjon på at det kan være for mye kopi på siden. Dette er selvfølgelig balansert med synspunktet om at noen artikler er ment å være en grundig informasjonsbit, og brukere forventer å vente litt lenger på å se noe sideinnhold og innholdstyper.

Både rulling og innledende synligheten avhenger åpenbart av skjermstørrelsen: Større skjermer viser mer innhold over folden og krever mindre rulling.

Vil en endring til et responsivt mobilnettsted resultere i mye mer trafikk fra Google?

Ikke nødvendigvis, men kanskje.

Så mange ting å gjøre med Googles optimalisering – å ha et mobilvennlig nettsted er mer eller mindre for å sikre at du BEHOLDER trafikken du allerede får, ikke nødvendigvis gi deg noe mer gratis trafikk fra Google.

Hvis du ikke allerede får mye trafikk fra mobilbesøkende – er jeg ikke sikker på om denne oppdateringen fra Google vil ha en merkbar effekt på trafikknivået ditt (i analyser i det minste ) i begynnelsen – men over tid – vil det sannsynligvis være en ekstremt viktig utfordring å navigere.

Qual det økes – igjen – av Google og dets brukere – og hvis du vil konkurrere i stadig mer konkurransedyktige organiske SERP-er, er dette enda et hinder for små bedrifter å komme seg over.

På lang sikt – denne mobile konverteringen kan bare være en god ting for brukerne dine – men på kort sikt – det vil være interessant å se hvilken effekt det har på konverteringsfrekvenser for små bedrifter – da konverteringsfrekvensen via mobil ofte er mindre enn på skrivebordet.

Google har sagt at denne mobilvennlige algoritmen vil ha større innvirkning på SERP enn både Google Penguin og Google Panda-algoritmer – og vi vil finne ut mer etter hvert.

Hvordan For å se etter viktige problemer med mobilbruk på nettstedet ditt

Google Search Console

Du bør kunne spore mobilfeil i Google Search Console (AKA Google Webmaster Tools) og se feil forsvinne over tid hvis nettstedet ditt er konfigurert riktig.

Verktøy for å teste nettstedet ditt for mobilvennlighet

• Search Console Url Inspection Tool
• Pagespeed Insights
• Think With Google
• Mobilvennlig test

Hvordan gjøre nettstedet ditt mobilvennlig

Del 1 – PageSpeed Insights, mobilvennlig test og mobilbrukbarhet

Del 2 – visningsport, zoom og plugins

Del 3 – Trykk mål, marginer og skriftstørrelser

Del 4 – Viderekoblinger

Nettutviklere bør finne mine andre nyere innlegg nyttig nå når hastighet på nettstedet er en rangfaktor i Google:

SITAT: «Mobilversjonen av et nettsted bør ideelt sett lastes på under 3 sekunder og raskere jo bedre. ET SVÆRT TREGT STED kan være en NEGATIV Rangeringsfaktor (bekreftet av Google). Det er ingen angitt terskel eller hastighetspoeng å oppfylle, ju st for å gjøre siden din så rask som mulig. ” Shaun Anderson, Hobo 2020

Ansvarsfraskrivelse

Ansvarsfraskrivelse: «Mens jeg har gjorde alt for å sikre at informasjonen jeg har oppgitt er korrekt, Det er ikke råd .; Jeg kan ikke påta meg noe ansvar eller erstatningsansvar for feil eller mangler. Forfatteren garanterer ikke for tredjeparts nettsteder eller noen tredjepartstjeneste. Besøk tredjeparts nettsteder på egen risiko. Jeg er ikke direkte partner med Google eller noen annen tredjepart. Dette nettstedet bruker informasjonskapsler kun for analyse og grunnleggende nettstedsfunksjoner. Denne artikkelen utgjør ikke juridisk rådgivning. Forfatteren godtar ikke noe ansvar som kan oppstå fra tilgang til dataene som presenteres på dette nettstedet. Koblinger til interne sider fremmer mitt eget innhold og tjenester. ” Shaun Anderson, Hobo