Thiết kế đáp ứng (còn được gọi là thiết kế 'thích ứng'), trong đó cùng một trang web trình bày phiên bản tốt nhất của hai hoặc nhiều bố cục thủ công tùy thuộc vào độ rộng của trình duyệt, là tùy chọn mạnh nhất cho hầu hết các trang web. Để biết lý do tại sao, nó giúp xem xét tất cả các tùy chọn có sẵn cho các nhà thiết kế web:
Bố trí cố định
Độ rộng trang cố định, trong đó chiều rộng nội dung là như nhau bất kể chiều rộng của trình duyệt, cung cấp giao diện đồng nhất trên các thiết bị và có thể yêu cầu ít mã hóa, suy nghĩ và bảo trì hơn so với thiết kế linh hoạt hơn.
Một số người cảm thấy rằng bố cục có chiều rộng cố định là di tích của thời đại đã qua, nơi mọi người khao khát sự hoàn hảo của pixel và vẻ ngoài đồng nhất trên tất cả các trình duyệt. Andy Clarke, tác giả của Hardboiled Web Design, cảm thấy rằng cách suy nghĩ này đã chết:
"Trước đây, thông thường là chiến đấu hết mình để tạo ra một trang web trông giống và hoạt động giống nhau trên tất cả các trình duyệt - bất kể khả năng của chúng là gì. Làm điều này có nghĩa là thỏa hiệp và tránh sử dụng các công nghệ không được hỗ trợ bởi tất cả các trình duyệt.
Đây có phải là hardboiled?
Đừng tự đùa, má ngọt ngào. Đây không phải là cách để phát triển thủ công của chúng tôi hoặc xây dựng một trang web tốt hơn. Kiểu suy nghĩ lỗi thời này giữ chúng ta lại. Nó buộc chúng ta phải bào chữa cho việc không làm những gì chúng ta biết là điều đúng đắn. Điều tồi tệ nhất mà chúng tôi, với tư cách là người quản trị hiện tại của web, có thể làm là cho phép mọi thứ giới hạn những gì có thể. "
- Andy Clarke, Thiết kế web cứng, p6 [Phiên bản PDF có sẵn tại đây ]
Trong khi một số người coi bố cục cố định là chiều cao của sự lười biếng, các thiết kế có chiều rộng cố định vẫn được các nhóm thiết kế rất thông minh lựa chọn so với bố cục lỏng hoặc thích ứng. Apple, ví dụ, hiện đang phục vụ bố cục tương tự cho iMac giống như với iPad và iPhone. Tại sao công ty chịu trách nhiệm đưa trình duyệt web di động đến với công chúng mà không tối ưu hóa trang web của mình cho thiết bị di động?
Bởi vì nó không nghĩ rằng nó cần phải.
Thay vì điều chỉnh trang web của mình cho màn hình nhỏ, Apple đã xây dựng phần cứng và phần mềm để thoải mái xử lý các trang web rộng trên các màn hình đó. Apple nghĩ rằng trải nghiệm 'tối ưu hóa cho thiết bị di động' được phân phối tốt nhất trong ứng dụng gốc chứ không phải trong cửa sổ trình duyệt. Đó là lý do tại sao nó cung cấp ứng dụng Apple Store thay vì phục vụ cửa hàng Web được tối ưu hóa cho thiết bị di động. Và đó là lý do tại sao nó khuyến khích các nhà xuất bản cung cấp các ứng dụng tạp chí trên các trang web phù hợp. Triết lý thiết kế web hiện tại của Apple rất rõ ràng: một bố cục để cai trị tất cả đều hoạt động tốt. Đối với mọi thứ khác, có một ứng dụng cho điều đó.
Vì lý do này thôi, một số người sẽ cho rằng bố cục cố định vẫn có liên quan như mọi khi; họ nói rằng bố cục lỏng và thích ứng chỉ dừng lại ở những khoảng trống trong khi chúng tôi chờ phần mềm trình duyệt di động cải thiện, HTML và JavaScript sẽ phát triển và cám dỗ các nhà phát triển tránh xa các cửa hàng ứng dụng im lặng.
Tuy nhiên, theo tôi, pinch-tap-kéo-cuộn theo cách của bạn trên Web trong bất kỳ khoảng thời gian nào trên thiết bị di động không thú vị chút nào, ngay cả trên iPhone. Nếu bạn tin rằng trải nghiệm Web tốt nhất là trải nghiệm đọc, xuất bản và tương tác với các trang web thay vì việc vặt, bất kể bạn đang sử dụng thiết bị nào, bạn phải thừa nhận tại một số điểm phục vụ nội dung phù hợp với từng trang web khách truy cập là đáng xem xét.
Bố trí chất lỏng
Bố cục lỏng, nơi chiều rộng của trang chảy vào màn hình (thường lên đến chiều rộng tối đa được áp đặt), hứa hẹn trải nghiệm tốt hơn trên các nền tảng khác nhau bằng cách cung cấp nội dung ở độ rộng phù hợp hơn với chế độ xem.
Trong thực tế, bố trí chất lỏng gây ra nhiều vấn đề hơn những gì họ giải quyết, như Cameron Moll đã lưu ý trong câu châm ngôn này:
"... thiết kế chất lỏng giải quyết mọi vấn đề bố trí giống như máy tính làm cho văn phòng không có giấy tờ, tức là không."
- Cameron Moll, "Tất cả các trang web có nên trôi chảy không?", Tháng 9 năm 2006
Khi bạn áp dụng bố cục chất lỏng, bạn từ bỏ quyền kiểm soát thiết kế của mình và chấp nhận rằng văn bản sẽ viết lại, hình ảnh sẽ phản xạ lại, độ dài dòng sẽ thay đổi không thể đoán trước, văn bản, hình ảnh và các yếu tố điều hướng có thể bị nghiền nát ở độ rộng nhỏ và các cột sẽ nhảy và nổi xung quanh chỉ để chọc tức bạn.
Một cách bố trí chất lỏng, một số có thể nói, cũng là một lựa chọn lười biếng. Đó là cách tiếp cận shotgun để thiết kế web thích ứng. Thay vì cung cấp trải nghiệm phù hợp với ba hoặc bốn thiết kế có chiều rộng cố định được xem xét cẩn thận, bạn sẽ mang đến trải nghiệm không thể đoán trước với hy vọng nó có thể hoạt động trên màn hình lớn và nhỏ và hy vọng cắm tất cả các khoảng trống mà bạn chưa xem xét đầy đủ ở giữa.
Điều này không làm cho bố trí chất lỏng vô dụng. Có nhiều cách để làm cho chúng hoạt động. Các 456 Berea St blog, ví dụ, thông qua một bố cục chất lỏng lên đến một độ rộng nhất định, sau đó nó sử dụng một cố định cho bất cứ điều gì lớn hơn. Và ở độ rộng thực sự nhỏ, thanh bên bỏ đi để sử dụng một cột duy nhất giúp đọc dễ dàng hơn trên màn hình nhỏ. Nhưng đây không còn là một bố cục chất lỏng. Nó là một cái gì đó tốt hơn. Đây là một thiết kế đáp ứng .
Bố trí đáp ứng
Bố cục 'đáp ứng' hoặc 'thích ứng' - trong đó cùng một trang web trình bày một phiên bản của hai hoặc nhiều bố cục được chế tạo tùy thuộc vào độ rộng trình duyệt của khách truy cập - là một phần quan trọng của cải tiến tiến bộ, nhằm mục đích làm cho trang web trông đẹp nhất nó có thể cho mọi du khách.
Chọn áp dụng bố cục thích ứng là 'dịch vụ khách hàng tuyệt vời', theo lời của Aaron Gustafson, tác giả của Thiết kế web thích ứng. Nếu chúng tôi thiết kế trang web của chúng tôi tốt, ông nói, khách truy cập nên được trình bày với trải nghiệm được chế tạo hoàn hảo mà không nhận ra rằng chúng tôi đang làm phiền họ:
"Là nhà thiết kế và phát triển web, chúng tôi nên cố gắng làm tốt công việc của mình vì người phục vụ chu đáo, không phô trương, nhưng đó không phải là một nhiệm vụ đơn giản. Nạp tiền hoặc ít, chúng tôi không có cách nào biết được nhu cầu của một người dùng cụ thể khi họ đến trang web của chúng tôi. Thay vào đó, chúng tôi phải vươn lên để đáp ứng những nhu cầu đó. Nếu chúng tôi thực sự tốt, chúng tôi có thể làm như vậy mà không cần khách hàng nhận ra chúng tôi Rất may, với cách tiếp cận tập trung vào người dùng và tập trung vào nội dung nâng cao (trái ngược với cách tiếp cận trình duyệt mới nhất của sự xuống cấp duyên dáng), điều này có thể dễ dàng đạt được. "
- Aaron Gustafson, Thiết kế web thích ứng, p12 [Phiên bản PDF có sẵn tại đây ]
Việc nhận ra rằng công việc của chúng tôi là thiết kế web là thích ứng với khách truy cập và không bắt họ phải thích nghi với chúng tôi - như Apple có thể tin tưởng - là một sự phát triển gần đây trong thiết kế Web. Theo ý kiến của tôi, đó là sự phục hưng của các loại: chúng ta đã hoàn thành việc chọn ra những thói quen tốt từ nhiều năm thiết kế in ấn. Bây giờ chúng ta phải loại bỏ xiềng xích áp đặt bằng cách làm việc trong một không gian được xác định trước trên trang in.
Khi chúng tôi coi trình duyệt là một khung vẽ cố định, giờ đây chúng tôi chấp nhận rằng không có khung hình xác định nào tồn tại và điều này trở nên rõ ràng hơn từ sự pha trộn lớn của kích thước màn hình mà bạn không nghi ngờ gì khi bắt đầu nhìn thấy trong số liệu thống kê về khách truy cập của bạn . Thay vì coi mỗi thiết bị mới là một 'kích thước trang' duy nhất để nhắm mục tiêu (và sau đó phải tập hợp quân đội khi một thiết bị mới xuất hiện), chúng ta có thể tuân theo các quy ước chứng minh trong tương lai.
Chúng ta có thể suy nghĩ về các nhóm - 'lớn', 'trung bình' và 'nhỏ' - thay vì nghĩ về điện thoại và máy tính bảng cụ thể, sau đó thiết kế các trang web để trông đẹp nhất trong các băng tần đó. Bất kể thiết bị mới nào xuất hiện, chúng sẽ phù hợp với băng tần này hoặc băng tần khác và - ngay cả khi chúng ở ngay biên giới giữa hai băng tần - chúng tôi vẫn có quyền kiểm soát trải nghiệm nhiều hơn so với việc chúng tôi sử dụng cố định hoặc chất lỏng bố trí.
Trong Responsive Web Design, Ethan Marcotte đưa ra lời kêu gọi vũ khí này:
"Chúng ta cần phải cho đi.
Thay vì tạo ra các thiết kế bị ngắt kết nối, mỗi thiết kế phù hợp với một thiết bị hoặc trình duyệt cụ thể, thay vào đó chúng ta nên coi chúng là các khía cạnh của cùng một trải nghiệm. Nói cách khác, chúng ta có thể tạo ra các trang web không chỉ linh hoạt hơn mà còn có thể thích ứng với phương tiện truyền thông kết xuất chúng.
Nói tóm lại, chúng ta cần thực hành
thiết kế web đáp ứng. Chúng tôi có thể nắm lấy tính linh hoạt vốn có của web, mà không từ bỏ quyền kiểm soát mà chúng tôi yêu cầu với tư cách là nhà thiết kế. Tất cả bằng cách nhúng các công nghệ dựa trên tiêu chuẩn vào công việc của chúng tôi và bằng cách thay đổi một chút trong triết lý của chúng tôi đối với thiết kế trực tuyến. "
- Ethan Marcotte, Thiết kế web đáp ứng, p8 [Phiên bản PDF có sẵn tại đây ]
Nhưng những ban nhạc nào bạn sử dụng? Ethan Marcotte đề xuất ba điều sau đây trong Thiết kế web đáp ứng. (Để tìm hiểu những gì họ làm và hiểu được sự cẩn thận, bạn có thể muốn lấy cuốn sách. )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Ngoài ra còn có một loạt các khung CSS được thiết kế để giúp xây dựng các trang web thích ứng, bao gồm Khung ít hơn của Joni Korpi .
Thay vì sử dụng các điểm dừng tùy ý, có lẽ tốt hơn là để thiết kế trang web của bạn ra lệnh cho các ban nhạc. Giảm chiều rộng màn hình trình duyệt của bạn và, bất cứ khi nào thiết kế của bạn bị hỏng, chiều rộng đó sẽ là một trong những điểm dừng của bạn. Tiếp tục giảm chiều rộng và thêm điểm dừng với các truy vấn phương tiện CSS cho đến khi thiết kế của bạn trông đẹp ở mọi chiều rộng. Bằng cách đó, thiết kế của bạn sẽ trông đẹp trên tất cả các thiết bị thay vì chỉ một số kích thước màn hình mà bạn đã cố gắng đưa nó vào. Nếu bạn sử dụng Chrome, bật Công cụ dành cho nhà phát triển (Xem> Nhà phát triển> Công cụ dành cho nhà phát triển) và giảm độ rộng trình duyệt của bạn sẽ giúp bạn đọc được chiều rộng hiện tại ở góc trên bên phải mà bạn có thể sử dụng để tìm ra điểm dừng của mình.
Một cách tiếp cận phổ biến khác để xem xét là thiết kế đáp ứng Mobile First , trong đó biểu định kiểu lõi của bạn xử lý các kiểu cho các thiết bị nhỏ nhất và các truy vấn phương tiện xử lý độ rộng màn hình lớn hơn, thay vì cách khác. Điều này có thể dẫn đến hiệu suất nhanh hơn trên các thiết bị di động, đặc biệt nếu bạn sử dụng nhiều hình ảnh nền CSS. (Bạn sẽ xây dựng các điểm dừng theo cùng một cách - chỉ cần bắt đầu với chiều rộng trình duyệt của bạn ở mức tối thiểu và hoạt động trở lên. Và đừng quên thử nghiệm trên nhiều thiết bị thực tế như bạn có thể sử dụng - xem xét việc truy cập Thiết bị mở Phòng thí nghiệm .)
Nói tóm lại, khi nó được thực hiện tốt, thiết kế thích ứng là một niềm vui được nhìn thấy và trải nghiệm cả với tư cách là một nhà thiết kế web và một người dùng web vườn chung. Lấy trang web của công ty thông tin kiến trúc sư Nhật Bản , ví dụ:
Trên iPhone
Trên iPad
Trên iMac
Đúng như Aaron Gustafson dự đoán, bạn thậm chí không biết mình đang được phục vụ cho đến khi bạn nhìn thấy các thiết kế trên cùng một trang.
Trải nghiệm khó có thể dễ chịu hơn trong từng trường hợp; bạn không phải suy nghĩ hoặc tương tác với trang để bắt đầu đọc nội dung, dành thời gian tự hỏi tại sao nó trông lạ trên màn hình của bạn hoặc phóng to để xem các yếu tố điều hướng trước khi bạn có thể chạm vào chúng, bởi vì ai đó đã giải quyết những vấn đề đó cho bạn. Và đó là lý do tại sao thiết kế đáp ứng hầu như luôn luôn bỏ qua các tùy chọn khác.