Innan du spenderar för länge på att överväga exakta bildskärmsupplösningar för din design, bör du komma ihåg att all modern webbdesign är lyhörd, vilket betyder att den är konstruerad för att anpassas över olika skärmupplösningar. Med en enda design måste du stödja allt från de minsta mobilskärmarna till ultra HD-stationära bildskärmar.
Med lyhörd webbdesign, skapar du mer generella layouter för mobil, surfplatta och skrivbord. När och hur varje sidelement flyttas på plats för dessa layouter bestäms av speciella brytpunkter som skrivs in i din CSS. Dessa brytpunkter bestäms av vissa vanliga skärmupplösningar.
Även om du inte riktar in dig på specifika upplösningar eller ställer in en fast storlek för dina mönster, kommer du att överväga skärmen upplösningar för att skapa brytpunkter och skapa smidiga övergångar så att din webbplats ser bra ut på alla enheter och skärmstorlek.
Vanliga skrivbordsupplösningar
- 1280x720 Standard HD - Du kanske känner till den här bättre som 720p. Det var den vanliga HD-upplösningen när HD först blev vanligt. Du kommer förmodligen inte hitta många nya bildskärmar som använder den här upplösningen, men det finns gott om dem fortfarande i naturen från när de var mer populära.
- 1366x768 - Det är något av en ovanlig upplösning, men det är väldigt populärt på mindre bärbara datorer och vissa surfplattor. Om du har att göra med nedre delen Chromebooks, det finns en stor chans att detta är den upplösning du riktar dig mot.
- 1920x1080 Den vanligaste - När du tänker på stationära datorer har du förmodligen att göra med 1920x1080, bättre känd som 1080p. Denna resolution finns absolut överallt. De flesta stationära bildskärmar är fortfarande 1080p, och det finns också många bärbara datorer i full storlek. Du hittar också en anständig andel av surfplattor i 1080p i landskapet också.
- 2560x1440 - 1440p är en annan konstig mellanväg i bildskärmens upplösning. Det är högre än vad du skulle tänka dig 2k, men det är inte riktigt 4k. Som sagt, det är en vanlig upplösning på spelmonitormarknaden, och det är ett prisvärt alternativ till att gå full 4k. Beroende på din webbplats kan det vara värt att stödja 1440p eller inte.
- 3840x2160 Den närmaste framtiden - Detta är full 4k eller Ultra HD. Medan 4k vanligtvis reserveras för avancerade datorer nu sjunker priserna, grafiktekniken förbättras och efterfrågan på 4k drivs av TV-marknaden, där det är mycket vanligare. Det är säkert att anta att under de närmaste åren kommer 4k enkelt att komma över 1080p som de facto-standard, så det är definitivt värt att redovisa 4k nu.
Vanliga surfplattor / liggande lösningar
Tabletter kanske inte är lika populära som de en gång var, och ökande telefonstorlekar ihop med konvertibla bärbara datorer verkar ha minskat betydligt i sin marknadsandel. Ändå överlappar redovisningen av tablettupplösningar betydligt med stationära och bärbara datorer. Du kanske kan använda surfplattans brytpunkter för att skapa brytpunkter för vissa besvärliga element som inte passar rätt vid vissa upplösningar.
- Du bör också ta hänsyn till tablettupplösningar för enheter som hålls i stående läge. Inte alla kommer att bläddra på sin surfplatta i liggande läge, så du bör lägga till minst en brytpunkt för en vanlig surfplatta i porträtt.
- 1280x800 En upplösning som brukade vara vanlig - Äldre surfplattor, lägre tabletter och mindre surfplattor har vanligtvis några av Amazons Fire-surfplattor använder fortfarande 1280x800. Detta är en av de sista riktigt mobila upplösningarna på surfplattor.
- 1920x1200 Vanligt på 7 "och 8" tabletter - I landskapet kan du förlita dig på samma brytpunkter som 1080p, för det mesta. Men när du ser en av dessa i landskapet är situationen mycket annorlunda. Denna upplösning är vanlig bland många 7 och 8-tums surfplattor, inklusive Amazon Fire.
- 2048x1536 Apple-tabletter -Detta är Apples vanligaste tablettupplösning. Det liknar tillräckligt med 1440p för att göra väldigt liten skillnad, men igen är porträttet ovanligt. I vilket fall som helst är det en bra idé att testa din webbplats med den här upplösningen för att säkerställa att inget konstigt händer på iPads.
Tabletter med högre upplösning börjar komma in på skrivbordet. För det mesta behöver du inte ens redogöra för dem eftersom upplösningen faller inom ett område som du redan har redovisat. Det är dock alltid en bra idé att testa för att vara helt säker.
Vanliga mobilupplösningar
Mobilenheter är lätt de mest komplicerade att hantera. Det finns ett så varierat utbud av enheter, inklusive äldre som fortfarande används, det är inte lätt att täcka över dem alla. Det är därför mobil-första design är så populär. Filosofin är enkel. Börja med den enklaste mobila designen först och bygg vidare på den för större och större skärmar. På så sätt fungerar även de äldsta och minsta enheterna, men med mindre innehåll och färre funktioner. Webbplatsen är inte försenad, den visar bara bara den viktigaste och mest tillgängliga informationen först.
Här är ett intressant knep för att hantera telefoner; vrid skrivbordsupplösningarna på deras sida. Visst, det finns ovanliga avvikare, men de flesta aktuella telefoner följer detta mönster.
- 720x1280 vanligt på äldre enheter - under ett antal år var 720p på sin sida den vanligaste standarden för en mobil enhet. I så fall behöver du inte oroa dig för liggande läge, eftersom det är detsamma som skrivbordet 720p. Täck bara porträttupplösningen med en bredd på 720 pixlar.
- 1080x1920 mitten - 1080p har varit standard under mycket lång tid. Det är fortfarande mycket vanligt på medelklassiga enheter. Om du bara stöder en mobilupplösning är det här.
- 1440x2560 nuvarande toppänd - Mobila enheter blir allt större och skärmar blir allt högre och högre. 1440p är en intressant standard eftersom det finns en mängd olika skärmbredder - längder i detta fall - som faller inom det intervallet. På både stationära datorer och mobila enheter är den vanligaste 1440x2560. Det ger skärmen det vanliga bildförhållandet 16: 9. På mobilen betyder det lite mindre än stationära datorer eftersom enhetens längd inte påverkar dina mönster mycket.
Innan du lyckligtvis bara stöder tre mobilupplösningar, bör du också inse att vissa använder löjligt gamla telefoner med små skärmar. Du bör alltid bygga in en minimal upplösning på botten så att din webbplats ser bra ut även för någon som använder en telefon från flera år tillbaka.
Enkla tips att tänka på
Det är lätt att ta en massa fakta om skärmupplösningar, avrinning och börja spotta design, och det är precis när du får problem. Det finns några viktiga idéer att tänka på när du utformar en webbplats, och de gäller i de flesta, om inte alla, situationer.
- Responsiv design är flytande - Du kanske känner en benägenhet att bygga ett massivt utbud av brytpunkter i din CSS för att ta hänsyn till alla möjliga skärmstorlekar och situationer. Det är ett bra sätt att göra dig galen. Responsiv webbdesign är tänkt att vara tillräckligt flexibel för att fylla i luckor och oegentligheter. Om du befinner dig att definiera för många statiska nummer, oavsett om de är i mediefrågor eller för själva elementen, är du förmodligen på väg åt fel väg.
- Människor maximerar inte alltid sin webbläsare - Denna typ går hand i hand med föregående punkt. Du kan design för skärmstorlekar, men när någon inte maximerar sitt webbläsarfönster, går allt som går upp i rök. Genom att hålla saker i din design flytande kan du undvika problem med olika webbläsarfönsterstorlekar.
- Testa allt - Försök att bryta din webbplats. Det är det enda sättet du hittar alla buggar och inkonsekvenser som kommer att förstöra en besökares upplevelse. Chrome har inbyggda verktyg för att testa enhetsupplösningar med en fullständig lista över populära enheter att arbeta med. Du har alltid möjlighet att dra ditt webbläsarfönster till olika storlekar för att se både hur webbplatsen ser ut i olika storlekar och hur den anpassar sig och bryts.
- Förvänta dig inte att dina användare ska ha det senaste och bästa - Detta går tillbaka till föregående punkt om äldre telefoner och små upplösningar. Du kan inte förvänta dig att människor ska ha nya enheter. Det gäller både skärmupplösning och processorkraft. Laddar en webbplats med för mycket grafik och för mycket JavaScript är ett bra sätt att få människor med en långsam enhet att lämna och aldrig komma tillbaka.