Thiết kế web di động 10 lời khuyên để sử dụng tốt hơn

Trình duyệt web di động dự kiến sẽ biến thành nền tảng Internet lớn tiếp theo. Giờ đây có thể dễ dàng duyệt mạng từ hầu hết mọi nơi sử dụng các thiết bị di động vừa vặn trong tay vì công nghệ. Việc thiếu khả năng sử dụng tốt trong thiết kế web di động khiến việc duyệt web của bạn trở nên khó khăn trên các trang web di động phổ biến khác nhau. Thiết kế cho thiết bị di động cần đơn giản hơn trang web tiêu chuẩn của nó và dựa trên nhiệm vụ nhiều hơn để hoàn thành công việc vì người dùng tìm kiếm thứ gì đó cụ thể và khẩn cấp.

Bạn nên tính đến cách sử dụng tối thiểu không gian trống tối thiểu cho các nội dung chính của bạn và vẫn thú vị cho người dùng di động. Tránh hình ảnh lớn và hoạt hình flash vì nó sẽ làm chậm trang web của bạn. Hãy nhớ rằng chức năng quan trọng hơn phong cách cho các trang web di động. Nếu trang web của bạn không được mã hóa và thiết kế đúng cách, nó có thể trông tốt hơn trên một điện thoại, tệ nhất trên điện thoại khác hoặc tệ hơn, hoàn toàn không hiển thị. Kiểm tra, xác thực và kiểm tra xem nó có tương thích với tất cả các thiết bị di động không.

Để hỗ trợ bạn trong việc tạo trang web có thể truy cập không chỉ trên máy tính để bàn hoặc máy tính xách tay mà cả thiết bị di động, đây là một số điều cần xem xét trên thiết kế web di động với hình ảnh mẫu cùng với liên kết trực tiếp của phiên bản trang web di động.

1. Quyết định độ phân giải màn hình

Thế giới di động chứa một biến thể phong phú của các cân nhắc thiết kế từ các kích thước và độ phân giải màn hình khác nhau đến nhiều hình dạng khác nhau. Nhằm mục đích đạt được sự cân bằng giữa chiều rộng màn hình đủ và kích thước đối tượng. Tìm hiểu thông số kỹ thuật của các thiết bị di động hiện tại và sử dụng phán đoán tốt nhất của bạn. Điều khó khăn đối với các nhà phát triển di động là cách để có được một màn hình hiển thị phù hợp trên một loạt các kích thước màn hình mà không phải tạo lại các trang cho các nền tảng khác nhau.

Dưới đây là danh sách các độ phân giải web phổ biến trên thiết bị di động kể từ tháng 2 năm 2011 được trình bày bởi Uxbooth.com với bài viết được xuất bản của họ, Cân nhắc cho thiết kế web di động (Phần 2): Kích thước, của David Leggett. Tác giả giải thích một vài điểm về kích thước hiển thị và giải pháp cho thiết kế bố trí.

2. Chia các trang web thành các phần nhỏ

Các đoạn văn bản dài có thể khó đọc vì vậy việc đặt chúng trên một số trang sẽ hạn chế việc cuộn theo một hướng. Loại bỏ nội dung ưu tiên thấp. Dán vào một cột văn bản duy nhất để không bị cuộn ngang.

Đối với ví dụ dưới đây, phiên bản trang web di động của CBS News chỉ hiển thị phần tin tức chính và chia các bài báo thành các phần nhỏ. Trong khi Treehugger tự giới thiệu các bài viết gần đây và các tweet mới nhất của họ với một số tính năng của trang web đầy đủ. Cả hai trang đều có người dùng nhấp vào liên kết văn bản để xem phần còn lại của bài viết.

Tin tức CBS

Người trồng cây

3. Đơn giản hóa thiết kế

Đơn giản tương đương với khả năng sử dụng. Hãy để họ di chuyển xung quanh trang web mà không gặp khó khăn. Tránh bao gồm các bảng, khung và định dạng khác. Nếu bạn sử dụng phần đệm, hãy nhớ giữ nó ở mức tối thiểu tuyệt đối ít hơn nhiều so với mức bạn sử dụng cho một trang web bình thường. So với máy tính để bàn, bạn càng nhấp vào liên kết trên các trang web di động, bạn càng phải chờ đợi vì thời gian tải. Cùng với đó, bạn cần phải loại bỏ và đơn giản hóa trang web của mình với sự cân bằng giữa nội dung và điều hướng.

Ví dụ của chúng tôi, trang web phiên bản di động của danh sách Best Buy chỉ liệt kê các danh mục sản phẩm thiết yếu nhất cắt giảm mức phân cấp cho nội dung. Trong khi trang chủ YouTube dành cho thiết bị di động chỉ hiển thị bốn video nổi bật mới nhất.

Mua tốt nhất

YouTube

4. Tùy chọn để xem trang web đầy đủ

Cung cấp một liên kết cho khách truy cập di động của bạn để quay lại trang web đầy đủ của bạn để người dùng tìm và xem các nội dung và tính năng khác chỉ có thể truy cập vào phiên bản máy tính để bàn của trang web. Người xem của bạn chắc chắn sẽ thực hiện nhiều thao tác cuộn dọc, vì vậy hãy giúp họ với các liên kết 'Quay lại đầu trang' để họ có thể nhảy lên đầu trang.

Ví dụ, Ars Technica có nút liên kết của họ đến trang web tiêu chuẩn được đặt trên tiêu đề. Trong khi Shangri-La có liên kết trang web đầy đủ của họ được đặt ở chân trang.

Ars Technica

Tiểu La

5. Vị trí điều hướng

Nhận biết khán giả của bạn và nhận thức được những gì họ đang tìm kiếm. Tìm hiểu làm thế nào họ sẽ muốn điều hướng trang web của bạn. Định vị menu điều hướng của bạn bên dưới nội dung nếu người dùng di động được nhắm mục tiêu của bạn muốn thấy nội dung thay đổi nhanh chóng. Nội dung và tiêu đề cần được hiển thị trước tiên để không bị cản trở khi xem nội dung trang. Đối với người dùng muốn điều hướng trên một danh mục cụ thể ngay lập tức, hãy đặt điều hướng ở đầu trang. Dưới đây là các mẫu khác nhau của vị trí điều hướng được sử dụng trong thiết kế web di động.

Đ & G

Bộ chính trị

Tử vi hàng ngày

6. Sử dụng liên kết văn bản

Trang web chính của bạn có thể sử dụng các menu bay ra, quay vòng hoặc các thiết bị ưa thích khác, nhưng một trình duyệt di động có thể sẽ không. Xin lưu ý rằng các thành phần trang động và liên kết đồ họa tiêu thụ tài nguyên, vì vậy hãy chọn liên kết văn bản có nhãn tốt.

Một danh sách ngoài

7. Phân biệt giữa các liên kết được chọn

Di chuyển con trỏ xuống sẽ cuộn trang và tô sáng tất cả các liên kết cùng một lúc. Vì vậy, điều quan trọng là phải tư vấn rõ ràng cho người dùng về mục nào đang được tập trung. Điều này có thể được thực hiện bằng cách thay đổi phông chữ và màu nền của các liên kết và nút hoặc chỉ bằng cách thêm một số phần đệm xung quanh các liên kết để làm cho vùng có thể nhấp lớn hơn khoảng 44px x 44px. Geek Squad và Diesel đã sử dụng các phông chữ lớn cho văn bản có thể nhấp.

Đội hình đam mê

Dầu diesel

8. Liên kết cân bằng

Mỗi lần tải xuống tiêu tốn thời gian và tài nguyên hệ thống, những tài nguyên sau này đang bị thiếu hụt, vì vậy hãy cố gắng không buộc khách truy cập trang web phải đào qua vô số trang để truy cập thông tin cần tìm. Cân bằng giữa số lượng liên kết trên mỗi trang và độ sâu của trang web.

Flickr

Twitter

9. Giảm nhập văn bản người dùng

Thật khó để nhập văn bản trong các phiên bản di động của các trang web. Thay thế bằng các nút radio hoặc danh sách thay thế để họ có thể chọn từ những gì họ cần một cách dễ dàng. Hãy nhớ rằng người dùng điện thoại di động không có quyền truy cập vào bàn phím và chuột thông thường. URL càng ngắn thì càng tốt vì gõ đơn giản vào URL dài.

Đối với mẫu của chúng tôi dưới đây, FedEx đã sử dụng danh sách kiểm tra và trình đơn thả xuống. Trong khi Tumblr bắt bạn chọn ngôn ngữ của mình bằng menu thả xuống.

FedEx

Tumblr

10. Không bật hoặc làm mới

Các trình duyệt di động thường không hỗ trợ cửa sổ bật lên. Và nếu họ làm thế, họ sẽ có không gian rất hẹp để tham gia. Tránh xa việc sử dụng chúng để tránh kết quả không thể đoán trước. Ngoài ra, không có các trang làm mới định kỳ để tránh lấp đầy bộ nhớ giới hạn của thiết bị. Hãy để người dùng làm mới nội dung.

Tóm lại

Hãy sáng tạo và áp dụng thiết kế web di động của bạn theo một cách mới. Làm cho nội dung của bạn đủ hấp dẫn và có thể sử dụng. Cung cấp cho người dùng của bạn những gì họ muốn, khi họ muốn. Người dùng không muốn tìm hiểu sâu hơn về trang web chỉ để tìm thấy những gì họ đang tìm kiếm trên web di động.

Bạn có bất kỳ trang web di động ưa thích thực sự truyền cảm hứng cho bạn? Bạn có thể chia sẻ một số mẹo thiết kế web di động của bạn? Hãy cho chúng tôi biết!

Đọc thêm

Thiết kế web đáp ứng (alistapart.com)
Làm cho trang web của bạn thân thiện với thiết bị di động (thinkv vitamin.com)
Trình kiểm tra điện thoại di động W3C (w3.org)
Mô phỏng iPhone