Ngay từ đầu, World Wide Web đã được thiết kế theo kiểu độc lập. Không quan trọng là bạn có phần cứng nào. Không quan trọng là thiết bị của bạn đang chạy hệ điều hành nào. Miễn là bạn có thể kết nối Internet, bạn có thể truy cập vào World Wide Web.
Trong thời kỳ đầu của web, hầu hết mọi người đều sử dụng máy tính để bàn. Ngày nay, web có trên máy tính để bàn, máy tính xách tay, máy tính bảng, điện thoại có thể gập lại, tủ lạnh và ô tô. Mọi người kỳ vọng rằng các trang web sẽ hiển thị chính xác bất kể họ đang sử dụng thiết bị nào. Thiết kế đáp ứng giúp bạn thực hiện điều này.
Thiết kế đáp ứng không phải là phương pháp đầu tiên để thiết kế trang web. Trong những năm trước khi có thiết kế thích ứng, các nhà thiết kế và nhà phát triển web đã thử nhiều kỹ thuật.
Thiết kế chiều rộng cố định
Vào đầu những năm 1990, khi web bắt đầu trở nên phổ biến, hầu hết các màn hình đều có kích thước màn hình là 640 pixel (rộng x 480 pixel) x cao 480 pixel. Đây là các ống tia cực âm lồi, không giống như màn hình tinh thể lỏng phẳng hiện nay.
Trong những ngày đầu của thiết kế web, bạn nên thiết kế trang web có chiều rộng 640 pixel là một lựa chọn an toàn. Tuy nhiên, trong khi các công nghệ khác như điện thoại và máy ảnh thu nhỏ màn hình, thì màn hình lại lớn hơn (và cuối cùng là phẳng hơn). Trước đây, hầu hết các màn hình đều có kích thước 800 x 600 pixel. Thiết kế web cũng thay đổi theo. Các nhà thiết kế và nhà phát triển bắt đầu giả định rằng 800 pixel là chế độ mặc định an toàn.
Sau đó, các màn hình lại lớn hơn. 1024 x 768 trở thành mặc định. Cảm giác như một cuộc chạy đua vũ trang giữa những nhà thiết kế web và nhà sản xuất phần cứng.
Cho dù đó là 640, 800 hay 1024 pixel, việc chọn một chiều rộng cụ thể để thiết kế được gọi là thiết kế chiều rộng cố định.
Nếu bạn chỉ định chiều rộng cố định cho bố cục, thì bố cục sẽ chỉ hiển thị đẹp ở chiều rộng cụ thể đó. Nếu khách truy cập vào trang web của bạn có màn hình rộng hơn chiều rộng bạn đã chọn, thì không gian trên màn hình sẽ bị lãng phí. Bạn có thể căn giữa nội dung của các trang để phân phối không gian đó đồng đều hơn (thay vì để trống ở một bên) nhưng bạn vẫn sẽ không tận dụng được không gian có sẵn.
Tương tự, nếu khách truy cập có màn hình hẹp hơn chiều rộng đã chọn, thì nội dung của bạn sẽ không vừa theo chiều ngang. Trình duyệt tạo ra một thanh thu thập thông tin – tương đương với một thanh cuộn theo chiều ngang – và người dùng phải di chuyển toàn bộ trang sang trái và phải để xem được tất cả nội dung.
Bố cục dạng lỏng
Mặc dù đa số nhà thiết kế sử dụng bố cục có chiều rộng cố định, nhưng một số nhà thiết kế lại chọn bố cục linh hoạt. Thay vì sử dụng chiều rộng cố định cho bố cục, bạn có thể tạo bố cục linh hoạt bằng cách sử dụng tỷ lệ phần trăm cho chiều rộng cột. Những thiết kế này hoạt động trong nhiều trường hợp hơn so với bố cục có chiều rộng cố định chỉ hiển thị đúng một kích thước cụ thể.
Những bố cục này được gọi là bố cục linh hoạt. Tuy nhiên, mặc dù bố cục linh hoạt sẽ trông đẹp mắt trên nhiều chiều rộng, nhưng bố cục này sẽ bắt đầu trở nên xấu đi ở những điểm cực kỳ quan trọng. Trên màn hình rộng, bố cục sẽ bị kéo giãn. Trên một màn hình hẹp, bố cục có vẻ bị méo. Cả hai trường hợp đều không lý tưởng.
Bạn có thể giảm thiểu những vấn đề này bằng cách sử dụng min-width và max-width cho bố cục của mình.
Nhưng sau đó, ở bất kỳ kích thước nào dưới chiều rộng tối thiểu hoặc trên chiều rộng tối đa, bạn sẽ gặp các vấn đề tương tự với bố cục chiều rộng cố định.
Trên một màn hình rộng sẽ có một lượng không gian không sử dụng bị lãng phí.
Trên một màn hình hẹp, người dùng sẽ phải di chuyển toàn bộ trang sang trái và phải để xem được mọi nội dung.
Từ chất lỏng chỉ là một trong những thuật ngữ dùng để mô tả loại bố cục này. Những loại thiết kế này còn được gọi là bố cục linh hoạt hoặc bố cục linh hoạt. Các thuật ngữ này cũng phổ biến như kỹ thuật.
Màn hình nhỏ
Trong thế kỷ 21, Internet tiếp tục trở nên rộng lớn hơn. Màn hình cũng vậy. Tuy nhiên, màn hình mới ra mắt lại nhỏ hơn bất kỳ thiết bị máy tính nào. Trước khi có điện thoại di động có trình duyệt web đầy đủ tính năng, các nhà thiết kế phải đối mặt với một vấn đề nan giải. Họ có thể làm gì để đảm bảo thiết kế của mình trông đẹp mắt trên cả máy tính và điện thoại di động? Họ cần một cách tạo kiểu cho nội dung phù hợp với những màn hình có kích thước nhỏ tới 240 pixel và rộng hàng nghìn pixel.
Các trang web riêng biệt
Một lựa chọn là tạo miền con riêng cho khách truy cập trên thiết bị di động. Nhưng sau đó, bạn phải duy trì 2 cơ sở mã và thiết kế riêng biệt. Và để chuyển hướng khách truy cập trên thiết bị di động, bạn cần phải thực hiện chức năng nhận dạng tác nhân người dùng. Phương pháp này có thể không đáng tin cậy và dễ dàng giả mạo. Chrome sẽ ngừng sử dụng chuỗi tác nhân người dùng vì lý do liên quan đến quyền riêng tư. Ngoài ra, không có ranh giới rõ ràng giữa thiết bị di động và không di động. Bạn gửi thiết bị máy tính bảng đến trang web nào?
Bố cục thích ứng (Adaptive Layouts)
Thay vì có các trang web riêng biệt trên nhiều miền con, bạn có thể có một trang web với 2 hoặc 3 bố cục chiều rộng cố định.
Khi truy vấn nội dung đa phương tiện lần đầu xuất hiện trong CSS, chúng đã giúp tăng tính linh hoạt cho bố cục. Tuy nhiên, nhiều nhà phát triển vẫn cảm thấy thoải mái nhất khi tạo bố cục có chiều rộng cố định. Một kỹ thuật liên quan đến việc chuyển đổi giữa một số bố cục có chiều rộng cố định với chiều rộng đã chỉ định. Một số người gọi đây là thiết kế thích ứng.
Thiết kế thích ứng cho phép nhà thiết kế cung cấp bố cục trông đẹp ở một vài kích thước khác nhau, nhưng thiết kế trông không đẹp lắm khi được xem giữa các kích thước đó. Vấn đề thừa không gian vẫn tiếp tục xảy ra mặc dù vấn đề này không tệ như trong bố cục có chiều rộng cố định.
Khi sử dụng các truy vấn phương tiện CSS, bạn có thể cung cấp cho mọi người bố cục gần với chiều rộng nhất của trình duyệt. Tuy nhiên, do sự đa dạng về kích thước thiết bị, có khả năng bố cục này sẽ không phù hợp với hầu hết mọi người.
Thiết kế web đáp ứng
Nếu bố cục thích ứng là một tổ hợp truy vấn nội dung đa phương tiện và bố cục có chiều rộng cố định, thì thiết kế web thích ứng là một tổ hợp truy vấn nội dung đa phương tiện và bố cục linh hoạt.
Thuật ngữ này do Ethan Marcotte đặt ra trong một bài viết trên trang A List Apart vào năm 2010.
Ethan xác định 3 tiêu chí cho thiết kế thích ứng:
- Lưới linh hoạt
- Phương tiện linh hoạt
- Truy vấn về nội dung nghe nhìn
Bố cục và hình ảnh của trang web thích ứng sẽ trông đẹp mắt trên mọi thiết bị. Nhưng có một vấn đề.
Phần tử meta cho viewport
Các trình duyệt trên điện thoại di động phải xử lý các trang web được thiết kế với bố cục chiều rộng cố định cho màn hình rộng hơn. Theo mặc định, các trình duyệt trên thiết bị di động giả định rằng chiều rộng 980 pixel là chiều rộng mà mọi người thiết kế (và đó đã không đúng). Vì vậy, ngay cả khi bạn sử dụng bố cục lỏng, trình duyệt sẽ áp dụng chiều rộng 980 pixel và sau đó thu nhỏ trang web kết xuất xuống theo chiều rộng thực tế của màn hình.
Nếu đang sử dụng thiết kế thích ứng, bạn cần yêu cầu trình duyệt không mở rộng quy mô.
Bạn có thể thực hiện việc đó bằng phần tử meta trong head của trang web:
<meta name="viewport" content="width=device-width, initial-scale=1">
Có hai giá trị được phân tách bằng dấu phẩy.
Đầu tiên là width=device-width.
Thao tác này sẽ cho trình duyệt giả định rằng chiều rộng của trang web bằng với chiều rộng của thiết bị (thay vì giả định chiều rộng của trang web là 980 pixel).
Giá trị thứ hai là initial-scale=1.
Điều này sẽ cho trình duyệt biết cần chia tỷ lệ ở mức độ nào.
Với thiết kế thích ứng, bạn hoàn toàn không muốn trình duyệt tăng tỷ lệ.
Khi phần tử meta đó được thiết lập, các trang web của bạn đã sẵn sàng phản hồi.
Thiết kế đáp ứng hiện đại
Hiện nay, chúng tôi có thể tạo ra các trang web phản hồi nhanh vượt xa kích thước khung nhìn.
Các tính năng nội dung đa phương tiện cho phép nhà phát triển tiếp cận các lựa chọn ưu tiên của người dùng và mang lại trải nghiệm phù hợp với họ.
Truy vấn vùng chứa cho phép các thành phần sở hữu thông tin thích ứng riêng.
Phần tử picture cho phép nhà thiết kế đưa ra quyết định về hướng nghệ thuật dựa trên tỷ lệ màn hình.
Kiểm tra kiến thức
Kiểm tra kiến thức của bạn về thiết kế web thích ứng
Vào năm 2021, liệu bạn có nên thiết kế trang web với chiều rộng cố định vào năm 2021 không?
Bố cục dạng lỏng thường gặp khó khăn ở những loại kích thước màn hình nào?
Ba tiêu chí ban đầu cho thiết kế thích ứng là gì?
Thiết kế đáp ứng là một thế giới thú vị và đang phát triển với vô vàn khả năng. Trong phần còn lại của khoá học này, bạn sẽ tìm hiểu về những công nghệ này cũng như cách sử dụng chúng để tạo trang web đẹp mắt và có khả năng thích ứng cho mọi người.