Avsløring: «Denne artikkelen er personlige oppfatning av forskning basert på min erfaring på nesten 20 år. Det er ingen tredjeparts annonsering på denne siden eller monetised koblinger av noe slag. Eksterne lenker til tredjeparts nettsteder som er moderert av meg. Ansvarsfraskrivelse. «Shaun Anderson, Hobo

Det er ingen beste skjermen størrelse til å designe for. Nettsteder bør forvandle responsively og rask på alle skjermoppløsninger på forskjellige nettlesere og plattformer., Tilgjengelig. Mobil-vennlig. Design for publikum først. Design fra 360 x 640 gjennom 1920×1080.

  • Design for stasjonære skjermer fra 1024×768 gjennom 1920×1080
  • Design for mobile skjermer fra 360 x 640 gjennom 414×896
  • Design for nettbrett-skjermer fra 601×962 gjennom 1280×800
  • Sjekk Google Analytics og optimalisere for målgruppen er mest vanlig oppløsning størrelser
  • ikke design for en skjermstørrelse og skjermoppløsning. Skjermstørrelser og nettleser-vinduet staten variere blant de besøkende.
  • Design bør være responsiv og rask., Bruk en væske eller responsive layout som forvandler til den gjeldende brukeren vindu størrelse.
  • Skjerm Google-Søk, Konsoll, mobil-vennlig og brukervennlighet varsler

Det bør likevel se bra ut og fungerer godt i alle størrelser, noe som er grunnen til at jeg *brukes til å* anbefale en svært tilgjengelig flytende layout ved hjelp av prosent bredder til å styre layout. Nå anbefaling er en responsiv nettside mal.,

De tre viktigste kriteriene for å optimalisere en side layout for en bestemt skjermstørrelse er:

  • Web-Side Innledende synlighet: Er all viktig informasjon som er synlig over fold, slik at brukerne kan se den uten rulling? Dette er en tradeoff mellom hvor mange elementer er vist vs. hvor mye detalj er vist for hvert element.
  • Web-Side Lesbarhet: Hvor lett er det å lese tekst i ulike kolonner, gitt sin tildelte bredde?
  • Web-Side Estetikk: Hvordan hjelper din side ser ut når elementene er i riktig størrelse og plassering for denne skjermstørrelsen?, Gjør alle elementene linje opp på riktig måte — det er, er bildetekster umiddelbart ved siden av bilder, etc.?

Brukervennlighet retningslinjer anbefaler også at du tar hensyn til alle tre kriterier på komplett utvalg av størrelser. Sjekk nettleservinduet fra 360 x 640 1920×1080 skjermoppløsninger.

siden Din, skal score høyt på alle kriterier i hele oppløsning utvalg.

Din side bør også fungere i enda mindre og større størrelser, men slike ytterligheter er mindre viktig.,

Selv om slike brukere bør absolutt være i stand til å få tilgang til nettstedet ditt, og gir dem en mindre-enn-flott design er noen ganger et akseptabelt kompromiss.,

Ti Mest Vanlige Skjermoppløsninger

Besøkende analyse av nesten en halv million besøkende i løpet av de første 6 måneder av 2020:

En Responsiv Nettside Mal Er En God Innsats

SITAT: «Responsive Web Design: Tjener det samme HTML-koden på den samme URL-uavhengig av brukernes enheter (for eksempel datamaskiner, nettbrett, mobil, ikke-visuelle nettleseren), men kan gjengi vise forskjellig basert på skjermstørrelsen. Google anbefaler Responsiv Web Design fordi det er den enkleste design mønster for å implementere og vedlikeholde.,»Google Utvikler Guider, 2020

I dagens verden, mange mennesker ved å bruke håndholdte enheter (nettbrett og smarttelefoner) for å surfe på nettet og responsive web design (RWD) har dukket opp som en svært sannsynlig løsning (det er fortsatt diskutert av aficionados) størrelsen på skjermen utfordringer.

Denne metoden beveger seg bort fra ved bruk av fast-bredde nettsteder og i stedet bruker Media Queries i CSS stil-ark for å lage en hjemmeside som reagerer på størrelsen til de ulike viewports av håndholdte enheter og mindre skjermer som folk bruker.,

Så hva enheten en person som kan være med å vise din nettside du er i stand til å gi dem best mulig opplevelse.

Innholdsfortegnelse

Google Foretrekker mobilvennlige Nettsteder

Google tilsier flo og fjære av online handel og de har bare diktert du trenger for å designe for en tilfredsstillende brukeropplevelse på tvers av flere enheter HVIS du vil forvente å få en høy rangering for konkurransedyktige søkeord i Google.

SITAT: «Google-bruker to forskjellige robotene for gjennomgang nettsteder: en mobil crawler og en desktop-søkeroboten., Hver crawler type simulerer en bruker besøker siden din med en enhet av denne typen. Google bruker en crawler type (mobile og stasjonære) som det primære crawler for nettstedet ditt. Alle sider på nettstedet ditt som er gjennomgått av Google er gjennomsøkt ved hjelp av den primære crawler. Den primære crawler for alle nye nettsteder er den mobile crawler. I tillegg, Google recrawls et par sider på nettstedet ditt med andre crawler type (mobile og stasjonære). Dette kalles sekundær gjennomgang, og er gjort for å se hvor godt nettstedet ditt fungerer med den andre enheten, skriver du.,»Googles Retningslinjer for Nettredaktører, 2020

Siden 21. April 2015, globalt, hvordan mobil-vennlige et nettsted har påvirket rangeringen ytelse for nettsteder over en rekke enheter.

Hvis du gjør nettsteder for små bedrifter – vet du at de vil ha en nettside som vil fungere godt i Googles organiske oppføringene – du vet at de er interessert i søkemotoroptimalisering:

SITAT: «jeg har 20 års erfaring med å praktisere profesjonell SEO. Dette SEO opplæringen er min samling av tips og SEO best practices jeg bruke til å rangere nettsteder i Google.,»Shaun Anderson, Hobo 2020

SEO er nå basert delvis på god nettside UX, som Google kvantifiserer det, i hvert fall for mobile brukere.

SITAT: «Med mobile søker nå overstiger skrivebordet søker, er det viktig at nettstedet ditt være mobil-vennlig. Googlebot bruker nå en mobil crawler som standard crawler for nettsteder.»Googles Retningslinjer for Nettredaktører, 2020

I øyeblikket – som egentlig betyr nå responsiv web design og mobil-vennlig, spesielt med Google «noe som gjør vår indeks mobil først».,

Desktop Skjermen Oppløsning Statistikken over hele Verden Kan 2019 – 2020 Kan

For referanse, her er en liste over gjeldende topp skjermoppløsninger verden over som er tatt opp nylig (2020):

de Fleste Vanlige Desktop Skjermen Oppløsning Stø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%

Mobile skjermoppløsning Statistikken over hele Verden Kan 2019 – 2020 Kan

de Fleste Vanlige Mobile skjermoppløsning Størrelser over hele Verden

  • 360 x 640 – 17.91%
  • 375×667 – 7.61%
  • 414×896 – 6.52%
  • 360 x 780 – i 5,56%
  • 360×760 – 5.06%
  • 414×736 – 3.74%

Tablet skjermoppløsning Statistikken over hele Verden Kan 2019 – 2020 Kan

de Fleste Vanlige Nettbrett skjermoppløsning Størrelser over hele Verden

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

Desktop Skjermen Oppløsning Statistikk i USA Kan 2019 – 2020 Kan

Top Skjermoppløsninger i USA (2020)

de Fleste Vanlige Desktop Skjermen Oppløsning Stø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%

Mobile skjermoppløsning Statistikk i USA Kan 2019 – 2020 Kan

de Fleste Vanlige Mobile skjermoppløsning Størrelse i Usa

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

Tablet skjermoppløsning Statistikk i USA Kan 2019 – 2020 Kan

de Fleste vanlige Nettbrett-Skjerm Oppløsning, Størrelse i Usa

  • 768 x 1024 – 54.,68%
  • 800×1280 – 5,75 prosent
  • 1280×800 – 5.73%
  • 601×962 – 5.41%
  • 1024×1366 – 3.06%
  • 600×1024 -2.57%

Desktop Skjermen Oppløsning Statistikk i NORGE Kan 2019 – 2020 Kan

Top Skjermoppløsninger i STORBRITANNIA (2020)

de Fleste Vanlige Desktop Skjermen Oppløsning Størrelse 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%

Mobile skjermoppløsning Statistikk i NORGE Kan 2019 – 2020 Kan

de Fleste Vanlige Mobile skjermoppløsning Størrelse i Storbritannia

  • 375×667 – 16.66%
  • 414×816 – 14.11%
  • 360 x 640 – 9.95%
  • 375×812 – 8.55%
  • 360×740 – 5.67%
  • 360 x 780 – 5.39%
  • 414×736 – 4.75%

Tablet skjermoppløsning Statistikk i NORGE Kan 2019 – 2020 Kan

de Fleste Vanlige Nettbrett skjermoppløsning Størrelser i Storbritannia

  • 768 x 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 Nettbrett markedsandeler over hele Verden

Desktop vs Mobil vs Nettbrett markedsandeler over hele Verden

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

*Merk – statistikken ovenfor er fra en (riktignok troverdig) kilde, så kan være skjevt i måter vi kan ikke vite. Grafer er levert av http://statcounter.com/.,

Hvordan Kan jeg Designe Et Nettsted Som Ser likt ut I Alle nettlesere & Oppløsning?

Du kan ikke det.

Det er umulig å lage en nettside for å se det samme i hver nettleser, plattform, og skjermoppløsning, så unngå å prøve.

Du kan velge en flytende layout uten tabeller for design, med % bredder, og som utvider og kontrakt for å passe en besøkende nettleseren, ELLER du kan vurdere å se på responsiv design løsninger som vil oppnå mye av det samme.,

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

SITAT: «nettsteder som gjør bruk av responsiv web design og riktig implementere dynamisk servering (som inkluderer alle på skrivebordet innhold og formatering) vanligvis ikke har å gjøre noe.»Google NOV 2017

– MOBIL ER PÅ vei oppover, så hvis utvikle en ny nettside – du MÅ tenke på hvordan mobile vennlig ditt nettsted virkelig er fra start.

jeg tar sikte på å holde ting enkelt når jeg er faktisk koding ting.,

vil Du ikke – ikke – ta alle – og de spørsmål som nettstedet størrelse er best er fortsatt et hett tema for debatt av designere med mer brukervennlighet og UX kompetanse enn Jeg.

Det jeg vet fra erfaring er at det er av avgjørende betydning for å identifisere målgruppen og de enheter de bruker, og bygge ditt nettsted (på hele) for å passe i den aktuelle målgruppen.

Og at publikum har GOOGLEBOT.

Gjør Ditt Mobile Nettsted Omdirigere til en Annen URL & Versjonen Av Nettstedet?

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

helt tilbake i dag – noen folk brukte BARE TEKST versjoner av et nettsted for å produsere innhold for brukere/lesere som ikke støtter elementer i deres nettsteder – i en (vanligvis fåfengt) forsøk på å gjøre innholdet mer tilgjengelig.

W3C selv som brukes for å anbefale det på det jeg tror om alle andre ikke klarte:

En tekst side, med tilsvarende informasjon eller funksjonalitet, skal bli gitt for å gjøre et webområde som er i samsvar med bestemmelsene i denne del, da samsvar ikke kan oppnås på annen måte., Innholdet i tekst-bare sidene vil bli oppdatert når den primære side endringer. SECTION 508

Det er ALLTID vært ideelt å levere en URL til en besøkende for tilgjengelighet hensikt, og det er ingen forskjell når du leverer mobile eller smarttelefon innhold hvis du tenker om å skape «en mobil versjon av nettstedet ditt. Dette, selvfølgelig, kan godt være ENDA MER VIKTIG hvis Google er å flytte til en MOBIL FØRSTE INDEKSEN.,

Google kan meget vel prisen du først og FREMST på din mobile opplevelse i nær fremtid – slik at vi alle trenger å være oppmerksom på de store endringene som vi kan se veldig snart i Googles SERPs.

Når Google er ‘besøkende’ det er vanligvis enda mer viktig å levere bare en URL på grunn av canonical URL utfordringer for søkemotorer – og dette har vært tilfelle før gjennomføring av canonical link element for en tid siden.

Slik at den ideelle situasjonen er å levere en URL til alle tider.,

Hvis du har «smarttelefon» innhold (som vi ser som vanlig web-innhold, så er det generelt en vanlig HTML-side, bare forskjøvet i oppsettet for mindre skjermer) du kan bruke rel=kanonisk til å peke på skrivebordet versjonen. Dette hjelper oss til å fokusere på skrivebordet versjonen for web-søk. Når brukere besøker at skrivebordet versjonen som har en smarttelefon, kan du omdirigere dem til den mobile versjonen. Dette fungerer uavhengig av URL-strukturen, slik at du ikke trenger å bruke subdomener / undermapper for smartphone-mobile nettsteder., Enda bedre er imidlertid å bruke den samme url-adresser og for å vise den riktige versjonen av innhold uten en redirect John Mueller, Google

Ignorerer Google ‘ s Anbefalinger Er Ofte Ikke Et Smart trekk

SITAT: for Å oppsummere, foregår for tiden vår gjennomgang, indeksering, og ranking systemer vanligvis ser på skrivebordet versjonen av en sides innhold, noe som kan føre til problemer for mobile søkere når denne versjonen er vesentlig forskjellig fra den mobile versjonen., Mobil-første indeksering betyr at vi kommer til å bruke den mobile versjonen av innhold for indeksering og rangering, til bedre hjelpe våre – først og fremst mobile – brukere å finne det de leter etter. Webmasters vil se betydelig økt gjennomgang av Smarttelefon Googlebot, og utdrag av resultatene, samt innhold på Google cache-sider, vil være fra den mobile versjonen av sidene., Google Nov 2017

Google tilbyr følgende tips for å sjekke nettstedet er utarbeidet for mobil første indeksen, men egentlig, hvis du bruker en responsiv web design mal for nettstedet ditt, bør du har minimale problemer med denne endringen:

  • sørg for at den mobile versjonen av nettstedet har også den viktige, innhold av høy kvalitet. Dette inkluderer tekst, bilder (med alt-attributter), og videoer – i vanlig kan gjennomsøke og indeksere formater.,

  • Strukturerte data er viktig for indeksering og søk funksjoner som brukerne kjærlighet: det bør være både på mobil og desktop-versjonen av nettstedet. Kontroller url-ene i strukturerte data er oppdaterte til den mobile versjonen på mobile sider.

  • Metadata som bør være til stede på begge versjoner av nettstedet. Det gir hint om innholdet på en side for indeksering og servering., For eksempel sørge for at titler og meta beskrivelser er det samme på tvers av begge versjoner av alle sidene på nettstedet.

  • Ingen endringer er nødvendig for interlinking med separat mobil Nettadresser (m.-dot-områder). For nettsteder som bruker egen mobil Nettadresser, kan du beholde den eksisterende link rel=kanonisk og link rel= » alternate elementer mellom disse versjonene.

  • Sjekk hreflang lenker på egne mobile Nettadresser., Når du bruker link rel=hreflang elementer for internasjonalisering, og koblingen mellom mobil og desktop Nettadresser separat. Din mobile Nettadressene » hreflang skal peke til andre språk/region versjoner på andre mobile Nettadresser, og tilsvarende link på skrivebordet med andre desktop Nettadresser ved hjelp av hreflang link elementer der.

  • Sikre servere, hosting nettstedet har nok kapasitet til å håndtere potensielt økt gjennomgå pris., Dette berører ikke områder som bruker responsive web design, og dynamisk servering, kun områder hvor den mobile versjonen er på en egen vert, for eksempel m.example.com.

Brukere Forventer Å Bla Ned En Side

Som den første kriteriet innebærer, rulling er alltid et viktig hensyn. Brukere generelt ikke liker å bla hvis de ikke trenger å – selv om, i løpet av årene, det har endret seg.

Så, når du design, bør du vurdere hvor mye brukerne kan se hvis de blar du bare en skjerm full eller to., Noen mer enn fem skjermer lenge kan være en indikasjon på at det kan bli for mye kopien på siden. Selvfølgelig, dette er balansert med det syn at noen artikler er ment å være utfyllende informasjon stykker og brukere forventer å vente litt lenger for å vise noe side innhold og type innhold.

Både rulle og første synlighet åpenbart avhenge av skjermstørrelse: Større skjermer til å vise mer innhold over fold og krever mindre rulling.

Vil en Endring i En Responsiv Mobil Resultere I Mye Mer Trafikk Fra Google?

Ikke nødvendigvis, men kanskje.,

Så mange ting å gjøre med Google optimalisering – å ha en mobil-vennlig nettsted er mer eller mindre å sikre at du BEHOLDER den trafikken du allerede får, ikke nødvendigvis gi deg noen mer gratis trafikk fra Google.

Hvis du ikke allerede få mye trafikk fra mobile besøkende – jeg er ikke sikker på om denne oppdateringen fra Google vil ha en merkbar effekt på trafikken nivåer (i analytics minst) i utgangspunktet, men over tid – det vil sannsynligvis være en svært viktig utfordring for å navigere.,

kvaliteten bar blir tatt opp – igjen – av Google og sine brukere, og hvis du ønsker å konkurrere i stadig mer konkurransedyktig organisk SERPs dette er enda et hinder for små bedrifter å komme over.

På LANG sikt – dette mobil-konvertering kan bare være en god ting for brukerne – men på kort sikt – det vil være interessant å se hvilken effekt det har på små bedrifter konvertering priser – som conversion priser via mobil er ofte mindre enn på desktop.,

Google har sagt at dette mobil-vennlig algoritmen vil ha en større innvirkning på SERPs enn både Google Penguin og Google Panda algoritmer, og vi vil finne ut mer etter hvert som tiden går.

Hvordan for Å se Etter Viktige Mobile Brukervennlighet Problemer På Nettstedet Ditt

Google-Søk Konsoll

Du bør være i stand til å spore mobile feil i Google Søk-Konsollen (AKA Google Webmaster Tools) og se feil forsvinne over tid hvis nettstedet ditt er konfigurert på riktig måte.,»>

Del 1 – PageSpeed Insights, Mobil-Vennlig Test og Mobil-Brukervennlighet

Del 2 – Viewports, zoom og plugins

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

Del 4 – Viderekoblinger

Web-utviklere bør finne min andre nylige innlegg nyttig nå som området hastighet er en ranking faktor i Google:

SITAT: «Den mobile versjonen av en nettside bør ideelt legg på under 3 sekunder og jo raskere jo bedre., En VELDIG LANGSOM NETTSTEDET, kan være en NEGATIV Rangering faktor (bekreftet av Google). Det er ingen fastsatt terskel eller hastighet score til å møte, bare for å gjøre siden din så fort som mulig.»Shaun Anderson, Hobo 2020

Ansvarsfraskrivelse

Ansvarsfraskrivelse: «Mens jeg har gjort alle anstrengelser for å sikre at den informasjonen jeg har gitt er riktige, er Det ikke råd.; Jeg kan ikke akseptere noe ansvar for eventuelle feil eller mangler. Forfatteren går ikke god for tredjeparts webområder eller tredjeparts tjeneste. Besøk tredjeparts nettsider på din egen risiko., Jeg er ikke direkte inngått samarbeid med Google eller noen andre tredjepart. Denne nettsiden bruker cookies kun for analyse og grunnleggende nettstedet funksjoner. Denne artikkelen innebærer ingen juridiske råd. Forfatteren påtar seg ikke noe erstatningsansvar som kan oppstå i skjemaet for å få tilgang til dataene som er presentert på dette nettstedet. Linker til interne sider fremme mitt eget innhold og tjenester.»Shaun Anderson, Hobo