320, 768 og 1024. betyder disse tal noget for dig?
Nej, det er ikke Da Vinci-koden, de er bredderne i pixels, som mange designere forbinder med mobil-, tablet- og desktop-skærmbredder.
Problemet jeg har med dette er, at min mobil ikke er 320 pixels bred, min tablet er ikke 768 pixels bred, og min desktop skærm er bestemt ikke 1024 pixels bred. Der er hundredvis af forskellige skærmstørrelser derude på en række forskellige enheder, og alligevel tænker vi stadig på lydhurt webdesign som 320, 768 og 1024.
Jeg har set mange steder, der bruger disse tre breakpoints til deres designs og simpelthen opretter 3 statiske layouter, der ligger inden for nærmeste bredde.
Dette er bedre end at have en gammeldags, statisk, stationær eneste side, da de i det mindste tjener en enkelt kolonne, forenklet version til mobil og en touch-venlig version til tablet, men hvorfor vil du alienere alle andre skærmstørrelser ved ikke at tage dem ind i betragtning?
Sikker på, at designet stadig fungerer på de andre størrelser, men hvad sker der, når du har en tablet, der er mindre end 768? De får den mobile oplevelse på en tablet! Og når du ser det på en bærbar skærm mindre end 1024? Vi sender dem bare tablet layoutet og griner på dem for ikke at have en af de 3 skærmstørrelser, som vi har fundet værdige.
Når du opretter dine responsive layouter, bør du altid sigte på at indstille så mange af dine dimensioner som muligt i procentdele. Dette hjælper med at sikre, at dit indhold vokser og krymper jævnt gennem forskellige skærmstørrelser og gør det i forhold til den enhed, den vises på. Denne tilgang vil også sikre, at dit indhold altid fylder 90% (eller så meget som du bestemmer) på skærmen i stedet for muligvis 50% af skærmen, da indholdet er centreret på en skærmstørrelse, der er nogle få pixels mindre end den næste ledigt brudpunkt.
Når du vælger dine breakpoints, bør du altid træffe dine beslutninger baseret på hvor indholdet går i stykker og ikke til enhedens skærmbredder. I stedet for at oprette et design og derefter ændre det for at passe til iPad-skærmen komfortabelt, bør du finde ud af, i hvilken bredde dit indhold begynder at kæmpe.
Jeg plejer at starte med et 1400 bredt design og langsomt gøre browseren mindre, indtil et indhold bryder layoutet eller kommer tæt på at gøre det. Det bestemmer så mit næste breakpoint. Det er ligegyldigt, om det er 1200, 800 eller 673, hvis indholdet stadig fungerer, hvorfor ændre layoutet?
Du vil opdage, at du vil ende med underlige breakpoints som f.eks. 477 eller 982, og at du måske har 2, 6 eller 10 forskellige breakpoints. Pointen er, at indholdet vil bestemme snarere end de tilsigtede skærmstørrelser, som du ønsker at den skal ses på.
Da antallet af forskellige enheder og skærmstørrelser udgives hver måned, er det umuligt at bestemme et sæt konkrete breakpoints for vores responsive projekter. Sandheden er, at mens vi bruger en variabel som skærmbredde til at bestemme vores responsive layouter, vil vi kæmpe for at udføre et perfekt layout til enhver anden størrelse, men ved at følge nogle af de ovennævnte tip kan vi i det mindste sikre, at indholdet vises altid så godt som muligt.
Hvilke breakpoints bruger du typisk? Undgår du helt afbrydelser? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, bredt lastbillede via Shutterstock.