.png)
1. Responsive không phải là resize — mà là “thiết kế lại trải nghiệm”
Một sai lầm phổ biến là: Lấy UI desktop → thu nhỏ lại → xong.
Thực tế, mobile không phải là “desktop phiên bản nhỏ”.
- Desktop: nhiều không gian → hiển thị nhiều thông tin cùng lúc
- Mobile: ít không gian → cần ưu tiên nội dung quan trọng nhất
Frontend dev phải tự hỏi:
- Người dùng cần gì nhất trên mobile?
- Có cần giữ toàn bộ tính năng không?
- Có nên ẩn bớt? Hay chuyển thành flow khác?
=> Responsive tốt là tái cấu trúc trải nghiệm, không phải co lại.
2. Không chỉ CSS — mà là tư duy layout
Nhiều người nghĩ responsive = media query.
Sai, nhưng chưa đủ.
Bạn có thể dùng:
- Flexbox
- Grid
- Media query
Nhưng nếu layout ngay từ đầu không hợp lý thì: Viết bao nhiêu CSS cũng vẫn “gãy”.
Ví dụ thực tế:
- Một layout 4 cột desktop
- Khi xuống mobile: không phải lúc nào cũng là 1 cột
→ Có thể phải:- Gom nhóm lại
- Đổi thứ tự hiển thị
- Thậm chí bỏ bớt component
=> Frontend dev giỏi là người nghĩ layout ngay từ đầu đã responsive
3. Hình ảnh & hiệu năng – thứ hay bị bỏ quên
Một lỗi cực phổ biến: Dùng ảnh desktop (nặng) cho mobile
Kết quả:
- Web load chậm
- Người dùng thoát ngay
Responsive không chỉ là hiển thị đúng — mà còn phải load nhanh đúng thiết bị.
Dev cần xử lý:
- Ảnh responsive (srcset, sizes)
- Lazy loading
- Tối ưu dung lượng
=> Một trang “đẹp” nhưng load 5 giây trên mobile = thất bại
4. Không phải mọi thứ đều giữ nguyên trên mobile
Có những thứ nên… biến mất.
Ví dụ:
- Bảng dữ liệu lớn
- Sidebar phức tạp
- Animation nặng
Frontend dev phải quyết định:
- Giữ → biến thành dạng khác (accordion, tab)
- Hay bỏ hẳn → ưu tiên UX
=> Responsive là nghệ thuật chọn lọc, không phải giữ tất cả
5. Interaction cũng phải responsive
Không chỉ layout thay đổi — mà cách người dùng tương tác cũng khác:
- Desktop: hover, click
- Mobile: tap, swipe
Một số vấn đề thực tế:
- Hover không tồn tại trên mobile
- Button quá nhỏ → khó bấm
- Khoảng cách không đủ → bấm nhầm
=> Dev phải:
- Tăng hit area
- Thiết kế lại interaction
- Tránh phụ thuộc hover
6. Test responsive không phải chỉ kéo trình duyệt
Nhiều người test bằng cách: Resize browser → thấy ổn → done
Nhưng thực tế:
- Thiết bị thật khác giả lập
- Hiệu năng khác
- Touch khác mouse
Frontend dev “có tâm” sẽ:
- Test trên điện thoại thật
- Test nhiều kích thước màn hình
- Check cả performance, không chỉ UI
7. Responsive là sự phối hợp, không phải việc riêng của dev
Một UI không responsive tốt, nhiều khi không phải lỗi dev.
Mà là:
- Design không tính mobile
- BA không define rõ behavior
- PM không ưu tiên UX
=> Dev giỏi không chỉ code — mà còn:
- Feedback design
- Đề xuất cải tiến
- Đặt câu hỏi về trải nghiệm
