Đối với các trang web, tốt hơn là có bố cục chiều rộng thay đổi hoặc bố cục chiều rộng cố định?
Do độ phân giải màn hình khác nhau, trải nghiệm người dùng duyệt trang web có thể khác nhau. Là tốt hơn để bố trí trang web với chiều rộng cố định? (và nếu vậy thì nên có độ rộng tĩnh khác nhau cho độ phân giải tiêu chuẩn?) Hay một trang web luôn phải được đặt theo chiều rộng thay đổi?
Tôi không nghĩ rằng có một câu trả lời dễ dàng ở đây, bởi vì, cuối cùng, nó phụ thuộc vào việc bạn đang xây dựng và bạn đang xây dựng nó cho ai. Cả hai trang web có chiều rộng cố định và các trang web có chiều rộng thay đổi đều có những ưu điểm và nhược điểm.
Một điều tôi nên chỉ ra ở đây, tôi sẽ không nói về trải nghiệm di động cho các trang web cố định/chất lỏng, bởi vì các trang web di động là tốt nhất khi thiết kế dành riêng cho thiết bị di động, không phải là một cổng của trang web để bàn sang nền tảng di động.
Chiều rộng cố định - Ưu điểm
Trang web có chiều rộng cố định là một trải nghiệm phù hợp hơn và phát triển nhanh hơn so với trang web có chiều rộng thay đổi. Nó cũng cho phép người thiết kế có quyền kiểm soát nhiều hơn đối với bản trình bày vì bạn có thể đặt các giá trị cứng cho chiều rộng, độ dài dòng, kích thước kiểu chữ, v.v ... Cuối cùng, nó cũng dễ duy trì hơn so với trang web có chiều rộng thay đổi.
Chiều rộng cố định - Nhược điểm
Mặt khác, các thiết kế chiều rộng cố định bắt đầu thất bại khi các trường hợp Edge xuất hiện. Ngay bây giờ, mọi người thường thiết kế trang web cho màn hình độ phân giải 1024px, nhưng vẫn có những người có máy có độ phân giải thấp hơn. Ngay bây giờ, tôi đang làm việc trên một ứng dụng được thiết kế bằng lưới 960px; Tôi đã xem xét các phân tích ngày hôm nay và nhận thấy 3% người dùng sử dụng màn hình 800 x 600 và khoảng 5% tổng số ở độ phân giải dưới 1024 x 768. Những người dùng đó có thể có trải nghiệm khá tệ vì trang web có độ rộng cố định .
Chiều rộng chất lỏng - Ưu điểm
Chiều rộng chất lỏng cho phép thiết kế mở rộng dựa trên cài đặt của người dùng; thiết kế thích nghi với họ, đó là một điều tốt. Điều này cho phép trang web duy trì không gian âm tỷ lệ, do đó trang web không bao giờ cảm thấy quá lộn xộn hoặc quá mở (trừ khi nó được thiết kế đặc biệt theo cách đó).
Chiều rộng chất lỏng - Nhược điểm
Thật không may, các thiết kế chiều rộng chất lỏng cũng không thấm đối với các trường hợp Edge. Khi chiều rộng trở nên quá gầy hoặc quá rộng, điều tồi tệ có thể xảy ra, đặc biệt là với văn bản. Độ dài dòng quá ngắn hoặc quá dài về cơ bản là không thể đọc được. Ngoài ra, nhiều dạng phương tiện, chẳng hạn như hình ảnh hoặc đối tượng Flash, rất khó mở rộng trong các thiết kế chiều rộng chất lỏng; IE yêu cầu javascript thay đổi kích thước hình ảnh, nếu không chúng sẽ bị pixel hóa.
Thiết kế web đáp ứng
Một vài người đã cho thấy các ví dụ, nhưng chưa được gọi kỹ thuật này theo tên. Ethan Marcotte gần đây đã đặt ra thuật ngữ để mô tả bố cục chất lỏng có thể thay đổi hoàn toàn dựa trên độ phân giải màn hình của người dùng (xem chi tiết tại đây ). Đây là sự kết hợp giữa chiều rộng cố định và chiều rộng chất lỏng - nó cho phép bạn đặt mức tối thiểu và tối đa để phương tiện hoặc độ dài đường truyền không vượt khỏi tầm kiểm soát và nó cũng cho phép thiết kế điều chỉnh theo cài đặt của người dùng. Tất nhiên, kỹ thuật này cũng có những ưu điểm và nhược điểm riêng. Mặc dù được cung cấp một bố cục được chọn riêng cho cài đặt của người dùng, loại trang web này rất khó phát triển. Không phải tất cả các trình duyệt hỗ trợ các truy vấn phương tiện cần thiết để làm điều này. Thêm vào đó, về cơ bản, bạn đang phát triển nhiều bố cục, kéo dài thời gian cần thiết để xây dựng và duy trì.
Tôi tin rằng không thể chỉ trải chăn "Luôn sử dụng cái này" hoặc "Không bao giờ sử dụng cái này"; Tôi sẽ nói rằng bạn nên luôn luôn đánh giá nhu cầu của bạn trước khi đưa ra quyết định. Tôi cảm thấy trong phần lớn các trường hợp bố cục chiều rộng cố định sẽ phục vụ mục đích của bạn, nhưng bố cục linh hoạt hoặc đáp ứng có thể cung cấp trải nghiệm người dùng tốt hơn nhiều, chỉ với chi phí cực kỳ khó khăn.
Vấn đề với việc sử dụng 100% chiều rộng biến là nó thực sự không hiển thị tốt cho người dùng có màn hình nhỏ nhất và lớn nhất. Tôi thường sẽ thiết kế phần nội dung chính của mình cho định mức bằng cách đặt chiều rộng tối thiểu/tối đa và sau đó tôi sẽ căn giữa nội dung quan trọng (cố định). Sau đó, bạn có thể có các yếu tố thiết kế chiều rộng thay đổi (vì chúng không quan trọng) kéo dài/thu nhỏ để lấp đầy màn hình.
Bằng cách này, thông tin quan trọng luôn luôn (hy vọng) hiển thị chính xác trong khi nhìn tốt ở nhiều độ phân giải.
Tôi không phải là một nhà thiết kế web, nhưng tôi nghĩ lý tưởng nhất là bạn nên bố trí linh hoạt. Đó là, một bố cục sẽ tự động (và động) thay đổi theo chiều rộng hiện tại. Bằng cách đó, các thiết bị hẹp như điện thoại được hỗ trợ độc đáo, cũng như tất cả các chiều rộng màn hình khác nhau.
Bài đăng trên blog Cuối cùng, một Hicksdesign chất lỏng vừa giải thích vừa làm mất kỹ thuật. Nó có 3 colum, 2 colum và một bố trí colum, được chọn theo chiều rộng cửa sổ trình duyệt.
Văn bản khó đọc một khi chiều dài dòng quá dài. Vì vậy, đối với bất kỳ trang web có chiều rộng thay đổi, ít nhất cần phải có chiều rộng tối đa cho bất kỳ khu vực văn bản nào để duy trì khả năng đọc.
Thật khó khăn hơn nhiều để làm cho một trang web có chiều rộng thay đổi trông tốt.
Phụ thuộc vào những gì tôi đang làm việc, nhưng tôi vẫn có xu hướng nghiêng về các trang web có chiều rộng cố định. Lý do là vì nó cho phép bạn kiểm soát ui tốt hơn và giữ cho nó nhất quán trên các kích thước màn hình. Rất nhiều trang web chiều rộng chất lỏng trông khủng khiếp trên màn hình lớn hơn/nhỏ hơn (tùy thuộc vào những gì chúng được thiết kế cho).
Quy tắc chung cho tôi:
- Nếu khả năng sử dụng của trang chủ yếu phụ thuộc vào giao diện và/hoặc nội dung chủ yếu là văn bản: chiều rộng cố định
- Nếu trang web có giao diện tối thiểu, nhưng nội dung chủ yếu là trực quan (ví dụ: trang web ảnh hoặc ứng dụng bản đồ), thì tôi sẽ sử dụng.
Đây là một sự cố lớn về một số ưu/nhược điểm: http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one- cho bạn /
Bất cứ khi nào tôi có thể, tôi cố gắng không đặt chiều cao và chiều rộng cụ thể của một đối tượng trong px mà trong %
Tôi muốn đề xuất kế toán cho chiều rộng thay đổi hoặc cung cấp bố cục thay thế cho màn hình rộng hơn.
Nếu bạn đi theo chiều rộng cố định - hãy đảm bảo rằng nó không phải là một chiều nhỏ! Tôi đã thấy một số trang web có chiều rộng 500 hoặc 600px khiến việc đọc trang web như quét các trang Vàng.
Tôi từ lâu đã là người hâm mộ cách tiếp cận của The Man In Blue trong việc cung cấp bố cục thay thế dựa trên chiều rộng có sẵn: xem bản demo trực tiếp tại đây
Bạn có thể muốn thiết kế bố cục trang web của mình theo hướng phong cảnh. Ngày càng có nhiều màn hình màn hình rộng được sử dụng, với độ phân giải lớn 1920x1080 (cái này là phổ biến nhất). Bạn đã bao giờ thử tối đa hóa một cửa sổ trình duyệt hiển thị bố cục cố định dọc trên đó chưa? Nó giống như một nửa đến hai phần ba màn hình chứa đầy màu sắc/hình nền của bạn.
Thật tuyệt khi Windows 7 cho phép bạn nhanh chóng thay đổi kích thước cửa sổ thành một nửa màn hình và dán nó sang một bên: WindowsKey + Left/Right
Chiều rộng thay đổi có lẽ là con đường để đi, bởi vì với chiều rộng cố định, một số người có thể nghĩ rằng trang web của bạn quá nhỏ so với màn hình của họ và một số người có thể nghĩ rằng nó quá lớn so với màn hình của họ.
Nó phụ thuộc vào nội dung của trang web. Nếu nó có nhiều văn bản, chiều rộng thay đổi có ý nghĩa hơn vì văn bản có thể trải ra và người dùng có thể đọc nó hiệu quả hơn. Nếu nó giống như một trang web tiếp thị trong đó ngoại hình quan trọng hơn, thì hãy đi với chiều rộng cố định vì khó hơn nhiều để làm cho một trang web có chiều rộng cố định trông tuyệt vời.
Bất kỳ giả định nào bạn đưa ra khi thiết kế bố cục kích thước cố định đều sai đối với một số người dùng của bạn. Cách duy nhất để cung cấp trải nghiệm thỏa mãn cho mọi người là sử dụng thiết kế linh hoạt, đáp ứng.
Hai vấn đề (cố gắng tránh trùng lặp):
Bạn không thể cho rằng trình duyệt toàn màn hình; phân tích báo cáo độ phân giải màn hình chỉ nói một phần của câu chuyện.
Bạn không thể cho rằng người dùng đang sử dụng cùng kích thước phông chữ của bạn. Các dòng quá rộng để đọc ở kích thước phông chữ của bạn có thể không quá rộng để đọc cho những người phải tăng kích thước phông chữ một vài bậc; ngược lại, cột mà bạn đặt chiều rộng cố định dựa trên cài đặt phông chữ của bạn có thể có nghĩa là người dùng nhìn thấy năm từ trên mỗi dòng hoặc một cái gì đó.
Để có thể sử dụng được cho tất cả người dùng, thiết kế web của bạn cần sử dụng tất cả và chỉ không gian mà trình duyệt cung cấp cho bạn. Tin tưởng người dùng đã kích thước trình duyệt của mình để tối ưu hóa trải nghiệm của chính mình; sau đó bạn nên làm việc trong giới hạn đó. Cách tiếp cận này hoạt động trên màn hình 30 "và 7" (và thậm chí cả điện thoại, nếu bạn không tạo phiên bản dành riêng cho thiết bị di động).