Trang chủ » Nghiên cứu về Mobile Web Design

Nghiên cứu về Mobile Web Design

(Ngày đăng: 27-11-2015 11:33:20)
Xu hướng Mobile Web Design. Theo các nghiên cứu mới nhất thì lượng người dùng mobile đang có xu hướng tăng mạnh. Tại Mỹ có tới gần 75% người dùng điện thoại di động sử dụng thiết bị của họ để vào mạng. Nhu cầu lướt web bằng các thiết bị di động là vô cùng lớn và nếu website của bạn không hỗ trợ cho di động thì điều gì xảy ra? Tất nhiên là bạn sẽ mất đi một lượng lớn khách truy cập và có cơ hội trở thành khách mua hàng của bạn.

Bài viết này sẽ phân tích và giúp các bạn hướng tới việc tối ưu hóa website thân thiện hơn với các thiết bị di động. Giúp cho website của bạn tăng hiệu suất, tăng tỉ lệ chuyển đổi và giúp SEO tốt hơn.

Chuyển hướng giao diện Desktop sang Mobile

Điều này có nghĩa là thiết kế website của bạn phải tích hợp giao diện cho máy tính và cả điện thoại. Trong quá trình chuyển hướng từ máy tính sang điện thoại di động sẽ có một số khái niệm sau:

    Responsive Web Design.
    Dynamic Serving.
    Parallel Mobile Site.

1. Sử dụng thiết kế Responsive Web Design

Responsive Web Design (tạm dịch thiết kế thích nghi) là một khái niệm khuyến cáo những người thiết kế và người phát triển phải đáp ứng và thích nghi được với môi trường (hay thiết bị) của người dùng về kích thước màn hình, platform, trạng thái xoay hay đứng

Ưu điểm của responsive web design:

Khả năng tương thích với các thiết bị cực cao và hỗ trợ trên nhiều trình duyệt có độ phân giải màn hình khác nhau. Responsive sẽ có đủ khả năng để co dãn theo từng kích cỡ màn hình một cách linh hoạt.

Responsive web design sẽ không phải chuyển hướng giao diện người dùng, thống nhất trên 1 URL hiển thị được cả trên máy tính và di động.

Nhược điểm của Responsive Web Design:

Do thiết kế web responsive của nó rất linh hoạt tự co dãn theo từng kích cỡ màn hình mà không phải chuyển sang giao diện Mobile khi các thiết bị di động truy suất tới sẽ rất chậm do phải load toàn bộ website mà không được thanh lọc lại code và hình ảnh. Ngoài việc nó ảnh hưởng đến tốc độ load website còn ảnh hưởng tới cước phí Mobile Data của người dùng rất nhiều.

2. Sử dụng thiết kế Parallel Mobile Site

Parallel Mobile Site là giao diện sử dụng 2 url để hiển thị Desktop và Mobile.

Ưu điểm của Parallel Mobile Site:

    Sẽ có 2url tách biệt hiển thị cho máy tính và di động
    Mang lại trải nghiệm tốt hơn cho người sử dụng
    Khắc phục các nhược điểm trong thiết kế Responsive Web, bằng cách thiết kế giao diện sử dụng ít mã nguồn, ít hình ảnh, làm giảm truy vấn, góp phần tăng tốc độ load nhanh hơn

Nhược điểm của Parallel Mobile Site:

Google không thích việc điều hướng website qua 2 giao diện

Để giúp thuật toán của Google hiểu cấu hình website của bạn, Google khuyến cáo sử dụng các chú thích sau đây

Dành cho máy tính

Trên giao diện máy tính thêm thẻ alternate trỏ đến url dành cho thiết bị di động tương ứng. Điều này giúp Googlebot phát hiện ra vị trí của điện thoại di động trang web của bạn.

Việc sử dụng đoạn thẻ code trên bạn chỉ cần dùng 1 cái là được. Bạn dùng code 1 trên giao diện cho máy tính thì không cần đoạn code 2 trên giao diện cho mobile và ngược lại.
3. Sử dụng thiết kế Dynamic Serving

Dynamic Serving là chuyển hướng sử dụng user-agent để chuyển đổi từ giao diện máy tính sang giao diện di động, chuyển hướng này chỉ sử dụng 1 url duy nhất

Ưu điểm của Dynamic Serving

Không cần khai báo rel="canonical" trong giao diện Mobile và chỉ cần sử dụng duy nhất 1 URL
Vì sử dụng 2 giao diện nên hoàn toàn có đầy đủ tính năng như chuyển hướng Parallel Mobile Site đó là sử dụng ít mã nguồn, ít hình ảnh, làm giảm truy vấn, góp phần tăng tốc độ load nhanh hơn.

Nhược điểm của Dynamic Serving:

Loại chuyển hướng này sử dụng user-agent để chuyển hướng người dùng từ giao diện máy tính sang giao diện di động. Do đó, user-agent phải được khai báo đầy đủ, việc khai báo thiếu user-agent góp phần làm việc chuyển hướng ở một số thiết bị không thành công

4. Các loại Googlebot-Mobile User-Agents được Google sử dụng

5. Những thứ cần tối ưu cho Mobile Web Design

    Không chặn googlebot từ phiên bản di động trong tập tin robots.txt
    Tạo riêng tập tin XML-Sitemap dành cho phiên bản di động.
    Trên giao diện máy tính thêm vào thẻ rel=”alternate”.
    Trên giao diện di động thêm vào thẻ rel=”canonical”.
    Thẻ tiêu đề tags (title tags) chỉ nên có khoảng 40 đến 60 ký tự.
    Thẻ mô tả (meta descriptions) chỉ nên có khoảng 90 ký tự.
    Tối ưu nội dung trên giao diện di động dành cho từ khóa trên thiết bị di động.
    Sử dụng công nghệ nén hình ảnh, tham khảo thêm cách tăng tốc máy chủ
    Không sử dụng Flash trên giao diện di động

Trên đây là những phân tích nhằm giúp các bạn hiểu rõ hơn về Mobile Web Design. Hi vọng sẽ giúp ích cho các bạn trong việc tối ưu website thân thiện cho di động.

Ngoài ra các bạn có thể tham khảo thêm các tài liệu về Mobile Web Design tại các đường link sau:

Nguồn:
Tag: