Tổng quan về Mobile Web Design

Hiện nay việc lướt web trên các thiết bị di động đã trở nên rất phổ biến. Có rất nhiều thiết bị di động như điện thoại, máy tính bảng sử dụng hệ điều hành Android, iOS, Symbian, BlackBerry để truy cập vào website. Theo nghiên cứu tại Mỹ thì có gần 75% người dùng điện thoại di động ở Mỹ sử dụng thiết bị của họ để truy cập mạng. Bài viết này hướng đến việc tối ưu hóa website để thân thiện hơn với các thiết bị di động, làm tăng năng suất hoạt động của website, tăng tỷ lệ chuyển đổi và góp phần giúp chiến dịch SEO tốt hơn.

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

Để có thiết bị di động hoạt động tốt trên website không thể thiếu 2 giao diện dành cho máy tính và thiết bị di động. Trong quá trình chuyển hướng từ máy tính sang thiết bị di động có các khái niệm như sau:

  • Responsive Web Design.
  • Dynamic Serving.
  • Parallel Mobile Site.

mobile-web-approaches

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

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 rất cao trên nhiều thiết bị hỗ trợ trình duyệt có độ phân giải màn hình khác nhau. Trên thực tế hiện nay các nhà sản xuất SmartPhone/Tablet liên tục đưa ra các chuẩn màn hình như 3.5’ 4’ 5’ chẳng hạn. Responsive Web đủ khả năng co giãn theo từng loại thiết bị này.
  • Responsive Web không phải chuyển hướng giao diện người dùng, thống nhất chung 1 URL hiển thị trên máy tính và di động.


Demo trên thực tế có: www.manseo.com, www.tinhte.vn, vnexpress.net
Tài liệu về Responsive Design được Google phát hành tại đây.

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:

  • Có 2 url hiển thị dành cho máy tính và thiết bị 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.


Demo về kiểu giao diện này có tại:

– PC: dantri.com.vn, Mobile: m.dantri.com.vn
– PC: thanhnien.com.vn, Mobile: m.thanhnien.com.vn

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:

  • Chỉ sử dụng 1 url duy nhất, không nhất thiết phải khai báo rel=”canonical” trong giao diện Mobile.
  • 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.


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

Đối với điện thoại cơ bản:

SAMSUNG-SGH-E250/1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 UP.Browser/6.2.3.3.c.1.101 (GUI) MMP/2.0 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

DoCoMo/2.0 N905i(c100;TB;W24H16) (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

Đối với điện thoại thông minh:

Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A5376e Safari/8536.25 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)

5. Những tối ưu cần thiết dành 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ủ tại đây.
  • Không sử dụng Flash trên giao diện di động.
  • Mần SEO gợi ý tham khảo các tài liệu liên quan về Mobile Web Design:
  • https://developers.google.com/webmasters/smartphone-sites/
    http://searchengineland.com/author/cindy-krum
    http://moz.com/blog/seo-of-responsive-web-design

Nguyên Nghĩa – Mần SEO

Hãy biết đam mê và mãi mãi khát khao học hỏi.
Loading Facebook Comments ...

4 Comments

  1. Cảm ơn anh 😀 Có nhiều keywords tiếp tục Google để tìm hiểu tiếp. Hehehe.

  2. Vậy kết luận là nên dùng loại nào vậy ạ? Cái nào đơn giản mà tốt nhất cho SEO vậy ạ? Có fải là Responsive Web Design.

    • Mọi người đánh giá Responsive Web Design là tốt nhất, mình cũng nghĩ vậy. Vài năm nữa các loại thiết bị di động thông minh sẽ chiếm phần lớn thị trường, điều đó có nghĩa là các thiết bị cũ sẽ dần được thay thế. Viễn cảnh tương lai sẽ chẳng cần kiểm tra User-Agent để redirect sang từng loại giao diện, hệ thống sử dụng ít tài nguyên, mang lại trải nghiệm tốt hơn, đơn giản và hiệu quả với thiết kế Responsive Web.

  3. Thank em, anh sẽ cố gắng đọc kỹ và thực hành tốt bài viết cho site của mình.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

*