Chiều rộng trang web tối ưu là gì?

Thiết kế một trang web và đặt chiều rộng trang web thành chiều rộng tối ưu là một cuộc trò chuyện đáng có. Nhiều bạn nhận thấy rằng gần đây tôi đã thay đổi chiều rộng thiết kế blog của mình. Tôi đã đẩy chiều rộng trang lên 1048 pixel. Một số bạn có thể không đồng ý với việc di chuyển này - nhưng tôi muốn chia sẻ một số số liệu thống kê và lý do tại sao tôi lại đẩy chiều rộng chủ đề quá rộng.

1048 pixel không phải là một số ngẫu nhiên.

Có hai ảnh hưởng chính trong việc mở rộng chiều rộng trang của tôi:

  • Thay đổi chiều rộng YoutubeYoutube cung cấp kích thước nhúng lớn hơn bây giờ. Nếu bạn nhấp vào bánh răng nhỏ trên thanh bên của trang video Youtube, bạn sẽ được cung cấp các tùy chọn cho kích thước lớn hơn cũng như chủ đề. Vì các video có độ phân giải cao hơn đang trở nên phổ biến trên Youtube, nên tôi muốn kết hợp các video đó vào blog của mình và hiển thị chúng với nhiều chi tiết nhất có thể (mà không tốn toàn bộ chiều rộng trang).
  • Quảng cáo điển hình có các chiều rộng 125, 250 và 300 pixel. 300 pixel dường như xuất hiện ngày càng nhiều trên các trang web doanh thu quảng cáo và tôi muốn kết hợp chúng gọn gàng vào thanh bên của mình.

Và tất nhiên, có một số khoảng đệm ở bên trái và bên phải của trang, nội dung và thanh bên… vì vậy con số kỳ diệu là 1048 pixel cho chủ đề của tôi:

Chiều rộng trang web tối ưu

Tôi đã kiểm tra thống kê người đọc của mình chưa?

Phải, tất nhiên! Nếu phần lớn khách truy cập của tôi đang sử dụng màn hình có độ phân giải thấp hơn, tôi chắc chắn sẽ có suy nghĩ thứ hai về việc mở rộng trang của mình. Chiều rộng và Phần trămSau khi xuất độ phân giải màn hình từ gói Analytics của tôi (Trong Google, đó là Khách truy cập> Khả năng trình duyệt> Độ phân giải màn hình), tôi đã tạo một bảng tính Excel gồm các kết quả và phân tích độ rộng từ trường độ phân giải.

Google cung cấp độ phân giải là 1600 × 1200, vì vậy bạn cần lấy mọi thứ từ bên trái của “x”, nhân nó với 1 để biến nó thành một kết quả số để bạn có thể sắp xếp giảm dần trên đó, sau đó thực hiện một SUMIF và xem có bao nhiêu lượt truy cập lớn hơn hoặc nhỏ hơn chiều rộng thiết kế mà bạn đang xem.

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

Tôi có bỏ rơi 22% độc giả đang chạy một giải pháp nhỏ hơn không? Dĩ nhiên là không! Điều thú vị về bố cục với nội dung của bạn ở bên trái và bên phải của thanh bên là bạn có thể đảm bảo rằng nội dung của bạn vẫn nằm trong chiều rộng của phần lớn các trình duyệt. Trong trường hợp này, 99% độc giả của tôi đang chạy rộng hơn 640 pixel, vì vậy tôi tốt! Tôi không muốn họ hoàn toàn bỏ lỡ thanh bên, nhưng đó là nội dung thứ yếu.

9 Comments

  1. 1

    Tôi đề xuất bố cục kết hợp và chiều rộng vùng chứa CSS là 100%. Miễn là bạn đã có chiều rộng cố định cho thanh bên, các khu vực đầu trang, chân trang và nội dung chính sẽ điều chỉnh để vừa với chiều rộng còn lại của màn hình. Điền 100% cửa sổ trình duyệt của mọi người, bất kể độ phân giải màn hình của người dùng. Sau đó, bạn không phải đếm pixel nữa hoặc theo dõi số liệu thống kê của người dùng về độ phân giải màn hình.

    • 2

      Tôi thực sự thích bố cục kết hợp, Bob - nhưng tiếc là đôi khi chúng không hoạt động tốt với nội dung thực tế. Có lẽ tôi lười biếng, nhưng tôi dễ dàng biết rằng tối đa và tối thiểu là 640px trong trang web của tôi. Khó có thể thụ thai khi tôi đang viết bài.

      Tôi đoán chỉ là sở thích cá nhân!

  2. 3

    Về cơ bản, tôi đồng ý với kết luận của bạn, nhưng nếu tôi đang sử dụng thiết lập chiều rộng cố định, tôi giới hạn chiều rộng ở mức 960 pixel.

    Người ta phải tính đến các thanh cuộn dọc và các thanh phím tắt khác của trình duyệt chiếm thêm chiều rộng. Bằng cách duy trì trong phạm vi 960 pixel, người ta yên tâm rằng không có thao tác cuộn từ trái sang phải trên độ phân giải màn hình rộng 1024 pixel.

    Andy Ebon

  3. 4
  4. 5

    rất kỳ quặc. Trong Firefox, trang web của bạn có thanh cuộn ngang ở mức 1048 và không có giao diện sạch sẽ cho đến khi bạn chuyển sang 1090.

    Cảm ơn các số liệu thống kê tuyệt vời từ các độ phân giải của Google

  5. 6

    Vì bạn đã có được đặt thành 1048px, trang web của bạn tạo ra các thanh cuộn ngang trên màn hình 1024. Tôi nghĩ tốt hơn là nên lướt qua 100px so với chiều rộng (và phần đệm) của thanh bên và khu vực nội dung của bạn để nó vừa với kích thước 728 × 1024. Đó là điều tốt nhất hiện nay.

    Trường hợp duy nhất chống lại điều này sẽ là nếu các số liệu phân tích hỗ trợ nó… nhưng vì bạn không cung cấp dữ liệu đó trong bài viết của mình, tôi muốn nói rằng thiết kế trang của bạn là thiếu sót.

  6. 7
  7. 8

    Người đàn ông ngớ ngẩn
    Không phải ai cũng sử dụng mọi cửa sổ ở chế độ toàn màn hình - trên thực tế, tôi cá rằng ít ai làm vậy. 

    Tôi có blog của bạn trong 80% windo… và nó ở đó, một thanh cuộn ngang

    Và những gì ngoài màn hình ... hãy xem ... không có gì.

    Vì vậy, thanh cuộn của bạn là vô nghĩa.

    Một cách dễ dàng để mất độc giả !!

    • 9

      Nội dung được đặt chính giữa trang @ heenan73: disqus, cung cấp cho người đọc chính xác những gì họ cần. Nếu tôi mất độc giả vì họ vừa có thể xem nội dung VÀ vừa thấy thanh cuộn ngang… thì không chắc họ là độc giả mà tôi đang tìm kiếm. Chắc chắn có điều gì đó độc đáo trong nội dung của chúng tôi đẩy nó lên 1217px, vì vậy tôi sẽ theo dõi và sửa chữa nó. Bài đăng này thực sự được viết về một chủ đề trước đó. Cám ơn bạn đã khiến tôi chú ý tới việc này!

Bạn nghĩ gì?

Trang web này sử dụng Akismet để giảm spam. Tìm hiểu cách xử lý dữ liệu nhận xét của bạn.