Chiều rộng và chiều cao 'phổ biến nhất' mà các trang web đang được thiết kế cho những ngày này là gì?

Tôi đang làm việc trong một dự án nhóm và cố gắng để các đồng nghiệp của mình gửi bản vẽ về tầm nhìn của họ cho một ứng dụng trực tuyến; ứng dụng này sẽ được xem qua PC. Mặc dù tôi nghi ngờ không có tiêu chuẩn ngành, nhưng tôi chắc chắn rằng phải có những cách tiếp cận chung cho các trang web có bố cục chiều rộng cố định. Tôi cần biết ý thức phổ biến nhất về tỷ lệ trong ngành.

Chúng tôi sẽ giữ cho nguyên mẫu này đơn giản, và do đó sẽ không phát hiện trình duyệt, độ rộng màn hình, v.v. Vì vậy, tôi đoán rằng tôi sẽ hỏi điều này một cách đơn giản với hy vọng nhận được câu trả lời đơn giản:

Chiều rộng và chiều cao 'phổ biến nhất' mà các trang web đang được thiết kế gần đây nhất là gì. Sẽ rất hữu ích nếu tôi có thể cung cấp một nguồn khi tôi nói với các đồng nghiệp của mình tại sao tôi chọn một ý nghĩa tỷ lệ cụ thể để họ dựa vào bản vẽ của họ.

Xin lưu ý cách tôi hỏi câu hỏi này:

Tôi không yêu cầu độ phân giải màn hình phổ biến nhất.
Tôi không yêu cầu các trình duyệt phổ biến nhất.

Tôi muốn biết kích thước nào mà hầu hết các trang web đang chọn liên quan đến bố cục kích thước cố định. Tôi biết rằng mọi người thường cuộn và do đó chiều cao có thể không phải là một phần của '' tiêu chuẩn '; trong trường hợp đó, tôi sẽ giải quyết cho chiều rộng phổ biến nhất.

website-design

— John R
nguồn

Câu trả lời:

Giống như bạn đã nói không có chiều cao tiêu chuẩn vì nó cực kỳ trôi chảy, vì vậy chỉ cần sử dụng bất cứ điều gì giúp bạn hình dung thiết kế của bạn tốt nhất.

Đối với chiều rộng, chiều rộng 960 pixel dường như là "tiêu chuẩn" hiện tại cho các thiết kế chiều rộng cố định. Nó đủ phổ biến để một trang web được dành riêng để khám phá bố cục ở độ rộng đó .

(Tôi cho rằng bạn không muốn bất kỳ ai ca ngợi về việc sử dụng thiết kế chất lỏng?)

— John Conde
nguồn

Thực sự không có chiều rộng tiêu chuẩn bạn nên đặt. Lượng người sử dụng màn hình 1024x768 đã giảm mạnh trong vài năm qua, do đó, chiều rộng của 960 có tầm quan trọng ít hơn. Với sự xuất hiện của rất nhiều thiết bị mới (điện thoại thông minh, máy tính bảng cùng với máy tính xách tay và máy tính để bàn), bạn nên tạo một số bảng định kiểu cho mỗi trường hợp.

Truy vấn phương tiện CSS cho phép bạn thay đổi kiểu dựa trên độ phân giải màn hình của người dùng. Tôi có xu hướng tạo các trang web với biểu định kiểu chung xử lý tất cả các kiểu dáng trực quan, sau đó tách riêng các trang dành cho thiết bị di động, máy tính bảng, máy tính để bàn / máy tính xách tay tiêu chuẩn và màn hình rộng thêm cấu trúc trang.

Kiểm tra trang này trên W3.org để biết một vài ví dụ - http://www.w3.org/TR/css3-mediaqueries/

Đó là công việc nhiều hơn, nhưng sẽ cho phép người dùng có được trải nghiệm tốt nhất có thể cho dù họ sử dụng gì để duyệt trang web của họ.

— Ô tô
nguồn

Những gì @John Conde nói. Ngoài ra, bạn phải xác định được đối tượng mục tiêu của mình là ai. Ví dụ: nếu trang web của tôi là blog công nghệ hoặc blog tiện ích, rất có thể đối tượng mục tiêu của tôi là người am hiểu công nghệ hơn một chút so với đối tượng bình thường, vì vậy tôi có thể chụp với bố cục rộng hơn 1200 px. Hoặc nếu tôi đang tập trung một trang web / blog / diễn đàn cho quản trị trang web, tôi sẽ mở rộng hơn một chút.

Vào cuối ngày, hãy tìm ra nhân khẩu học đại chúng của bạn và làm theo những gì cuối cùng sẽ làm việc cho họ.

Hai điều RẤT quan trọng cần ghi nhớ ...

1) Nếu thiết kế của bạn có thể hoạt động với 900+ px thì không có lý do gì để kéo dài nó lên 1200+ px ngay cả khi nhân khẩu học của bạn có thể đủ khả năng ..

2) Đảm bảo rằng bạn có cấu trúc phù hợp tại chỗ có thể chứa những người không có độ phân giải mục tiêu của bạn ..

— Adil
nguồn

Tôi không đồng ý với điểm # 2. Với màn hình rộng 1366px, được cho là chiều rộng phổ biến nhất trên hầu hết các máy tính xách tay được bán trong vài năm qua, bạn không thể đặt hai cửa sổ 900px cạnh nhau và nhìn thấy cả hai cùng một lúc. Nếu bạn chỉ có một bố cục 900px, bạn đang lãng phí 34% không gian ngang của mình với khoảng trắng. Trong trường hợp đó, 1200px sẽ là một chiều rộng lý tưởng . Vì vậy, có, có là một lý do để kéo dài nó.

— nheo

@nhinkle: Tôi không nghĩ bạn thực sự đọc điểm # 2. Phản ứng của bạn phải làm gì với việc lắp hai cửa sổ 900px cạnh nhau? Hơn nữa, xin vui lòng đọc câu hỏi đúng để hiểu những gì John R đang yêu cầu. Đây không phải là một cuộc thảo luận về các trường hợp sử dụng cực kỳ, chẳng hạn như bạn muốn có 2 cửa sổ 900px cạnh nhau hoặc trong trường hợp của tôi muốn có màn hình 1600px (2 trong số đó) để thiết kế. Thay vào đó là về đại đa số người dùng không phải là bạn hoặc tôi ..

— Adil

Tôi xin lỗi, tôi có nghĩa là trả lời điểm 1 của bạn, không phải thứ 2 của bạn. Tôi xin lỗi nếu điều đó gây ra bất kỳ sự nhầm lẫn. Quan điểm của tôi vẫn đứng vững: đại đa số người dùng có màn hình đủ rộng để bố cục 900px đang lãng phí rất nhiều không gian của họ. Tôi đồng ý với hầu hết những gì bạn nói trong câu trả lời của bạn, nhưng "điều cần ghi nhớ" đầu tiên của bạn không thực sự đúng. Nếu nhân khẩu học của bạn có thể đủ khả năng 1200px, bạn nên sử dụng 1200 px đó, nếu không, bạn sẽ lãng phí 300 pixel của họ.

— nheo

@nhinkle: Bạn đang đọc sai quan điểm # 1 của tôi. Nếu thiết kế của tôi có thể hiển thị trang web dễ dàng trong phạm vi 900px thì tại sao tôi lại kéo dài nó để làm cho nó thành 1200px? Ngoài ra, 13% người dùng vẫn có độ phân giải màn hình 1024x768 Được cấp một số lượng nhỏ nhưng đủ lớn để làm họ khó chịu và mất doanh số, nhấp vào quảng cáo, khách hàng tiềm năng hoặc bất kỳ mô hình kinh doanh nào của bạn .... (dữ liệu được trích dẫn từ: w3schools .com / browser / browser_display.asp )

— Adil 23/03

Tôi nhận được quan điểm của bạn. Quan điểm của tôi là nếu người dùng của bạn có màn hình đủ rộng để sử dụng bố cục rộng 1200px, bạn nên làm vậy. Ví dụ: các trang web trao đổi ngăn xếp được tối ưu hóa cho chiều rộng khoảng 1000px, nhưng nhiều người dùng đã yêu cầu một tùy chọn để xem nguồn bài đăng và xem trước đánh dấu cạnh nhau, sẽ sử dụng nhiều không gian ngang hơn. w3schools không phải là một mẫu đại diện của người dùng web, nhưng bên cạnh đó, cuộc thảo luận này dành cho các trang web mà 1200 sẽ hợp lý nếu phù hợp với thiết kế.

— nheo mắt