Eerst iets over de theorie. De schermresolutie kan variëren, afhankelijk van het apparaat dat u gebruikt. Sommige gebruikers denken ten onrechte dat schermgrootte en schermresolutie hetzelfde zijn. De schermgrootte en de maximale resolutie zijn bijvoorbeeld 1600 x 1200 en de gebruiker kan de resolutie instellen op bijvoorbeeld 800 x 600. Uiteraard wordt het beeld op het scherm gevormd volgens het principe dat door de gebruiker is ingesteld zichzelf. Als gevolg hiervan blijkt dat schermgrootte en resolutie enigszins verschillende concepten zijn. Om het perfecte beeld te krijgen, moet u de maximale resolutie instellen die uw monitor ondersteunt. Dan is het beeld van de hoogste kwaliteit.

Welke schermresoluties zijn er?

Tegenwoordig zijn er een groot aantal monitoren en hetzelfde aantal resoluties. Opgemerkt moet worden dat al deze apparaten verschillende beeldverhoudingen hebben, bijvoorbeeld: 4:3, 5:4, 16:9, 16:10 en vele andere. Er is veel vraag naar breedbeeldapparaten met een beeldverhouding van 21:9. Tegenwoordig is het gewoon niet praktisch om dergelijke apparaten te gebruiken, omdat ze het meest geschikt zijn voor het bekijken van films die zijn opgenomen met de CinemaScope-standaard. Dit houdt direct verband met het feit dat als je op zo’n monitor een andere resolutie instelt, bijvoorbeeld FullHD (1920 x 1080p), er brede zwarte balken aan de randen van de monitor achterblijven.

Wat de resolutie van de monitoren zelf betreft, deze zijn, zoals je zou kunnen raden, onderling verdeeld op basis van de beeldverhouding. Het volgende wordt gemarkeerd: Voor beeldverhouding 4:3 -1024x768, 1280x1024, 1600x1200, 1920x1440, 2048x1536. Voor een beeldverhouding van 16:9: 1366x768, 1600x900, 1920x1080, 2048x1152, 2560x1440, 3840x2160. Voor een beeldverhouding van 16:10: 1280x800, 1440x900, 1600x1024, 1680x1050, 1920x1200, 2560x1600, 3840x2400. De meest populaire resoluties van vandaag zijn: 1920x1080, 1280x1024, 1366x768.

Het is vermeldenswaard dat hoe hoger de schermresolutie, hoe beter het beeld zelf zal zijn, maar het kan erg klein zijn en sommige eigenaren van dergelijke apparaten zullen het naar een kleiner formaat moeten veranderen om iets op de monitor te kunnen zien. Hierdoor kan iedereen natuurlijk vlak voor aankoop van een toestel in de winkel zien wat voor afbeelding erop komt te staan ​​en of het bij hem/haar past.

Een zeer veelzijdig proces. Maar toch kunnen al zijn fasen worden onderverdeeld in twee hoofdcomponenten: functionaliteit en de buitenste schil. Of, zoals gebruikelijk bij webmasters, respectievelijk backend en frontend. Mensen die hun websites bij webontwikkelingsstudio's bestellen, geloven vaak naïef dat alleen focussen op functionaliteit de juiste beslissing zal zijn. Maar dit geldt in zeer, zeer zeldzame gevallen, meestal voor startup-projecten die zich in de bètatestfase bevinden. Anders moeten het grafische ontwerp en de gebruikersinterface eenvoudigweg handig zijn, maar we mogen de toekomst van de site niet vergeten en er rekening mee houden.

De eerste hoeksteen waarmee een front-endontwerper of ontwerper wordt geconfronteerd, is de breedte van de lay-out van de site. Het is immers noodzakelijk om er interfaces voor te tekenen. Puur intuïtief ontstaan ​​er twee benaderingen: maak afzonderlijke lay-outs voor elke populaire schermresolutie, of maak één versie van de site voor alle beeldschermen. En beide opties zullen onjuist zijn, maar eerst en vooral.

Standaard websitebreedte in pixels voor RuNet

Vóór de ontwikkeling van adaptieve lay-out was het gebruikelijk om een ​​website te ontwikkelen met een breedte van duizend pixels. Dit figuur is om één simpele reden gekozen: zodat de site op elk scherm past. En dit heeft zijn eigen logica, maar laten we aannemen dat iemand nog steeds minimaal een HD-monitor op zijn bureaublad heeft. In dit geval verschijnt je lay-out als een kleine strook in het midden van het scherm, waar alles op één stapel aan elkaar is geplakt, en aan de zijkanten is er een enorme ongebruikte ruimte. Laten we nu aannemen dat iemand uw website heeft bezocht vanaf een tablet met een scherm van 800 pixels breed en dat het selectievakje 'Volledige versie van de website weergeven' is aangevinkt in de instellingen. In dit geval wordt uw site ook niet correct weergegeven, omdat deze simpelweg niet in het scherm past.

Uit deze overwegingen kunnen we concluderen dat een vaste breedte voor de indeling voor ons absoluut niet geschikt is en dat we op zoek moeten naar een andere methode. Laten we het idee van een aparte lay-out voor elke schermbreedte eens verkennen.

Indelingen voor alle gelegenheden

Als u als strategie kiest om lay-outs te maken voor alle schermformaten die op de markt aanwezig zijn, dan wordt uw site de meest unieke op het hele internet. Het is tegenwoordig immers simpelweg onmogelijk om het hele scala aan apparaten te bestrijken en elke optie te verfijnen. Maar als je je concentreert op de meest populaire resoluties van monitoren en apparaatschermen, dan is het idee niet slecht. Het enige nadeel zijn de financiële kosten. Wanneer de interface-ontwerper, ontwerper en lay-outontwerper 5 tot 6 keer hetzelfde werk moeten doen, kost het project immers onevenredig meer dan de oorspronkelijk begrote prijs.

Daarom kunnen alleen sites van één pagina die tot doel hebben één product te verkopen en dit goed te doen, bogen op een overvloed aan versies voor verschillende schermen. Nou, als je niet één van deze landingspagina’s hebt, maar een site met meerdere pagina’s, dan is het de moeite waard om er verder over te praten.

Meest populaire websiteformaten

Een compromis tussen de twee uitersten is het weergeven van een lay-out voor drie of vier personen. Daarvan moet er één een lay-out voor mobiele apparaten zijn. De rest moet worden aangepast voor kleine, middelgrote en grote desktopschermen. Hoe de breedte van de site kiezen? Hieronder presenteren we statistieken van de HotLog-service voor mei 2017, die ons de verdeling van de populariteit van verschillende schermresoluties van apparaten laat zien, evenals de dynamiek van veranderingen in deze indicator.

Uit de tabel kunt u leren hoe u de grootte van de te gebruiken site kunt bepalen. Daarnaast kunnen we concluderen dat het meest voorkomende formaat vandaag de dag een scherm van 1366 bij 768 pixels is. Dergelijke schermen worden geïnstalleerd in budgetlaptops, dus hun populariteit is natuurlijk. De volgende meest populaire is de Full HD-monitor, de gouden standaard voor video's, games en dus voor het maken van website-indelingen. Verderop in de tabel zien we de resolutie van mobiele apparaten 360 bij 640 pixels, evenals verschillende opties voor desktop- en mobiele schermen daarna.

Het ontwerpen van een lay-out

Na analyse van de statistieken kunnen we dus concluderen dat de optimale sitebreedte 4 variaties kent:

1. Laptopversie met een breedte van 1366 pixels.
2. Full HD-versie.
3. De lay-out is 800 pixels breed voor weergave op kleine desktopmonitoren.
4. De mobiele versie van de site is 360 pixels breed.

Stel dat we hebben besloten welk formaat we moeten gebruiken om de broncode voor de site te maken. Maar zo'n project zal nog steeds duur zijn. Laten we dus wat meer opties bekijken, dit keer zonder een vaste breedte te gebruiken.

Flexibel maken van de indeling

Er is een alternatieve aanpak, waarbij u zich alleen hoeft aan te passen aan de minimale schermgrootte en de sitegroottes zelf in percentages worden ingesteld. Tegelijkertijd kunnen bijvoorbeeld menu's, knoppen en logo's in absolute waarden worden gespecificeerd, waarbij de nadruk ligt op de minimale grootte van de schermbreedte in pixels. Blokken met inhoud worden daarentegen uitgerekt volgens het opgegeven percentage van de breedte van het schermgebied. Met deze aanpak kunt u de grootte van websites niet langer als een beperking voor de ontwerper beschouwen en vakkundig met deze nuance spelen.

Wat is de gulden snede en hoe kan deze worden toegepast op de lay-out van webpagina's?

Zelfs tijdens de Renaissance probeerden veel architecten en kunstenaars hun creaties de ideale vorm en verhoudingen te geven. Voor antwoorden op vragen over de betekenis van deze verhouding wendden ze zich tot de koningin van alle wetenschappen: de wiskunde.

Sinds de oudheid is er een verhouding uitgevonden die door ons oog als het meest natuurlijk en elegant wordt ervaren, omdat deze overal in de natuur voorkomt. De ontdekker van de formule voor een dergelijke verhouding was een getalenteerde oude Griekse architect genaamd Phidias. Hij berekende dat als het grootste deel van de verhouding betrekking heeft op de kleinere, terwijl het geheel betrekking heeft op de grotere, deze verhouding er het beste uit zal zien. Maar dit is het geval als u het object asymmetrisch wilt verdelen. Dit aandeel werd later de gulden snede genoemd, wat het belang ervan voor de wereldgeschiedenis van de cultuur nog steeds niet overschat.

Laten we teruggaan naar webdesign

Het is heel eenvoudig: met behulp van de gulden snede kunt u pagina's ontwerpen die zo aangenaam mogelijk zijn voor het menselijk oog. Na te hebben berekend volgens de definitie van de gulden snede-formule, verkrijgen we het irrationele getal 1,6180339887..., maar voor het gemak kunt u de afgeronde waarde van 1,62 gebruiken. Dit betekent dat onze paginablokken 62% en 38% van het geheel moeten uitmaken, ongeacht de grootte van de sitebron die u gebruikt. Een voorbeeld ziet u in het volgende diagram:

Gebruik nieuwe technologieën

Moderne technologieën voor website-indeling maken het mogelijk om het idee van de ontwerper zo nauwkeurig mogelijk over te brengen, dus nu kunt u het zich veroorloven om meer gedurfde ideeën te implementeren dan aan het begin van de internettechnologieën. U hoeft niet langer uw hoofd te breken over de grootte van de site. Met de komst van zaken als op blokken gebaseerde adaptieve lay-out en het dynamisch laden van inhoud en lettertypen is het ontwikkelen van websites veel leuker geworden. Dergelijke technologieën kennen immers minder beperkingen, hoewel ze nog steeds bestaan. Maar zoals we weten zou er zonder beperkingen geen kunst zijn. We raden u aan één werkelijk creatieve ontwerpbenadering te gebruiken: de gulden snede. Met zijn hulp kunt u effectief en mooi de siteformaten vullen die u in uw sjablonen opgeeft.

Hoe u de werkruimte van de site kunt vergroten

De kans is groot dat u niet genoeg ruimte heeft om alle UI-elementen in een kleine lay-out te passen. In dit geval zul je creatief of zelfs creatiever moeten gaan denken dan voorheen.

U kunt zoveel mogelijk ruimte op uw site vrijmaken door de navigatie in een pop-upmenu te verbergen. Deze aanpak is logisch om niet alleen op mobiele apparaten te gebruiken, maar ook op desktops. De gebruiker hoeft immers niet voortdurend te kijken naar welke categorieën er op uw site staan ​​- hij kwam voor de inhoud. En de wensen van de gebruiker moeten gerespecteerd worden.

Een voorbeeld van een goede manier om een ​​menu te verbergen is de volgende lay-out (foto hieronder).

In de bovenhoek van het rode gebied ziet u een kruis. Als u hierop klikt, wordt het menu verborgen in een klein pictogram, zodat de gebruiker alleen blijft met de inhoud van de website.

Dit is echter niet nodig; u kunt de navigatie verlaten, deze is altijd zichtbaar. Maar u kunt er een mooi ontwerpelement van maken, en niet alleen een lijst met populaire links op de site. Gebruik intuïtieve pictogrammen naast of zelfs in plaats van tekstlinks. Hierdoor kan uw site ook efficiënter gebruik maken van de schermruimte op het apparaat van de gebruiker.

De beste website is responsief

Als u niet weet welke lay-out u voor uw website moet kiezen, dan is alles eenvoudig voor u. Gebruik responsief ontwerp om te besparen op ontwikkelingskosten zonder uw publiek te verliezen vanwege een slechte lay-out voor een bepaald apparaat.

Adaptief ontwerp is een ontwerp dat er op verschillende apparaten even goed uitziet. Deze aanpak zorgt ervoor dat uw site begrijpelijk en handig is, zelfs op een laptop, zelfs op een tablet, zelfs op een smartphone. Dit effect wordt bereikt door automatisch de breedte van het schermwerkgebied te veranderen. Door responsieve stylesheets voor uw website te gebruiken, maakt u de best mogelijke beslissing.

Wat is het verschil tussen adaptief ontwerp en verschillende versies van een website?

Adaptief ontwerp verschilt van de mobiele versie van de site doordat in het laatste geval de gebruiker een html-code ontvangt die verschilt van de desktopversie. Dit is een nadeel in termen van het optimaliseren van de serverprestaties en zoekmachineoptimalisatie. Bovendien wordt het moeilijker om statistieken voor verschillende versies van de site te berekenen. De adaptieve aanpak kent dergelijke nadelen niet.

Aanpassingsvermogen voor verschillende apparaten wordt bereikt door een lay-out met een procentuele breedte-instelling, hetzij door blokken naar de beschikbare ruimte te verplaatsen (in een verticaal vlak op een smartphone in plaats van een horizontaal vlak op een desktop), of door individuele lay-outs voor verschillende schermen te maken.

U kunt meer leren over responsief ontwerp en de ontwikkeling ervan uit leerboeken.

Gebaseerd op materiaal van de Deviceatlas-website

Als u weet welke schermresoluties van smartphones tegenwoordig het populairst zijn, kunt u uw website optimaliseren om rekening te houden met de verschillen tussen verschillende apparaten. DeviceAtlas verzameld de nieuwste apparaatgebruiksstatistieken met betrekking tot dit probleem.

Nieuwe schermresoluties op de markt

De afgelopen jaren hebben alle vlaggenschip-Android OS-apparaten Full HD (1080x1920) en QHD (1440x2560) resoluties. In 2017 verschenen er meerdere toestellen met afwijkende resoluties op de markt, vooral als gevolg van de nieuwe trend van edge-to-edge schermen (de gehele breedte van het toestel). Inbegrepen:

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

Uiteraard zijn deze afwijkende resoluties nog niet opgenomen in onze statistieken. Maar op de een of andere manier kunnen we verwachten dat de S8-standaard een van de meest populaire op de lijst kan worden vanwege de enorme populariteit van de Galaxy S-familie: het vorige vlaggenschip - de S7 - werd bijvoorbeeld het meest voorkomende Android-apparaat in de wereld.

De meest gebruikte schermresolutie voor smartphones is 720x1280

Volgens verkeersstatistieken voor juli-augustus 2017 is de meest populaire schermresolutie op smartphones de verhouding 720x1280 pixels geworden, die wordt gebruikt op de meeste apparaten uit de midden- en budgetklasse. Het is de meest gebruikte resolutie in elf van de twintig geanalyseerde landen, waaronder India, Italië en Spanje. Deze wordt op de voet gevolgd door de verhouding 750x1334, die wordt gebruikt in populaire iPhone-modellen in de VS, het VK en Australië. In Frankrijk en Duitsland is de meest voorkomende resolutie Full HD geworden bij smartphones uit het midden- en budgetsegment.

De tabel toont de populairste smartphoneschermresoluties in alle 20 landen die aan het onderzoek deelnemen.

Onderstaande grafieken tonen het aandeel verkeer dat in juli-augustus 2017 afkomstig was van smartphones met een schermresolutie van 720x1280 in de landen die aan het onderzoek deelnamen.

Full HD neemt de markt over, de adoptie van QHD vertraagt

We analyseerden ook hoe snel het gebruik van verschillende populaire resoluties in de loop van het jaar groeide - van Q4 2016 tot Q3 2017. Ondanks eerdere actieve groei is de verspreiding van QHD-resolutie (1440×2560) nu vertraagd.

In Frankrijk, India, Nigeria en de VS verloren QHD-toestellen zelfs marktaandeel (-4% in laatstgenoemd land). In de afgelopen vier kwartalen zijn FHD-apparaten (1080x1920) sneller gegroeid, met een toename van 5-10% in Brazilië, Frankrijk, Japan, Polen, Spanje en de VS.

Verkeersaandeel van Full HD-apparaten (1080x1920) over de afgelopen vier kwartalen:

Verkeersaandeel van QHD-apparaten (1440 x 2560) gedurende de afgelopen vier kwartalen:

Tegenwoordig zijn er een groot aantal producten uit verschillende vakgebieden op de beleggingsmarkt. We vonden het de moeite waard om uw aandacht te vestigen op de snelgroeiende markt voor mobiele apparaten. Nee, er zullen hier geen recensies zijn, we willen deze markt bekijken door het prisma van schermeigenschappen. Een mobiele telefoon, tablet en laptop zijn al stevig verankerd in ons leven; sterker nog, we brengen er meer tijd mee door dan met de levende mensen om ons heen.

Wat de statistieken zeggen

We hebben veel tijd besteed aan het bestuderen van statistische rapporten van verschillende statistieken van partnersites. We hebben gekeken naar de technische kenmerken van de populairste mobiele apparaten. De situatie is dat grote mobiele telefoons, waarvan de diagonaal begint bij 5,5" en eindigt bij 6,2", dominant zijn geworden onder alle mobiele apparaten op de markt. Laten we hier de wens van Apple aan toevoegen om tegen het einde van het jaar een product met een diagonaal van 6,5 inch op de markt te brengen. En onze hersenen beginnen moeite te krijgen met het verteren van de behoefte aan dergelijke technologie. Je kunt dit niet meer in je zak stoppen, en hij past niet in elke tas. Als je echter kijkt naar de gebruiksmogelijkheden van een moderne smartphone, wordt het duidelijk waarom. Dit is een vreemd feit: de telefoon lijkt te zijn uitgevonden voor spraakcommunicatie, maar dat is zo steeds vaker gebruikt als apparaat om op internet te surfen Simpel gezegd: de moderne trend is een mobiele telefoon van goede kwaliteit met een uitstekend scherm en camera en internet. Dit is een handige “combinatie”, je hoeft hem maar één keer op te laden een dag.

Nu over machtigingen. De populairste resoluties blijven 1366*738 en 1920*1080. Dit zijn geen mobiele resoluties. Maar de populairste mobiele resolutie is 360*640 geworden. In feite is dit de top drie.

De volledige tabel met marktinformatie is als volgt:

Conclusie

De markt voor mobiele apparaten staat niet stil. Vandaag moeten we zoeken naar mogelijkheden om in deze markt te investeren.

Het kan zijn dat u zich er niet eens van bewust bent dat uw site niet correct wordt weergegeven op een scherm met een resolutie van 320x480 en dat alle lezers met zo'n smartphone uw blog verlaten zonder de informatie erop te hebben bestudeerd.

Laat er superinteressante informatie zijn (voor een blog), de laagste prijs voor een product (voor een webwinkel), een superhandige cursus, maar als de pagina scheef staat, zijn de knoppen niet zichtbaar, de tekstregels overlappen elkaar , dan ben je met deze weergave van verkooppagina's niet te zien.

Daarom is het noodzakelijk om de statistieken te analyseren en de toestemmingen te identificeren waarmee bezoekers vertrekken en maatregelen te nemen om bugs te corrigeren.

Statistieken over schermresolutie

Alles is daar duidelijk, voer de site-URL in:

Nu kunt u verschillende opties kiezen. Bovendien, zoals standaard smartphoneresoluties (tabblad 3):

Voer dus willekeurig de resolutie in cijfers in (tabblad 5):

Ik heb je laten zien hoe je de tool gebruikt, improviseer nu voor je sites.

Hoe fouten te herstellen

Concluderend rijst de vraag: "Waarom heb ik dit allemaal nodig, browsers bestuderen, machtigingen, enz.?"

Het antwoord is simpel: het verkeer en de omzet vergroten.

In mijn geval zijn de verliezen minimaal: minder dan 2% van de bezoekers voor het jaar bleef over omdat mijn blog slecht werd weergegeven op het apparaat waarmee ze de site bezochten. Dit zijn kleine aantallen, die van u kunnen hoger of lager zijn, maar u moet begrijpen dat dergelijke druppeltjes kunnen leiden tot een grote stroom verliezen.

De auteur van de site denkt misschien dat deze een slecht ontwerp en bruikbaarheid heeft, hij weet niet hoe hij artikelen correct moet schrijven, of hij heeft een slecht product, een hoge prijs, maar in feite kan de reden anders zijn. Als je het weet, kan het probleem worden opgelost, onthoud dit.

Als uw site veel resolutieproblemen heeft, reageert de sjabloon waarschijnlijk niet of is deze van lage kwaliteit en moet deze worden vervangen. Houd er rekening mee dat het mobiele verkeer in de loop der jaren alleen maar zal toenemen, dus u moet zo vroeg mogelijk nadenken over een responsieve sjabloon (of mobiele versie van de site).

Ik heb hier uitgebreid over dit onderwerp gesproken:

Ik wil graag horen wat de resultaten zijn van uw siteanalyse. Welke schermresoluties veroorzaken de meeste fouten?

Als je vragen hebt, schrijf dan in de reacties, ik zal je zeker helpen.

Opmerkingen