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à 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.
Dạng website design Mobile
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.
Responvie web design cũng chỉ phù hợp với điện thoại thông minh đời mới còn các thiết bị cũ chạy Symbian như Nokia 6300 sẽ không hỗ trợ
Responvie web design cũng chỉ phù hợp với điện thoại thông minh đời mới còn các thiết bị cũ chạy Symbian như Nokia 6300 sẽ không hỗ trợ
Một số trang demo web design như : http://www.gocmeovat.com
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.
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.com/page-1″>
Dành cho thiết bị di động
Trên trang điện thoại di động, thêm một liên kết rel=”canonical” trỏ đến URL máy tính để bàn tương ứng
<link rel=”canonical” href=”http://www.example.com/page-1″>
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.
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
Đố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 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:
- https://developers.google.com/webmasters/smartphone-sites/
- http://searchengineland.com/author/cindy-krum
- http://moz.com/blog/seo-of-responsive-web-design
DienDan.Edu.Vn Cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.DienDan.Edu.Vn! là một website với tiêu chí chia sẻ thông tin,... Bạn có thể nhận xét, bổ sung hay yêu cầu hướng dẫn liên quan đến bài viết. Vậy nên đề nghị các bạn cũng không quảng cáo trong comment này ngoại trừ trong chính phần tên của bạn.Cám ơn.
