Koja je optimalna širina web stranice?

Dizajn web stranice i postavljanje širine web stranice na optimalnu širinu razgovor je vrijedan razgovora. Mnogi od vas primijetili su da sam nedavno promijenio širinu dizajna svog bloga. Gurnuo sam širinu stranice na 1048 piksela. Neki se od vas možda neće složiti s tim potezom - ali htio sam podijeliti neke statistike i razloge zašto sam toliko proširio širinu teme.

1048 piksela ipak nije bio slučajan broj.

Dva su ključna utjecaja na proširenje moje širine stranice:

  • Promijenite širinu YouTubeaYoutube sada nudi veće veličine ugrađenih datoteka. Ako kliknete mali zupčanik na bočnoj traci YouTube video stranice, nudit će vam se mogućnosti za veće veličine, kao i za temu. Budući da videozapisi veće definicije postaju uobičajeno mjesto na Youtubeu, želio sam ih uključiti u svoj blog i prikazati ih s što više detalja (ne trošeći cijelu širinu stranice).
  • Tipično oglašavanje dolazi u širini od 125, 250 i 300 piksela. Čini se da se 300 piksela pojavljuje sve više i više na web lokacijama s prihodima od oglasa i želio sam ih uredno uklopiti u svoju bočnu traku.

I naravno, ima malo dodataka s lijeve i desne strane stranice, sadržaja i bočne trake ... tako da je magični broj za moju temu bio 1048 piksela:

Optimalna širina web stranice

Jesam li provjerio statistiku svojih čitatelja?

Da naravno! Da je većina mojih posjetitelja koristila zaslone niže razlučivosti, definitivno bih razmišljao o proširenju stranice. Širina i postotakNakon izlaza razlučivosti zaslona iz mog paketa Analytics (u Googleu to su Posjetitelji> Mogućnosti preglednika> Razlučivosti zaslona), izgradio sam Excel tablicu rezultata i raščlanio širinu iz polja razlučivosti.

Google pruža rezoluciju 1600 × 1200, tako da morate uzeti sve s lijeve strane "x", pomnožiti ga s 1 da biste dobili numerički rezultat kako biste mogli sortirati silazno po njemu, a zatim napraviti SUMIF i vidjeti koliko posjeta su veće ili manje od projektne širine koju gledate.

= LIJEVO (A2, PRONAĐI ("x", A2,1) -1) * 1

Jesam li napustio 22% čitatelja koji imaju manju rezoluciju? Naravno da ne! Lijepa stvar kod izgleda s lijevim i bočnom trakom desno je ta što možete osigurati da vaš sadržaj i dalje bude u širini većine preglednika. U ovom slučaju, 99% mojih čitatelja ima širinu veću od 640 piksela, pa sam dobro! Ne želim da im totalno nedostaje bočna traka, ali to je sporedno od sadržaja.

9 Komentari

  1. 1

    Predlažem hibridni izgled i CSS širinu spremnika od 100%. Sve dok imate fiksnu širinu bočne trake, zaglavlje, podnožje i područja glavnog sadržaja prilagodit će se tako da odgovaraju preostaloj širini zaslona. Ispunjava 100% prozora preglednika, bez obzira na razlučivost korisnikova monitora. Tada više ne morate brojati piksele niti pratiti korisničke statistike u vezi s razlučivostima monitora.

    • 2

      Jako volim hibridne izglede, Bobe - ali nažalost ponekad se ne poigravaju stvarno stvarnim sadržajem. Možda sam lijen, ali lakše mi je znati da su max i min 640px na mojoj stranici. Istezanje je teško zamisliti dok pišem postove.

      Pretpostavljam samo osobne preferencije!

  2. 3

    U osnovi se slažem s vašim zaključkom, ali ako koristim postavku fiksne širine, ograničim širinu na 960 piksela.

    Treba uzeti u obzir vertikalne trake za pomicanje i ostale trake prečaca preglednika koje zauzimaju dodatnu širinu. Ako ostanete unutar 960 piksela, osigurava se da nema pomicanja slijeva udesno na razlučivosti zaslona širine 1024 piksela.

    Andy Ebon

  3. 4
  4. 5
  5. 6

    Otkad ste dobili svoj postavljeno na 1048px, vaše web mjesto uzrokuje vodoravne trake za pomicanje na zaslonu 1024. Mislim da bi bilo bolje ukloniti 100px širine (i dodataka) bočne trake i područja sadržaja kako bi stao na 728 × 1024. To je ono što je danas najbolja praksa.

    Jedini slučaj protiv toga bio bi ako ga podržavaju analitički brojevi ... ali s obzirom da u svom članku niste naveli te podatke, rekao bih da ste u dizajnu stranice manjkavi.

  6. 7
  7. 8

    Blesavi čovječe
    Ne koriste svi svaki prozor na cijelom zaslonu - zapravo, kladio bih se da malo tko to čini. 

    Imam vaš blog u 80% slučajeva ... i evo ga, vodoravna traka za pomicanje

    A što je s ekrana ... da vidimo ... ništa.

    Dakle, vaša je traka za pomicanje besmislena.

    Jedan jednostavan način da izgubite čitatelje !!

    • 9

      Sadržaj je usredotočen na stranicu @ heenan73: disqus, pružajući čitatelju točno ono što im treba. Ako gubim čitatelje jer oboje mogu vidjeti sadržaj I vidjeti vodoravnu traku za pomicanje ... nisam siguran da su to čitači koje tražim. Definitivno postoji nešto jedinstveno u našem sadržaju što ga gura na 1217px, pa ću to pronaći i popraviti. Ovaj je post zapravo napisan o prethodnoj temi. Hvala što ste mi skrenuli pozornost!

Što vi mislite?

Ova web stranica koristi Akismet za smanjenje neželjene pošte. Saznajte kako se podaci vašeg komentara obrađuju.