Ngay từ đầu, World Wide Web được thiết kế để mang tính bất khả tri. Không quan trọng là bạn có loại phần cứng nào. Không quan trọng thiết bị của bạn đang chạy hệ điều hành nào. Chỉ cần bạn có thể kết nối Internet, bạn có thể truy cập vào World Wide Web.
Trong những ngày đầu của web, hầu hết mọi người sử dụng máy tính để bàn. Ngày nay, web có sẵn 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 đều đúng như mong đợi rằng các trang web sẽ trông đẹp mắt bất kể họ đang sử dụng thiết bị nào. Thiết kế đáp ứng giúp bạn làm được đ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ế web và nhà phát triển đã thử nhiều kỹ thuật khác nhau.
Thiết kế chiều rộng cố định
Vào đầu những năm 1990, khi web lần đầu tiên trở nên phổ biến, hầu hết màn hình có kích thước màn hình rộng 640 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 hình thành thiết kế web, bạn nên thiết kế trang web có chiều rộng 640 pixel. Nhưng trong khi các công nghệ khác như điện thoại và máy ảnh đang thu nhỏ, màn hình ngày càng lớn hơn (và rốt cuộc thì phẳng hơn). Trước đây, hầu hết màn hình đều có kích thước 800 x 600 pixel. Kiểu thiết kế web cũng thay đổi theo. Các nhà thiết kế và nhà phát triển bắt đầu cho rằng 800 pixel là chế độ mặc định an toàn.
Sau đó, màn hình lại lớn hơn nữa. 1024 x 768 trở thành giá trị mặc định. Cảm giác như một cuộc chạy đua giữa các 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 của bạn 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ì sẽ lãng phí không gian trên màn hình. 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ì có không gian 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 đến với màn hình hẹp hơn chiều rộng bạn đã chọn, thì nội dung của bạn sẽ không vừa với chiều ngang. Trình duyệt tạo một thanh thu thập thông tin (ngang tương đương với thanh cuộn) và người dùng phải di chuyển toàn bộ trang sang trái và phải để xem tất cả nội dung.
Bố cục dạng lỏng
Mặc dù phần lớn các 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 cách làm cho bố cục của họ trở nên 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ỉ xem đúng một kích thước cụ thể.
Đây được gọi là bố cục lỏng. Tuy nhiên, mặc dù bố cục lỏng sẽ trông đẹp mắt trên nhiều chiều rộng, nhưng ở các trạng thái cực điểm, bố cục sẽ bắt đầu kém chất lượng hơn. Trên màn hình rộng, bố cục trông có vẻ bị kéo giãn. Trên màn hình hẹp, bố cục trông như bị thu nhỏ. 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 lớn hơn chiều rộng tối đa, bạn đều gặp vấn đề tương tự như với bố cục chiều rộng cố định.
Trên màn hình rộng, sẽ có không gian không được sử dụng bị lãng phí.
Trên 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 mọi thứ.
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. Thuật ngữ này cũng linh hoạt như kỹ thuật.
Màn hình nhỏ
Trong thế kỷ 21, web tiếp tục phát triển mạnh mẽ hơn. Các màn hình cũng vậy. Tuy nhiên, những màn hình mới đã ra mắt và nhỏ hơn bất kỳ thiết bị máy tính nào khác. Khi điện thoại di động xuất hiện với 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 tình huống khó xử. 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 cho những màn hình nhỏ tới 240 pixel và lớn tới hàng nghìn pixel.
Các trang web riêng biệt
Một lựa chọn là tạo một miền con riêng biệt cho khách truy cập trên thiết bị di động. Tuy nhiên, bạn phải duy trì hai 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át hiện tác nhân người dùng, vốn có thể không đáng tin cậy và dễ bị 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 phải thiết bị 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 các miền con khác nhau, bạn có thể có một trang web với 2 hoặc 3 bố cục có chiều rộng cố định.
Khi các truy vấn đa phương tiện lần đầu xuất hiện trong CSS, chúng mở ra cơ hội giúp bố cục linh hoạt hơn. Nhưng 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 các 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 những bố cục đẹp với một vài kích thước khác nhau, nhưng thiết kế không bao giờ trông đẹp mắt khi được xem giữa các kích thước đó. Vấn đề thừa không gian vẫn tồn tại mặc dù nó không tệ như bố cục có chiều rộng cố định.
Bằng cách 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 nhất với chiều rộng trình duyệt của họ. Nhưng với sự đa dạng của kích thước thiết bị, có thể bố cục sẽ trông chưa hoàn hảo 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à sự kết hợp giữa các truy vấn phương tiện và bố cục có chiều rộng cố định, thì thiết kế web thích ứng là sự kết hợp giữa các truy vấn phương tiện và bố cục linh hoạt.
Ethan Marcotte đã đưa ra thuật ngữ này vào một bài viết trong danh sách Apart năm 2010.
Ethan đã xác định ba tiêu chí cho thiết kế thích ứng:
- Lưới chất lỏng
- Nội dung nghe nhì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ị. Tuy nhiên, đã xảy ra 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 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 980 pixel là chiều rộng mà mọi người đang thiết kế (và họ đã không sai). 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 là 980 pixel rồi điều chỉnh tỷ lệ trang web được kết xuất xuống chiều rộng thực tế của màn hình.
Nếu đang sử dụng thiết kế đáp ứng, bạn cần yêu cầu trình duyệt không điều chỉnh tỷ lệ đó.
Bạn có thể thực hiện việc này 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.
Mục đầu tiên là width=device-width.
Thao tác này sẽ yêu cầu trình duyệt giả định chiều rộng của trang web cũng giống với chiều rộng của thiết bị
(thay vì giả sử chiều rộng của trang web là 980 pixel).
Giá trị thứ hai là initial-scale=1.
Điều này cho trình duyệt biết cần điều chỉnh tỷ lệ ở mức nào hoặc ít.
Với thiết kế đáp ứng, bạn không muốn trình duyệt thực hiện bất kỳ tỷ lệ nào.
Sau khi thêm phần tử meta đó, các trang web của bạn sẽ sẵn sàng thích ứng.
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 theo những cách vượt xa kích thước khung nhìn.
Các tính năng liên quan đến nội dung đa phương tiện cho phép nhà phát triển tiếp cận 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 của riêng chúng.
Phần tử picture giú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, có an toàn hay không khi thiết kế trang web có chiều rộng cố định?
Bố cục lỏng thường gặp khó khăn với 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à ngày càng 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 thích ứng cho mọi người.