Website Mobile hay Responsive: Đâu là lựa chọn phù hợp với bạn?

Ngày nay, việc sở hữu một website thân thiện với thiết bị di động quan trọng hơn bao giờ hết, nhưng bạn nên chọn hướng tiếp cận nào? Trước đây, Google ưu tiên rõ rệt phương án Responsive, nhưng vào ngày 21 tháng 4 bản cập nhật thân thiện với thiết bị di động đã cho thấy website di động riêng (còn gọi là website mdot) cũng là lựa chọn được chấp nhận.

Có một số yếu tố bạn cần cân nhắc khi đưa ra quyết định. Hãy cùng tìm hiểu sự khác biệt giữa hai loại website, nguồn lực cần thiết để triển khai và tác động của từng lựa chọn đến SEO.

Mobile và Responsive: Điểm khác biệt chính

Website mdot được thiết kế riêng cho thiết bị di động và sử dụng một Subdomain riêng (đây cũng là nguồn gốc của tên gọi). Ngược lại, với phương án Responsive, bạn có một website duy nhất được thiết kế để hoạt động trên mọi thiết bị di động hoặc máy tính.

B2 Interactive giải thích: “With responsive design, the website is adapting existing content to fit different screen sizes. With a separate mobile URL, the website has the ability to display different content for mobile users.”

Đó là khác biệt chính, nhưng câu chuyện còn nhiều điều hơn thế. Nguyên nhân là hai phương án sử dụng cách tiếp cận công nghệ nền tảng khác nhau, từ đó ảnh hưởng đến trải nghiệm người dùng trên website của bạn.

Website Responsive: Ưu và nhược điểm

Thomas Ryan, Giám đốc Marketing tại Afilas Mobile & Web Services giải thích về thiết kế Responsive như sau:

“Responsive Web Design (RWD) is a technique in which websites automatically rearrange their content (texts, graphics, videos, etc.) according to the width of the browser minimizing resizing, panning and scrolling.”

Bryson Meunier, Giám đốc SEO tại Vivid Seats cho biết: “Responsive sites don't require additional workarounds that mobile sites do in order for Google to understand that the content is intended for mobile device users (e.g. bidirectional annotations and the vary header). They're also easy to maintain and work reasonably well on many different devices.”

Về mặt marketing, website Responsive còn có lợi thế là duy trì tính nhất quán của thương hiệu, bởi bạn chỉ cần quản lý một website thay vì phải đảm bảo thương hiệu nhất quán trên hai website.

Tuy nhiên, Bryson cho biết website Responsive không hoàn hảo. Chúng thường tải chậm do cần tải hình ảnh cho mọi thiết bị. “The <picture> element should solve this eventually, but it's not widely supported by browsers or Google Search.”

Bryson cho biết một số website còn gặp vấn đề về nhắm mục tiêu: “Các website responsive không có redirect phía máy chủ dành riêng cho từng user agent phải hiển thị cùng một nội dung cho mọi người tìm kiếm, nên bạn có thể đang tải nội dung lên thiết bị mà bạn sẽ chẳng bao giờ dùng đến.”

Ông giải thích: “Một ví dụ điển hình là người dùng iPhone khi tìm kiếm lại được hiển thị các ứng dụng Android mà họ không thể tải xuống, và ngược lại. Điều này có thể dẫn đến trải nghiệm người dùng kém, vì một số từ như 'download' và 'print' sẽ hữu ích hơn khi được đặt trong ngữ cảnh dành riêng cho thiết bị. Nếu không có ngữ cảnh đó, quản trị viên website phải khiến toàn bộ nội dung thực sự thích ứng hoặc có nguy cơ làm người dùng bối rối.”

Website Mdot: Ưu và nhược điểm

Bryson cho biết một website mobile riêng giải quyết được một số vấn đề của website responsive nhờ khả năng dùng thẻ user-agent để phân phối HTML khác nhau: “Điều đó mang đến cho marketer chuyên sâu sự linh hoạt để nhắm mục tiêu nội dung sáng tạo phù hợp khi cần. Vì vậy, nếu tôi chỉ muốn hiển thị ứng dụng Android của mình cho người dùng Android đang tìm kiếm, tôi có thể làm điều đó với các định dạng này.”

Website Mdot cũng có một số lợi thế về hiệu suất vì tải hình ảnh dành riêng cho thiết bị, nhưng nhu cầu dùng redirect có thể làm chậm các website này.

SEO và mobile

SEO cũng là một vấn đề khác cần cân nhắc khi quyết định xây dựng website mobile. Khi khả năng thân thiện với mobile và tốc độ website là những yếu tố quan trọng ảnh hưởng đến thứ hạng, liệu mdot có luôn là lựa chọn tốt hơn không? Bryson nói rằng hoàn toàn không phải vậy: “Bạn có thể khiến bất kỳ định dạng nào trong số này tải nhanh nếu dành thời gian triển khai đúng cách. Và nếu thêm redirect phía máy chủ vào thiết kế responsive (gọi là RESS), bạn cũng có thể phân phối nội dung dành riêng cho từng thiết bị.”

Vì Google hỗ trợ URL responsive, adaptive và mobile, doanh nghiệp nên chọn phương án đáp ứng tốt nhất nhu cầu của mình. Điều quan trọng nhất là đảm bảo người dùng có trải nghiệm tốt. Tuy nhiên, tùy vào lựa chọn của bạn, quy trình tối ưu hóa có thể sẽ khác nhau.

Bryson cho biết: “Với mdot, bạn cần sử dụng chú thích hai chiều, nếu không Google có thể không index và xếp hạng nội dung phù hợp. Bạn cũng có thể cân nhắc những keyword mà người tìm kiếm có thể dùng trên smartphone, vì chúng có thể khác nhau; mdot và website adaptive cho phép bạn tối ưu nội dung cho những keyword đó.”

Ngược lại, Bryson cho biết tốc độ là vấn đề SEO lớn nhất đối với website responsive: “Mọi cấu hình website đều cần tải nhanh, nhưng website responsive là loại khó tăng tốc nhất do hình ảnh. Gần đây, Google đã thăm dò ý kiến quản trị viên website và 43% cho biết điều khó chịu nhất về website mobile là phải chờ tải. Tôi sẽ không ngạc nhiên nếu trong tương lai, đây trở thành một yếu tố xếp hạng quan trọng hơn đối với mobile; nếu điều đó xảy ra, nhiều website responsive được triển khai kém sẽ đột nhiên ít xuất hiện hơn nhiều trong kết quả tìm kiếm.”

Những điều cần cân nhắc về thương mại điện tử

Các nhà cung cấp dịch vụ thương mại điện tử cũng cần quan tâm đến tốc độ trang web, Thomas Ryan cho biết: “Có thể hiện nay doanh nghiệp không còn cần phải có một trang web mobile riêng bên cạnh phiên bản dành cho máy tính để bàn. Có nhiều lý do cho điều này, bao gồm kích thước màn hình đa dạng (từ điện thoại phổ thông có độ phân giải thấp đến điện thoại cao cấp có màn hình 1080p trở lên), hình dáng thiết bị khác nhau (một số có màn hình rộng, một số gần vuông hơn — chẳng hạn như máy tính bảng) và sự phát triển của Internet vạn vật (trình duyệt xuất hiện trên những thiết bị vốn thường không có trình duyệt — như tủ lạnh, ô tô, v.v.). Mục tiêu của một trang web thương mại điện tử là hoạt động linh hoạt (có thể chạy trên mọi thiết bị) và nhanh (thời gian tải trang có thể ảnh hưởng đáng kể đến Conversion Rate của bạn).”

“Vì các trang web RWD gửi cùng một HTML, CSS và JavaScript đến mọi thiết bị, trình duyệt sẽ sắp xếp lại nội dung ngay trên thiết bị của người dùng. Điều này có thể khiến trang web trên mobile nặng và chậm một cách không cần thiết, không phù hợp với thương mại điện tử.” Hai giải pháp thay thế là adaptive design và RESS.

Adaptive Design và RESS

Thomas Ryan giải thích rằng còn một lựa chọn khác: “Ở dạng đơn giản nhất, adaptive web design là kỹ thuật gửi HTML/CSS khác nhau đến từng loại thiết bị. Adaptive design giúp bạn đảm bảo dung lượng trang và thời gian tải được tối ưu cho người dùng, bất kể họ sử dụng thiết bị nào.” Tuy nhiên, ông cho biết dù responsive design đơn giản hơn, “nhiều trang web lớn chọn điều chỉnh nội dung cho người dùng vì cách này linh hoạt hơn, tải nhanh hơn và hoạt động tốt hơn với băng thông yếu cũng như trên nhiều loại thiết bị hơn. Đây là kỹ thuật lý tưởng, nhưng không tiết kiệm chi phí cho các doanh nghiệp nhỏ.”

Ông cho biết các trang web thương mại điện tử có thể thích RESS (Responsive Web Design with Server-Side Components). “Phương pháp này kết hợp ưu điểm của RWD và khả năng điều chỉnh nội dung dựa trên việc nhận diện thiết bị ở phía máy chủ, nhờ đó cải thiện hiệu suất đáng kể so với RWD ‘cổ điển’. Trang web dùng RESS có thiết kế responsive, đồng thời được tối ưu đầy đủ cho nhiều loại thiết bị khác nhau. Đây là phương pháp mới nhất được ưu tiên lựa chọn, mang lại sự cân bằng tốt nhất giữa tốc độ, dung lượng và nội dung. Conversion Rate sẽ đạt mức tốt nhất có thể.”

Một vấn đề doanh nghiệp cần cân nhắc là chi phí của từng lựa chọn xây dựng trang web mobile. Việc này không đơn giản, bởi chi phí phát triển trang web phụ thuộc vào mức độ phức tạp của thiết kế và chức năng. Dù bạn tạo trang web mdot hay responsive, đều cần thực hiện một số công việc. Brad Frost có một danh sách rất hữu ích, bao gồm:

• xác định cách bạn sẽ tạo trang web và những yếu tố quan trọng đối với trang web
• phát triển thiết kế
• thử nghiệm thực tế thiết kế để đảm bảo thiết kế phù hợp với mọi người
• kiểm thử trên các thiết bị quan trọng cụ thể
• đảm bảo chất lượng

Bạn cũng cần cân nhắc chi phí bảo trì website. Với website mdot, bạn phải duy trì trải nghiệm song song trên hai website, việc này có thể tốn thời gian và chi phí, trong khi phương án responsive chỉ cần duy trì một website. Tuy nhiên, không phải ai cũng đồng ý rằng điều đó đồng nghĩa với việc chi phí sẽ thấp hơn.

Lời khuyên tốt nhất: dù chọn phương án nào, bạn cũng nên dự trù thời gian và chi phí. Bài viết này thảo luận trên Quora về việc tạo thiết kế responsive có thể hữu ích.

Tầm quan trọng của việc kiểm thử

Một khía cạnh quan trọng khác của quy trình thiết kế web cho mobile là kiểm thử. Có hai vấn đề cần cân nhắc: tổ chức các bài kiểm thử và tránh những lỗi thường gặp.

Ivan Shubin, Kỹ sư phần mềm kiểm thử cấp cao tại eBay, lưu ý rằng trách nhiệm chung là một khía cạnh quan trọng của tự động hóa kiểm thử: “A common mistake is having an engineer, dedicated to test automation, which is the only responsible person for tests. In our company we had to refine the testing process and in the end we've build a strong pipeline which consists of several testing environments. We came up with a strict rule: we can only release if everything succeeds. Even if there is one little test failing — we can't go live. This rule had a huge effect on every team member as each of us felt responsible for the tests.”

Anh nói thêm rằng việc cân nhắc phát triển hướng kiểm thử (TDD) cũng rất quan trọng: “For any changes you make on a project, you have to come up with a failing test. This way you make sure that the test coverage is always close to 100%. And even if you miss something, you can always add a test, because you will have to apply TDD technique for bug-fixing anyway. It's your choice where you want to introduce it: UI, service or unit tests.”

Ivan cho biết kiểm thử giao diện người dùng (UI) đòi hỏi cách tiếp cận cẩn trọng: “UI tests are the most fragile part of the pipeline and therefore they should be implemented in as isolated a way as possible. For instance when preparing a data for UI tests you should never rely on the front-end. Instead, generate test data with database queries, services calls etc. This way you will only touch the front-end when you actually want to test it and your UI tests will be more stable.”

Các yếu tố quyết định: Kết luận

Cuối cùng, để quyết định phương án nào phù hợp nhất với bạn về thiết kế, chức năng, chi phí và SEO, bạn cần cân nhắc:

• loại nội dung người dùng cần xem
• tần suất bạn có thể cập nhật nội dung
• hành vi của họ tùy theo thiết bị đang sử dụng
• liệu họ có cần trải nghiệm đầy đủ chức năng của website, bất kể đang sử dụng thiết bị nào

Duda Mobile gợi ý rằng khi đưa ra quyết định, bạn nên tự hỏi: “Am I ready to build a brand new website, or is my current website great, just not mobile-friendly?”

Nếu bạn hài lòng với website hiện tại và không cần hoặc không muốn thay đổi, một website mdot riêng có thể là lựa chọn phù hợp. Mặt khác, nếu bạn vốn đã có kế hoạch nâng cấp website, thì thiết kế responsive có thể là một lựa chọn tuyệt vời.

Bạn đã chọn cách tiếp cận nào cho website mobile của mình và yếu tố nào khiến bạn quyết định? Hãy cho chúng tôi biết trong phần bình luận!