Ngày nay, thiết bị di động trở thành một thành phần không thể thiếu đối với thế giới. Ngay cả trẻ em còn cắp sách đến trường cũng được bố mẹ trang bị cho một chiếc điện thoại di động để tiện liên lạc. Nhưng ngoài những tính năng gọi, nghe thường dùng mobile còn ẩn chứa 1 thế giới rộng lớn bên trong thông qua việc kết nối 3G hoặc GPRS mà chúng ta có thể tiếp xúc được qua con đường lướt web.
Nếu bạn là một người viết ứng dụng website, chắc hẳn bạn không thể không nghĩ đến trường hợp người dùng của mình sử dụng thiết bị di động để lướt website. Bởi vì thiết bị di động ngày càng phổ biến rộng rãi, tôi nghĩ bạn sẽ không thể bỏ qua nguồn traffic lớn và còn có khả năng lớn hơn nữa này rồi đúng không.
Phiên bản mobile sẽ có các đặc trưng sau:
1, Cho phép thay đổi độ rộng layout
Do đặc thù của thiết bị di động là số điểm ảnh trên màn hình của các thiết bị di động không đồng nhất ở các dòng di động. Điều đó có nghĩa là khi bạn thiết kế giao diện cho mobile có độ rộng 960pixel có thể sẽ không thể hiển thị đẹp mắt ở một thiết bị có độ rộng khác.
Giải pháp trong trường hợp này là bạn nên định dạng chiều rộng theo “phần trăm(%)” hoặc theo đơn vị ems. Bạn có thể thiết kế khung chứa dữ liệu chính có giá trị 100% rồi bổ dữ liệu lên trên. làm như vậy, các thiết kế bên trong của bạn sẽ dễ dàng thay đổi hơn và không ảnh hưởng nhiều. Bạn cũng có thể thử nghiệm nhiều giá trị trước khi chọn lấy một layout ổn định nhất.
2, Ẩn các nội dung không cần thiết
Phiên bản mobile có thể sẽ cần một số lượng dữ liệu ít hơn phiên bản cho website, ví dụ như bạn có thể dẹp các banner quảng cáo đi chẳng hạn. Do chúng ta không thay đổi nội dung website mà chỉ thay đổi file CSS nên chúng ta cũng sử dụng nó để ẩn đi những thành phần không cần thiết.
Trong trường hợp này, thuộc tính display:none của CSS sẽ phát huy tác dụng.
Bạn sẽ quay lại theo dõi phiên bản trên mobile và đưa ra các dữ liệu nào cần thiết, dữ liệu nào không cần thiết. Quan trọng là đem nội dung của bạn đến cho người dùng, do đó hãy đảm bảo nội dung là cái người dùng có thể dễ dàng tìm thấy nhất.
3, Tối ưu hóa ảnh
Tự động thay đổi kích thước ảnh để không làm vỡ layout là một vấn đề không nhỏ khi canh chỉnh bằng CSS cho các phiên bản mobile. Bạn cần định dạng phù hợp với từng loại mobile bởi vì hình ảnh không thể tự động resize. Kích thước ảnh an toàn khi sử dụng cho phiên bản mobile có thể là từ 200pixel đến 300pixel cho chiều rộng. Chiều cao có thể không cần giới hạn nhưng bạn phải đảm bảo không làm vỡ ảnh.
Nếu bạn sử dụng Google Analytics, bạn có thể kiểm tra các report trong Google Analytics xem người dùng mobile của bạn thường sử dụng loại thiết bị màn hình nào, độ phân giải ra sao. Dựa vào các số liệu này bạn có thể thay đổi kích thước cho phù hợp.
Ví dụ một mẫu Mobile website mà bên Eteam đã thực hiện: http://conhantaosanvuon.com.vn/
Để có phiên bản dành cho Mobile ưng ý, quí khách vui long liên hệ:
Ms Hà - 0976 149 535, hantn@eteam.vn
CÔNG TY TRUYỀN THÔNG ETEAM
Địa chỉ: 31A/203 Kim Ngưu, Hai Bà Trưng, Hà Nội
ĐC 2: Số 1 ngõ 68 Ngụy Như Kon Tum, Thanh Xuân Trung, Hà Nội
Website: Eteam.vn