Ảnh hưởng từ di động đến làm web

Ngày nay, không chỉ trên thế giới mà cả thị trường trong nước các thiết bị di động trở thành một thành phần không thể thiếu đối với đại đa số người dùng, khi mà các smartphone ngày càng trở nên phổ biến. Nếu cty thiết kế web cho bạn không hỗ trợ thiết bị di động, một thiệt thòi lớn bạn sẽ mất khá nhiều khách hàng tiềm năng.

Việc các nhà mạng nâng cấp các chuẩn 3G ngày càng nhanh và trong tương lai gần chuẩn 4G sẽ được phổ biến, với sự tiện dụng là có thể đọc nội dung từ bất kỳ đâu, không cần khởi động pc rườm rà và chờ đợi. Người dùng đã và đang thay đổi xu hướng duyệt web của mình nhanh chóng mặt.

Trang web giờ không còn đơn thuần là chỉ để duyệt, bạn cần thiết kế web di động ngay hôm nay để đi trước đối thủ của chính bạn trong tương lai. Là điểm khởi đầu tốt để tạo sự thích thú cho người dùng và chính là khách hàng của bạn. Sự phát triển nhanh chóng của các công nghệ web cũng là điều khiến cho các trang web ngày càng trở nên linh hoạt hơn.

Để có được trang web trên thiết bị di động, thông thường có 2 phương án để lựa chọn, phương án thứ nhất là xây dựng ứng dụng riêng cho trang web. Đối với phương án này chi phí xây dựng trang web cao hơn và thường các công ty lớn sẽ làm điều này. Phương án thứ hai là thiết kế web đáp ứng ( Responsive Webdesign ). Trang web tự động sẽ co kích thước lại và ẩn đi một số thành phần thừa cho trang web đơn giản hơn và dễ sử dụng hơn trên thiết bị di động.

Bài viết này sẽ liệt kê một số việc cần làm với trang web sử dụng công nghệ thiết kế web responsive. Bạn có thể có thêm kiến thức để trải nghiệm cho các mẫu thiết kế trang web của mình.

1. Tâm điểm fluid layout



Việc phân mảnh trên thiết bị Android, và nhiều kích thước màn hình khác nhau với số điểm ảnh trên màn hình của các thiết bị di động khác nhau. Như vậy nếu thiết kế web trên thiết bị có độ rộng khoảng 960px có thể sẽ không đẹp. Và giải pháp trong trường hợp này là mẫu thiet ke web của bạn nên định dạng chiều rộng theo % hoặc theo đơn vị ems. Sử dụng một container với độ rộng 100% để bao trang web rồi bổ dữ liệu lên trên. Như vậy các độ rộng của các collum bên trong bạn cũng có thể điều chỉnh mà không ảnh hưởng bố cục tổng thể.

2. Chuyển hướng theo thiết bị.



Trang web cho từng thiết bị sẽ tự động chuyển hướng sang giao diện người dùng di động mà không cần thêm thao tác nào. Đây là điều nên làm cho trang web của bạn.

3. Hình ảnh nhỏ gọn tối ưu

Tự 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 hình ảnh trên trang web bằng CSS. Bạn có thể tự resize hình ảnh theo từng phiên bản mobile vì điều đó cần thiết cho tốc độ tải trang. Cũng có một giải pháp là dùng kích thước % cố định cho ảnh với việc sử dụng thẻ max-width hoặc max-height trong CSS. Thông thường 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.

4. Bố cục mạch lạc rõ ràng.

Bố cục đơn giản cho trang web sẽ giúp việc hiển thị trên các thiết bị di động dễ dàng hơn là cầu kỳ phức tạp. Khi đó làm cho người dùng rối mắt hơn khi duyệt trang web của bạn.

5. Nội dung là "Vua"

Nội dung luôn là điều mà các trang web cần làm, việc chuẩn hóa nội dung là điều nên làm ngay hôm nay để có thể khi trang web thay đổi giao diện, việc trật tự bố cục nội dung vẫn không bị thay đổi nhiều hoặc quá nhiều thứ phải thay đổi cho nội dung của bạn.

6. Hỗ trợ màn hình cảm ứng

Đa phần các trang web đều hỗ trợ màn hình cảm ứng điện trở hoặc điện dung, việc thao tác trên màn hình cảm ứng có thể gây cản trở họ rất nhiều trong quá trình thao tác. Nếu một button quá nhỏ, hãy làm cho nó lớn lên và để ý các hiệu ứng javascript thừa và không hỗ trợ cảm ứng.

7. Âm thanh và video



Việc "nói không với flash" là điều nên làm, flash tuy hỗ trợ nhiều hiệu ứng và đẹp mắt thì sự nặng nền, hao tổn tài nguyên và đặc biệt là ngốn pin trên các thiết bị di động là điều mà Apple đã không làm việc với Flash. Bạn có thể sử dụng các hiệu ứng HTML5 đang dần trở nên phổ biến hơn.

8. Điểm nhấn thương hiệu

Ngay khi bạn muốn làm web cao cấp và 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. Để tạo điểm nhấn thương hiệu trong một trang web không hề đơn giản và còn phải hiểu về thương hiệu bạn đang làm. Một trong những yếu tố quan trọng và thành công nhất của một mẫu thiet ke web thành công là thương hiệu.

Như bạn đã biết, 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 đó là điểm để bạn bắt đầu cho một thiết kế đẹp và có điểm nhấn thương hiệu. Trong thiết kế web, cần đảm bảo hai yếu tố màu sắc và hình ảnh logo phải có. Cần thay đổi lại vị trí của logo khi người dùng duyệt trang web trên thiết bị di động là điều bạn nên làm.

9. Đổi kiểu menu

Chắc chắn trang web trên mobile đa phần bạn phải đổi kiểu hiển thị menu nhỏ gọn. Vì nó có thể gây cản trở và người dùng lại phải phóng to menu của bạn ra để touch vào menu là điểu bất lợi cho trang web của bạn.

Hôm nay chúng ta đã biết thêm kha khá thông tin về thiết kế web trên thiết bị di động, bạn có thể ứng dụng ngay cho mẫu thiết kế website. Hãy đừng quên để lại lời nhắn của bạn và chúng ta cùng nhau thảo luận nhé.