Tôi nên sử dụng chiều rộng trình duyệt nào để thiết kế trang web?

9

Tôi đang làm việc trên một phần đồ họa của trang web và được yêu cầu thiết kế một trang web bằng Photoshop. Tôi tự hỏi kích thước trung bình và độ rộng trình duyệt cho một trang web là gì để tôi có thể tạo mô hình của mình với các kích thước đó.

website-design

— Hugh G. Wreckshin
nguồn

đó là một câu hỏi hoàn toàn khác nhau Điều này hỏi độ phân giải mặc định của toàn bộ hình ảnh mockup của trang web sẽ là gì mà người khác yêu cầu đồ họa trong trang web đó.

— Xitcod13

2

Không chắc chắn tại sao nó được đóng lại, nó không phải là một bản sao của các chủ đề khác. (Tôi đã bình chọn để mở lại) Cũng thay đổi tiêu đề để chính xác hơn một chút. - Hầu hết người dùng hiện đang lướt web với trình duyệt được đặt thành 1024 x 768 hoặc lớn hơn. Nói chung, có thể chấp nhận sử dụng 1000 pixel như một chiều rộng tối đa. Đây là lý do tại sao các công thức như lưới 960, bootstrap và các công thức khác đang trở nên phổ biến.

— Scott

Xin lỗi các bạn, tôi đã gác máy với những tựa game gần giống nhau. Đã mở lại ...

— Farray

Điều này giả định một bố cục chiều rộng cố định cho trang web? Hoặc sẽ có giá trị bao gồm một khung hình trong mô hình cho "Và nếu người dùng đang sử dụng độ phân giải 640x480 vì họ có tầm nhìn kém, trang web sẽ trông như thế này ..." và hiển thị cách bố cục phản chiếu? (OK, thay vào đó, bạn có thể sử dụng 800x600)

— Andrew Leach

7

Trong thời đại hiện đại của thiết kế web, chiều rộng trình duyệt là không liên quan. Có rất nhiều thiết bị khác nhau mà bạn CẦN để làm cho thiết kế của bạn phản ứng nhanh , trong đó chúng hoạt động cho bất kỳ màn hình kích thước nào.

Để làm điều này, bạn nên sử dụng một số loại hệ thống lưới chiều rộng chất lỏng và nhắm mục tiêu các thiết bị cụ thể bằng các truy vấn @media .

Các truy vấn phương tiện đơn giản là các bộ quy tắc CSS khác nhau cho các kích thước cổng xem khác nhau. Các truy vấn phương tiện cũng phản ứng với việc thay đổi động chiều rộng của trình duyệt của bạn. Khi bạn làm cho trình duyệt của mình nhỏ hơn, trang sẽ phản hồi bằng cách thả phao hoặc chuyển từ 12 cột xuống 1 hoặc 2. Khả năng phản hồi cũng phản ứng với người dùng trên thiết bị di động và bảng khi họ thay đổi hướng từ dọc sang ngang hoặc ngược lại.

Kích thước được nhắm mục tiêu:

Thiết bị di động 320 x 480 ở chế độ dọc
480 x 640 máy tính bảng nhỏ hoặc iPhone ở chế độ ngang
Máy tính bảng 768 x 1024 ở chế độ dọc
Máy tính bảng 1024 x 768 ở chế độ ngang
1200 + trình duyệt máy tính để bàn
2900 ++ màn hình hoặc hội nghị truyền thông lớn (Đây không phải là điều bắt buộc nhưng nếu có ai đó đang xem trang web của bạn trên màn hình rất lớn.

Để thấy điều này trong thực tế, hãy nhìn vào lưới Không khung . Nó không thực sự trôi chảy nhưng khi bạn điều chỉnh trình duyệt của mình, nó sẽ giảm từ 14 cột xuống còn 1

Twitter Bootstrap , một khung CSS, HTML và JS đơn giản được xây dựng với các thành phần giao diện người dùng phổ biến, cũng là một ví dụ điển hình về thực tiễn thiết kế đáp ứng hiện đại.

Một điều khác mà bạn cũng có thể muốn tính đến là mật độ pixel . IPhone 4 và iPad mới có màn hình retina sắc nét gấp 2 lần so với màn hình bình thường. Điều này làm cho việc thực hành phục vụ các họa tiết và hình ảnh thay vì văn bản gần như lỗi thời. Trên một hình ảnh iPad với văn bản trông thật khủng khiếp.

Vì vậy, câu trả lời cho câu hỏi là không có chiều rộng trình duyệt tiêu chuẩn mà bạn nên thiết kế. Bạn nên đưa ra quyết định thiết kế của mình dựa trên người dùng của bạn và đưa ra quyết định dễ tiếp cận nhất với số lượng người.

— Chris_O
nguồn

Liên kết lưới không khung của bạn bây giờ đã chết.

— Ruslan

6

Nhiều mẫu bố cục sử dụng chiều rộng 960px vì phù hợp với độ phân giải màn hình rộng 1024px, cung cấp một số không gian cho thanh cuộn và có thể dễ dàng chia cho 2, 3, 4, 5, 6, 8, 10, 12 và 16 - lý tưởng cho việc phân loại cách bố trí.

Xem http://960.gs để biết ví dụ.

Các khung khác như bootstrap sử dụng 940px để tính một số lề giữa các cột.

— cweiske
nguồn

Tài liệu tham khảo tuyệt vời đến trang web 960ss. @Hugh bạn nên sử dụng các mẫu psd của họ để hỗ trợ bạn.

— sk8989

6

Nếu bạn đang nhắm mục tiêu trình duyệt máy tính để bàn, thì bạn có thể dễ dàng đi tới chiều rộng khoảng 1000 pixel, nếu bạn cần.

Độ phân giải màn hình StatCount

Tại sao khoảng 1000 pixel khi màn hình tiêu biểu nhất là 1024 pixel hoặc lớn hơn? Bởi vì bạn phải cho phép các thanh cuộn và chrome cửa sổ.

Nếu bạn đặc biệt nhắm mục tiêu các trình duyệt di động, thì chiều rộng 320 pixel có thể là một lựa chọn tốt, mặc dù các trình duyệt di động thường chia tỷ lệ nội dung để phù hợp với chiều rộng của chế độ xem, do đó, chiều rộng 950 hoặc 960 pixel có thể rất tuyệt. Xin lưu ý rằng 320 pixel CSS / HTML bằng 640 pixel thiết bị trên các thiết bị DPI cao như iPhone.

Độ phân giải màn hình di động StatCount

Thị trường mục tiêu của bạn cũng có thể thay đổi mọi thứ. Nếu bạn đang nhắm mục tiêu đối tượng am hiểu công nghệ, bạn có thể mong đợi mọi thứ sẽ bị sai lệch với các thiết bị hiện đại hơn. Nếu bạn đang xây dựng một trang web chính phủ, bạn sẽ cần phục vụ cho phạm vi rộng hơn.

Ngoài ra, bạn đang xây dựng trang web như thế nào? Nếu bạn đang sử dụng một hệ thống lưới, như Blueprint CSS hoặc Hệ thống lưới 960, thì điều đó cũng có thể chỉ ra kích thước (hầu hết các hệ thống lưới cũng có thể được thay đổi thành các kích thước khác).

Bạn cũng có thể muốn xem xét thiết kế đáp ứng nếu bạn đang cố gắng làm việc tốt trên thiết bị di động cũng như máy tính để bàn.

— Marc Edwards
nguồn

4

Tôi thứ hai hệ thống lưới 960. Rất linh hoạt và sẽ làm việc cho phần lớn người xem của bạn.

— Lauren-Clear-Monica-Ipsum

"... bạn có thể dễ dàng đi tới độ rộng 1024 pixel, nếu bạn cần .." điều này dường như thiếu một cảnh báo quan trọng trong đó một số chiều rộng màn hình sẽ bị chiếm bởi viền cửa sổ trình duyệt.

— e100

+1 cho thiết kế đáp ứng. Xem xét nhiều người sẽ xem web trên điện thoại di động hơn máy tính vào năm 2014, tôi nghĩ rằng responsive là một cách tốt để ít nhất nhìn vào - ngay cả khi không sử dụng nó cho dự án này.

— DBUK

Đây là một câu trả lời rất lỗi thời. Màn hình thậm chí còn đa dạng hơn, đặc biệt là ở phần trên, nơi TV và màn hình 4k được sử dụng

— Zach Saucier

-3

trong thời gian này kích thước máy tính để bàn bị vu khống trên toàn thế giới là 1024x768, thật tốt để tạo một trang web có kích thước 1003px ...

— Guy thiết kế đồ họa
nguồn

3

Tại sao 1003px ....?

— e100

bởi vì kích thước bị mắc kẹt là thế giới rộng 1024 chiều rộng và 768 chiều cao với 1024px chiều rộng 11px cần cho thanh cuộn và 5px cho lề phải và trái

— Guy Design Design Guy

2

Tôi ước tôi có thể bỏ phiếu bình luận ... :( Nhưng chỉ FYI @Rizwanabbasi: thanh cuộn có độ rộng khác nhau trên các hệ thống khác nhau (thiết bị cảm ứng thậm chí không có chúng) và thậm chí trên các hệ thống này có thể thay đổi thanh cuộn (Google đang làm ví dụ như trong các ứng dụng của nó từ GMail trên).

— Robert Koritnik

Phải là một lỗi đánh máy

— shash7