Vilka är de bästa skärmstorlekarna för responsiv webbdesign?

november 25, 2020

Vilka är de bästa skärmstorlekarna för responsiv webbdesign?

Utlämnande: ”Den här artikeln är en personlig åsikt om forskning baserat på min erfarenhet av nästan 20 år. Det finns ingen tredjepartsannonsering på denna sida eller intjänade länkar av något slag. Externa länkar till tredjepartswebbplatser modereras av mig. Ansvarsfriskrivning. ”Shaun Anderson, Hobo

Det finns ingen bästa skärmstorlek att designa för. Webbplatser bör omvandlas responsivt och snabbt vid 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 till 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 målgruppens vanligaste upplösningsstorlekar
Design inte för en skärmstorlek eller skärmupplösning. Skärmstorlekar och webbläsarfönster varierar mellan besökare.
Designen ska vara lyhörd och snabb. Använd en flytande eller responsiv layout som förvandlas till den aktuella användarens fönsterstorlek.
Övervaka Google Search Console mobilvänliga och användbarhetsvarningar

Det ska fortfarande se bra ut och fungera bra i alla storlekar, vilket är anledningen till att jag * brukade * rekommendera en mycket tillgänglig flytande layout med procentuella bredder för att kontrollera layouten. Rekommendationen är en responsiv webbplatsmall.

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

Webbsida Initial synlighet: Är allt information synlig ovanför veck så att användare kan se den utan att bläddra? Detta är en avvägning mellan hur många objekt som visas jämfört med hur mycket detaljer som visas för varje objekt.
Läsbarhet på webbsidan: Hur lätt är det att läsa texten i olika kolumner, med tanke på deras tilldelade bredd?
Estetik för webbsidor: Hur bra ser din sida ut när elementen har rätt storlek och plats för den här skärmstorleken? Stämmer alla element korrekt – det vill säga är bildtexter direkt bredvid bilderna etc.?

Riktlinjer för användbarhet rekommenderas också att du överväger alla tre kriterierna i hela storleken. Kontrollera webbläsarfönstret från 360 × 640 till 1920 × 1080 skärmupplösningar.

Din sida ska göra höga poäng på alla kriterier i hela upplösningsområdet.

Din sida ska också fungera jämnt mindre och större storlekar, även om sådana ytterligheter är mindre viktiga.

Även om sådana användare verkligen borde kunna komma åt din webbplats är det ibland en acceptabel kompromiss att ge dem en mindre än bra design.

De tio vanligaste skärmupplösningarna

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

En responsiv webbplatsmall är en bra satsning

Citat: ”Responsiv webbdesign: Serverar samma HTML-kod på samma URL oavsett användarnas enhet (till exempel skrivbord, surfplatta, mobil, icke- visuell webbläsare), men kan göra skärmen annorlunda baserat på skärmstorleken. Google rekommenderar Responsive Web Design eftersom det är det enklaste designmönstret att implementera och underhålla. ” Googles utvecklingsguider, 2020

I dagens värld använder många människor handhållna enheter (surfplattor och smartphones) för att surfa på nätet och lyhörd webbplatsdesign ( RWD) har framstått som en mycket sannolik lösning (det debatteras fortfarande av entusiaster) för skärmstorleksutmaningar.

Den här metoden går bort från att använda webbplatser med fast bredd och använder istället Media Queries i CSS-stilark för att skapa en webbplats som svarar i storlek på de olika visningsportarna för handhållna enheter och mindre skärmar som människor använder.

Så 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öde av onlinehandel och de har precis dikterat att du måste utforma en tillfredsställande användarupplevelse på flera enheter OM du vill förvänta dig att rankas högt för konkurrenskraftiga sökord på Google.

CITAT: ”Google använder två olika sökrobotar för genomsökande webbplatser: en mobilrobot och en stationär sökrobot. Varje sökrobotstyp simulerar en användare som besöker din sida med en enhet av den typen. Google använder en sökrobot (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 mobilroboten. Dessutom genomsöker Google några sidor på din webbplats med den andra typen av sökrobot (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. ” Googles riktlinjer för webbansvariga, 2020

Sedan den 21 april 2015, globalt, hur mobilvänlig en webbplats har påverkat rankningsprestanda för webbplatser på olika enheter.

Om du skapar webbplatser för små företag – vet du att de vill ha en webbplats som kommer att fungera bra i Googles organiska listor – du vet att de är intresserade av sökmotoroptimering:

Citat: ”Jag har 20 års erfarenhet av att utöva professionell SEO. Denna SEO-handledning är min samling tips och bästa SEO-metoder som jag använder för att rangordna webbplatser på Google.” Shaun Anderson, Hobo 2020

SEO bygger nu delvis på bra webbplats UX, som Google kvantifierar det, åtminstone för mobilanvändare.

CITAT: ”Med mobilsökningar som nu överstiger skrivbordssökningar är det viktigt att din webbplats är mobilvänlig. Googlebot använder nu en mobilrobot som standardrobot för webbplatser. ” Googles riktlinjer för webbansvariga, 2020

Just nu – det betyder i huvudsak lyhörd webbdesign och mobilvänligt, särskilt med Google ”som gör vårt index mobil först ”.

Upplösningsstatistik för skrivbordsskärmar över hela världen maj 2019 – maj 2020

För referens, här är en lista över de aktuella toppskärmsupplösningarna över hela världen som nyligen spelats in (2020):

Vanligaste skärmupplösningsstorlekar ö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%

Upplösningsstatistik för mobil skärm över hela världen maj 2019 – maj 2020

Vanligaste mobilskärmsupplö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 × 7 36 – 3,74%

Upplösningsstatistik för surfplattor över hela världen maj 2019 – maj 2020

Vanligaste surfplattans skärmupplösningsstorlekar ö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%

Uppgifter för skrivbordsskärmsupplösning i USA maj 2019 – maj 2020

Bästa skärmupplösningar i USA (2020)

Vanligaste skärmupplösning på skrivbordet 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 för mobil skärmupplösning i USA maj 2019 – maj 2020

Vanligaste mobilskärmupplösningsstorlek 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%

Upplösningsstatistik för surfplattor i USA maj 2019 – maj 2020

Vanligast skärmupplösning för surfplattor 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%

Skärmupplösning på skrivbordet i Storbritannien maj 2019 – maj 2020

Högsta skärmupplösningar i Storbritannien (2020)

Vanligaste skärmupplösning på skrivbordet 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%

Mobil skärmupplösningsstatistik i Storbritannien maj 2019 – maj 2020

Vanligaste storlek på mobilskärmupplösning 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%

Upplösningsstatistik för surfplattor i Storbritannien maj 2019 – maj 2020

De vanligaste surfplattans skärmupplösningsstorlekar 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 Mobile vs Tablet Market Share Worldwide

Mobile – 50,48%
Desktop – 46,51%
Tablet – 3.0%

* Obs! Statistiken ovan är från en (om än trovärdig) källa, så den kan ske på sätt som vi kanske inte känner till. Grafer som tillhandahålls av http://statcounter.com/.

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

Du kan inte.

Det är omöjligt att designa en webbplats så att den ser likadan ut i alla webbläsare, plattformar och skärmupplösningar, så undvik att försöka.

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

Google gynnar lyhörd design, vilket är goda nyheter för dem som har antagit den:

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

MOBILEN ÄR PÅ RISE – 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 strävar efter att hålla saker enkelt när jag faktiskt kodar saker.

Du kommer inte – kan inte – snälla 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 jag.

Vad jag vet av erfarenhet är att det är mycket viktigt för dig att identifiera din publik och de enheter de använder och bygga din webbplats (på helheten) för att passa den publiken.

Och den publiken inkluderar GOOGLEBOT.

Omdirigerar din mobilwebbplats till en annan webbadress & Version av Din webbplats?

Nåväl, det är inte perfekt. Det har det faktiskt aldrig varit.

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

W3C rekommenderade till och med det tror jag om allt annat misslyckades:

En sida med endast text, med motsvarande information eller funktionalitet, ska tillhandahållas för att en webbplats ska följa bestämmelserna i denna del, när efterlevnad inte kan uppnås på något annat sätt. Innehållet på sidorna med endast text ska uppdateras när den primära sidan ändras. AVSNITT 508

Det har ALLTID varit perfekt 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 är funderar på att skapa ”en mobil” version av din webbplats. Det kan naturligtvis mycket väl vara ännu viktigare om Google flyttar till ett MOBILT FÖRSTA INDEX.

Google kan mycket väl värdera dig PRIMERILY på din mobil upplevelse inom en snar framtid – så vi måste verkligen vara medvetna om de stora förändringar som vi kan se mycket snart i Googles SERP.

När Google är ”besökaren” är det vanligtvis ännu viktigare att leverera bara en URL på grund av kanoniska URL-utmaningar för sökmotorer – och detta har varit fallet före implementeringen av det kanoniska länkelementet för en tid sedan.

Så den perfekta situationen är att leverera en URL hela tiden.

Om du har ”smartphone” -innehåll (som vi ser som normalt webbinnehåll, eftersom det i allmänhet är en norma l HTML-sida, just justerad i layout för mindre skärmar) kan du använda rel = canonical för att peka på din skrivbordsversion. 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 webbadressstrukturen, så du behöver inte använda underdomäner / underkataloger för webbplatser med smarttelefon. Ännu bättre är dock att använda samma webbadresser och att visa lämplig version av innehållet utan omdirigering John Mueller, Google

Att ignorera Googles rekommendationer är ofta inte ett smart drag

Citat: För att sammanfatta, för närvarande tittar våra genomsöknings-, indexerings- och rankningssystem vanligtvis på skrivbordet version av en sidas innehåll, vilket kan orsaka problem för mobilsökare när den versionen skiljer sig mycket från mobilversionen. Mobile-first-indexering innebär att vi använder mobilversionen av innehållet för indexering och rankning för att bättre hjälpa våra – främst mobila – användare att hitta det de letar efter. Webmasters kommer att se avsevärt ökad genomsökning av Smartphone Googlebot, och utdrag i resultaten, liksom innehållet på Googles cachesidor, kommer från mobilversionen av sidorna.Google nov 2017

Google erbjuder följande tips för att kontrollera att din webbplats är förberedd för mobil första index, men i huvudsak om du använder en responsiv webbdesign mall för din webbplats bör du ha minimala problem med den här ändringen:

Se till att mobilversionen av webbplatsen också har det viktiga , högkvalitativt innehåll. Detta inkluderar text, bilder (med alt-attribut) och videor – i de vanliga genomsökbara och indexerbara formaten.
Strukturerad data är viktig för indexerings- och sökfunktioner som användarna älskar: det borde finnas både på mobil- och skrivbordsversionen av webbplatsen. Se till att webbadresser i den strukturerade informationen uppdateras till mobilversionen på mobilsidorna.
Metadata ska finnas i båda versionerna av webbplatsen. Det ger tips om innehållet på en sida för indexering och visning. Se till exempel till att titlar och metabeskrivningar är ekvivalenta för båda versionerna av alla sidor på webbplatsen.
Inga ändringar är nödvändiga för sammanlänkning med separata mobil-URL: er (m.-dot-webbplatser). För webbplatser som använder separata mobil-URL: er, behåll den befintliga länken rel = kanonisk och länk rel = alternerande element mellan dessa versioner.
Kontrollera hreflang-länkar på separata mobil-URL: er. När du använder länk rel = hreflang-element för internationalisering, länk mellan mobila och stationära URL: er separat. Dina mobil-URL: ar hreflang bör peka på andra språk / regionversioner på andra mobil-URL: er och på liknande sätt länka skrivbordet till andra skrivbords-URL: er med hjälp av 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, endast 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 innebär är det alltid en viktig fråga att rulla. Användare gillade i allmänhet inte att bläddra om de inte behöver – även om det genom åren har förändrats.

Så när du designar bör du överväga hur mycket användare kan se om de bara rullar en skärmen full eller två. Mer än fem skärmar långa kan vara en indikation för dig att det kan finnas för mycket kopia på sidan. Naturligtvis balanseras detta med uppfattningen att vissa artiklar är avsedda att vara fördjupade informationsstycken och användarna förväntar sig att vänta lite längre på att se vissa sidinnehåll och innehållstyper.

Både rullning och initial synligheten är uppenbarligen beroende av skärmstorlek: Större skärmar visar mer innehåll ovanför mitten 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 Googles optimering – att ha en mobilvänlig webbplats är mer eller mindre för att du ska behålla den trafik du redan får, inte nödvändigtvis ge dig mer gratis trafik från Google.

Om du inte redan får mycket trafik från mobilbesö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 analyser åtminstone ) i början – men med tiden – kommer det antagligen att vara en oerhört viktig utmaning att navigera.

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

På lång sikt – den här mobila omvandlingen kan bara vara bra för dina användare – men på kort sikt kommer det att bli intressant att se vilken effekt det har på småföretagens omvandlingsfrekvenser – eftersom omvandlingsfrekvenser via mobil ofta är lägre än på skrivbordet.

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

Hur För att kontrollera viktiga problem med mobilanvändbarhet på din webbplats

Google Search Console

Du borde kunna spåra mobilfel i Google Search Console (AKA Google Webmaster Tools) och se fel försvinna över tid om din webbplats är korrekt konfigurerad.

Verktyg för att testa din webbplats för mobilvänlighet

Sökningskonsolens inspektionsverktyg
Pagespeed Insights
Think With Google
Mobilvänligt test

Hur gör du din webbplats mobilvänlig

Del 1 – PageSpeed Insights, mobilvänligt test och mobilanvändbarhet

Del 2 – Viewports, zoom och plugins

Del 3 – Tryck lätt på mål, marginaler och teckenstorlekar

Del 4 – omdirigeringar

Webbutvecklare borde hitta mina andra senaste inlägg användbart sedan webbplatsens hastighet är en rankningsfaktor i Google:

OFFERT: ”Mobilversionen av en webbplats bör helst laddas på under 3 sekunder och snabbare desto bättre. EN MYCKET LÅNGSAM WEBBPLATS kan vara en NEGATIV Rankningsfaktor (bekräftad av Google). Det finns ingen inställd tröskel eller hastighetspoäng att möta st för att göra din sida så snabb som möjligt. ” Shaun Anderson, Hobo 2020

Ansvarsfriskrivning

Ansvarsfriskrivning: ”Medan jag har gjorde allt för att säkerställa att informationen jag har lämnat är korrekt, Det är inte råd .; Jag kan inte ta något ansvar för några fel eller utelämnanden. Författaren garanterar inte för tredje parts webbplatser eller någon tredje parts tjänst. Besök tredje parts webbplatser på egen risk. Jag är inte direkt partner med Google eller någon annan tredje part. Denna webbplats använder cookies endast för analys och grundläggande webbplatsfunktioner. Denna artikel utgör inte juridisk rådgivning. Författaren accepterar inte något ansvar som kan uppstå genom åtkomst till de uppgifter som presenteras på denna webbplats. Länkar till interna sidor marknadsför mitt eget innehåll och tjänster. ” Shaun Anderson, Hobo

admin