Responsive Web Design

Responsive Web Design
Responsive Web Design

Responsive Web Design (RWD) là một phương pháp thiết kế giao diện web. Nhờ phương pháp này, trang web của chúng ta có thể hiển thị một cách linh hoạt trên nhiều thiết bị khác nhau.

Responsive Web Design

Responsive là một tính từ chỉ sự phản ứng nhanh chóng theo hướng tích cực (reacting quickly and in a positive way). Chúng ta thường được thấy cụm từ này được dịch qua Tiếng Việt là ‘thiết kế web đáp ứng’.

Một cách đơn giản và dễ hiểu. Responsive Web Design là một kỹ thuật thiết kế web. Trong kỹ thuật này, lập trình viên sử dụng module Media Query kết hợp một cách khéo léo với các rules CSS. Nhờ đó, giao diện của trang web sẽ được hiển thị một cách linh hoạt trên các thiết bị có thuộc tính khác nhau. Kết quả cuối cùng, chúng ta có một trang web, với giao diện có khả năng đáp ứng tất cả các thiết bị.

Ngày nay, với sự phát triển mạnh mẽ của công nghệ. Các thiết bị điện tử, đặc biệt là các thiết bị di động càng trở nên phổ biến và đa dạng. Khiến Responsive Web Design trở thành một điều kiện thiết yếu trong mọi trang web hiện đại.

Mobile First Design

Tại Mobile World Congress  vào năm 2010, CEO của goolge là Eric Schmidt đã đưa ra một khuyến nghị. Các nhà thiết kế web nên tuân theo quy tắc “Mobile first“.

Mobile First Design
Mobile First Design

Mobile First Design có thể xem là phương pháp thực hiện Responsive Web Design. Trong phương pháp này, chúng ta sẽ ưu tiên thiết kế giao diện cho các thiết bị di động trước. Hay một cách tường minh hơn, chúng ta sẽ ưu tiên các thiết bị có màn hình nhỏ hơn trước và tiến dần đến các mình hình lớn hơn.

Vì sao phương pháp này trở nên phổ biến và được các nhà thiết kế ưu tiên sử dụng? Đầu tiên, chúng ta xét đến độ phổ biến thiết bị của người dùng.

StatCounter-thống kê thiết bị của người dùng trong 12 tháng gần nhất (tính từ 4/2020)
StatCounter-thống kê thiết bị của người dùng trong 12 tháng gần nhất (tính từ 4/2020)

Các bạn có thể thấy, số lượng người dùng sử dụng điện thoại truy cập web sấp sỉ 1/2 số lượng người dùng. Do đó, nếu làm tốt giao diện trên thiết bị di động. Chúng ta sẽ không bỏ lỡ 1/2 lượng người dùng.

Lý do quan trọng thứ hai đó là đi từ mobile đến desktop. Chúng ta sẽ phát triển lần lượt từ giao diện đơn giản đến phức tạp. Việc này có vẻ dễ hơn khi đi chiều ngược lại, từ phức tạp đến đơn giản. Sẽ rất khó khăn để đưa ra quyết định giữ và bỏ thành phần nào.

Bootstrap Breakpoints

Dù là xu hướng thiết kế nào. Mobile First hay Desktop First, chúng ta cũng cần sử dụng đến những Breakpoints. Trên thế giới hiện nay, tùy vào các frameworks, thư viện hay quan điểm của mỗi người. Chúng ta sẽ có rất nhiều bộ breakpoints khác nhau. Tuy nhiên, để đơn giản hóa. Mình thường sử dụng breakspoints của Bootstrap v4. Như các bạn cũng biết, Bootstrap là một framework phổ biến nhất thế giới và quan trọng hơn, nó cũng được thiết kế theo hướng Mobile First.

Theo như Bootstrap, chúng ta có các cột mốc cần lưu ý: 576px, 768px, 992px và 1200px. Đây chỉ là các mốc cơ bản, ở các dự án thực tế. Những con số này có thể thay đổi và tăng nhiều hơn.