최적의 웹 페이지 너비는 얼마입니까?

웹 사이트를 디자인하고 웹 페이지 너비를 최적의 너비로 설정하는 것은 가치 있는 대화입니다. 많은 사람들이 내가 최근에 내 블로그 디자인의 너비를 변경했음을 알아차렸습니다. 페이지 너비를 1048픽셀로 늘렸습니다. 여러분 중 일부는 이러한 움직임에 동의하지 않을 수 있습니다. 하지만 저는 제가 테마 너비를 그렇게 넓힌 이유에 대한 몇 가지 통계와 이유를 공유하고 싶었습니다.

하지만 1048 픽셀은 임의의 숫자가 아닙니다.

내 페이지 너비를 확장하는 데 두 가지 주요 영향이있었습니다.

  • YouTube 너비 변경Youtube는 이제 더 큰 삽입 크기를 제공합니다. Youtube 비디오 페이지의 사이드바에 있는 작은 톱니바퀴를 클릭하면 테마뿐만 아니라 더 큰 크기에 대한 옵션이 제공됩니다. 고화질 동영상이 YouTube에서 보편화되고 있기 때문에 해당 동영상을 내 블로그에 통합하고 전체 페이지 너비를 사용하지 않고 최대한 자세하게 표시하고 싶었습니다.
  • 일반적인 광고는 너비가 125, 250 및 300 픽셀입니다. 300 픽셀이 광고 수익 사이트에 점점 더 많이 나타나고있는 것 같아서 사이드 바에 깔끔하게 통합하고 싶었습니다.

물론 페이지, 콘텐츠, 사이드바의 왼쪽과 오른쪽에 약간의 여백이 있습니다. 따라서 내 테마의 매직 넘버는 1048픽셀이었습니다.

최적의 웹 사이트 너비

독자 통계를 확인 했습니까?

네, 물론입니다! 대부분의 방문자가 저해상도 화면을 사용하고 있었다면 내 페이지 확장에 대해 다시 생각했을 것입니다. 너비와 비율내 Analytics 패키지(Google에서는 방문자 > 브라우저 기능 > 화면 해상도)에서 화면 해상도를 출력한 후 결과의 Excel 스프레드시트를 작성하고 해상도 필드의 너비를 구문 분석했습니다.

Google은 1600x1200 해상도를 제공하므로 "x"의 왼쪽에서 모든 것을 가져 와서 1을 곱하여 숫자 결과로 만들어 내림차순으로 정렬 한 다음 SUMIF를 수행하고 방문 수를 확인해야합니다. 보고있는 디자인 너비보다 크거나 작습니다.

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

더 작은 해상도를 실행하는 독자의 22%를 포기했습니까? 당연히 아니지! 콘텐츠가 왼쪽에 있고 사이드바가 오른쪽에 있는 레이아웃의 좋은 점은 콘텐츠가 여전히 대부분의 브라우저 너비 내에 있는지 확인할 수 있다는 것입니다. 이 경우 독자의 99%가 너비가 640픽셀 이상이므로 저는 좋습니다! 나는 그들이 사이드바를 완전히 놓치는 것을 원하지 않지만 그것은 콘텐츠에 부차적인 것입니다.

댓글 9

  1. 1

    하이브리드 레이아웃과 100 %의 CSS 컨테이너 너비를 제안합니다. 사이드 바에 고정 된 너비가있는 한 머리글, 바닥 글 및 기본 콘텐츠 영역은 화면의 나머지 너비에 맞게 조정됩니다. 사용자의 모니터 해상도에 관계없이 모든 사람의 브라우저 창을 100 % 채 웁니다. 그러면 더 이상 픽셀을 계산하거나 모니터 해상도와 관련된 사용자 통계를 추적 할 필요가 없습니다.

    • 2

      저는 하이브리드 레이아웃을 정말 좋아합니다.하지만 안타깝게도 가끔 실제 콘텐츠와 잘 어울리지 않습니다. 아마도 게으르지 만 내 사이트에서 최대 및 최소가 640px라는 것을 알기가 더 쉽습니다. 게시물을 작성할 때 스트레칭은 생각하기 어렵습니다.

      개인적으로 선호하는 것 같아요!

  2. 3

    기본적으로 귀하의 결론에 동의하지만 고정 너비 설정을 사용하는 경우 너비를 960 픽셀로 제한합니다.

    하나는 수직 스크롤 막대와 추가 너비를 차지하는 다른 브라우저 바로 가기 막대를 고려해야합니다. 960 픽셀 이내로 유지하면 1024 픽셀 너비의 화면 해상도에서 왼쪽에서 오른쪽으로 스크롤되지 않습니다.

    앤디 에본

  3. 4
  4. 5

    매우 이상합니다. Firefox에서 사이트에는 1048에 수평 스크롤바가 있으며 1090에 도달 할 때까지 깔끔하게 보이지 않습니다.

    Google 해상도의 훌륭한 통계에 감사드립니다.

  5. 6

    당신이 가지고 있기 때문에 1048px로 설정하면 사이트에서 1024 화면에 가로 스크롤 막대가 표시됩니다. 사이드 바와 콘텐츠 영역의 너비 (및 패딩)에서 100px를 걷어내어 728x1024에 맞도록하는 것이 더 낫다고 생각합니다. 이것이 오늘날의 모범 사례입니다.

    이에 대한 유일한 경우는 분석 수치가이를 지원하는 경우입니다.하지만 기사에 해당 데이터를 제공하지 않았기 때문에 페이지 디자인에 결함이 있다고 말하고 싶습니다.

  6. 7
  7. 8

    바보 남자
    모든 사람이 전체 화면에서 모든 창을 사용하는 것은 아닙니다. 사실, 그렇게하는 사람은 거의 없습니다. 

    나는 당신의 블로그가 80 % 윈도에 있습니다. 여기에 수평 스크롤바가 있습니다.

    그리고 화면에있는 것은 ... 보자 ... 아무것도.

    따라서 스크롤 막대는 무의미합니다.

    독자를 잃는 쉬운 방법 !!

    • 9

      콘텐츠는 @ heenan73 : disqus 페이지 중앙에 배치되어 독자에게 필요한 정보를 정확히 제공합니다. 콘텐츠를 볼 수 있고 가로 스크롤바를 볼 수 있기 때문에 독자를 잃고 있다면… 그들이 내가 찾고있는 독자인지 확실하지 않습니다. 우리 콘텐츠에는 분명히 1217px로 밀어내는 고유 한 것이 있으므로 추적하여 수정하겠습니다. 이 게시물은 실제로 이전 주제에 대해 작성되었습니다. 관심을 가져 주셔서 감사합니다!

당신은 어떻게 생각하십니까?

이 사이트는 Akismet을 사용하여 스팸을 줄입니다. 댓글 데이터 처리 방법 알아보기.