Wat is de optimale webpagina-breedte?

Het ontwerpen van een website en het instellen van de breedte van de webpagina op een optimale breedte is een gesprek dat de moeite waard is. Velen van jullie hebben gemerkt dat ik onlangs de breedte van het ontwerp van mijn blog heb gewijzigd. Ik heb de paginabreedte naar 1048 pixels gedrukt. Sommigen van jullie zijn het misschien niet eens met de verhuizing, maar ik wilde enkele statistieken en redenen delen waarom ik de breedte van het thema zo breed heb gemaakt.

1048 pixels was echter geen willekeurig getal.

Er waren twee belangrijke invloeden bij het vergroten van mijn paginabreedte:

  • Wijzig de YouTube-breedteYouTube biedt nu grotere insluitingsgroottes. Als je op het kleine tandwiel in de zijbalk van de YouTube-videopagina klikt, krijg je zowel opties voor grotere formaten als voor het thema. Omdat video's met een hogere resolutie gemeengoed worden op YouTube, wilde ik die video's in mijn blog opnemen en ze zo gedetailleerd mogelijk weergeven (zonder de volledige paginabreedte in beslag te nemen).
  • Typische advertenties zijn beschikbaar in breedtes van 125, 250 en 300 pixelbreedtes. 300 pixels lijken steeds meer op te duiken op sites met advertentie-inkomsten en ik wilde ze netjes in mijn zijbalk opnemen.

En natuurlijk is er wat opvulling links en rechts van de pagina, de inhoud en de zijbalk ... dus het magische getal was 1048 pixels voor mijn thema:

Optimale breedte van de website

Heb ik mijn lezersstatistieken gecontroleerd?

Ja natuurlijk! Als de meerderheid van mijn bezoekers schermen met een lagere resolutie had, zou ik zeker hebben bedacht over het uitbreiden van mijn pagina. Breedte en percentageNa het uitvoeren van de schermresoluties uit mijn Analytics-pakket (in Google is het Bezoekers> Browsermogelijkheden> Schermresoluties), heb ik een Excel-spreadsheet met de resultaten gemaakt en de breedte uit het resolutieveld geparseerd.

Google biedt een resolutie van 1600 × 1200, dus u moet alles van de linkerkant van de 'x' nemen, dit met 1 vermenigvuldigen om er een numeriek resultaat van te maken, zodat u er aflopend op kunt sorteren, en vervolgens een SUMIF uitvoeren en zien hoeveel bezoeken groter of kleiner zijn dan de ontwerpbreedte waarnaar u kijkt.

= LINKS (A2, FIND ("x", A2,1) -1) * 1

Heb ik de 22% van de lezers met een kleinere resolutie in de steek gelaten? Natuurlijk niet! Het leuke van een lay-out met je inhoud links en je zijbalk rechts, is dat je ervoor kunt zorgen dat je inhoud nog steeds binnen de breedte van de meeste browsers valt. In dit geval is 99% van mijn lezers groter dan 640 pixels breed, dus ik ben goed! Ik wil niet dat ze de zijbalk helemaal missen, maar dat is ondergeschikt aan de inhoud.

9 reacties

  1. 1

    Ik stel een hybride lay-out en een CSS-containerbreedte van 100% voor. Zolang je een vaste breedte hebt voor de zijbalk, worden de kop-, voettekst- en hoofdinhoudsgebieden aangepast aan de resterende breedte van het scherm. Vult 100% van ieders browservenster, ongeacht de monitorresolutie van de gebruiker. Dan hoef je geen pixels meer te tellen of gebruikersstatistieken bij te houden met betrekking tot monitorresoluties.

    • 2

      Ik hou echt van hybride lay-outs, Bob - maar helaas spelen ze soms niet goed samen met de daadwerkelijke inhoud. Misschien ben ik lui, maar het is gemakkelijker voor mij om te weten dat max en min 640px zijn op mijn site. Rekken is moeilijk voor te stellen als ik de berichten schrijf.

      Gewoon een persoonlijke voorkeur denk ik!

  2. 3

    In wezen ben ik het eens met uw conclusie, maar als ik een opstelling met een vaste breedte gebruik, beperk ik de breedte tot 960 pixels.

    Men moet rekening houden met verticale schuifbalken en andere snelkoppelingsbalken van de browser die extra breedte innemen. Door binnen 960 pixels te blijven, weet je zeker dat er niet van links naar rechts wordt gescrolld op een schermresolutie van 1024 pixels breed.

    Andy Ebon

  3. 4
  4. 5
  5. 6

    Omdat je je hebt ingesteld op 1048px, veroorzaakt uw site horizontale schuifbalken op een scherm van 1024. Ik denk dat het beter zou zijn geweest om 100px van de breedte (en opvulling) van je zijbalk en inhoudsgebied af te glijden, zodat het op een 728 × 1024 past. Dat is vandaag de beste praktijk.

    De enige zaak hiertegen zou zijn als de analytische cijfers het ondersteunen ... maar aangezien u die gegevens niet in uw artikel hebt verstrekt, zou ik zeggen dat uw pagina-ontwerp gebrekkig is.

  6. 7
  7. 8

    Gekke man
    Niet iedereen gebruikt elk venster op volledig scherm - ik durf zelfs te wedden dat weinigen dat doen. 

    Ik heb je blog in een 80% windo… en daar is het, een horizontale schuifbalk

    En wat is er van het scherm ... laat eens kijken ... niets.

    Dus je schuifbalk heeft geen zin.

    Een gemakkelijke manier om lezers te verliezen !!

    • 9

      De inhoud is gecentreerd op de pagina @ heenan73: disqus, waardoor de lezer precies krijgt wat hij nodig heeft. Als ik lezers verlies omdat ze allebei de inhoud kunnen zien EN een horizontale schuifbalk kunnen zien ... niet zeker of zij de lezers waren die ik zoek. Er is absoluut iets unieks in onze inhoud dat het naar 1217px pusht, dus ik ga dat opsporen en repareren. Dit bericht is eigenlijk geschreven over een vorig thema. Bedankt dat je het onder mijn aandacht hebt gebracht!

Wat denk je?

Deze site gebruikt Akismet om spam te verminderen. Ontdek hoe uw reactiegegevens worden verwerkt.