Wat is de ideale schermgrootte voor responsief ontwerp?

vanaf 2020 zijn er 3,5 miljard smartphonegebruikers in de wereld. Dat is 45% van de wereldbevolking. Vanaf 2019, mensen toegang tot het internet met meer dan 9000 verschillende apparaten. Elke gebruiker verwacht dat elke website die ze openen perfect zal maken op hun mobiele apparaat. Dit betekent dat websiteontwikkelaars websites moeten ontwerpen die op een groot aantal schermformaten over de hele wereld worden weergegeven.

met andere woorden, ze hebben een responsief ontwerp nodig.,

maar zoals elke ontwerper weet, moet het uitvoeren van responsive design beginnen met te weten voor welke schermformaten te ontwerpen. Dit artikel onderzoekt deze vraag en bespreekt de beste scream maten voor responsive design.

Wat is Responsive Design?

Responsive web design verwijst naar een ontwerpstrategie die websites creëert die goed werken voor mobiele, tablet-en desktopapparaten. Websites zonder responsive design risico vervreemdend een aanzienlijk aantal gebruikers-80% van de gebruikers hebben beweerd dat ze websites die niet goed werken op hun apparaat zal weigeren.,

daarnaast kijkt Google naar “mobile-friendly” als een parameter voor ranking. Om de Google Webmaster Central Blog te citeren,

” vanaf 21 April 2015 zullen we ons gebruik van mobile-friendly als een ranking signaal uitbreiden. Deze verandering zal invloed hebben op mobiele zoekopdrachten in alle talen wereldwijd en zal een aanzienlijke impact hebben in onze zoekresultaten. Bijgevolg zullen gebruikers het gemakkelijker vinden om relevante, hoogwaardige zoekresultaten te krijgen die zijn geoptimaliseerd voor hun apparaten.”

dus, hoe vind je de ideale responsieve schermformaten?,

Afbeeldingsbron

volgens de Worldwide Screen Resolution Stats (Nov 2018 – Nov 2019) zijn de meest gebruikte resoluties:

natuurlijk betekent de nadruk op mobielvriendelijkheid niet dat men desktop apparaten verlaat. Zoals de onderstaande grafiek zal aantonen, desktop-apparaten nog steeds maken een aanzienlijk deel van het internetgebruik.,

Afbeeldingsbron

• mobiel – 52,03%
• Desktop – 45,17%
• Tablet – 2.,8%

volgens Microsoft ‘ s documentatie,

met een groot aantal apparaatdoelen en schermgroottes in het Windows 10-ecosysteem, in plaats van het optimaliseren van uw gebruikersinterface voor elk apparaat, raden we aan om te ontwerpen voor een paar belangrijke breedte-categorieën (ook wel “breekpunten”genoemd):

• Small (kleiner dan 640px)
• Medium (641px tot 1007px)
• Large (1008px en groter)

ondanks deze informatie is er geen standaard schermgrootte voor webdesign., Afhankelijk van de aard van de website kunnen gebruikers bepaalde apparaten gebruiken die niet de bovengenoemde schermformaten en resoluties bieden. Investeer in analytics om de juiste schermformaten voor webdesign te identificeren. Ontdek wat uw doelgroep is het meest waarschijnlijk te gebruiken. Als die apparaten zich niet houden aan de bovengenoemde resolutie, neem ze dan op in de mix.,

1-Click Access to Responsive Checker Tool

Best Practices for Implementing Responsive Design

Het wordt een stuk eenvoudiger om een website voor meerdere schermformaten te ontwerpen met de volgende richtlijnen:

• Ken uw breekpunten: in responsive design is een breekpunt het “punt” waarop de inhoud en het ontwerp van een website op een bepaalde manier zullen worden aangepast om de best mogelijke gebruikerservaring te bieden. Om een website responsief te maken, moeten ontwerpers een breekpunt toevoegen wanneer de inhoud er verkeerd uitziet., Afhankelijk van het aantal apparaten waarmee de site wordt uitgelijnd, moeten MEERDERE breekpunten worden ingesteld om ervoor te zorgen dat de site reageert. Raadpleeg dit artikel over responsieve breekpunten om meer te weten te komen over hen en hun effectiviteit in detail.
• Creëer Fluid Designs: Fluid design verwijst naar een ontwerpopmaak die kan verschuiven (uitbreiden en inkrimpen) om te passen op de viewport van het apparaat waarop het draait. Een vaste ontwerp lay-out zal ongewenst vervormen op elke viewport dat ze niet zijn uitgelijnd., Werk aan ontwerp lay-outs met behulp van % eenheden en max-breedtes om ervoor te zorgen dat de lay-out past bij de viewports van mobiele apparaten zonder te breed te worden op de viewports van desktopapparaten.
• wrijving verminderen: dit betekent in principe dat het ontwerp gemakkelijk te gebruiken moet zijn op meerdere apparaten. Responsive design omvat niet alleen hoe een website eruit ziet, maar ook hoe het presteert in termen van toegankelijkheid en bruikbaarheid. Focus vooral op wrijving met een klein scherm, omdat naarmate schermformaten afnemen, webalementen minder ruimte hebben om te renderen en meer kans maken om te vervormen en te vervormen.,
• Design Mobile-First: aangezien wrijving eerder voorkomt op kleinere schermen, ontwerp met een mobile-first benadering. Het is moeilijker om een desktop lay-out voor een mobiele viewport verkleinen terwijl het doen van de omgekeerde is gemakkelijker. Bij het ontwerpen van mobile-first, de ontwerper omvat wat absoluut noodzakelijk is voor het verstrekken van de optimale gebruikerservaring.,

Hier zijn een paar manieren om te werken met mobile-first design:

1. prioriteer belangrijke menu – opties
2. Verwijder alle visuele afleidingen
3. ontwerp optimaliseren voor tapability-maak alles eenvoudig te tikken
4. onnodige formulieren en informatievelden verwijderen
5. markeer de belangrijkste CTA
6. prominent zoek-en filterfuncties

• meer functionaliteit, minder typen: het is duidelijk dat typen moeilijker is op mobiele apparaten dan op desktopapparaten. Dus is het zinvol om de noodzaak voor het typen op mobiele versies van websites te minimaliseren., Vervang typen door bewust gebruik te maken van apparaatfuncties zoals GPS, QR code lezen, biometrische ID, en dergelijke. Maak het voor gebruikers gemakkelijker om relevante nummers te delen, te e-mailen of te bellen door links te plaatsen die de nodige functies starten. Houd in gedachten dat de beste responsieve ontwerp omvat het vereenvoudigen en elimineren van ongemakkelijke mobiele interacties.
• Test, test, test: zodra een ontwikkelaar of ontwerper de beste schermformaten kent voor responsive design, doen ze het werk en maken ze een responsive website., Echter, om ervoor te zorgen dat de website daadwerkelijk maakt de manier waarop het is bedoeld om op de apparaten die het is gebouwd voor, het moet worden getest op precies dat. Een eenvoudige manier om dit te doen is om een responsive Design checker te gebruiken. In plaats van het uitvoeren van de website via individuele apparaten met verschillende viewports, voer de URL in de checker en zie hoe het verschijnt op een verscheidenheid van de nieuwste apparaten met verschillende, vaak gebruikte apparaat resolutie. De checker hierboven gekoppeld biedt responsieve controle op de nieuwste mobiele apparaten zoals iPhone X, Galaxy Note 10, iPhone 8 Plus, en meer.,

hoewel responsive design moeilijk uit te voeren lijkt, probeert de informatie in dit artikel dit proces voor ontwikkelaars en ontwerpers te vereenvoudigen. Door te doen wat hierboven is beschreven, wordt het veel gemakkelijker om websites te maken die het publiek behagen, ongeacht het apparaat dat ze gebruiken om toegang te krijgen tot die website.

probeer responsieve Checker gratis