Thiết kế resource page cho ngón tay cái, không phải chỉ cho màn hình desktop
Phần lớn traffic discovery đến từ điện thoại. Mobile-first buộc giao diện ưu tiên khả năng đọc, thao tác chạm và luồng thông tin.
Nội dung bài viết
Một trang đẹp ở 1440px vẫn có thể rất khó dùng trên điện thoại.
Bắt đầu từ một cột
Trên mobile nên đi theo thứ tự tự nhiên: tiêu đề → tóm tắt → điểm chính → nội dung → hành động tiếp theo.
Nút chính phải dễ chạm
CTA cần đủ lớn, không phụ thuộc hover, không đặt sát các link khác và nên full-width khi màn hình hẹp.
Desktop chỉ là phiên bản mở rộng
Khi có thêm không gian, mới thêm sidebar, grid nhiều cột hay nội dung liên quan. Cùng một dữ liệu, chỉ thay cách trình bày.
Đọc tiếp
Có thể bạn sẽ cần những thứ này tiếp theo
UI Components
shadcn/ui
Nguồn tham khảo tốt cho dialog, sheet, form và interaction pattern khi muốn UI có cảm giác product mà vẫn sở hữu code component.
Xem tiếp
UI System
Tailwind CSS
Hệ thống utility-first giúp xây một giao diện responsive duy nhất thay vì phải duy trì riêng mobile, tablet và desktop.
Xem tiếp