Khái niệm cơ bản về Thiết kế web thân thiện với thiết bị di động

Khi thiết kế hoặc thiết kế lại một trang web, bạn cũng phải cân nhắc việc tạo các phiên bản thay thế, di động thân thiện của trang web. Các phiên bản này không được nhầm lẫn với các ứng dụng gốc sống trên điện thoại thông minh của bạn (những thiết bị bạn tải xuống từ các cửa hàng ứng dụng). Điện thoại thông minh đều có trình duyệt web và có thể hiển thị trang web của bạn với mức độ thành công khác nhau. Về cơ bản, bạn phải lập danh sách các thiết bị bạn sẽ hỗ trợ và thiết kế các trang web thay thế để đáp ứng các mục tiêu đa dạng này. Khác với điều đó, ràng buộc rõ ràng nhất mà họ chia sẻ là kích thước màn hình nhỏ của cửa sổ trình duyệt điện thoại.

Bạn có thể thêm mã vào trang web của bạn để phát hiện thiết bị của người dùng và chuyển hướng chúng tới phiên bản phù hợp của trang web của bạn. Với rất nhiều thiết bị để lựa chọn, các nhà phát triển thường tạo ra cấu hình thiết bị và xếp nhiều thiết bị vào một trong một số ít các hồ sơ này. Các cấu hình thường được điều khiển bởi kích thước màn hình:

• * Kính hiển vi: 132 pixel hoặc nhỏ hơn

• * Nhỏ: 240 pixel hoặc nhỏ hơn

• Nhỏ: 320 hoặc ít hơn rộng Với những khoảng không màn hình nhỏ này để mang lại trải nghiệm web của bạn, bạn không cần thiết kế thay thế.

Nhìn vào điểm ảnh cho các trang web trên thiết bị di động

Tính năng độc đáo của thiết bị là họ không có pixel 72 điểm ảnh nữa. Nhiều thiết bị này có độ phân giải cao hơn. Đây là nơi mọi thứ trở nên khôn lanh, bởi vì đối với các trang web và CSS, bạn vẫn phải xác định các phần tử có pixel rộng 1/72 inch. Đo lường này không liên quan gì đến mật độ điểm ảnh của thiết bị, do đó, điểm ảnh bây giờ là một đơn vị đo tương đối.

Tuy nhiên, nếu bạn thiết lập một khuôn mẫu Photoshop để mô phỏng không gian màn hình iPhone, bạn sẽ sử dụng 640 x 960 ở 72 dpi. Kích thước màn hình này cung cấp cho bạn một màn hình hiển thị "võng mạc" phù hợp với iPhone. Nhưng đừng bị cám dỗ để ép rất nhiều văn bản và hình ảnh vào không gian này. Đây rõ ràng là một kích thước vải lớn hơn nhiều so với điện thoại. Để có được một cảm giác như thế nào thiết kế của bạn sẽ thực sự hiển thị trên điện thoại, phóng to tài liệu Photoshop của bạn đến 50 phần trăm.

Đơn giản hóa điều hướng của một trang web di động

Hãy nhớ rằng, không có con chuột để di chuyển. Nhiều người dùng di động có bàn phím hoặc màn hình cảm ứng. Không có nhiều không gian để hiển thị tất cả các yếu tố điều hướng mà bạn thường có thể có trong trang chính. Vì lý do này, phiên bản dành cho điện thoại di động của các trang web thường có lược đồ điều hướng bị tước bỏ.

Thông thường, các trang web bị giảm bớt này làm bạn bực bội đối với những người dùng đang di chuyển và cần truy cập vào một khu vực nhất định của trang web bình thường.Đó là lý do tại sao thực tiễn tốt nhất là bao gồm liên kết để xem trang web chính.

Tín dụng: © Cable News Network. Turner Broadcasting System, Inc.

Giảm kích thước tệp

Khi họ không sử dụng Wi-Fi để duyệt web, thiết bị di động sẽ chụp nhiều megabyte trong kế hoạch dữ liệu của người dùng, có thể có giới hạn hàng tháng. Do đó, càng có nhiều bạn có thể giảm kích thước và kích thước của giao diện và các thành phần nội dung, không chỉ trang web của bạn sẽ tải xuống nhanh hơn trên các mạng di động, mà còn sẽ giảm nhẹ ngân sách phân bổ chuyển dữ liệu hàng tháng của người dùng. Bạn cũng có thể xóa mã, nhận xét và thẻ không bắt buộc để đẩy nhanh tốc độ.

Định hướng ngang và dọc

Duyệt qua điện thoại di động là môi trường lỏng. Giữa nhiều mật độ pixel và khả năng xem các trang web theo cả phương hướng ngang và dọc, cách tốt nhất để tiếp cận trang web thân thiện với thiết bị di động của bạn với bố cục linh hoạt, trái ngược với cách bố trí chiều rộng cố định. Bằng cách không xác định chiều rộng của trang web và để nó lấp đầy không gian có sẵn một cách tự nhiên, bạn sẽ thích ứng với trang web của mình hiệu quả hơn với môi trường xem trên điện thoại di động. Ngoài ra, sử dụng màu sắc CSS và đồ họa lát, thay vì các hình ảnh đơn pixel, để lấp đầy các thành phần của bạn.

Sử dụng bố cục một cột trên điện thoại di động

Mặc dù điện thoại thông minh lớn hơn người tiền nhiệm, nhưng chúng vẫn không đủ lớn để hỗ trợ hiệu quả hơn bố cục một cột khi hiển thị nội dung. Đây là một thay đổi thiết kế đáng kể để thực hiện cho thiết kế web chính của bạn, nhưng cũng đáng để các nỗ lực về việc tăng khả năng sử dụng. Một bố cục nội dung đơn cột sử dụng toàn bộ chiều rộng của màn hình (ở bất kỳ hướng nào) tránh sự cần thiết của người dùng quay vòng và phóng to. Hãy để

nội dung mở rộng trang. Người dùng được chấp nhận nhiều hơn của di chuyển xuống trang hơn là họ phải di chuyển sang một bên và phóng to. Trang web Crew Quần áo Công ty điện thoại di động là một ví dụ tuyệt vời của một trang web thương mại điện tử thương mại điện tử phức tạp mà sử dụng một điều hướng đơn giản hệ thống và một bố trí đơn cột để đóng gói trong rất nhiều chức năng. Ngoài ra, họ cũng cung cấp một liên kết rõ ràng để xem các trang web chính trong trường hợp người dùng cần chức năng bổ sung đã được tước ra khỏi phiên bản di động.

Tín dụng: © Crew Clothing Co Ltd.