Каква е оптималната ширина на уеб страницата?

Проектирането на уеб сайт и задаването на оптимална ширина на уеб страницата е разговор, който си струва да се проведе. Много от вас забелязаха, че наскоро промених ширината на дизайна на моя блог. Преместих ширината на страницата до 1048 пиксела. Някои от вас може да не са съгласни с хода - но аз исках да споделя някои статистически данни и причини, поради които разширих широчината на темата толкова широко.

1048 пиксела обаче не беше произволно число.

Имаше две ключови влияния за разширяване на ширината на страницата ми:

  • Променете ширината на YoutubeYoutube предлага по-големи размери за вграждане сега. Ако щракнете върху малката предавка в страничната лента на видео страницата на Youtube, ще ви бъдат предложени опции за по-големи размери, както и темата. Тъй като видеоклиповете с по-висока разделителна способност стават често срещано място в Youtube, исках да ги включа в моя блог и да ги покажа с възможно най-много детайли (без да консумирам цялата ширина на страницата).
  • Типичната реклама се предлага с ширина 125, 250 и 300 пиксела. Изглежда, че 300 пиксела се появяват все повече и повече в сайтовете за приходи от реклами и исках да ги включа добре в страничната лента.

И разбира се, има малко подплънки вляво и вдясно на страницата, съдържанието и страничната лента ... така че магическото число беше 1048 пиксела за моята тема:

Оптимална ширина на уеб сайта

Проверих ли статистиката на читателите си?

Да разбира се! Ако по-голямата част от посетителите ми работеха с екрани с по-ниска разделителна способност, определено щях да се замисля за разширяване на страницата си. Ширина и процентСлед извеждане на разделителните способности на екрана от моя пакет Analytics (В Google това са Посетители> Възможности на браузъра> Разделителни способности на екрана), изградих електронна таблица на Excel с резултатите и анализирах ширината от полето за разделителна способност.

Google предоставя разделителна способност 1600 × 1200, така че трябва да вземете всичко отляво на „x“, да го умножите по 1, за да го направите числов резултат, за да можете да сортирате по низходящ по него, след това да направите SUMIF и да видите колко посещения са по-големи или по-малки от проектната ширина, която гледате.

= НАЛЯВО (A2, FIND ("x", A2,1) -1) * 1

Изоставих ли 22% от читателите, които използват по-малка резолюция? Разбира се, че не! Хубавото на оформлението с вашето съдържание вляво и страничната лента вдясно е, че можете да се уверите, че съдържанието ви все още е в ширината на повечето браузъри. В този случай 99% от моите читатели са с ширина над 640 пиксела, така че съм добре! Не искам да пропускат напълно страничната лента, но това е второстепенно за съдържанието.

9 Коментари

  1. 1

    Предлагам хибридно оформление и CSS ширина на контейнера 100%. Докато имате фиксирана ширина за страничната лента, горният, долният и основният области на съдържанието ще се коригират, за да се поберат в оставащата ширина на екрана. Запълва 100% от прозореца на браузъра на всеки, независимо от разделителната способност на монитора на потребителя. Тогава не е нужно повече да броите пиксели или да следите статистиката на потребителите относно разделителните способности на монитора.

    • 2

      Наистина харесвам хибридни оформления, Боб - но за съжаление понякога не играят добре с действителното съдържание. Може би съм мързелив, но ми е по-лесно да знам, че max и min са 640px в моя сайт. Разтягането е трудно за зачеване, когато пиша публикациите.

      Просто лично предпочитание, предполагам!

  2. 3

    По същество съм съгласен с вашето заключение, но ако използвам настройка с фиксирана ширина, ограничавам ширината до 960 пиксела.

    Трябва да се вземат предвид вертикалните ленти за превъртане и други ленти за бърз достъп на браузъра, които заемат допълнителна ширина. Оставайки в рамките на 960 пиксела, човек е сигурен, че няма превъртане отляво надясно на разделителна способност на екрана с ширина 1024 пиксела.

    Анди Ибон

  3. 4
  4. 5

    много странно. Във Firefox вашият сайт има хориз плъзгач на 1048 и няма изчистен вид, докато не излезете на 1090.

    Благодаря за страхотната статистика, въпреки че от резолюциите на Google

  5. 6

    Тъй като имаш своя зададен на 1048px, вашият сайт причинява хоризонтални ленти за превъртане на 1024 екран. Мисля, че би било по-добре да премахнете 100px от ширината (и подложката) на вашата странична лента и областта на съдържанието, така че да се побере на 728 × 1024. Това е най-добрата практика днес.

    Единственият случай срещу това би бил, ако номерата за анализ го поддържат ... но тъй като не сте предоставили тези данни в статията си, бих казал, че дизайнът на страницата ви е погрешен.

  6. 7
  7. 8

    Глупав човек
    Не всеки използва всеки прозорец на цял екран - всъщност бих заложил, че малцина го правят. 

    Имам вашия блог в 80% windo ... и ето го, хоризонтална лента за превъртане

    И това, което е извън екрана ... нека видим ... нищо.

    Така че вашата лента за превъртане е безсмислена.

    Един лесен начин да загубите читатели !!

    • 9

      Съдържанието е центрирано в страницата @ heenan73: disqus, предоставяйки на читателя точно това, от което се нуждаят. Ако губя читатели, защото и двамата могат да видят съдържанието И да видят хоризонтална лента за превъртане ... не съм сигурен, че това са читателите, които търся. Определено има нещо уникално в нашето съдържание, което го изтласква до 1217px, така че ще го проследя и ще го поправя. Тази публикация всъщност е написана по предишна тема. Благодаря, че го обърнахте на вниманието ми!

Какво мислите?

Този сайт използва Akismet за намаляване на спама. Научете как се обработват данните за коментарите ви.