Theo Google, phần lớn lượng truy cập vào tranh Google Searches là trên thiết bị mobile nên từ 2019, họ đã áp dụng Mobile-First Indexing mặc định trên tất cả website. Mục đích là giúp cho người dùng với thiết bị mobile sẽ thấy được các trang web mà khả năng cao là họ sẽ có trải nghiệm tốt ở đó (Mobile-first)

Vậy Mobile-first là như nào? Một số câu phản biện “mobile first hay desktop first như nhau thôi mà”, dạng mang ý nghĩa trươc sau gì mà ko hỗ trợ responsive mobile các kiểu.

Mình xin oánh chánh thêm 1 cái nữa là phần lớn các thể loại CSS Framework (bootstrap, foundation, bulma, tailwindcss...) mà có grid system đều là Mobile-first cả.

Ủa là sao? Là dùng Bootstrap là tự dưng có Mobile responsive hẻ? Hổng phải vậy. Ở đây các frameworks này “Mobile-first” là các CSS Classes của họ là áp dụng cho screen từ mobile đi lên.

Ví dụ có 5 breakpoints phổ biến sau: xs, sm, md, lg, xl và mình dùng Bootstrap

Khi viết:

Advertisement

thì nghĩa là thẻ <_div> này chiếm 4 columns trên cả 5 screens. Vậy giờ muốn đổi sang “em muốn trên ipad nằm ngang hoặc desktop trở lên thì mới cho 4 columns thôi, còn lại cho full width hết”. Thế là phải lụm khụm bò sang sửa lại layout:

Quá dài đúng hông? Sự thật là chỉ cần viết: <_div class=“col-12 col-md-4”>

Lý do là Bootstrap áp dụng Mobile-First cho Grid của họ. Bạn viết col-12 thì class được áp dụng từ xs trở lên, khi đụng md thì col-md-4 được áp dụng từ md trở lên.

Vậy nên khi dùng Grid System mà Mobile-First, các bạn tiếp cận layout theo mobile-first thì độ maintain của dự án sẽ tăng cao hơn là bạ đâu viết đấy.

(Fb Chau Tran)