Det första som de flesta designers anser när de bygger sin webbsida är vilken resolution som ska utformas för. Vad detta verkligen betyder är att avgöra hur stor din design ska vara. Det finns inget mer som standard webbbredd.
Varför överväga resolution
År 1995 var standard 640x480 upplösningsmonitorer de största och bästa skärmarna tillgängliga. Detta innebar att webbdesigners fokuserade på att skapa sidor som såg bra ut i webbläsare maximerade på en 12 tum till 14 tums bildskärm vid den upplösningen.
Idag utgör 640x480 upplösning mindre än 1 procent av de flesta webbplatstrafik. Människor använder datorer med mycket högre upplösningar, inklusive 1366x768, 1600x900 och 5120x2880. I många fall fungerar designa för en 1366x768 upplösningsskärm.
Vi är på en punkt i webbdesignens historia, där vi inte behöver oroa oss mycket för resolution. De flesta har stora skärmar med bred skärm och de maximerar inte deras webbläsarfönster. Så om du bestämmer dig för att designa en sida som inte är mer än 1366 pixlar bred, så kommer din sida säkert att se bra ut i de flesta webbläsarfönster även på stora bildskärmar med högre upplösningar.
Webbläsarens bredd
Innan du börjar tänka "okej, ska jag göra mina sidor 1366 pixlar breda", det finns mer till den här historien. En ofta förbisedd fråga när man bestämmer bredden på en webbsida är hur stor dina kunder behåller sina webbläsare. Specifikt maximerar de sina webbläsare i helskärmsstorlek eller håller de dem mindre än helskärmen?
I en informell undersökning av medarbetare som alla använde en 1024x768 upplösningsdator med företagsstandard, behöll två alla sina applikationer maximerade. Resten hade olika storlek fönster öppna av olika skäl. Detta illustrerar att om 85% av användarna ska utforma företagets intranät med 1024 pixlar bredda, måste de bläddra horisontellt för att se hela sidan.
När du tar hänsyn till kunder som maximerar eller inte, tänk på webbläsarens gränser. Varje webbläsare har en rullningsfält och gränser på sidorna som krymper tillgängligt utrymme från 800 till cirka 740 pixlar eller mindre på 800x600 upplösningar och cirka 980 pixlar på maximerade fönster vid 1024x768 upplösningar. Detta kallas webbläsare "krom" och det kan ta bort från användbar plats för din siddesign.
Fasta eller flytande breddssidor
Den faktiska numeriska bredden är inte det enda du behöver tänka på när du utformar din webbplats bredd. Du måste också bestämma om du har en fast bredd eller en vätskebredd. Med andra ord kommer du att ställa in bredden till ett visst tal (fast) eller till en procentandel (flytande)?
Fast bredd
Sidor med fast bredd är precis som de låter. Bredden är fastställd till ett visst nummer och ändras inte oavsett hur stor eller liten webbläsaren är. Det här kan vara bra om du behöver din design för att se exakt ut, oavsett hur stor eller smal dina webbläsare är, men den här metoden tar inte hänsyn till dina läsare. Personer med webbläsare smalare än din design måste bläddra horisontellt och människor med stora webbläsare har stora mängder tomt utrymme på skärmen.
Om du vill skapa sidor med fast bredd använder du bara specifika pixelnummer för bredden på sidsidorna.
Vätskebredd
Sidor med flytande bredd (ibland kallade flexibla sidor) varierar i bredd beroende på hur stor webbläsarfönstret är. På så sätt kan du designa sidor som fokuserar mer på dina kunder. Problemet med sidor med flytande bredd är att de kan vara svåra att läsa. Om skanlängden på en textrad är längre än 10-12 ord eller kortare än 4 till 5 ord kan det vara svårt att läsa. Det betyder att läsare med stora eller små webbläsarfönster har problem.
För att skapa sidor med flexibel bredd, använd helt enkelt procentandelar eller ems för bredden på sidsidorna. Du bör också bekanta dig med CSS maxbreddsegenskapen. Med den här egenskapen kan du ställa in en bredd i procent, men begränsa den så att den inte blir så stor att folk inte kan läsa den.
Och vinnaren är: CSS Media Queries
Den bästa lösningen idag är att använda CSS-mediafrågor och responsiv design för att skapa en sida som anpassar sig till bredden på webbläsaren som visar den. En lyhörd webbdesign använder samma innehåll för att skapa en webbsida som fungerar om du ser den på 5120 pixlar bred eller 320 pixlar bred. Sidorna med olika storlek ser annorlunda ut, men de innehåller samma innehåll. Med mediefrågan i CSS3 svarar varje mottagande enhet frågan med sin storlek och stilarket anpassar sig till den visade storleken.
