Inhoud
- Statische VS-vloeistoflay-outs
- Het filteren van standaard schermformaten
- Mobiele schermen
- Het gouden raster
Mobiele telefoons, tablets en computerschermen hebben verschillende gebruiksmogelijkheden, gebruikers en dimensies die de vraag achterlaten wat de beste lay-outgrootte voor een site wordt bepaald door de behoeften van de primaire gebruikers van die site. Als een site door standaardgebruikers op een breedbeeldscherm met een resolutie van 1680x1040 pixels moet worden bekeken, moet de grootte van de site zodanig zijn dat deze op het hoofdbrowserscherm past. Als de site bedoeld is voor gebruik op mobiele apparaten, moet deze worden gemaakt voor een veel kleiner scherm.
Statische VS-vloeistoflay-outs
De eerste overweging is of de site een dimensie vereist die is gedefinieerd in pixels. Met percentages kunt u een "vloeiende" lay-out maken, waarmee de grootte van gebieden dynamisch wordt aangepast, afhankelijk van de grootte van het browservenster. Bij gebruik in combinatie met tekst kunnen vloeiende lay-outs de beste keuze zijn bij het maken van een site voor standaardschermresolutie en mobiele browsers. Vloeistoflay-outs worden bereikt door "width = 100%" te gebruiken in de CSS-inhoudsverklaring in plaats van "width = 960x", bijvoorbeeld.
Het filteren van standaard schermformaten
Om "vaste" of vloeiende lay-outs te maken, moet de breedte van de divs, wrappers of hoofdtabellen in het browservenster van de gebruiker passen, rekening houdend met zowel de schuifbalk als de werkbalk. Je moet ook overwegen om voor de meerderheid te doen. Meer dan 80% van de browsers gebruikt tegenwoordig een schermresolutie van meer dan 1024x768 pixels. Dat betekent dat je het voor 1680x1024 pixels kunt doen, maar het is een goed idee om naar het midden te projecteren. 960 of 980 pixels breed zijn twee vertrouwde waarden die worden gebruikt om inhoud comfortabel weer te geven in een browser die wordt gebruikt door iedereen die een 1024x768-resolutie of hoger gebruikt. Het systeem past ook goed op mobiele apparaten die volledige sites kunnen weergeven. Als het te strak is, is 1080 de volgende beste breedte. Onthoud de hoogte van een standaardbrowser bij elke resolutie om de belangrijkste informatie boven de "vouw" te houden, of wijs aan waar scrollen nodig is.
Mobiele schermen
Als u wilt dat uw site er op verschillende mobiele apparaten goed uitziet, moet u dit specifiek voor het apparaat doen of een speciale stijl maken die door mobiele browsers wordt gebruikt om de 'mobiele' versie van uw site weer te geven. De 240x320-resolutie is de huidige standaard voor de meeste smartphones en internetapparaten, zoals de iPhone. Het is een goed idee om 'vloeiende' percentages of lay-outs te gebruiken, omdat veel apparaten zowel staande als liggende modi ondersteunen. Als u een website maakt die is ingesteld op 320 pixels breed, kan deze voor de gebruiker afgesneden lijken door deze in de portretmodus te openen.
Het gouden raster
Misschien is het beste systeem om lay-outafmetingen te bepalen door het gebruik van het rastersysteem. Grids berekenen perfect uitgebalanceerde regio's binnen een bepaalde breedte om een idee te geven van hoe de elementen in de hoofdlay-out of het inhoudsgebied moeten worden geschaald. Deze elementen bevatten promotiekaders, bars, advertentieruimte of alinea's. Een lay-out met een totale breedte van 1080 pixels en gesplitst met behulp van het gouden raster zou bijvoorbeeld het gebied verlaten hebben voor blogberichten op 739 pixels breed en een rechterbalk op 780 pixels breed, beide met marge van 10 pixels. Het eindresultaat is een perfect uitgelijnde en uitgebalanceerde lay-out. Je kunt met verschillende verschillende rasters experimenteren door het generator-systeem voor rasters te bezoeken (zie bronnen).