[Series Responsive Web Design] Phần 1: Responsive là gì mà đi đâu cũng nghe?
Chào anh em! Chắc hẳn ai làm web cũng từng nghe sếp hoặc khách hàng giục: "Em ơi, web này có responsive không? Sao mở trên điện thoại chữ bé tí thế này!".
Vậy thì Responsive là cái quái gì mà quan trọng thế? Hôm nay mình sẽ cùng anh em mổ xẻ tường tận khái niệm cơ bản nhất của Web Responsive Design nhé.
1. Responsive thực chất là gì?
Nói một cách sách vở nhưng dễ hiểu: Responsive Web Design là kỹ thuật thiết kế web đáp ứng với nhiều kích cỡ giao diện trên nhiều thiết bị khác nhau. Nghĩa là dù người dùng mở web của bạn bằng con màn hình PC to đùng, laptop, hay điện thoại di động, thì web vẫn hiển thị tương thích
Một trang web chuẩn Responsive phải đảm bảo các yếu tố "3 KHÔNG":
- Không bị vỡ giao diện (phải chạy full screen trên mọi thiết bị).
- Không bị ẩn mất nội dung ở bất kỳ vị trí nào.
- Không bắt người dùng phải zoom lên zoom xuống bằng tay.
2. Tại sao nhà nhà người người đều làm Responsive? (Ưu & Nhược điểm)
Cái gì cũng có hai mặt của nó. Dù là xu hướng hàng đầu hiện nay, anh em cũng cần nắm rõ điểm mạnh và điểm yếu của kỹ thuật này.
Điểm ăn tiền (Ưu điểm):
- Tiết kiệm "đô la" và thời gian: Bạn không cần phải cắm mặt code một bản web riêng cho máy tính, rồi lại code thêm một bản riêng cho điện thoại nữa. Thay đổi giao diện chỉ việc sửa HTML và CSS, server không cần quan tâm.
- SEO cực tốt: Điểm cộng to đùng là mọi thiết bị đều trỏ về một địa chỉ URL duy nhất. Google rất thích điều này!
- Gom bi báo cáo: Theo dõi Google Analytics nhàn hơn hẳn vì dữ liệu người dùng từ điện thoại hay máy tính đều được hợp nhất
Điểm "khoai" (Nhược điểm):
- Tốn công não: Xây dựng bố cục cho ti tỉ kích thước màn hình khác nhau trên thị trường chắc chắn sẽ tốn nhiều công sức và thời gian hơn làm web tĩnh bình thường
- Nỗi ám ảnh mang tên "Menu": Nếu thanh navigation bar trên desktop của bạn quá đồ sộ, việc nhét nó cho gọn gàng vào phiên bản mobile sẽ cực kỳ gian nan và dễ bị rối
- Rủi ro mất thông tin: Đôi khi vì màn hình nhỏ, chúng ta phải nén hình ảnh hoặc lược bớt dữ liệu, dẫn đến việc thông điệp truyền tải không còn trọn vẹn
3. Câu thần chú "Nhập môn": Thẻ Meta Viewport
Để hô biến một giao diện thành Responsive, bước đầu tiên và cơ bản nhất là khai báo meta viewport. Thẻ này giúp trình duyệt biết nó phải hiển thị tương ứng với kích thước màn hình của thiết bị đó.
Anh em chỉ cần ném đoạn code này vào cặp thẻ <head> trong file HTML:
<meta name="viewport" content="width=device-width, initial-scale=1">
Giải ngố đoạn code trên: Nó báo cho trình duyệt hiển thị cố định dựa vào chiều rộng thực tế của thiết bị (width=device-width) và khóa mức phóng to ban đầu ở giá trị 1 (initial-scale=1) để người dùng không thể zoom lung tung. Đây là thẻ "must-have" cho mọi dự án.
All rights reserved
