320, 768 og 1024. Betyr disse tallene noe for deg?
Nei, det er ikke Da Vinci-koden, de er breddene i piksler som mange designere assosierer med mobil-, nettbrett og desktop skjermbredder.
Problemet jeg har med dette er at mobilen min ikke er 320 piksler bred, min nettbrett er ikke 768 piksler bred og skjermen min er absolutt ikke 1024 piksler bred. Det finnes hundrevis av forskjellige skjermstørrelser der ute på en rekke forskjellige enheter, og likevel tenker vi fortsatt på responsivt webdesign som 320, 768 og 1024.
Jeg har sett mange nettsteder som bruker disse tre breakpoints for deres design og bare lage 3 statiske oppsett som senterer i nærmeste bredde.
Dette er bedre enn å ha et gammeldags, statisk, desktop-eneste nettsted, da de i det minste serverer en en kolonne, forenklet versjon for mobil og en berøringsvennlig versjon for nettbrettet, men hvorfor skulle du alienere alle andre skjermstørrelser ved ikke å ta dem inn i betraktning?
Sikker på at designen fortsatt vil fungere på de andre størrelsene, men hva skjer når du har en tablett som er mindre enn 768? De får den mobile opplevelsen på en nettbrett! Og når du ser den på en bærbar PC-skjerm mindre enn 1024? Vi sender bare dem tablettoppsettet og ler på dem for at de ikke har en av de 3 skjermstørrelsene som vi har ansett å være verdige.
Når du lager dine responsive layouter, bør du alltid sikte på å angi så mange dimensjoner som mulig i prosent. Dette bidrar til å sikre at innholdet ditt vokser og krympes jevnt gjennom forskjellige skjermstørrelser og vil gjøre det i forhold til enheten den vises på. Denne tilnærmingen vil også sikre at innholdet ditt alltid fyller 90% (eller så mye som du bestemmer) på skjermen i stedet for muligens 50% av skjermen, da innholdet er sentrert på en skjermstørrelse som er noen få piksler mindre enn den neste tilgjengelig brytpunkt.
Når du velger breakpoints, bør du alltid ta beslutninger basert på hvor innholdet går i stykker, og ikke på skjermbredder på enhetene. I stedet for å skape et design og deretter endre det for å passe iPad-skjermet komfortabelt, bør du finne ut i hvilken bredde innholdet ditt begynner å slite.
Jeg pleier å begynne med et 1400 bredt design og sakte gjøre nettleseren mindre til et innhold bryter oppsettet eller nærmer seg det. Det bestemmer da mitt neste brytepunkt. Det spiller ingen rolle om det er 1200, 800 eller 673, hvis innholdet fortsatt fungerer, hvorfor endre layoutet?
Du vil oppdage at du vil ende opp med merkelige bruddpunkter som 477 eller 982, og at du kanskje har 2, 6 eller 10 forskjellige bruddpunkter. Poenget er at innholdet vil bestemme seg i stedet for de planlagte skjermstørrelsene du ønsker at den skal vises på.
Med en rekke forskjellige enheter og skjermstørrelser utgitt hver måned, er det umulig å bestemme et sett med bestemte brytepunkter for våre responsive prosjekter. Sannheten er at mens vi bruker en variabel som skjermbredde for å bestemme våre responsive layouter, vil vi streve for å gi et perfekt oppsett til alle forskjellige størrelser, men ved å følge noen av tipsene ovenfor, kan vi i det minste sikre at innholdet vises alltid så godt som mulig.
Hvilke bruddpunkter bruker du vanligvis? Unngå du breakpoints helt? Gi oss beskjed i kommentarene.
Utvalgt bilde / miniatyrbilde, bredt lastbilde via Shutterstock.