De beste pixelgrootte voor afbeeldingen op Websites



Mobiele telefoons, tablets en computer-monitoren hebben verschillende toepassingen, gebruikers en afmetingen, cirkelredenering voor website ontwikkelaars: hoe groot moet mijn beelden? Als de site zal worden ontworpen om te worden bezocht en bekeken door 'standaard' gebruikers van een wide-screen monitor in 1680-door-1024 pixelresolutie, moet de grootte van de website worden toegesneden op binnen de voornaamste grazen venster. Als de site is bedoeld voor gebruik op mobiele apparaten, moet het worden formaat voor een veel kleiner scherm.

Vloeistof vs. Static lay-outs

De eerste overweging is of uw website helemaal een set dimensie in pixels vereist. Met behulp van percentages in plaats daarvan, kunt u een "vloeistof" lay-out die opnieuw de inhoudsgebieden dynamisch, afhankelijk van de grootte van het browservenster van de gebruiker maten. Wanneer gebruikt in combinatie met de tekst automatisch laten omlopen, kunnen vloeibare lay-outs worden de beste keuze bij het maken van een website voor standaard schermresoluties, alsmede mobiele browsers. Vloeibare lay-outs worden bereikt met behulp van "breedte = 100%" in van de inhoud CSS verklaring eerder dan "breedte = 960px," bijvoorbeeld.

Montage standaard schermformaten

Om 'vaste' of statische lay-outs maken, de breedte van uw belangrijkste inhoud divs, wrappers of tabellen moet passen binnen een gebruiker browservenster, rekening houdend met zowel de schuifbalk en browserwerkbalk. U ook willen overwegen ontwerpen voor de meerderheid van de bezoekers. In 2014, 99 procent van webbrowsers gebruiken een scherm resolutie 1024-door-768 pixels of hoger. Dit betekent dat u kon ontwerpen voor 1680-door-1024 pixels, maar het is een goed idee om te streven naar een middenweg. 960 pixels breed en 980 pixels breed zijn twee bedrijfszeker breedtes gebruikt om weer te geven inhoud comfortabel in de browser voor iedereen met behulp van de resolutie van de pixel van een 1024-door-768 of hoger. Dit systeem ook schalen goed op mobiele apparaten staat de weergave van de volledige websites. Als dit te smal, 1080 pixels is de volgende beste breedte. Houd rekening met de hoogte van een standaard browser-venster in een bepaalde resolutie om te houden van de belangrijkste informatie hierboven de "fold", of het punt welke schuiven vereist is.

Mobiele schermen

Als u wilt dat uw site er goed uitzien op een verscheidenheid van mobiele apparaten, zal u wilt ontwerpen speciaal voor het apparaat of een speciale-opmaakmodel dat wordt gebruikt door mobiele browsers om weer een 'mobiele' versie van uw webpagina te maken. Een resolutie van 240-door-320 pixels is een huidige standaard voor de meeste smartphones en internet-klaar mobiele apparaten zoals de iPhone. Het is aanbevolen om gebruik van percentages of 'vloeistof' lay-outs hier, hoewel, zoals vele apparaten zowel het landschap als portretwijze ondersteunen.

De Golden Grid

Misschien is het beste systeem voor het bepalen van de afmetingen van de lay-out door middel van een grid systeem. Rasters berekenen perfect uitgebalanceerde regio's binnen een bepaalde breedte teneinde een richtsnoer voor hoe grootte elementen binnen uw belangrijkste lay-out of de inhoud gebied. Deze elementen kunnen behoren promotionele vakken, sidebars, advertentie-ruimte of alinea's. Als voorbeeld, zou één lay-out met behulp van een totale breedte van 1080 pixels en verdeeld met het gouden raster een linker gebied voor de blogposten thats 739 pixels breed en een rechter zijbalk 311 pixels breed, beide met behulp van een marge van 10 pixels hebben. Het eindresultaat is een perfect evenwichtig en uitgelijnde lay-out. U kan experimenteren met verschillende rasters door het bezoeken van de grid systeem generator (zie bronnen).