De mest populära skärmupplösningarna. Hur man får tillbaka förlorad trafik eller varför statistik om skärmupplösningar är användbar

Du kanske inte ens är medveten om det faktum att din webbplats inte visas korrekt på en skärm med en upplösning på 320x480 och alla läsare med en sådan smartphone lämnar din blogg utan att studera informationen på den.

Må det vara bra där Intressant information(för bloggen), mest lågt pris för produkten (för en webbutik), super nyttig kurs, men om sidan är sned, knapparna är inte synliga, textraderna överlappar varandra, då ser du inte försäljningssidor med den här displayen.

Därför är det nödvändigt att analysera statistiken och identifiera behörigheter från vilka besökare lämnar och vidta åtgärder för att rätta till buggar.

Skärmupplösningsstatistik

Allt är klart där, ange webbplatsens URL:

Nu kan du välja olika alternativ. Dessutom, som standardupplösningar för smartphones (flik 3):

Så, slumpmässigt ange upplösningen i siffror (flik 5):

Jag visade dig hur du använder verktyget, nu improvisera för dina webbplatser.

Hur man åtgärdar fel

Sammanfattningsvis uppstår frågan: "Varför behöver jag allt detta, studera webbläsare, behörigheter, etc.?"

Svaret är enkelt - att öka trafiken och försäljningen.

I mitt fall är förlusterna minimala, mindre än 2 % av besökarna för året kvar eftersom min blogg visades dåligt på deras enhet från vilken de kom åt sidan. Dessa är små siffror, dina kan vara högre eller lägre, men du måste förstå att sådana trickles kan lägga till ett stort flöde av förluster.

Författaren till webbplatsen kan tro att han har dålig design, användbarhet, han vet inte hur man skriver artiklar korrekt, eller så har han en dålig produkt, ett högt pris, men i själva verket kan orsaken vara annorlunda. Om du vet det, då kan problemet lösas, kom ihåg detta.

Om din webbplats har många upplösningsproblem är mallen troligen inte responsiv eller av låg kvalitet och måste bytas ut. Vänligen notera att mobiltrafik kommer bara att öka med åren, så ungefär responsiv mall(eller mobilversionen av webbplatsen) måste övervägas så tidigt som möjligt.

Jag pratade om detta ämne i detalj här:

Jag skulle vilja höra om resultatet av din webbplatsanalys, vilka skärmupplösningar har flest misslyckanden?

Om du har några frågor, skriv i kommentarerna, jag hjälper definitivt.

Anteckningar

Först lite om teorin. Skärmupplösningen kan variera beroende på vilken enhet du använder. Vissa användare tror felaktigt att skärmstorlek och bildskärmsupplösning är samma sak. Till exempel skärmstorlek och dess maximal upplösning motsvarar 1600 x 1200, och användaren kan ställa in upplösningen, till exempel 800 x 600. Naturligtvis kommer bilden på skärmen att formas enligt principen som ställts in av användaren själv. Som ett resultat visar det sig att skärmstorleken och dess upplösning är lite olika begrepp. För att få den perfekta bilden måste du ställa in den maximala upplösningen som din skärm stöder och då blir bilden av högsta kvalitet.

Vilka skärmupplösningar finns det?

Idag finns det stor mängd bildskärmar och samma antal upplösningar. Det bör noteras att alla dessa enheter har olika bildförhållanden, till exempel: 4:3, 5:4, 16:9, 16:10 och många andra. Bredbildsenheter med ett bildförhållande på 21:9 är mycket efterfrågade. Det är helt enkelt inte praktiskt att använda sådana enheter idag, eftersom de är bäst lämpade för att titta på filmer inspelade med CinemaScope-standarden. Detta är direkt relaterat till det faktum att om du ställer in en annan upplösning på en sådan bildskärm, till exempel FullHD (1920 x 1080p), så kommer breda svarta fält att finnas kvar vid kanterna på skärmen.

När det gäller upplösningen på själva bildskärmarna är de uppdelade mellan sig, som du kanske kan gissa, efter bildförhållande. Följande är markerade: För bildförhållande 4:3 -1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536. För bildförhållande 16:9: 1366x768, 1600x900, 1920x1080, 2048x1152, 2560x1440, 3840x2160. För bildförhållande 16:10: 1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400. De mest populära upplösningarna idag är: 1920x1080, 1280x1024, 1366x768.

Det är värt att notera att ju högre skärmupplösning, desto bättre blir bilden i sig, men den kan vara väldigt liten och vissa ägare av sådana enheter måste ändra den till en mindre för att se något på skärmen. Som ett resultat kan alla förstås direkt innan de köper en enhet i en butik se vilken typ av bild som kommer att finnas på den och om den passar dem.

Idag finns det ett stort antal produkter från olika områden på investeringsmarknaden. Vi tyckte det var värt att uppmärksamma er på den snabbt växande marknaden för mobila enheter. Nej, det kommer inga recensioner här, vi vill titta på denna marknad genom prismat av skärmegenskaper. En mobiltelefon, surfplatta, bärbar dator är redan fast förankrad i våra liv, faktiskt, vi spenderar mer tid med dem än med levande människor omkring oss.

Vad statistiken säger

Vi ägnade lång tid åt att studera statistiska rapporter för olika mätvärden från partnerwebbplatser. Betraktade specifikationer de mest populära mobila enheterna. Situationen är att stora enheter har börjat dominera marknaden bland alla mobila enheter. Mobiltelefoner, vars diagonal börjar från 5,5" och slutar på 6,2". Låt oss lägga till här Apples önskan att släppa en produkt med en 6,5" diagonal till marknaden i slutet av året. Och vår hjärna börjar ha svårt att smälta behovet av sådan teknik. Du kan inte stoppa detta i fickan längre, och Den får inte plats i varje väska Men om du tittar på hur telefonen används modern smartphone. då blir det klart varför. Detta är ett konstigt faktum: telefonen verkar ha uppfunnits för röstkommunikation, och används alltmer som en enhet för att surfa på Internet. För att uttrycka det enkelt – den nuvarande trenden är bra kvalitet mobiltelefon med en utmärkt skärm, kamera och internet. Detta är en bekväm "skördare", du behöver bara ladda den en gång om dagen.

Nu om behörigheter. De mest populära upplösningarna är fortfarande 1366*738 och 1920*1080. Dessa är inte mobilupplösningar. Men den mest populära mobilupplösningen har blivit 360*640. Faktum är att dessa är de tre bästa.

Den fullständiga tabellen med marknadsinformation är som följer:

Slutsats

Marknaden för mobila enheter står inte stilla. Idag måste vi leta efter alternativ för att investera på denna marknad.

En mycket mångfacetterad process. Men ändå kan alla dess stadier delas in i två huvudkomponenter - funktionalitet och yttre skal. Eller, som är brukligt bland webbansvariga, backend respektive frontend. Människor som beställer sina webbplatser från webbutvecklingsstudior tror ofta naivt att det är rätt beslut att bara fokusera på funktionalitet. Men detta är sant i mycket, mycket sällsynta fall, vanligtvis för startprojekt i betatestningsstadiet. Annat grafisk design och användargränssnittet måste helt enkelt vara bekvämt, men vi bör inte glömma sidans framtid, med hänsyn till den.

Den första hörnstenen en front-end designer, eller designer, möter är bredden på webbplatsens layout. När allt kommer omkring är det nödvändigt att rita gränssnitt för det. Rent intuitivt uppstår två tillvägagångssätt - antingen gör separata layouter för varje populär skärmupplösning, eller skapa en version av sajten för alla skärmar. Och båda alternativen kommer att vara felaktiga, men först till kvarn.

Standard webbplatsbredd i pixlar för RuNet

Innan utvecklingen av adaptiv layout var det vanligt att utveckla en webbplats med en bredd på tusen pixlar. Denna figur valdes av en enkel anledning - så att sajten passar på vilken skärm som helst. Och detta har sin egen logik, men låt oss anta att en person fortfarande har åtminstone en HD-skärm på sitt skrivbord. I det här fallet kommer din layout att visas som en liten remsa i mitten av skärmen, där allt sitter ihop i en hög, och på sidorna finns det ett enormt oanvänt utrymme. Låt oss nu anta att en person har besökt din webbplats från en surfplatta med en skärm på 800 pixlar i bredd, och i inställningarna finns en bock "Visa full version webbplats". I det här fallet kommer din webbplats inte heller att visas korrekt, eftersom den helt enkelt inte passar in på skärmen.

Av dessa överväganden kan vi dra slutsatsen att fast bredd Det passar oss definitivt inte för layouten och vi måste leta efter ett annat sätt. Låt oss utforska idén med en separat layout för varje skärmbredd.

Layouter för alla tillfällen

Om du väljer som strategi att skapa layouter för alla skärmstorlekar som finns på marknaden, kommer din sida att bli den mest unika på hela Internet. När allt kommer omkring är det helt enkelt omöjligt idag att täcka hela utbudet av enheter och försöka finjustera varje alternativ. Men om du fokuserar på de mest populära upplösningarna för bildskärmar och enhetsskärmar, så är idén inte dålig. Dess enda nackdel är finansiella kostnader. När allt kommer omkring, när gränssnittsdesignern, designern och layoutdesignern tvingas göra samma arbete 5 eller 6 gånger, kommer projektet att kosta oproportionerligt mycket mer än det ursprungligen budgeterade priset.

Därför stoltserar med ett överflöd av versioner under olika skärmar Kanske bara ensidiga sajter, vars syfte är att sälja en produkt och se till att göra det bra. Tja, om du inte har en av dessa målsidor, utan en flersidig webbplats, så är det värt att diskutera vidare.

Mest populära webbplatsstorlekar

En kompromiss mellan de två ytterligheterna är att göra en layout för tre eller fyra. Bland dem måste man vara en layout för mobila enheter. Resten bör anpassas för små, medelstora och stora skrivbordsskärmar. Hur väljer man webbplatsens bredd? Nedan presenterar vi statistik från HotLog-tjänsten för maj 2017, som visar oss fördelningen av populariteten för olika enhetsskärmupplösningar, såväl som dynamiken i förändringar i denna indikator.

Från tabellen kan du lära dig hur du bestämmer storleken på webbplatsen som ska användas. Dessutom kan vi dra slutsatsen att det vanligaste formatet idag är en skärm med 1366 x 768 pixlar. Sådana skärmar installeras i budget bärbara datorer, så deras popularitet är naturlig. Den näst mest populära är Full HD-skärmen, som är guldstandarden för videor, spel och därför för att skapa webbplatslayouter. Längre i tabellen ser vi upplösningen för mobila enheter 360 gånger 640 pixlar, samt olika alternativ för stationära och mobila skärmar efter honom.

Designa en layout

Så efter att ha analyserat statistiken kan vi dra slutsatsen att den optimala webbplatsbredden har fyra varianter:

1. Laptopversion med en bredd på 1366 pixlar.
2. Full HD-version.
3. Layouten är 800 pixlar bred för visning på små stationära skärmar.
4. Den mobila versionen av sajten är 360 pixlar bred.

Låt oss säga att vi har bestämt vilken storlek vi ska använda för att skapa källan för webbplatsen. Men ett sådant projekt blir ändå dyrt. Så låt oss titta på några fler alternativ, denna gång utan att använda en fast bredd.

Gör layouten flexibel

Det finns ett alternativt tillvägagångssätt, när du bara behöver anpassa dig till minsta storlek skärm, och själva webbplatsstorlekarna kommer att ställas in som procent. Samtidigt kan som menyer, knappar och logotyper anges i absoluta värden, med fokus på minimistorleken på skärmens bredd i pixlar. Block med innehåll, tvärtom, kommer att sträckas enligt den angivna procentandelen av bredden på skärmområdet. Detta tillvägagångssätt låter dig sluta uppfatta storleken på webbplatser som en begränsning för designern och leka skickligt med denna nyans.

Vad är det gyllene snittet och hur kan det tillämpas på webbsidelayout?

Även under renässansen försökte många arkitekter och konstnärer ge sina skapelser den idealiska formen och proportionen. För svar på frågor om innebörden av denna andel vände de sig till drottningen av alla vetenskaper - matematik.

Sedan antiken uppfanns en proportion som vårt öga uppfattar som den mest naturliga och eleganta, eftersom den finns överallt i naturen. Upptäckaren av formeln för ett sådant förhållande var en begåvad forntida grekisk arkitekt vid namn Phidias. Han beräknade att om den större delen av en andel relaterar till den mindre som helheten relaterar till den större, så kommer en sådan andel att se ut det bästa sättet. Men så är fallet om du vill dela objektet asymmetriskt. Denna andel kallades senare det gyllene snittet, vilket fortfarande inte överskattar dess betydelse för kulturens världshistoria.

Låt oss gå tillbaka till webbdesign

Det är väldigt enkelt - med det gyllene snittet kan du designa sidor som kommer att vara så tilltalande för det mänskliga ögat som möjligt. Efter att ha beräknat enligt definitionen av formeln för det gyllene snittet får vi det irrationella talet 1,6180339887..., men för enkelhetens skull kan du använda det avrundade värdet på 1,62. Detta kommer att innebära att våra sidblockeringar bör vara 62 % och 38 % av helheten, oavsett storleken på webbplatskällan du använder. Du kan se ett exempel i följande diagram:

Använd ny teknik

Moderna webblayouttekniker gör det möjligt att förmedla designerns idé så exakt som möjligt, så nu har du råd att implementera mer vågade idéer än i början av internettekniken. Du behöver inte längre fundera över vilken storlek webbplatsen ska ha. Med tillkomsten av saker som block Adaptiv layout, dynamisk laddning av innehåll och typsnitt, webbplatsutveckling har blivit mycket roligare. När allt kommer omkring har sådana tekniker färre restriktioner, även om de fortfarande finns. Men som vi vet, utan restriktioner skulle det inte finnas någon konst. Vi föreslår att du använder ett verkligt kreativt tillvägagångssätt för design - det gyllene snittet. Med hjälp av den kan du effektivt och vackert fylla vilka webbplatsstorlekar du än anger i dina mallar.

Hur man ökar arbetsytan på webbplatsen

Det finns en god chans att du inte har tillräckligt med utrymme för att passa in alla UI-element i din layout liten storlek. I det här fallet måste du börja tänka kreativt eller ännu mer kreativt än du gjorde tidigare.

Du kan frigöra så mycket utrymme som möjligt på din webbplats genom att dölja navigeringen i en popup-meny. Detta tillvägagångssätt är inte bara logiskt att använda Mobil enheter, men även på stationära datorer. När allt kommer omkring behöver användaren inte ständigt titta på vilka kategorier som finns på din sida - han kom för innehållet. Och användarens önskemål ska respekteras.

Exempel bra sätt dölj menyn är följande layout (bild nedan).

I övre hörnet i det röda området kan du se ett kryss, klicka på vilket kommer att dölja menyn i en liten ikon, vilket lämnar användaren ensam med innehållet på webbplatsen.

Detta är dock inte nödvändigt du kan lämna navigeringen, som alltid kommer att vara synlig. Men du kan göra detta till ett vackert designelement, och inte bara en lista över populära länkar på webbplatsen. Använd intuitiva ikoner utöver eller till och med istället för textlänkar. Detta gör också att din webbplats kan utnyttja skärmutrymmet på användarens enhet mer effektivt.

Den bästa webbplatsen är responsiv

Om du inte vet vilken layout du ska välja för din webbplats är allt enkelt för dig. För att spara på utvecklingskostnader utan att förlora din publik på grund av en dålig layout för någon enhet, använd responsiv design.

Adaptiv design är en design som ser ut olika enheter lika bra. Detta tillvägagångssätt gör att din webbplats blir begriplig och bekväm även på en bärbar dator, även på en surfplatta, till och med på en smartphone. Denna effekt uppnås pga automatiska ändringar bredden på skärmens arbetsområde. Genom att använda responsiva stilmallar för din webbplats fattar du det bästa möjliga beslutet.

Vad är skillnaden mellan adaptiv design och att ha olika versioner av en webbplats?

Responsiv design skiljer sig från mobilversion i det senare fallet får användaren en html-kod som skiljer sig från den stationära. Detta är en nackdel ur synvinkel att optimera serverprestanda, liksom sökmotoroptimering. Dessutom blir det svårare att räkna ut statistik på olika versioner webbplats. Det adaptiva tillvägagångssättet har inte sådana nackdelar.

Anpassningsbarhet för olika enheter uppnås genom en layout med en procentuell breddinställning, antingen genom att flytta block till det tillgängliga utrymmet (i ett vertikalt plan på en smartphone istället för ett horisontellt på ett skrivbord), eller genom att skapa individuella layouter för olika skärmar.

Lära sig mer om adaptiv design och dess utveckling kan du från läroböcker.

Baserat på material från Deviceatlas webbplats

Att veta vilka smartphone-skärmupplösningar som är mest populära idag kommer att hjälpa dig att optimera din webbplats för att ta hänsyn till skillnaderna mellan olika enheter. DeviceAtlas samlad in den senaste enhetsanvändningsstatistiken relaterad till detta problem.

Nya skärmupplösningar på marknaden

I senaste åren alla flaggskepp Android OS-enheter hade Full HD (1080x1920) och QHD (1440x2560) upplösning. Under 2017 dök flera enheter med icke-standardiserade upplösningar upp på marknaden, främst på grund av den nya trenden för kant-till-kant-skärmar (hela enhetens bredd). Inklusive:

• Samsung Galaxy Note 8: 1440 x 2960 pixlar
• Samsung Galaxy S8: 1440 x 2960 pixlar
• LG V30: 1440 x 2880 pixlar
• LG G6: 1440 x 2880 pixlar
• Sony Xperia XZ Premium: 3840 x 2160 pixlar
• iPhone X: 1125 x 2436 pixlar (nyss meddelats)

Självklart dessa icke-standardiserade upplösningar har ännu inte tagits med i vår statistik. Men på ett eller annat sätt kan vi förvänta oss att S8-standarden kan bli en av de mest populära på listan på grund av Galaxy S-familjens enorma popularitet: till exempel blev det tidigare flaggskeppet - S7 - den vanligaste Android-enheten i världen.

Den mest använda smartphone-skärmupplösningen är 720x1280

Enligt trafikstatistik för juli-augusti 2017 har den mest populära skärmupplösningen på smartphones blivit förhållandet 720x1280 pixlar, som används på de flesta medel- och budgetenheter. Det är den mest använda upplösningen i 11 av de 20 analyserade länderna, inklusive Indien, Italien och Spanien. Det följs tätt av förhållandet 750x1334, som används i populära i USA, Storbritannien och Australien iPhone-modeller. I Frankrike och Tyskland har den vanligaste upplösningen i sin tur blivit Full HD i mellan- och budgetsmarttelefoner.

Tabellen visar de mest populära smartphone-skärmupplösningarna i alla 20 länder som deltar i studien.

Graferna nedan visar andelen trafik som kom från smartphones med en skärmupplösning på 720x1280 i juli-augusti 2017 i de länder som deltar i studien.

Full HD tar över marknaden, antagandet av QHD saktar ner

Vi analyserade också hur snabbt användningen av flera populära resolutioner växte under året – från Q4 2016 till Q3 2017. Trots aktiv tillväxt tidigare har spridningen av QHD-upplösning (1440×2560) nu avtagit.

I Frankrike, Indien, Nigeria och USA tappade QHD-enheter till och med marknadsandelar (-4 % i det senare landet). Under de senaste fyra kvartalen har FHD-enheter (1080x1920) vuxit snabbare och lagt till 5-10 % i Brasilien, Frankrike, Japan, Polen, Spanien och USA.

Trafikandel för Full HD-enheter (1080x1920) under de senaste fyra kvartalen:

Andel trafik för QHD-enheter (1440x2560) under de senaste fyra kvartalen: