⚡10-Thiết kế website responsive
Last updated
Last updated
Ngày nay với sự phát triển của mạng máy tính và các thiết bị điện tử, việc truy cập và sử dụng ứng dụng web trên các thiết bị điện tử từ smartphone, tablet đến laptop hay PC là điều phổ biến.
Tuy nhiên, để có thể hiển thị tốt dữ liệu cho người dùng trên nhiều thiết bị khác nhau với kích thước màn hình/cửa sổ khác nhau đòi hỏi nhà phát triển ứng dụng phải thiết kế linh hoạt và đáp ứng đầy đủ những yêu cầu này.
Resposive website là một khái niệm trong ngành thiết kế mà theo đó, khi một website có tính responsive, chúng sẽ có khả năng hiển thị tốt trên nhiều loại thiết bị/trình duyệt có kích thước màn hình/cửa sổ khác nhau.
Một website được xem là thiết kế tốt đòi hỏi đáp ứng được các điều kiện dưới đây:
Người dùng có thể đọc rõ văn bản mà không cần phóng to màn hình
Giao diện web có đủ khoảng trống, đủ không gian để người dùng thực hiện các hành động (ví dụ như nhấn chính xác vào các nút CTA, menu, vv.)
Người dùng không còn phải cuộn ngang màn hình để đọc hết nội dung
Giúp tiết kiệm rất nhiều thời gian và chi phí khi mà bạn không cần phải duy trì từng phiên bản web khác nhau cho điện thoại và máy tính
Responsive Web Design giúp cải thiện SEO (search ranking) cho trang web của bạn khi mà mọi luồng đều chỉ dẫn đến một địa chỉ URL duy nhất thay vì nhiều URL khác nhau.
Responsive Design giúp bạn dễ dàng bảo trì trang web khi mà nó không liên quan gì đến phía server, chỉ việc thay đổi giao diện hoặc bố cục thích hợp với các thiết bị khác nhau.
Responsive hoạt động bằng cách chúng ta sẽ viết CSS để cho trình duyệt hiểu và thực thi nó trên các kích thước trình duyệt nhất định. Chẳng hạn bạn có thể thiết lập một đoạn CSS nào đó chỉ áp dụng cho các trình duyệt có kích thước chiều rộng tối đa là 320px (mobile).
Vậy để áp dụng responsive vào website, bạn cần nắm vững và sử dụng hai yếu tố sau đây:
Viewport là khung hình người dùng nhìn thấy trên thiết bị của họ khi vào một trang web bất kì. Với mỗi thiết khác nhau lại có viewport khác nhau. Nếu trang web cố định kích thước thì trình duyệt sẽ tự động thu nhỏ nội dung khi chuyển từ màn hình máy tính qua smartphone - điều này tạo nên trải nghiệm không tốt cho người dùng.
HTML5 cung cấp phương pháp kiểm soát view thông qua thẻ meta
width=device-width : thiết lập chiều rộng của trang web theo chiều rộng của thiết bị
initial-scale=1.0 : thiết lập mức độ zoom ban đầu khi trang web được load bởi trình duyệt
Nếu làm việc với responsive, chúng ta phải thêm thẻ meta này vào trong cặp thẻ head của trang html.
Media Queries là một kỹ thuật CSS được giới thiệu trong CSS3. Ta sử dụng cú pháp @media để bao gồm một khối các thuộc tính CSS chỉ khi một điều kiện nhất định là đúng. Nói một cách đơn giản là ta sẽ định nghĩa CSS riêng cho một nhóm các thiết bị có kích thước giống nhau.
Mỗi media query có thể bao gồm một media type và nhiều biểu thức đi kèm. Các media types phổ biến bao gồm all , screen , tv , print . Nếu media type không được chỉ định thì media query sẽ mặc định media type là screen .
Các biểu thức logic trong media queries
Có 3 loại toán tử logic khác nhau có thể sử dụng bên trong media queries bao gồm and , not và only.
Toán tử and : Cho phép bổ sung thêm điều kiện vào media queries
Toán tử not : Phủ định truy vấn được xác định
Toán tử only : Chỉ áp dụng cho truy vấn thỏa mãn điều kiện
Danh sách kích thước các thiết bị phổ biến
max-width: 320px (điện thoại di động, hiển thị chiều dọc)
max-width: 480px (điện thoại di động, hiển thị chiều ngang)
max-width: 600px (máy tính bảng, hiển thị chiều dọc)
max-width: 800px (máy tính bảng, hiển thị chiều ngang)
max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)
min-width: 1025px (từ size này trở lên là danh cho desktop thông thường)
Có hai phương pháp phổ biến để kiểm tra website responsive:
Công cụ kiểm tra trực tuyến
Công cụ phát triển trình duyệt web
Mobile-Friendly (https://search.google.com/test/mobile-friendly)
Công cụ này của Google cho phép bạn nhanh chóng kiểm tra website của mình có thân thiện với thiết bị di động hay không. Bạn chỉ việc nhập url website của mình, công cụ này sẽ giúp bạn phân tích và đưa ra những đề xuất để cải thiện tính thân thiện với thiết bị động của website. Công cụ này cũng cho phép nhập các đoạn mã để kiểm tra - rất phù hợp với những lập trình viên trong giai đoạn phát triển website responsive.
Một phương pháp được rất nhiều người sử dụng đó chính là sử dụng công cụ phát triển của chính trình duyệt web. Bạn có thể sử dụng công cụ phát triển này trên hầu hết các trình duyệt như Google Chrome, Opera hay Mozilla Firefox.
Dưới đây là công cụ phát triển của Chrome bởi nó là một trình duyệt vô cùng phổ biến và được nhiều nhà phát triển web yêu thích.
Các bước thực hiện:
Mở website cần kiểm tra
Nhấp chuột phải, chọn Kiểm Tra (Hoặc Inspect). Cửa sổ Chrome Dev Tools sẽ mở.
Trên cửa sổ Dev Tools, chọn Toggle device toolbar. Trình giả lập màn hình sẽ xuất hiện
Sử dụng trình giả lập màn hình này, bạn có thể kiểm tra responsive trên thiết bị, kích thước cụ thể
Với nguyên tắc Mobile Fisrt, chúng ta sẽ thiết kế giao diện từ thiết bị mobile đến các thiết bị có màn hình lớn hơn và nguyên tắc Desktop First ngược lại.
Tùy vào từng trường hợp về nội dung bạn thiết kế để chọn nguyên tắc nào áp dụng phù hợp. Tuy nhiên, với nguyên tắc Mobile Fisrt sẽ giúp website hiển thị nhanh hơn trên các thiết bị có kích thước màn hình bé.
Xác định điểm dừng (breakpoint) chính xác, phù hợp với kích thước thiết bị
Ngoài đơn vị của breakpoint là px, thì các đơn vị đo chiều dài trong website nên là phần trăm. Hay nói đúng hơn là sử dụng đơn vị tương đối.
Nên sử dụng max-width thay vì width để tránh cố định chiều rộng.
Sử dụng display: none cho các thành phần cần ẩn đi ở từng thiết bị mà bạn muốn ẩn. Và display: block ở các thiết bị cần hiển thị ra.
Sử dụng tùy chọn !important nếu cần phải ghi đè CSS
