Mobile-First Web Design - Đơn giản nhưng thường bị bỏ qua

Mobile-first là gì thì ai cũng đã nghe qua. Viết CSS cho mobile trước rồi mở rộng ra tablet, desktop. Nghe thì dễ như ăn bánh. Nhưng thực ra, bạn đã bao giờ nhìn lại code của mình và tự hỏi: ‘Mình có thực sự đang làm mobile-first chưa?

Nhiều người tưởng rằng cứ dùng min-width là xong. Nhưng tư duy mobile-first không chỉ nằm ở câu lệnh CSS, mà nằm ở cách bạn nghĩ về giao diện, nội dung và trải nghiệm người dùng – từ những dòng đầu tiên của dự án.

Mobile-first

• Khái niệm thì hơi dài dòng, đơn giản thì nó là:
  • Viết CSS mặc định cho kích thước mobile.
  • Sau đó dùng media queries với min-width để mở rộng sang thiết bị lớn hơn.

/* Mobile mặc định */
body { font-size: 14px;
} /* Tablet trở lên */
@media (min-width: 768px) { body { font-size: 16px; }
}

Tại sao nó lại quan trọng - không chỉ là "Trend"?

1. Thời đại mobile kè kè bên người

Theo một bài viết thống kê người sử dụng điện thoại của vtv thì:

• Vào tháng 9/2023, số lượng người dùng điện thoại thông minh trên toàn thế giới là khoảng 6,925 tỷ người. Và dự báo sẽ đạt 7,33 tỷ vào năm 2025

Điều này có nghĩa là số lượng người sử dụng điện thoại thông minh sẽ ngày càng tăng -> lượng người dùng từ điện thoại sẽ là 1 con số không hề nhỏ.

2. Tập trung vào nội dung chính

Vì không gian hiển trị trên mobile rất hạn chế, nên bạn cần phải loại bỏ những nội dung không quan trọng để dành vị trí tốt cho những nội dung chính.

Bạn có thể đặt ra các câu hỏi: người dùng cần gì?, trang của mình cung cấp được những gì?, cái gì cần được show ra đầu tiên?,... Từ đó có thể xây dựng layout cho phù hợp.

-> Nó khiến bạn không chỉ xác định nội dung chính mà còn phải thể hiện nội dung ấy sao cho hợp lý.

3. Tăng tốc độ tải trang

• Vì việc tập chung vào nội dung chính + với loại bỏ 1 số phần không cần thiết có thể giúp bạn tải trang nhanh hơn, giảm số lượng API cần phải xuống.
• Cùng với đó là tăng trải nghiệm người dùng do tốc độ tải trang tăng, giảm bớt thông tin dư thừa.
• Và thực nếu 1 trang web phải load quá 3s thì nhiều người sẽ chọn tìm trang web khác 🥲

4. Cải thiện SEO

• Hiện nay google đang sử dụng mobile-first indexing để lập chỉ mục và xếp dành cho thiết bị di động dựa trên nội dung dành cho mobile mà họ thu thập được từ trang của bạn.

-> Nếu trang của bạn được tối ưu trên mobile thì có hội cao hơn trên kết quả tìm kiếm.

Giảm tỷ lệ thoát (Bounce Rate)

• Nếu bạn vào 1 trang web mà vỡ tùm lum đã mất thiện cảm rồi.
• Thêm vào việc phải lướt trái lướt phải để tìm thông tin nữa thì nếu là bạn thì bạn có muốn sử dụng tiếp không? Mình thì không rồi đấy 😂

nguyên tắc thiết kế Mobile First

Từ màn nhỏ tới lớn

• Chúng ta sẽ tập chung vào 3 điểm (break point) là:
  • Mobile: 0 - 480px
  • Tablet: >= 768px
  • Desktop: >= 1024
• Css mặc định cho màn mobile sau đó sử dụng min-width để responsive cho các màn lớn hơn.

/* Base - Mobile */
.container { display: block; padding: 16px;
} /* Tablet trở lên */
@media (min-width: 768px) { .container { display: flex; gap: 24px; }
}

Responsive Web Design

• Khi thay đổi kích thước chúng ta sẽ tăng dần số cột hiển thị tuỳ theo kích thước: Flexbox, Grid
• Text: cỡ chữ, line-height cho phù hợp.
• Hình ảnh: sử dụng hình ảnh khác nhau hoặc thay đổi kích thước cho phù hợp.
• Navigation: menu hamburger cho mobile, full nav cho desktop.
• ...

Tối ưu hoá tương tác

• Chú ý các element:
  • Button: kích thước phù hợp để dễ ấn.
  • Form data: gợi ý bàn phím đúng kiểu (type: email, number,...)
  • Animation: hạn chế sử dụng hoặc không bị rối mắt.
  • Hover: do trên mobile không có hover nên có thể cân nhắc logic khác.
  • ...

Lợi ích lâu dài của Mobile-First

• Tiết kiệm chi phí bảo trì: Việc xây dựng từ layout nhỏ sẽ giảm thời gian thiết kế giao diện ngay từ đầu. Việc update sau này cũng sẽ nhẹ nhàng hơn và cũng dễ mở rộng ra các thiết bị khác.
• Tăng cường khả năng tiếp cận: Tất nhiên rồi, việc tối ưu cho mobile giúp các trang web dễ tiếp cần tới người dùng sử dụng mobile nhiều cũng như không sử dụng được máy tính.
• Tăng tỷ lệ chuyển đổi: Khi đã sử dụng trên điên thoại tốt thì khi cần người dùng sẽ quay lại dễ dàng hơn mà không phải tìm đến thiết bị phù hợp từ đó giúp doanh thu, dịch vụ,... được sử dụng nhiều hơn.

Nhược điểm

Tất nhiên có ưu điểm thì cũng có nhược điểm.

• Đau đầu để suy nghĩ việc thiết kế cho giao diện -> Nhưng nó có thể giảm bớt gánh nặng nhờ Figma AI mới được ra mắt.
• Mobile First NOT Mobile Only: Cần linh hoạt dữa việc chọn thiết kế theo dự án cũng như đặc thù của trang web.
• Phát triển kỹ thuật đôi khi phức tạp hơn.
• Vẫn có nhiều người dùng ưu tiên sử dụng desktop để truy cập.

Kết luận

Mobile-first là phương pháp tốt, nhưng không phải thần thánh. Nó phát huy hiệu quả khi:

• Dự án hướng đến người dùng phổ thông.
• Giao diện cần tối ưu hóa tốc độ, tương tác, nội dung ưu tiên.
• Thống nhất giữa các team phát triển và hệ thống rõ ràng.