Koja je optimalna širina web stranice?

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

1048 piksela ipak nije bio slučajan broj.

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

  • Promijenite Youtube širinuYoutube sada nudi veće veličine ugrađenih datoteka. Ako kliknete na mali zupčanik na bočnoj traci YouTube video stranice, nudit će vam se opcije za veće veličine kao i tema. Budući da videozapisi veće definicije postaju uobičajeno mjesto na Youtubeu, želio sam ih uključiti u svoj blog i prikazati ih sa što više detalja (bez trošenja cijele 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 čitatelja?

Da naravno! Da je većina mojih posjetitelja koristila zaslone niže rezolucije, definitivno bih razmišljao o proširenju stranice. Širina i procenatNakon 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 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, FIND ("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 je vaš sadržaj i dalje u širini većine pretraživača. U ovom slučaju, 99% mojih čitača ima širinu veću od 640 piksela, tako da sam dobro! Ne želim da im potpuno nedostaje bočna traka, ali to je sekundarno u odnosu na sadržaj.

9 Komentari

  1. 1

    Predlažem hibridni izgled i CSS širinu kontejnera 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. Popunjava 100% svačijeg prozora preglednika, bez obzira na korisnikovu razlučivost monitora. Tada više ne morate brojati piksele niti pratiti statistiku korisnika u vezi s rezolucijama monitora.

    • 2

      Stvarno mi se sviđaju hibridni rasporedi, Bob - ali nažalost ponekad se ne igraju dobro sa stvarnim sadržajem. Možda sam lijen, ali lakše mi je znati da su max i min 640px na mojoj web lokaciji. Istezanje je teško zamisliti dok pišem postove.

      Pretpostavljam samo lična preferencija!

  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čica koje zauzimaju dodatnu širinu. Ako se držite unutar 960 piksela, osigurava se da nema pomicanja s lijeva na desno na rezoluciji ekrana širine 1024 piksela.

    Andy Ebon

  3. 4
  4. 5
  5. 6

    Otkad ste dobili svoje postavljeno na 1048px, vaša web lokacija uzrokuje vodoravne trake za pomicanje na ekranu 1024. Mislim da bi bilo bolje ukloniti 100px širine (i dodavanja) bočne trake i područja sadržaja, tako da stane na 728 × 1024. To je ono što je danas najbolja praksa.

    Jedini slučaj protiv toga bio bi ako ga podržavaju brojevi analitike ... ali s obzirom da u svom članku niste naveli te podatke, rekao bih da ste dizajnirali stranicu s manjkavošću.

  6. 7
  7. 8

    Blesavi covjece
    Ne koriste svi svaki prozor na cijelom ekranu - zapravo, kladio bih se da to malo koristi. 

    Imam vaš blog u 80% slučajeva ... i tu je vodoravna traka za pomicanje

    A ono što je sa ekrana ... da vidimo ... ništa.

    Dakle, vaša traka za pomicanje je besmislena.

    Jedan jednostavan način da izgubite čitatelje !!

    • 9

      Sadržaj je centriran na stranici @ heenan73: disqus, pružajući čitatelju tač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 post je zapravo napisan o prethodnoj temi. Hvala što ste mi skrenuli pažnju!

Šta ti misliš?

Ova stranica koristi Akismet kako bi smanjila neželjenu poštu. Saznajte kako se podaci vašeg komentara obrađuju.