Xác định chiều rộng của trang web của bạn

Điều đầu tiên hầu hết các nhà thiết kế xem xét khi xây dựng trang web của họ là những gì độ phân giải để thiết kế cho. Điều này thực sự là số tiền để quyết định xem thiết kế của bạn nên rộng như thế nào. Không còn thứ gì như chiều rộng trang web chuẩn.

Tại sao nên xem xét giải pháp

Năm 1995, màn hình độ phân giải 640x480 tiêu chuẩn là màn hình lớn nhất và tốt nhất hiện có. Điều này có nghĩa là các nhà thiết kế web tập trung vào việc làm cho các trang trông đẹp mắt trong các trình duyệt web được tối đa hóa trên màn hình 12 inch đến 14 inch ở độ phân giải đó.

Những ngày này, độ phân giải 640x480 chiếm ít hơn 1 phần trăm lưu lượng truy cập trang web nhất. Mọi người sử dụng máy tính có độ phân giải cao hơn nhiều bao gồm 1366x768, 1600x900 và 5120x2880. Trong nhiều trường hợp, thiết kế cho màn hình độ phân giải 1366x768 hoạt động.

Chúng tôi đang ở một thời điểm trong lịch sử thiết kế web, nơi chúng tôi không phải lo lắng nhiều về độ phân giải. Hầu hết mọi người đều có màn hình lớn, màn hình rộng và họ không tối đa hóa cửa sổ trình duyệt của họ. Vì vậy, nếu bạn quyết định thiết kế một trang có chiều rộng không quá 1366 pixel, trang của bạn có thể sẽ ổn trong hầu hết các cửa sổ trình duyệt ngay cả trên màn hình lớn với độ phân giải cao hơn.

Chiều rộng trình duyệt

Trước khi bạn đi suy nghĩ "okay, tôi sẽ làm cho các trang của tôi rộng 1366 pixel", có nhiều câu chuyện này. Một vấn đề thường bị bỏ qua khi quyết định chiều rộng của trang web là mức độ lớn mà khách hàng của bạn giữ trình duyệt của họ. Cụ thể, chúng có tối đa hóa trình duyệt của chúng ở kích thước toàn màn hình hay chúng giữ chúng nhỏ hơn toàn màn hình không?

Trong một cuộc khảo sát không chính thức của các đồng nghiệp, tất cả đều sử dụng máy tính xách tay có độ phân giải 1024x768 của công ty, hai người giữ tất cả các ứng dụng của họ được tối đa hóa. Phần còn lại có cửa sổ kích thước khác nhau mở vì nhiều lý do. Điều này minh họa rằng nếu bạn đang thiết kế mạng nội bộ của công ty này ở độ rộng 1024 pixel, 85 phần trăm người dùng sẽ phải cuộn theo chiều ngang để xem toàn bộ trang.

Sau khi bạn tài khoản cho khách hàng tối đa hóa hoặc không, hãy nghĩ về biên giới của trình duyệt. Mỗi trình duyệt web có một thanh cuộn và các đường viền ở hai bên thu nhỏ khoảng trống có sẵn từ 800 đến khoảng 740 pixel hoặc ít hơn ở độ phân giải 800x600 và khoảng 980 pixel trên cửa sổ tối đa ở độ phân giải 1024x768. Điều này được gọi là trình duyệt “chrome” và nó có thể lấy đi từ không gian có thể sử dụng cho thiết kế trang của bạn.

Trang cố định hoặc chiều rộng chất lỏng

Chiều rộng số thực tế không phải là điều duy nhất bạn cần phải suy nghĩ về khi thiết kế chiều rộng của trang web của bạn. Bạn cũng cần quyết định xem bạn có chiều rộng cố định hay chiều rộng lỏng hay không . Nói cách khác, bạn sẽ đặt chiều rộng thành một số cụ thể (cố định) hoặc một tỷ lệ phần trăm (chất lỏng)?

Chiều rộng cố định

Các trang chiều rộng cố định chính xác như chúng âm thanh. Chiều rộng được cố định ở một số cụ thể và không thay đổi bất kể trình duyệt lớn hay nhỏ. Điều này có thể tốt nếu bạn cần thiết kế của mình trông giống hệt nhau bất kể trình duyệt của người đọc rộng hay hẹp, nhưng phương pháp này không tính đến người đọc của bạn. Những người có trình duyệt thu hẹp hơn thiết kế của bạn sẽ phải cuộn theo chiều ngang và những người có trình duyệt rộng sẽ có lượng không gian trống lớn trên màn hình.

Để tạo các trang có chiều rộng cố định, chỉ cần sử dụng số pixel cụ thể cho chiều rộng của các đơn vị trang của bạn.

Chiều rộng lỏng

Các trang có chiều rộng chất lỏng (đôi khi được gọi là các trang có chiều rộng linh hoạt) khác nhau về chiều rộng tùy thuộc vào độ rộng của cửa sổ trình duyệt. Điều này cho phép bạn thiết kế các trang tập trung nhiều hơn vào khách hàng của mình. Vấn đề với các trang có chiều rộng chất lỏng là chúng có thể khó đọc. Nếu độ dài quét của một dòng văn bản dài hơn 10 đến 12 từ hoặc ngắn hơn từ 4 đến 5 từ, thì có thể khó đọc. Điều này có nghĩa là người đọc có cửa sổ trình duyệt lớn hoặc nhỏ gặp sự cố.

Để tạo các trang có chiều rộng linh hoạt, chỉ cần sử dụng tỷ lệ phần trăm hoặc ems cho chiều rộng của các đơn vị trang của bạn. Bạn cũng nên tự làm quen với thuộc tính chiều rộng CSS tối đa. Thuộc tính này cho phép bạn đặt chiều rộng theo tỷ lệ phần trăm, nhưng sau đó giới hạn nó để nó không quá lớn đến mức mọi người không thể đọc được.

Và người chiến thắng là: Truy vấn phương tiện CSS

Giải pháp tốt nhất những ngày này là sử dụng truy vấn phương tiện CSS và thiết kế đáp ứng để tạo trang điều chỉnh theo chiều rộng của trình duyệt đang xem. Thiết kế web đáp ứng sử dụng cùng một nội dung để tạo trang web hoạt động cho dù bạn xem nó ở chiều rộng 5120 pixel hoặc rộng 320 pixel. Các trang có kích thước khác nhau trông khác nhau, nhưng chúng chứa cùng một nội dung. Với truy vấn phương tiện trong CSS3, mỗi thiết bị nhận trả lời truy vấn với kích thước của nó và bảng định kiểu điều chỉnh theo kích thước cụ thể đó.