Tôi đã nhận thấy ngày càng nhiều trang web đi đến bố cục có chiều rộng cố định, trong đó việc thay đổi kích thước cửa sổ trình duyệt chỉ khiến các thanh cuộn xuất hiện, trái ngược với bố cục linh hoạt, trong đó việc thay đổi kích thước trình duyệt khiến các thành phần của trang "cùng nhau" .
Các trang web StackExchange như thế này là một ví dụ về bố cục cố định. GMail và iGoogle là những ví dụ về cách bố trí linh hoạt. Những lý do để chọn cái này hơn cái kia là gì?
Câu trả lời:
Thiết kế phức tạp hơn có thể rất khó nhận ra với bố cục chiều rộng thay đổi. Vì vậy, tôi tưởng tượng rằng đóng một vai trò.
Cũng có một thực tế là không thoải mái khi đọc văn bản rất rộng. Kích thước cột trên các trang web StackExchange khá dễ quản lý và dễ đọc. Với bố cục chiều rộng thay đổi, bạn không thể mở rộng thân văn bản chính mà không trở thành không thể đọc được. Ngay cả Google cũng giới hạn độ rộng của kết quả tìm kiếm của họ.
Tất nhiên, nếu bạn có một trang web có không gian ở mức cao (như Google Docs và Google Maps), bạn thực sự muốn sử dụng sơ đồ chiều rộng thay đổi để sử dụng tất cả không gian có sẵn.
Đã sửa lỗi với nhà phát triển dễ dàng hơn nhiều đối với các trang web phức tạp. Ngoài ra, hầu hết các trang web có chiều rộng cố định sẽ có chiều rộng khoảng 1000 pixel. Lý do là chỉ có 1% trình duyệt sử dụng 800x640 và 0% sử dụng 640x480. Kiểm tra các số liệu thống kê mới nhất ở đây . Điều này không bao gồm điện thoại di động mặc dù. Đó là một trò chơi bóng hoàn toàn khác nhau.
Giá trị của bố cục chiều rộng thay đổi là cho phép mọi người sử dụng trang web dễ dàng trong một cửa sổ không được tối đa hóa.
Bạn phải xem xét đối tượng của mình và quyết định dựa trên trải nghiệm mà bạn nghĩ họ muốn và nếu độ rộng biến quan trọng hơn các tính năng khác mà bạn sẽ không thể phát triển nếu bạn phải thực hiện độ rộng thay đổi.
Ngoài ra còn có một sự thỏa hiệp giữa hai nơi bạn đặt chiều rộng tối thiểu và chiều rộng tối đa (sử dụng CSS) và sau đó sử dụng độ rộng phần trăm để làm cho phần còn lại chảy vào giữa hai thái cực. Chẳng hạn, bạn có thể muốn một cột menu bên trái không bị hẹp hơn 200px nhưng nội dung chính sẽ chảy. Kỹ thuật này cho phép trang web của bạn mở rộng theo độ phân giải của khách truy cập, mà không nhìn ngớ ngẩn ở độ phân giải cực cao hoặc độ phân giải cực thấp. HTML, sau tất cả, được thiết kế để lưu chuyển - đó là ngôn ngữ đánh dấu và không giống như in.
Cách tiếp cận này hoạt động tốt cho các thiết kế tương đối đơn giản, chẳng hạn như blog hoặc những người trình bày nhiều thông tin văn bản. Thật vậy, tôi sử dụng nó trên trang web cá nhân của riêng tôi . Sau khi tất cả nhiều người hiện có màn hình rộng hoặc độ phân giải cao - màn hình làm việc của tôi rộng 1680px - vậy tại sao họ phải mất một mức độ lớn của bất động sản và phải cuộn theo chiều ngang đơn giản vì một nhà thiết kế đã quyết định chiều rộng cố định phù hợp với họ màn? Cuối cùng, thiết kế tốt là mang đến cho người dùng trải nghiệm tốt nhất có thể - không chỉ là về những gì trông "đẹp" trên màn hình của nhà thiết kế.
Bạn có thể không phải lựa chọn đó. A List Apart có một bài viết xuất sắc về Thiết kế đáp ứng . Ý tưởng chính là bạn có thể sử dụng các truy vấn phương tiện để nắm bắt các thay đổi trong cửa sổ trình duyệt hoặc kích thước khung nhìn và gán lại CSS khi cần thiết. Có rất nhiều thứ để đọc ở đó, vì vậy hãy xem bài viết cho tất cả các chi tiết ngon ngọt. Nhưng đối với phần dài và ngắn của nó (hay nên là "rộng và hẹp" của nó?) Hãy xem các trang trước và sau ví dụ của chúng. Các trang trước quy mô độc đáo lên đến một điểm, nhưng nếu bạn làm cho nó đủ hẹp, nó sẽ có một chút lộn xộn. các sau quy mô trang cũng như thay đổi bố cục khi bạn làm cho nó quá hẹp để thu nhỏ hoạt động độc đáo.
Theo Nguyên tắc thiết kế 113 của Jakob Nielsen về khả năng sử dụng trang chủ :
67 Sử dụng bố cục lỏng để kích thước trang chủ điều chỉnh theo các độ phân giải màn hình khác nhau.
Đây cũng là một trong mười Nguyên tắc thiết kế trang chủ bị vi phạm nhiều nhất :
Chiến đấu với bố cục đóng băng dường như là một trận chiến thua, nhưng nó đáng để lặp lại: những người dùng khác nhau có kích thước màn hình khác nhau. Những người có màn hình lớn muốn có thể thay đổi kích thước trình duyệt của họ để xem nhiều cửa sổ cùng một lúc. Bạn không thể cho rằng chiều rộng cửa sổ của mọi người là 800 pixel: quá nhiều đối với một số người dùng và quá ít đối với những người khác.
Ưu điểm của bố cục động là nó hoạt động trên tất cả các kích thước màn hình, bao gồm cả thiết bị di động. Đó là công việc khó khăn hơn để làm cho mọi thứ trông tốt ở tất cả các kích thước đó. Câu hỏi cần đặt ra là - khách truy cập của bạn có đang sử dụng thiết bị di động không?