offentliggørelse: “denne artikel er personlig mening om forskning baseret på min erfaring i næsten 20 år. Der er ingen tredjepartsannoncering på denne side eller penge på links af nogen art. Eksterne links til tredjeparts .ebsteder modereres af mig. Ansvarsfraskrivelse. “Shaun Anderson, Hobo

Der er ingen bedste skærm størrelse til design. Hjemmesider skal omdanne lydhørt og hurtigt på alle skærmopløsninger på forskellige browsere og platforme., Tilgængelig. Mobil-venlige. Design til dit publikum, først. Design fra 360 6 640 til 1920 10 1080.

  • Design til desktop skærme fra 1024×768 til 1920×1080
  • Design til mobile skærme fra 360×640 gennem 414×896
  • Design til tablet-skærme fra 601×962 gennem 1280×800
  • Tjek Google Analytics og optimering for din målgruppe mest almindelige beslutning størrelser
  • ikke designe til én skærm størrelse eller skærmopløsning. Skærmstørrelser og bro .servinduetilstand varierer blandt besøgende.
  • Design skal være lydhør og hurtig., Brug en flydende eller lydhør layout, der forvandler til den aktuelle brugers vindue stø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 procentvise bredder til at kontrollere layout. Nu anbefalingen er en lydhør hjemmeside skabelon.,

de tre vigtigste kriterier for optimering af et sidelayout for en bestemt skærmstørrelse er:

  • Initialebside indledende synlighed: er alle vigtige oplysninger synlige over folden, så brugerne kan se det uden at rulle? Dette er en afvejning mellem hvor mange elementer der vises vs. hvor mange detaljer der vises for hvert element.
  • Readebside læsbarhed: hvor let er det at læse teksten i forskellige kolonner i betragtning af deres tildelte bredde?bside æstetik: hvor god ser din side ud, når elementerne er i den rigtige størrelse og placering for denne skærmstørrelse?, Gør alle elementerne korrekt-det vil sige billedtekster umiddelbart ved siden af billederne osv.?

Usability retningslinjer anbefales også du overveje alle tre kriterier på hele spektret af størrelser,. Kontroller bro .servinduet fra 360 6 640 til 1920 10 1080 skærmopløsninger.

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

din side skal også fungere i endnu mindre og større størrelser, selvom sådanne ekstremer er mindre vigtige.,

selvom sådanne brugere bestemt skal kunne få adgang til dit .ebsted, er det undertiden et acceptabelt kompromis at give dem et mindre end godt design.,

Ti Mest Almindelige skærmopløsninger

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

En Responsiv Hjemmeside Skabelon Er En God Satsning

CITAT: “Responsive Web Design: Serverer den samme HTML-kode på den samme URL’ en, uanset om brugernes enhed (for eksempel, desktop, tablet, mobile, ikke-visuel browser), men kan gøre vises forskelligt afhængigt af skærmstørrelsen. Google anbefaler responsivt Webebdesign, fordi det er det nemmeste designmønster at implementere og vedligeholde.,”Google Udvikler Vejledninger, 2020

i verden I dag, en masse mennesker bruger håndholdte enheder (tablets og smartphones) for at gennemse web-og responsive hjemmeside design (RWD) har vist sig som en meget sandsynlig løsning (det er stadig debatteret af aficionados) til skærmstørrelse udfordringer.

Denne metode bevæger sig væk fra at bruge fast bredde hjemmesider og i stedet bruger Medier Forespørgsler i CSS style sheets til at oprette en hjemmeside, der svarer i størrelse til de forskellige viewports af håndholdte enheder og mindre skærme, som folk bruger.,så uanset hvilken enhed en person kan bruge til at se dit websiteebsted, du er i stand til at give dem den størst mulige oplevelse.

Indholdsfortegnelse

Google Foretrækker Mobil-Venlige Websteder

Google dikterer, ebbe og flow af online-handel, og de har lige dikteret du har brug for til at designe for en tilfredsstillende brugeroplevelse på tværs af flere enheder, HVIS du ønsker at forvente at rangerer højt til konkurrencedygtige søgeord i Google.

CITAT: “Google-bruger to forskellige webcrawlere til at gennemgå hjemmesider: en mobil crawler og en desktop-crawler., Hver CRA .ler type simulerer en bruger, der besøger din side med en enhed af denne type. Google bruger crawn CRA .lertype (mobil eller desktop) som den primære CRA .ler til dit .ebsted. Alle sider på dit siteebsted, der gennemsøges af Google, gennemsøges ved hjælp af den primære CRA .ler. Den primære CRA .ler til alle nye websebsteder er den mobile CRA .ler. Derudover trækker Google et par sider tilbage på dit .ebsted med den anden CRA .ler-type (mobil eller desktop). Dette kaldes den sekundære gennemgang, og gøres for at se, hvor godt dit .ebsted fungerer med den anden Enhedstype.,”Googles Retningslinjer for Webmastere, 2020

Siden April 21, 2015, globalt set, hvordan mobil-venligt et websted har påvirket ranking performance for websteder på tværs af en række enheder.

Hvis du laver hjemmesider til små virksomheder – vil du vide, at de ønsker en hjemmeside, der vil klare sig godt i Googles organiske listings – du ved, at de er interesseret i søgemaskineoptimering:

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

SEO er nu baseret, dels på god hjemmeside UX, som Google kvantificerer det, i det mindste for mobile brugere.

Citat: “når mobilsøgninger nu overstiger desktop-søgninger, er det vigtigt, at dit .ebsted er mobilvenligt. Googlebot bruger nu en mobilcra .ler som standardcra .ler til websebsteder.”Googles Retningslinjer for Webmastere, 2020

I øjeblikket – det væsentlige er nu, betyder det responsive hjemmeside design og mobil-venlige, især med Google”, som gør vores indeks mobile-first”.,

System skærmopløsning Statistik over hele Verden Kan 2019 – 2020 Kan

For reference, her er en liste over de nuværende top skærmopløsninger i verden, som er optaget for nylig (2020):

Mest Almindelige Desktop Skærm Oplø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 skærmopløsning Statistik over hele Verden Kan 2019 – 2020 Kan

Mest Almindelige Mobil Skærm Opløsning Stø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×736 – 3.74%

Tablet Skærm Opløsning Statistik over hele Verden Kan 2019 – 2020 Kan

Mest udbredte Tablet-Skærm Oplø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%

System skærmopløsning Statistik i USA Kan 2019 – 2020 Kan

Top skærmopløsninger i USA (2020)

Mest Almindelige Desktop Skærm Opløsning 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 skærmopløsning Statistik i USA Kan 2019 – 2020 Kan

Mest Almindelige Mobil Skærm Oplø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%

Tablet Skærm Opløsning Statistik i USA Kan 2019 – 2020 Kan

Mest udbredte Tablet-Skærm Opløsning i Usa

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

System skærmopløsning Statistik i STORBRITANNIEN Kan 2019 – 2020 Kan

Top skærmopløsninger i det forenede KONGERIGE (2020)

Mest Almindelige Desktop Skærm Opløsning i det Forenede Kongerige

  • 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 skærmopløsning Statistik i STORBRITANNIEN Kan 2019 – 2020 Kan

Mest Almindelige Mobil Skærm Opløsning i det Forenede Kongerige

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

Tablet Skærm Opløsning Statistik i STORBRITANNIEN Kan 2019 – 2020 Kan

Mest udbredte Tablet-Skærm Opløsning Størrelser i det Forenede Kongerige

  • 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 Mobile vs Tablet Markedsandel på Verdensplan

Desktop vs Mobile vs Tablet Markedsandel på Verdensplan

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

*Bemærk – statistik ovenfor er fra en (omend troværdig kilde, så kunne være skæv på måder, som vi måske ikke kender. Grafer leveret af http://statcounter.com/.,

Hvordan kan jeg designe et Siteebsted, der ser det samme ud i hver bro ?ser & opløsning?

Du kan ikke.

det er umuligt at designe et websiteebsted, der ser det samme ud i enhver bro .ser, 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 bro .serindstilling, eller du kan overveje at undersøge responsive designløsninger, der vil opnå stort set det samme.,

Google foretrækker responsivt design, hvilket er gode nyheder for dem, der har vedtaget det:

citat: “sitesebsteder, der bruger responsivt webebdesign og korrekt implementerer dynamisk servering (der inkluderer alt desktop-indhold og markering), behøver generelt ikke at gøre noget.”Google NOV 2017

mobil er stigende – så hvis du udvikler et nyt websiteebsted – skal du tænke over, hvor mobilvenligt dit websiteebsted virkelig er fra starten.

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

Du vil ikke – ikke – alle – og det spørgsmål, som hjemmesiden størrelse er bedst, er stadig et varmt emne for forhandling af designere med mere usability og UX ekspertise end jeg.

Hvad jeg ved af erfaring er, at det er af afgørende betydning for dig til at identificere DIN målgruppe, og de enheder, de bruger, og opbygge din hjemmeside (helhed), DER passer til det publikum.

og at publikum omfatter GOOGLEBOT.

omdirigerer dit mobil Siteebsted til en anden URL & Version af dit ?ebsted?

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

helt tilbage i dag – nogle folk der anvendes KUN TEKST-versioner af et website til at producere indhold til brugerne/browsere, som ikke understøtter elementer af deres hjemmesider – i en (som regel forgæves) forsøg på at gøre deres indhold mere tilgængeligt.

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

En tekst-side, med tilsvarende information eller funktionalitet, skal være at gøre et websted i overensstemmelse med bestemmelserne i denne del, når overholdelse ikke kan opnås på nogen anden måde., Indholdet af siderne kun med tekst opdateres, når den primære side ændres. § 508

Det har ALTID været ideel til at levere en URL til en besøgende med henblik på til tilgængelighed, og der er ingen forskel, når de leverer mobil eller smartphone-indhold, hvis du tænker på at skabe en mobil version af dit websted. Dette kan selvfølgelig være endnu vigtigere, hvis Google flytter til et mobil første indeks.,

Google kan meget vel bedømme dig primært på din mobiloplevelse i den nærmeste fremtid – så vi har alle virkelig brug for at være opmærksomme på de store ændringer, som vi måske ser meget snart i Googles SERPs.

Når Google er ‘besøgende’, er det normalt endnu vigtigere at levere kun en URL på grund af kanoniske URL – udfordringer for søgemaskiner-og det 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 (hvilket vi ser som normal web-indhold, som det er generelt en normal HTML-side, lige ændret i layoutet for mindre skærme) kan du bruge rel=canonical til at pege på din desktop version. Dette hjælper os med at fokusere på desktopversionen til webebsøgning. Når brugere besøger denne desktopversion med en smartphone, kan du omdirigere dem til den mobile version. Dette fungerer uanset URL-strukturen, så du behøver ikke bruge underdomæner / undermapper til smartphone-mobile .ebsteder., Endnu bedre er dog at bruge de samme url ‘ er og til at vise den korrekte version af indhold uden en omdirigering John Mueller, Google

Ignorerer Google ‘ s Anbefalinger Er Ofte Ikke Et Smart Træk

QUOTE: for At opsummere, i øjeblikket vores gennemgang, indeksering, og ranking-systemer typisk se på skrivebordet version af en side, er indhold, som kan give problemer for mobile brugere, da denne version er meget forskellige fra den mobile version., Mobile-first inde .ing betyder, at vi bruger den mobile version af indholdet til indeksering og placering for bedre at hjælpe vores – primært mobilbrugere – med at finde det, de leder efter. Gooebmastere vil se markant øget gennemsøgning af Smartphone Googlebot, og uddragene i resultaterne samt indholdet på Google-cache-siderne kommer fra den mobile version af siderne., Google Nov 2017

Google har følgende tips til at kontrollere dit websted er forberedt til mobile first-indeks, men i det væsentlige, hvis du bruger en responsive web design-skabelon til dit websted, bør du har minimale problemer med denne ændring:

  • sørg for, at mobile version af hjemmesiden også er vigtigt, indhold af høj kvalitet. Dette omfatter tekst, billeder (med alt-attributter) og videoer – i de sædvanlige gennemsøgbare og indekserbare formater.,

  • Strukturerede data er vigtigt for indeksering og søgefunktioner, at brugerne elsker: det skal være både på mobil-og desktop-version af sitet. Sørg for, at Urebadresser i de strukturerede data opdateres til den mobile version på mobilsiderne.

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

  • Ingen ændringer er nødvendige for at knytte med separate mobil-url ‘ er (m.-dot-sites). For sitesebsteder, der bruger separate mobile Urebadresser, skal du beholde det eksisterende link rel=canonical og link rel=Alternative elementer mellem disse versioner.

  • Check hreflang links på separate mobil-url ‘ er., Når du bruger link rel=hreflang elementer til internationalisering, link mellem mobile og stationære Urebadresser separat. Din mobile Webadresser’ hreflang skal pege på de andre sprog, land/område versioner på andre mobile Webadresser, og tilsvarende link desktop med andre desktop Webadresser ved hjælp af hreflang link elementer der.

  • sørg for, at serverne, der er vært for siteebstedet, har tilstrækkelig kapacitet til at håndtere potentielt øget gennemsøgningshastighed., Dette påvirker ikke websteder at bruge responsive web design og dynamiske servering, kun steder, hvor den mobile version er på en separat vært, såsom m.example.com.

Brugere Forventer At Rulle Ned af En Side

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

så når du designer, skal du overveje, hvor meget brugere kan se, om de kun ruller en skærm fuld eller to., Enhver mere end fem skærme lange kunne være en indikation for dig, at der kan være for meget kopi på siden. Selvfølgelig er dette afbalanceret med den opfattelse, at nogle artikler er beregnet til at være dybdegående informationsstykker, og brugerne forventer at vente lidt længere for at se nogle sideindhold og indholdstyper.

både rulning og indledende 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 mobil Siteebsted resultere i meget mere trafik fra Google?

ikke nødvendigvis, men måske.,

Så mange ting at gøre med Google optimering – at have en mobil-venlig hjemmeside er mere eller mindre at sikre, at du HOLDER den trafik, du allerede får, ikke nødvendigvis give dig mere gratis trafik fra Google.

Hvis du ikke allerede får meget trafik fra mobile besø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) i starten – men over tid – vil det sandsynligvis være en ekstremt vigtig udfordring at navigere.,

kvalitetslinjen hæves – igen – af Google og dens brugere – og hvis du vil konkurrere i stadig mere konkurrencedygtige organiske SERPs, er dette endnu en hindring for små virksomheder at komme over.

På LANG sigt – mobile konvertering kan kun være en god ting for dine brugere, men på kort sigt – det vil blive interessant at se, hvilken effekt det har på små virksomheder omregningskurser – som omregningskurser via mobile er ofte mindre end på skrivebordet.,

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

Hvordan At Kontrollere For Vigtige Mobile Usability Problemer På Dit Site

Google-Søgning Konsol

Du bør være i stand til at spore mobile fejl i Google-Søgning Konsol (AKA Google Webmaster Tools), og se fejl forsvinde over tid, hvis dit websted er konfigureret korrekt.,”>

Del 1 – PageSpeed Indsigt, Mobil-Venligt Test og Mobile Usability-

Del 2 – Viewports, zoom og plugins

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

Del 4 – Omdirigeringer

Web-udviklere bør finde mine seneste indlæg nyttige nu, at ejendommen hastighed er en ranking faktor i Google:

CITAT: “Den mobile version af en hjemmeside bør ideelt set belastning på under 3 sekunder, og jo hurtigere jo bedre., Et meget langsomt sted kan være en negativ Rangeringsfaktor (bekræftet af Google). Der er ingen sæt tærskel eller hastighed score for at opfylde, bare for at gøre din side så hurtigt som muligt.”Shaun Anderson, Hobo 2020

Ansvarsfraskrivelse

Ansvarsfraskrivelse: “Selv om 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 for fejl eller udeladelser. Forfatteren garanterer ikke for tredjeparts sitesebsteder eller nogen tredjepartstjeneste. Besøg tredjeparts .ebsteder på egen risiko., Jeg samarbejder ikke direkte med Google eller nogen anden tredjepart. Dette websiteebsted bruger kun cookies til analyse og grundlæggende websiteebstedsfunktioner. Denne artikel udgør ikke juridisk rådgivning. Forfatteren accepterer ikke noget ansvar, der måtte opstå ved at få adgang til de data, der præsenteres på dette .ebsted. Links til interne sider fremme mit eget indhold og tjenester.”Shaun Anderson, Hobo