Thiết kế được xem trên màn hình nhỏ không nên trông giống như phiên bản thu nhỏ của bố cục màn hình lớn. Tương tự, một thiết kế được xem trên màn hình lớn không được trông giống như phiên bản phóng to của bố cục màn hình nhỏ. Thay vào đó, thiết kế cần đủ linh hoạt để thích ứng với mọi kích thước màn hình. Thiết kế thích ứng thành công sẽ tận dụng tối đa mọi kiểu dáng.
Điều này có nghĩa là một số phần tử giao diện có thể cần phải trông khác biệt đáng kể tuỳ thuộc vào bối cảnh mà chúng xuất hiện. Bạn có thể cần áp dụng CSS rất khác nhau cho cùng một cơ sở mã HTML để tận dụng tối đa các kích thước màn hình khác nhau. Đó có thể là một thử thách khá lớn về thiết kế!
Sau đây là một số thách thức thường gặp mà bạn có thể gặp phải.
Di chuyển
Việc hiển thị danh sách các đường liên kết điều hướng khá đơn giản trên màn hình lớn. Có nhiều không gian để chứa những đường liên kết đó.
Trên màn hình nhỏ, không gian là một yếu tố quan trọng. Khi thiết kế cho trường hợp này, bạn có thể muốn ẩn chế độ điều hướng sau một nút. Vấn đề với giải pháp này là người dùng phải thực hiện hai bước để chuyển đến bất kỳ vị trí nào: mở trình đơn, sau đó chọn một mục. Cho đến khi trình đơn được mở, người dùng sẽ tự hỏi "tôi có thể đi đâu?"
Hãy cố gắng tìm một chiến lược tránh việc ẩn thanh điều hướng. Nếu có tương đối ít mục, bạn có thể tạo kiểu cho thành phần điều hướng để trông đẹp mắt trên màn hình nhỏ.
Mẫu đó sẽ không mở rộng nếu phần điều hướng của bạn có nhiều đường liên kết. Thanh điều hướng sẽ trông lộn xộn nếu các đường liên kết xuống dòng thành hai hoặc ba dòng trên màn hình nhỏ.
Một giải pháp có thể là giữ các đường liên kết trên một dòng nhưng cắt bớt danh sách ở cạnh màn hình. Người dùng có thể vuốt theo chiều ngang để xem những đường liên kết không xuất hiện ngay lập tức. Đây là mẫu tràn.
Ưu điểm của kỹ thuật này là có thể điều chỉnh theo mọi chiều rộng thiết bị và mọi số lượng đường liên kết. Nhược điểm là người dùng có thể bỏ lỡ những đường liên kết không xuất hiện ngay từ đầu. Nếu bạn sử dụng kỹ thuật này cho trình đơn điều hướng chính, hãy đảm bảo rằng một vài đường liên kết đầu tiên là những đường liên kết quan trọng nhất và cho biết bằng hình ảnh rằng có nhiều mục hơn trong danh sách. Ví dụ trước sử dụng một dải chuyển màu cho chỉ báo này.
Phương án cuối cùng là bạn có thể chọn ẩn thanh điều hướng theo mặc định và cung cấp một cơ chế bật/tắt để người dùng hiện và ẩn nội dung. Đây được gọi là tiết lộ từng bước.
Đảm bảo rằng nút bật/tắt chế độ hiển thị của thành phần điều hướng được gắn nhãn. Không dựa vào biểu tượng để được hiểu.
Một biểu tượng không có nhãn là một thành phần điều hướng "bí ẩn" – người dùng sẽ không biết nội dung bên trong cho đến khi họ nhấp vào. Cung cấp nhãn văn bản để cho người dùng biết nút này sẽ hiển thị nội dung gì.
Các quảng cáo dạng băng chuyền
Điều này cũng đúng với nội dung khác: đừng cố gắng ẩn bất cứ nội dung nào. Băng chuyền là một phương pháp phổ biến để ẩn nội dung. Cách này có thể trông khá gọn gàng, nhưng có nhiều khả năng người dùng sẽ không bao giờ khám phá được nội dung bị ẩn. Băng chuyền giải quyết vấn đề về tổ chức (chẳng hạn như nội dung nào nên xuất hiện trên trang chủ) hiệu quả hơn so với việc phục vụ người dùng.
Tuy nhiên, khi không gian bị hạn chế, băng chuyền có thể giúp trang không bị quá dài và lộn xộn. Bạn có thể sử dụng phương pháp kết hợp: hiển thị nội dung trong một băng chuyền cho màn hình nhỏ, nhưng hiển thị cùng nội dung đó trong một lưới cho màn hình lớn hơn.
Đối với màn hình hẹp, hãy hiển thị các mục theo hàng bằng cách sử dụng flexbox. Hàng gồm các mục sẽ trải dài ra ngoài rìa màn hình. Dùng overflow-x: auto để cho phép vuốt theo chiều ngang.
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
Các thuộc tính scroll-snap đảm bảo rằng người dùng có thể vuốt các mục một cách mượt mà. Nhờ scroll-snap-type: inline mandatory, các mục sẽ tự động vào đúng vị trí.
Khi màn hình đủ lớn (trong trường hợp này là rộng hơn 50em), hãy chuyển sang lưới và hiển thị các mục theo hàng và cột mà không ẩn bất kỳ mục nào.
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
Điều quan trọng là một mục trong chế độ xem băng chuyền không chiếm toàn bộ chiều rộng. Nếu có, sẽ không có dấu hiệu nào cho thấy có nhiều nội dung hơn ở ngoài rìa khung hiển thị.
Băng chuyền là một ví dụ khác về mẫu tràn đang hoạt động. Nếu có nhiều mục để mọi người duyệt xem, bạn có thể tiếp tục sử dụng mẫu tràn ngay cả trên màn hình lớn, kể cả TV. Thanh cuộn nội dung nghe nhìn này sử dụng nhiều băng chuyền để quản lý một số lượng lớn các lựa chọn.
Một lần nữa, các thuộc tính scroll-snap đảm bảo rằng hoạt động tương tác diễn ra suôn sẻ. Ngoài ra, hãy lưu ý rằng các hình ảnh trong băng chuyền có loading="lazy" được áp dụng cho chúng. Trong trường hợp này, các hình ảnh không nằm dưới màn hình đầu tiên mà nằm ngoài rìa, nhưng vẫn áp dụng nguyên tắc tương tự: nếu người dùng không bao giờ vuốt đến mục đó, thì hình ảnh sẽ không được tải xuống, giúp tiết kiệm băng thông.
Khi thêm JavaScript, bạn có thể thêm các chế độ điều khiển tương tác vào băng chuyền. Bạn thậm chí có thể thiết lập để tính năng này tự động chuyển qua các mục. Tuy nhiên, hãy cân nhắc kỹ trước khi làm việc đó. Tính năng tự động phát có thể hoạt động nếu băng chuyền là nội dung duy nhất trên trang, nhưng băng chuyền tự động phát sẽ vô cùng phiền toái nếu người dùng đang cố gắng tương tác với nội dung khác (ví dụ: đọc văn bản). Bạn có thể đọc thêm về các phương pháp hay nhất cho băng chuyền.
Bảng dữ liệu
Phần tử table rất phù hợp để cấu trúc dữ liệu dạng bảng; các hàng và cột của thông tin liên quan. Nhưng nếu bảng quá lớn, thì bảng đó có thể làm hỏng bố cục màn hình nhỏ của bạn.
Bạn có thể áp dụng mẫu tràn cho các bảng. Trong ví dụ này, bảng được gói trong một div có lớp table-container.
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
Nguyên tắc
Mẫu tràn là một giải pháp thoả hiệp tốt cho màn hình nhỏ, nhưng hãy đảm bảo rằng nội dung ngoài màn hình có thể truy cập được. Hãy cân nhắc việc đặt bóng hoặc chuyển màu lên cạnh nơi nội dung bị cắt bớt.
Tiết lộ tiến trình là một cách hữu ích để tiết kiệm không gian, nhưng hãy cẩn thận khi sử dụng cách này cho nội dung rất quan trọng. Nút này phù hợp hơn với các hành động phụ. Đảm bảo rằng phần tử giao diện kích hoạt thông tin công bố được gắn nhãn rõ ràng – đừng chỉ dựa vào biểu tượng.
Trước tiên, hãy thiết kế cho màn hình nhỏ hơn. Việc điều chỉnh thiết kế màn hình nhỏ cho phù hợp với màn hình lớn dễ dàng hơn so với việc điều chỉnh ngược lại. Nếu bạn thiết kế cho màn hình lớn trước, thì có nguy cơ thiết kế cho màn hình nhỏ sẽ giống như một ý tưởng bổ sung.
Để biết thêm các mẫu bố cục và thành phần trên giao diện người dùng, hãy khám phá phần Mẫu trên web.dev.
Khi điều chỉnh các phần tử giao diện cho phù hợp với nhiều kích thước màn hình, truy vấn phương tiện sẽ rất hữu ích trong việc xác định kích thước của thiết bị. Nhưng các tính năng đa phương tiện như min-width và min-height chỉ là bước khởi đầu. Tiếp theo, bạn sẽ khám phá hàng loạt tính năng khác liên quan đến nội dung nghe nhìn.