Innehåll
Mobiltelefoner, surfplattor och datormonitorer har olika användningsområden, användare och dimensioner som ställer frågan om vad den bästa layoutstorleken för en webbplats bestäms av behoven hos de primära användarna på den webbplatsen. Om en webbplats är avsedd att ses av standardanvändare på en widescreen-skärm med en upplösning på 1680x1040 pixlar måste platsens storlek anpassas till huvudbläddringsskärmen. Om webbplatsen är avsedd att användas på mobila enheter, bör den göras för en mycket mindre skärm.
Statiska VS-vätskeformat
Det första övervägandet är om webbplatsen kräver en dimension definierad i pixlar. Med hjälp av procentandelar kan du skapa en "flytande" layout som ändrar områden dynamiskt beroende på storleken på webbläsarfönstret. När det används i kombination med text kan vätskeformat vara det bästa valet när man skapar en webbplats för standard skärmupplösning såväl som mobila webbläsare. Fluidlayouter uppnås genom att använda "width = 100%" i CSS innehållsdeklarationen, i stället för "width = 960x", till exempel.
Filtrering av standard skärmstorlekar
För att skapa "fasta" eller flytande layouter bör bredden på divs, wrappers eller main content tabeller passa in i användarens webbläsarfönster, med hänsyn till både rullningsfältet och verktygsfältet. Du bör också överväga att göra för majoriteten. Mer än 80% av webbläsare använder idag en skärmupplösning på över 1024x768 pixlar. Det betyder att du kan göra det för 1680x1024 pixlar, men det är en bra idé att projicera till mitten. 960 eller 980 pixlar breda är två betrodda åtgärder som används för att visa innehåll bekvämt i en webbläsare som används av någon som använder en 1024x768 upplösning eller högre. Systemet passar också bra på mobila enheter som kan visa hela webbplatser. Om den är för snäv, är 1080 den näst bästa bredden. Kom ihåg höjden på en vanlig webbläsare vid vilken upplösning som helst för att hålla viktigaste informationen ovanför "vikten", eller peka, var rullning blir nödvändig.
Mobila skärmar
Om du vill att din webbplats ska se bra ut på en mängd olika mobila enheter, behöver du antingen göra det specifikt för enheten eller skapa en speciell stil som används av mobila webbläsare för att visa mobilversionen av din webbplats. 240x320-upplösningen är den nuvarande standarden för de flesta smartphones och internetenheter, till exempel iPhone. Det är en bra idé att använda "flytande" procentsatser eller layouter, eftersom många enheter stöder både stående och liggande lägen. Om du skapar en webbplats som är inställd på 320 pixlar bred, kan det tyckas att den är avskuren för användaren genom att öppna den i stående läge.
Det gyllene nätet
Kanske är det bästa systemet för att bestämma layoutdimensioner genom användningen av nätsystemet. Grids beräknar perfekt balanserade regioner inom en viss bredd för att ge en känsla av hur man skalar elementen i huvudlayouten eller innehållsområdet. Dessa element inkluderar reklamlådor, staplar, annonsutrymme eller stycken. Som ett exempel skulle en layout med en total bredd på 1080 pixlar och delning med hjälp av det gyllene nätverket ha lämnat området kvar för blogginlägg på 739 pixlar bred och en högra stapel vid 780 pixlar bred, båda med marginal av 10 pixlar. Slutresultatet är en perfekt anpassad och balanserad layout. Du kan experimentera med flera olika nät genom att besöka nätgeneratorsystemet (se Resurser).