320, 768 och 1024. betyder dessa siffror något för dig?
Nej, det är inte Da Vinci-koden, de är bredderna i pixlar som många designers associerar med mobil-, surfplattor och skrivbordssnitt.
Problemet jag har med detta är att min mobil inte är 320 pixlar bred, min tablett är inte 768 pixlar bred och min skrivbordsskärm är verkligen inte 1024 pixlar bred. Det finns hundratals olika skärmstorlekar där ute på en mängd olika enheter och ändå tänker vi fortfarande på lyhörd webbdesign som 320, 768 och 1024.
Jag har sett många webbplatser som använder dessa tre brytpunkter för sina mönster och skapar helt enkelt 3 statiska layouter som ligger inom närmaste bredd.
Det här är bättre än att ha en gammalmodig, statisk, stationär enda webbplats eftersom de åtminstone tjänar en kolumn, förenklad version för mobil och en touch-vänlig version för tablett men varför skulle du alienera alla andra skärmstorlekar genom att inte ta dem in i hänsyn?
Visst kommer designen fortfarande att fungera i andra storlekar men vad händer när du har en tablett som är mindre än 768? De får mobilupplevelsen på en tablett! Och när du tittar på den på en bärbar datorskärm mindre än 1024? Vi skickar dem bara tablettlayouten och skrattar åt dem för att inte ha någon av de 3 skärmstorlekar som vi anser vara värdiga.
När du skapar dina lyhörda layouter bör du alltid sträva efter att ställa in så många av dina dimensioner som möjligt i procentandelar. Detta bidrar till att ditt innehåll växer och krymper jämnt genom olika skärmstorlekar och gör det i proportion till den enhet som den ses på. Detta tillvägagångssätt kommer också att se till att innehållet alltid fyller 90% (eller så mycket som du bestämmer) på skärmen istället för möjligen 50% av skärmen eftersom innehållet är centrerat på en skärmstorlek som är några pixlar mindre än nästa tillgänglig brytpunkt.
När du väljer dina brytpunkter bör du alltid göra dina beslut baserat på var innehållet bryts och inte till skärmens bredd. Istället för att skapa en design och sedan ändra den så att den passar iPad-skärmen bekvämt, bör du ta reda på hur bred din innehåll börjar kämpa.
Jag tenderar att börja med en 1400 bred design och gör långsamt webbläsaren mindre tills en del innehåll bryter layouten eller blir nära att göra det. Det bestämmer då min nästa brytpunkt. Det spelar ingen roll om det är 1200, 800 eller 673, om innehållet fortfarande fungerar, varför ändrar layouten?
Du kommer att upptäcka att du kommer att sluta med konstiga brytpunkter som 477 eller 982 och att du kan ha 2, 6 eller 10 olika brytpunkter. Poängen är att innehållet bestämmer sig snarare än de avsedda skärmstorlekarna som du önskar att den ska ses på.
Med en rad olika enheter och skärmstorlekar som släpps varje månad är det omöjligt att bestämma en uppsättning bestämda brytpunkter för våra responsiva projekt. Sanningen är att medan vi använder en variabel som skärmbredd för att bestämma våra responsiva layouter, kommer vi att kämpa för att fungera perfekt i alla olika storlekar men genom att följa några av de ovanstående tipsen kan vi åtminstone se till att innehållet visas alltid så bra som möjligt.
Vilka brytpunkter använder du vanligtvis? Undvik du brytpunkter helt och hållet? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, bred lastbild via Shutterstock.