Mặc dù số lượng trang web không có tính năng tối ưu hóa cho thiết bị di động đang giảm dần, nhưng vẫn còn một số trang web chỉ được thiết kế cho máy tính để bàn. Rất tiếc, dịch vụ web ‘người vận động’ trước đây của Google đã ngừng hoạt động. Người kế nhiệm tinh thần của dịch vụ là Google Weblight, được thiết kế để tối ưu hóa cho các kết nối chậm thay vì sửa đổi các trang web để xem trên thiết bị di động. Ngoài dịch vụ của Google, có một số phương pháp và công cụ cần được xem xét khi phát triển một trang web có lưu ý đến thiết bị di động.
Các bước
Phần 1/2: Thử nghiệm với Google Weblight
Bước 1. Phân tích cách hoạt động của Weblight
Weblight là một thuật toán do Google tạo ra để cung cấp cho người dùng tốc độ tải trang nhanh hơn và nhẹ hơn khi ở trong điều kiện mạng kém. Điều này có nghĩa là Weblight không có giao diện người dùng và hoạt động trên phần phụ trợ. Các trang được loại bỏ các yếu tố phức tạp hơn, cung cấp trải nghiệm gọn nhẹ, đơn giản hơn là một trang được tối ưu hóa rõ ràng cho nền tảng di động.
Bước 2. Kiểm tra các thay đổi của trang web với Weblight
Trên thiết bị di động của bạn, chỉ cần nối URL trang web đầy đủ của bạn vào cuối địa chỉ weblight (ví dụ: nếu trang web của bạn là "mywebsite.com" thì bạn nhập https://googleweblight.com/?lite_url=https://mywebsite.com). Trang sẽ tải một phiên bản đơn giản nhưng đầy đủ chức năng của chính nó. Với các yếu tố bị loại bỏ, một số trang web có thể xuất hiện tốt hơn nhiều trên màn hình thiết bị di động.
Bước 3. Nhận ra những hạn chế
Hãy nhớ rằng đây không phải là một công cụ chuyển đổi rõ ràng được thiết kế để tương tác với người dùng. Mặc dù việc nhập trang web theo cách thủ công có thể được sử dụng một cách khó khăn, nhưng Weblight được thiết kế cho tốc độ chứ không phải khả năng sử dụng.
Phần 2/2: Thiết kế tương thích với thiết bị di động
Bước 1. Lưu ý các giới hạn của thiết bị di động
Các thiết bị di động chia sẻ một số khía cạnh khiến chúng khác biệt với các thiết bị máy tính để bàn. Những tính năng cốt lõi này nên được cân nhắc chính khi tạo một trang web để tiêu dùng trên thiết bị di động.
- Màn hình nhỏ và độ thẳng đứng: Mặc dù độ phân giải màn hình trên thiết bị di động không ngừng được cải thiện, nhưng kích thước và yếu tố hình thức vẫn là mối quan tâm đối với thiết kế trang web. Thiết kế trang web thành một bố cục cột duy nhất là tốt nhất cho điện thoại (máy tính bảng thường có thể sử dụng các trang web trên máy tính để bàn mà không gặp quá nhiều vấn đề).
- Giao diện cảm ứng: Các phần tử trang nên được đặt với kích thước bằng ngón tay. Các phần tử sử dụng thao tác di chuột phải được thu nhỏ hoặc thiết kế lại cho cảm ứng (ví dụ: menu thả xuống).
- Tốc độ dữ liệu: Một trong những lợi thế lớn của thiết bị di động là sử dụng ngoài phạm vi wifi, nhưng kết nối dữ liệu thường chậm hơn và kém tin cậy hơn. Giao diện người dùng (UI) phải đơn giản và nội dung phải hiển thị và có thể truy cập được. Quá nhiều sự lộn xộn sẽ làm giảm thời gian tải và gây khó khăn cho việc điều hướng.
Bước 2. Sử dụng dịch vụ Hệ thống quản lý nội dung (CMS)
Đối với những người đang phát triển với ít tài nguyên hơn, sử dụng dịch vụ CMS như Wordpress hoặc Squarespace là một lựa chọn tuyệt vời cho thiết kế di động thân thiện với người dùng, chi phí thấp. Các chủ đề sử dụng thiết kế web đáp ứng sẽ cung cấp mẫu đơn giản nhất cho trang web dành cho thiết bị di động.
Thiết kế web đáp ứng là một lý thuyết về thiết kế web khuyến khích việc sử dụng các yếu tố thiết kế linh hoạt để cho phép chuyển đổi thiết kế trơn tru và khả năng sử dụng trên các nền tảng
Bước 3. Kiểm tra màn hình thiết bị di động bằng phần mềm máy tính để bàn
Có một số ứng dụng web miễn phí cho phép bạn giả lập thiết bị di động để kiểm tra tính thẩm mỹ và chức năng của trang web. Sử dụng các công cụ này dễ dàng như chọn thiết bị kiểm tra mong muốn, sau đó truy cập trang web mục tiêu để xem trước. Hầu hết sẽ bao gồm các công cụ cho các biến như hướng màn hình, mật độ pixel hoặc thậm chí lựa chọn trình duyệt. Một vài ví dụ phổ biến là:
- Trình mô phỏng chế độ thiết bị Chrome
- mobilephoneemulator.com
- screenfly (một tập hợp con của quirktools)
- mobiletest.me (thành viên trả phí)
