Disclosure: ”Denna artikel är personlig åsikt av forskning baserat på min erfarenhet av nästan 20 år. Det finns ingen tredjepartsannonsering på denna sida eller intäktsgenererade länkar av något slag. Externa länkar till tredje parts webbplatser modereras av mig. Ansvarsfriskrivning. ”Shaun Anderson, Hobo

det finns ingen bästa skärmstorlek att designa för. Webbplatser bör omvandla ansvarsfullt och snabbt på alla skärmupplösningar på olika webbläsare och plattformar., Tillgänglig. Mobilvänlig. Design för din publik, först. Design från 360×640 genom 1920×1080.

  • Design för stationära skärmar från 1024×768 till 1920 × 1080
  • Design för mobila skärmar från 360×640 till 414×896
  • Design för surfplattor från 601×962 till 1280×800
  • kontrollera Google Analytics och optimera för din målgrupps vanligaste upplösningsstorlekar
  • designa inte för en bildskärmstorlek eller skärmupplösning. Skärmstorlekar och webbläsarfönster tillstånd varierar bland besökare.
  • designen ska vara lyhörd och snabb., Använd en flytande eller lyhörd layout som omvandlas till den aktuella användarens fönsterstorlek.
  • övervaka Google Search Console mobilvänliga och användbarhetsvarningar

det borde fortfarande se bra ut och fungera bra i alla storlekar, varför jag *brukade* rekommendera en mycket tillgänglig flytande layout med procentuella bredder för att styra layouten. Nu rekommendationen är en lyhörd webbplats mall.,

de tre huvudkriterierna för att optimera en sidlayout för en viss skärmstorlek är:

  • webbsida inledande synlighet: är all viktig information synlig ovanför luckan så att användarna kan se den utan att bläddra? Detta är en avvägning mellan hur många objekt visas vs. hur mycket detalj visas för varje objekt.
  • webbsida läsbarhet: hur lätt är det att läsa texten i olika kolumner, med tanke på deras tilldelade bredd?
  • webbsida estetik: hur bra ser din sida ut när elementen är i rätt storlek och plats för denna skärmstorlek?, Gör alla element radas upp korrekt-det vill säga är bildtexter omedelbart bredvid bilderna etc.?

användarriktlinjer rekommenderar också att du överväger alla tre kriterierna i hela skalan av storlekar,. Kontrollera webbläsarfönstret från 360×640 till 1920 × 1080 skärmupplösningar.

din sida bör få höga poäng på alla kriterier i hela upplösningsområdet.

din sida bör också fungera i ännu mindre och större storlekar, även om sådana ytterligheter är mindre viktiga.,

även om sådana användare säkert bör kunna komma åt din webbplats, ger dem en mindre än bra design är ibland en acceptabel kompromiss.,

topp tio vanligaste skärmupplösningar

Besökaranalys av nästan en halv miljon besökare under de första 6 månaderna 2020:

en responsiv webbmall är en bra satsning

citat: ”responsiv webbdesign: tjänar samma HTML-kod på samma webbadress oavsett användarens enhet (till exempel skrivbord, surfplatta, mobil, icke-visuell webbläsare), men kan göra skärmen annorlunda baserat på skärmen storlek. Google rekommenderar responsiv webbdesign eftersom det är det enklaste designmönstret att implementera och underhålla.,”Google Developer Guides, 2020

i dagens värld använder många människor handhållna enheter (tabletter och smartphones) för att surfa på webben och responsiv webbdesign (RWD) har uppstått som en mycket trolig lösning (det diskuteras fortfarande av aficionados) till skärmstorlek utmaningar.

den här metoden rör sig bort från att använda webbplatser med fast bredd och använder istället mediefrågor i CSS-formatmallar för att skapa en webbplats som svarar i storlek på de olika visningsporten för handhållna enheter och mindre skärmar som människor använder.,

så oavsett vilken enhet en person kan använda för att visa din webbplats kan du ge dem den största möjliga upplevelsen.

Innehållsförteckning

Google föredrar mobilvänliga webbplatser

Google dikterar ebb och flödet av online-handel och de har bara dikterat att du behöver designa för en tillfredsställande användarupplevelse över flera enheter om du vill förvänta dig att rangordna högt för konkurrenskraftiga sökord i Google.

citat: ”Google använder två olika sökrobotar för sökrobotar: en mobil sökrobot och en stationär sökrobot., Varje sökrobottyp simulerar en användare som besöker din sida med en enhet av den typen. Google använder en sökrobottyp (mobil eller stationär) som den primära sökroboten för din webbplats. Alla sidor på din webbplats som genomsöks av Google genomsöks med den primära sökroboten. Den primära sökroboten för alla nya webbplatser är den mobila sökroboten. Dessutom återskapar Google några sidor på din webbplats med den andra sökroboten (mobil eller stationär). Detta kallas sekundär genomsökning, och görs för att se hur bra din webbplats fungerar med den andra enhetstypen.,”Google Webmaster Guidelines, 2020

sedan den 21 April 2015 har hur mobilvänlig en webbplats har påverkat rankningsprestanda för webbplatser på olika enheter.

om du gör webbplatser för småföretag-du vet att de vill ha en webbplats som fungerar bra i Google organic listings-du vet att de är intresserade av sökmotoroptimering:

citat: ”jag har 20 års erfarenhet av professionell SEO. Denna SEO handledning är min samling av tips och SEO bästa praxis jag använder för att rangordna webbplatser i Google.,”Shaun Anderson, Hobo 2020

SEO baseras delvis på bra webbplats UX, eftersom Google kvantifierar det, åtminstone för mobila användare.

citat: ”med mobila sökningar som nu överstiger skrivbordssökningar är det viktigt att din webbplats är mobilvänlig. Googlebot använder nu en mobil sökrobot som standard sökrobot för webbplatser.”Google Webmaster Guidelines, 2020

just nu – det betyder i huvudsak responsiv webbdesign och mobilvänlig, särskilt med Google ”att göra vårt index mobil-först”.,

Skärmupplösningsstatistik över hela världen maj 2019 – maj 2020

som referens är här en lista över de nuvarande toppskärmsupplösningarna över hela världen som registrerats nyligen (2020):

vanligaste Skärmupplösningsstorlekarna över hela världen

  • 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ärmupplösningsstatistik över hela världen maj 2019 – maj 2020

vanligaste mobila Skärmupplösningsstorlekar över hela världen

  • 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ärmupplösning statistik över hela världen maj 2019 – maj 2020

vanligaste tablet skärmupplösning storlekar över hela världen

  • 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ärmupplösningsstatistik för skrivbordet i USA maj 2019 – maj 2020

skärmupplösningar i USA (2020)

vanligast skärmupplösning på skrivbordet storlek 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.,

mobil skärmupplösning statistik i USA maj 2019 – maj 2020

vanligaste mobil skärmupplösning storlek 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ärmupplösning statistik i USA maj 2019 – maj 2020

vanligaste tablet skärmupplösning storlek i USA

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

Skärmupplösningsstatistik i Storbritannien maj 2019 – maj 2020

skärmupplösningar i Storbritannien (2020)

den vanligaste storleken på skrivbordsskärmens upplösning 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. – herr talman!,73%

mobil Skärmupplösningsstatistik i Storbritannien maj 2019 – maj 2020

vanligaste mobil Skärmupplösningsstorlek i Storbritannien

  • 375×667 – 16.66%
  • 414×816 – 14.11%
  • 360×640 – 9.95%
  • 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ärmupplösningsstatistik i Storbritannien maj 2019-maj 2020

de vanligaste skärmupplösningsstorlekarna i Storbritannien

    • 768 × 1024-58.,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 marknadsandel över hela världen

    desktop vs Mobile vs tablet marknadsandel över hela världen

  1. mobile – 50,48%
  2. desktop – 46,51%
  3. tablet – 3,0%

*Obs – statistik ovan är från en (om än trovärdig) källa, så kan skev på sätt som vi kanske inte vet. Grafer som tillhandahålls av http://statcounter.com/.,

Hur kan jag designa en webbplats som ser likadan ut i varje webbläsare & upplösning?

Det går inte.

det är omöjligt att utforma en webbplats så att den ser likadan ut i varje webbläsare, plattform och skärmupplösning, så undvik att försöka.

Du kan välja en flytande layout utan tabeller för din design, med % bredder som expanderar och kontrakt för att passa en besökare webbläsarinställning eller du kan överväga att undersöka responsiva designlösningar som kommer att uppnå mycket samma sak.,

Google föredrar responsiva mönster, vilket är goda nyheter för dem som har antagit det:

citat: ”webbplatser som använder sig av responsiv webbdesign och korrekt implementerar dynamisk servering (som inkluderar allt skrivbordsinnehåll och markering) behöver i allmänhet inte göra någonting.”Google NOV 2017

mobil är på uppgång – så om du utvecklar en ny webbplats – måste du tänka på hur mobilvänlig din webbplats verkligen är från början.

jag syftar till att hålla det enkelt när jag faktiskt kodar saker.,

Du kommer inte – kan inte – behaga alla – och frågan vilken webbplatsstorlek som är bäst är fortfarande ett hett ämne för debatt av designers med mer användbarhet och UX-expertis än I.

vad jag vet av erfarenhet är att det är av avgörande betydelse för dig att identifiera din publik och de enheter de använder och bygga din webbplats (på det hela taget) för att passa den publiken.

och målgruppen inkluderar GOOGLEBOT.

omdirigerar din mobila webbplats till en annan URL& Version av din webbplats?

Tja, det är inte idealiskt. Det har det aldrig varit.,

långt tillbaka på dagen – vissa folk använde TEXT-bara versioner av en webbplats för att producera innehåll för användare/webbläsare som inte stöder delar av sina webbplatser-i ett (vanligtvis förgäves) försök att göra deras innehåll mer tillgängligt.

W3C använde även för att rekommendera det jag tror att om allt annat misslyckades:

en text-enda sida, med motsvarande information eller funktionalitet, ska tillhandahållas för att göra en webbplats överensstämmer med bestämmelserna i denna del, när överensstämmelse inte kan uppnås på något annat sätt., Innehållet på endast textsidorna ska uppdateras när den primära sidan ändras. Avsnitt 508

det har alltid varit idealiskt att leverera en webbadress till en besökare för tillgänglighetsändamål, och det är ingen skillnad när du levererar mobil-eller smartphone-innehåll om du funderar på att skapa ”en mobil” version av din webbplats. Detta, naturligtvis, kan mycket väl vara ännu viktigare om Google flyttar till en mobil första INDEX.,

Google kan mycket väl Betygsätta dig främst på din mobila upplevelse inom en snar framtid – så vi måste alla verkligen vara medvetna om de stora förändringar som vi kan se mycket snart i Googles SERPs.

När Google är ”besökare” är det oftast ännu viktigare att leverera bara en webbadress på grund av kanoniska URL utmaningar för sökmotorer – och detta har varit fallet innan genomförandet av den kanoniska länkelementet för en tid sedan.

så den ideala situationen är att leverera en URL hela tiden.,

om du har ”smartphone”-innehåll (som vi ser som vanligt webbinnehåll, eftersom det i allmänhet är en vanlig HTML-sida, bara tweaked i layout för mindre skärmar) kan du använda rel=canonical för att peka på din stationära version. Detta hjälper oss att fokusera på skrivbordsversionen för webbsökning. När användare besöker den stationära versionen med en smartphone kan du omdirigera dem till mobilversionen. Detta fungerar oavsett URL-strukturen, så du behöver inte använda underdomäner / underkataloger för smartphone-mobila webbplatser., Ännu bättre är dock att använda samma webbadresser och att visa lämplig version av innehållet utan omdirigering John Mueller, Google

ignorera Googles rekommendationer är ofta inte ett Smart drag

citat: för att återskapa, för närvarande vår genomsökning, indexering och rankingsystem ser vanligtvis på skrivbordsversionen av en sidas innehåll, vilket kan orsaka problem för Mobila sökare när den versionen är väldigt annorlunda än den mobila versionen., Mobil-första indexering innebär att vi använder den mobila versionen av innehållet för indexering och ranking, för att bättre hjälpa våra – främst mobila – användare att hitta vad de letar efter. Webbansvariga kommer att se signifikant ökad genomsökning av Smartphone Googlebot, och snippen i resultaten, liksom innehållet på Google cache-sidorna, kommer att vara från den mobila versionen av sidorna., Google Nov 2017

Google erbjuder följande tips för att kontrollera din webbplats är förberedd för mobile first index, men i huvudsak, om du använder en responsiv webbdesign mall för din webbplats bör du ha minimala problem med denna förändring:

  • se till att den mobila versionen av webbplatsen också har det viktiga, högkvalitativa innehållet. Detta inkluderar text, bilder (med alt-attribut) och videor – i vanliga genomsökbara och indexerbara format.,

  • strukturerad data är viktigt för indexering och sökfunktioner som användarna älskar: det borde vara både på mobil-och skrivbordsversionen av webbplatsen. Se till att webbadresser inom strukturerade data uppdateras till den mobila versionen på de mobila sidorna.

  • Metadata ska finnas på båda versionerna av webbplatsen. Det ger tips om innehållet på en sida för indexering och servering., Se till att titlar och metabeskrivningar är likvärdiga i båda versionerna av alla sidor på webbplatsen.

  • inga ändringar är nödvändiga för att koppla samman med separata mobila webbadresser (m.-dot-webbplatser). För webbplatser som använder separata mobila webbadresser, behåll den befintliga länken rel = canonical och link rel=alternativa element mellan dessa versioner.

  • kontrollera hreflang-länkar på separata mobila webbadresser., När du använder link rel=hreflang-element för internationalisering, länka mellan mobila och stationära webbadresser separat. Din mobila webbadresser ’ hreflang bör peka på andra språk / region versioner på andra mobila webbadresser, och på samma sätt länka skrivbordet med andra stationära webbadresser med hreflang länkelement där.

  • se till att servrarna som är värd för webbplatsen har tillräcklig kapacitet för att hantera potentiellt ökad genomsökningshastighet., Detta påverkar inte webbplatser som använder responsiv webbdesign och dynamisk visning, bara webbplatser där mobilversionen finns på en separat värd, till exempel m.example.com.

användare förväntar sig att rulla ner en sida

som det första kriteriet antyder är rullning alltid en viktig faktor. Användare tyckte i allmänhet inte om att rulla om de inte behöver-även om det under åren har ändrats.

så, när du utformar, bör du överväga hur mycket användare kan se om de rullar bara en skärm full eller två., Mer än fem skärmar lång kan vara en indikation för dig att det kan finnas för mycket kopia på sidan. Naturligtvis är detta balanserat med uppfattningen att vissa artiklar är avsedda att vara djupgående information bitar och användare skulle förvänta sig att vänta lite längre för att visa vissa sidinnehåll och innehållstyper.

både rullning och inledande synlighet beror uppenbarligen på skärmstorlek: större skärmar visar mer innehåll ovanför luckan och kräver mindre rullning.

kommer en förändring till en responsiv mobilwebbplats att resultera i mycket mer trafik från Google?

inte nödvändigtvis, men kanske.,

så många saker att göra med Google Optimering – att ha en mobilvänlig webbplats är mer eller mindre för att säkerställa att du håller den trafik du redan får, inte nödvändigtvis ge dig mer fri trafik från Google.

om du inte redan får mycket trafik från mobila besökare-jag är inte säker på om den här uppdateringen från Google kommer att ha en märkbar effekt på dina trafiknivåer (i analytics åtminstone) i början – men med tiden – det kommer förmodligen att vara en extremt viktig utmaning att navigera.,

kvalitetsfältet höjs-igen-av Google och dess användare – och om du vill tävla i allt mer konkurrenskraftiga organiska SERPs är det ännu ett hinder för småföretag att komma över.

på lång sikt – denna mobila konvertering kan bara vara en bra sak för dina användare – men på kort sikt – det kommer att bli intressant att se vilken effekt det har på småföretag omräkningskurser – som omräkningskurser via mobil är ofta mindre än på skrivbordet.,

Google har sagt att den här mobilvänliga algoritmen kommer att ha större inverkan på SERPs än både Google Penguin och Google Panda algoritmer-och vi får reda på mer när tiden går.

hur man kontrollerar viktiga frågor om Mobilanvändbarhet på din webbplats

Google Search Console

Du bör kunna spåra mobilfel i Google Search Console (aka Google Webmaster Tools) och se fel försvinna över tiden om din webbplats är korrekt konfigurerad.,Del 1 – PageSpeed Insights, Mobile-Friendly Test och Mobile-Usability

del 2 – Viewports, zoom och plugins

del 3 – Tap mål, marginaler och teckenstorlekar

del 3 – Tap mål, marginaler och teckenstorlekar

Del 4-omdirigeringar

Webbutvecklare bör hitta mitt andra Senaste inlägg användbart nu när webbplatsens hastighet är en rankningsfaktor i Google:

citat: ”Den mobila versionen av en webbplats bör helst laddas på under 3 sekunder och ju snabbare desto bättre., En mycket långsam webbplats kan vara en negativ rankningsfaktor (bekräftad av Google). Det finns ingen uppsättning tröskel eller hastighet poäng att möta, bara för att göra din sida så fort som möjligt.”Shaun Anderson, Hobo 2020

Disclaimer

Disclaimer: ”medan jag har gjort allt för att säkerställa att den information jag har lämnat är korrekt, är det inte råd.; Jag kan inte ta något ansvar för eventuella fel eller försummelser. Författaren går inte i god för tredje parts webbplatser eller någon tredje parts tjänst. Besök tredje parts webbplatser på egen risk., Jag samarbetar inte direkt med Google eller någon annan tredje part. Denna webbplats använder endast cookies för analytics och grundläggande webbplatsfunktioner. Denna artikel utgör inte juridisk rådgivning. Författaren accepterar inte något ansvar som kan uppstå form tillgång till data som presenteras på denna webbplats. Länkar till interna sidor marknadsför mitt eget innehåll och tjänster.”Shaun Anderson, Hobo