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. 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 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.
Vì vậy, trong bài viết này chúng tôi sẽ cung cấp một vài tip để website của bạn hiển thị tốt trên các thiết bị di động.
1. Sử dụng fluid 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 % 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. Tự động Redirect
Đây là một lựa chọn tốt bởi vì bạn sẽ tạo ra một trải nghiệm hoàn toàn mới cho khách hàng. Dĩ nhiên là giao diện mobile sẽ hoàn toàn khác so với giao diện truyền thống trên desktop.
Vì vậy, trong bài viết này chúng tôi sẽ cung cấp một vài tip để website của bạn hiển thị tốt trên các thiết bị di động.
1. Sử dụng fluid 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 % 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. Tự động Redirect
Đây là một lựa chọn tốt bởi vì bạn sẽ tạo ra một trải nghiệm hoàn toàn mới cho khách hàng. Dĩ nhiên là giao diện mobile sẽ hoàn toàn khác so với giao diện truyền thống trên desktop.
 |
| Thêm chú thích |
3.Tối ưu hình ả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.
4. Layout đơn giản
Bố trí web trên di động là một thách thức lớn do sự biến đổi về kích thước, hình dạng và độ phân giải cho tất cả các thiết bị. Di chuyển cũng là một trở ngại, đặc biệt là với những người có màn hình nhỏ. Vì vậy, để giảm bớt rắc rối cho người dùng, hãy thiết kế một layout đơn giản nhất có thể.
5.Tập trung vào nội dung
“Content is king” Nội dung website luôn quan trọng. Bạn phải chắc chắn rằng nội dung đó có thể đọc được và kích thước vừa phải. Bạn cũng có thể ẩn đi một số đoạn văn bản mà bạn nghĩ gây khó khăn cho việc đọc. Đặt nội dung quan trọng ở nơi mà người truy cập dễ thấy nhất.
6. Thiết kế cho màn hình cảm ứng
Hầu hết các thiết bị di động hiện nay đều sở hữu màn hình cảm ứng(điện trở, điện dung) nên việc thao tác như chạm vào màn hình có phần khó khăn. Nếu bạn thiết kế các button nhỏ so với bàn tay của người sử dụng, hãy thiết kế lại (kích thước tối thiểu là 30px) và tạo ra những khoảng cách vừa đủ giữa button và nội dung khác để người sử dụng dễ dàng thao tác.
7. Âm thanh và video
Thiết bị di động là môi trường lý tưởng tuyệt vời cho việc giải trí. Tuy nhiên, vẫn có vài lưu ý nhỏ sau đây: Bạn nên sử dụng các định dạng phổ biến hỗ trợ trên thiết bị di động, hạn chế Flash, hãy sử dụng HTML5 nếu có thể. Ngoài ra, phải tối ưu các file để giúp website tải nhanh hơn, tiết kiệm băng thông.
8.Làm nổi bật thương hiệu
Ngay khi chúng ta muốn thiết kế một website thật ấn tượng nhằm thể hiện được những kiến thức và kỹ năng thiết kế của mình, một trong những yếu tố quan trọng nhất của bất kỳ một thiết kế là xây dựng thương hiệu. Đừng bao giờ quên nó.
Hai yếu tố quan trọng trong tạo nên một thương hiệu rõ ràng là Logo và màu sắc đại diện thương hiệu. Trong thiết kế web, cần đảm bảo hai yếu tố này được thể hiện. Vị trí logo có thể khác nhau tùy theo các phiên bản màn hình và thậm chí nó có thể được đặt trong trang chính. Việc làm cho hệ thống màu trở nên có ý nghĩa, gây ấn tượng cho người dùng là dùng nó xuyên xuất trong các trang còn lại.
9. Thu gọn menu
Do thiết bị di động có không gian giới hạn nên việc bố trí menu cũng phải cân nhắc. Hãy thu gọn nó. Việc làm này có thể giúp bạn đặt nhiều thông tin lớn trong menu mà không chiếm diện tích của những phần khác trong website.
Top
No comments: