320, 768 en 1024. Betekenen deze cijfers u iets?
Nee, het is niet de Da Vinci-code, het zijn de breedten in pixels die veel ontwerpers associëren met breedten van mobiele, tablet- en desktopschermen.
Het probleem dat ik hiermee heb, is dat mijn mobiel niet 320 pixels breed is, mijn tablet niet 768 pixels breed is en mijn bureaubladscherm zeker niet 1024 pixels breed is. Er zijn honderden verschillende schermformaten op verschillende apparaten en toch denken we nog steeds aan responsief webontwerp als 320, 768 en 1024.
Ik heb veel sites gezien die deze drie breekpunten gebruiken voor hun ontwerpen en maak eenvoudig 3 statische lay-outs die zich centreren binnen de dichtstbijzijnde breedte.
Dit is beter dan het hebben van een ouderwetse, statische desktop-site omdat ze op zijn minst een één kolom, vereenvoudigde versie voor mobiel en een aanraakvriendelijke versie voor tablet serveren, maar waarom zou je alle andere schermafmetingen vervreemden door ze niet mee te nemen? overweging?
Natuurlijk werkt het ontwerp nog steeds op de andere formaten, maar wat gebeurt er als je een tablet hebt die kleiner is dan 768? Ze zullen de mobiele ervaring op een tablet krijgen! En bij het bekijken op een laptopscherm kleiner dan 1024? We sturen ze gewoon de tabletlay-out en lachen hen uit omdat ze niet één van de drie schermformaten hebben die we waardig achten.
Wanneer u uw responsieve lay-outs maakt, moet u altijd proberen om zoveel mogelijk van uw dimensies in percentages in te stellen. Dit helpt ervoor te zorgen dat uw inhoud gelijkmatig groeit en krimpt via verschillende schermformaten en doet dit in verhouding tot het apparaat waarop het wordt bekeken. Deze aanpak zorgt er ook voor dat uw inhoud altijd 90% (of zoveel als u bepaalt) van het scherm vult in plaats van mogelijk 50% van het scherm, omdat de inhoud is gecentreerd op een schermgrootte die enkele pixels kleiner is dan de volgende beschikbaar breekpunt.
Bij het kiezen van uw onderbrekingspunten moet u altijd beslissingen nemen op basis van waar de inhoud breekt en niet op schermbreedten van het apparaat. In plaats van een ontwerp te maken en het vervolgens aan te passen zodat het comfortabel op het iPad-scherm past, moet u weten op welke breedte uw inhoud begint te worstelen.
Ik begin met een 1400 breed ontwerp en maak de browser langzaam kleiner totdat een stuk inhoud de lay-out breekt of er dichtbij komt. Dat bepaalt dan mijn volgende breekpunt. Het maakt niet uit of het nu op 1200, 800 of 673 is, als de inhoud nog steeds werkt, waarom dan de indeling veranderen?
Je zult merken dat je zult eindigen met vreemde breekpunten zoals 477 of 982 en dat je misschien 2, 6 of 10 verschillende breekpunten hebt. Het punt is dat de inhoud zal beslissen in plaats van de beoogde schermgroottes waarop u wilt dat deze wordt bekeken.
Omdat de verschillende apparaten en schermformaten elke maand worden vrijgegeven, is het onmogelijk om een reeks definitieve breekpunten voor onze responsieve projecten te bepalen. De waarheid is dat, terwijl we een variabele zoals schermbreedte gebruiken om onze responsieve lay-outs te bepalen, we moeite zullen hebben om een perfecte lay-out aan elke verschillende grootte te leveren, maar door een paar van de bovenstaande tips te volgen, kunnen we er in elk geval voor zorgen dat de inhoud wordt altijd zo goed mogelijk weergegeven.
Welke breekpunten gebruikt u gewoonlijk? Vermijd je breekpunten helemaal? Laat het ons weten in de comments.
Uitgelichte afbeelding / thumbnail, breed laadbeeld via Shutterstock.