Xem thêm về Mobile Web Design

Theo các nghiên cứu mới nhất thì lượng khách hàng mobile đang có xu hướng tăng mạnh. Tại Mỹ có đến gần 75% quý khách điện thoại di động dùng đồ vật của họ để vào mạng. Nhu cầu lướt web bằng những vật dụng di động là siêu to và ví như website của bạn không hỗ trợ cho di động thì điều gì xảy ra? kèm theo là bạn sẽ mất đi 1 lượng lớn khách truy cập và với cơ hội phát triển thành khách sắm hàng của bạn. Bài viết này sẽ phân tích và giúp người dùng hướng tới việc tối ưu hóa website thân thiện hơn mang các thiết bị di động. Giúp cho website của bạn nâng cao hiệu suất, nâng cao tỉ lệ chuyển đổi và giúp SEO rẻ hơn.

>>> Dịch vụ liên quan: Thiet ke web mobile

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

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

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

Dạng website design Mobile

một. sử dụng bề ngoài Responsive Web Design

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

điểm cộng của responsive web design:

Khả năng tương thích sở hữu các thiết bị cực cao và hỗ trợ trên rộng rãi trình duyệt mang độ phân giải màn hình khác nhau. Responsive sẽ sở hữu đủ 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ẽ chẳng hề chuyển hướng giao diện người mua, thống nhất trên một 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ó vô cùng linh hoạt tự co dãn theo từng kích cỡ màn hình mà chẳng phải chuyển sang giao diện Mobile khi các trang bị di động truy suất tới sẽ cực kỳ chậm do nên load tất cả website mà ko được thanh lọc lại code và hình ảnh. không tính việc nó ảnh hưởng tới tốc độ load website còn ảnh hưởng đến cước phí Mobile Data của người dùng rất nhiều.
Responvie web design cũng chỉ yêu thích sở hữu điện thoại tuyệt vời đời mới còn các đồ vật cũ chạy Symbian như Nokia 6300 sẽ ko hỗ trợ

2. dùng ngoại hình Parallel Mobile Site

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

điểm cộng của Parallel Mobile Site:

• Sẽ mang 2url tách biệt hiển thị cho máy tính và di động
• mang lại trải nghiệm phải chăng 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 dùng ít mã nguồn, ít hình ảnh, làm cho 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 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 1 liên kết rel="canonical" trỏ tới URL máy tính để bàn tương ứng

<link rel="canonical" href="http://www.example.com/page-1">

Việc tiêu dùng đoạn thẻ code trên bạn chỉ bắt buộc dùng 1 dòng là được. Bạn dùng code 1 trên giao diện cho máy tính thì không nên đoạn code 2 trên giao diện cho mobile và ngược lại.

3. dùng mẫu mã Dynamic Serving

Dynamic Serving là chuyển hướng tiêu 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ỉ tiêu dùng 1 url duy nhất

ưu thế của Dynamic Serving

ko phải khai báo rel="canonical" trong giao diện Mobile và chỉ bắt buộc sử dụng duy nhất một URL
Vì tiêu dùng 2 giao diện buộc phải hoàn toàn với hầu hết tính năng như chuyển hướng Parallel Mobile Site đấy là dùng ít mã nguồn, ít hình ảnh, khiến cho 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 quý khách từ giao diện máy tính sang giao diện di động. do vậy, user-agent bắt buộc được khai báo hầu hết, việc khai báo thiếu user-agent góp phần làm việc chuyển hướng ở 1 số đồ vật ko thành công

4. những mẫu Googlebot-Mobile User-Agents được Google sử dụng

Đối có đ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 sở hữu đ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)

>>> Xem thêm: Thiết kế web theo yêu cầu

5. những đồ vật cần tối ưu cho Mobile Web Design

• ko 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 mang khoảng 40 tới 60 ký tự.
• Thẻ mô tả (meta descriptions) chỉ phải có khoảng 90 ký tự.
• hợp lý nội dung trên giao diện di động dành cho từ khóa trên trang bị di động.
• tiêu 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à các phân tích nhằm giúp người dùng hiểu rõ hơn về Mobile Web Design. Hi vọng sẽ giúp ích cho quý khách trong việc thông minh website thân thiện cho di động.