Responsive Web và Mobile-first Web

Lướt web trên thiết bị di động chiếm 50% tổng lưu lượng truy cập internet

Chỉ mới cách đây 10 năm (10 năm đối với Internet thực ra là khoảng thời gian dài vô tận!), việc sử dụng điện thoại di động để truy cập Internet đã bắt đầu trở nên phổ biến, vượt qua cả laptop và máy tính để bàn, và đến thời điểm hiện tại thì đã trở thành thiết bị truy cập Internet phổ biến nhất mà không một ai trong chúng ta có thể bàn cãi.

Nguồn: StatCounter Global Stats – Platform Comparison Market Share

Như chúng ta thấy ở trên, mật độ sử dụng máy tính và điện thoại di động để truy cập Internet đã cân bằng nhau vào khoảng năm 2016 – 2017.

Trong năm 2020, nói đến Internet thì chúng ta cũng ngầm hiểu rằng đó chính là “di động”.

Do đó, để thích nghi với sự đổi mới này, bạn phải đặc biệt quan tâm đến phiên bản di động (mobile version) của trang web cũng như phiên bản trên máy tính của nó để đạt được những kết quả tốt nhất.

Thích ứng với tốc độ thay đổi của thiết bị di động

Chúng ta sẽ quay trở lại bàn về vấn đề này sau, nhưng một trong những điều mà bạn cần nhớ là việc lướt web trên thiết bị di động không bao giờ bị chững lại, đó là vì các thiết bị di động được dùng để truy cập Internet không ngừng phát triển.

Với sự thay đổi liên tục về công nghệ và với chỉ bình quân 5 năm tuổi thọ cho một chiếc điện thoại di động, các nền tảng web phải luôn thay đổi để thích nghi với sự thay đổi phần cứng của các thiết bị di động và ngược lại. Điều đó cũng có nghĩa là sẽ có nhiều thế hệ điện thoại di động chồng chéo lên nhau và chúng ta phải luôn ghi nhớ từng loại đó để tạo ra những trang web tiếp cận được với nhiều người dùng nhất có thể.

Từ năm 2019 – 2020, đây là các độ phân giải được sử dụng phổ biến nhất cho thiết kế di động:

  • 360 × 640 (18,7%)
  • 375 × 667 (7,34%)
  • 414 × 896 (6,76%)
  • 360 × 780 (5,31%)
  • 375 × 812 (5,01%)
  • ….

Và còn rất nhiều là đằng khác! Bên cạnh các độ phân giải thì chúng ta còn phải quan tâm đến tỷ lệ màn hình (như 16:10, 16: 9, 5: 3, 2: 1,…), một trong những yếu tố cũng sẽ ảnh hưởng đến thiết kế trên thiết bị di động.

Cũng lưu ý rằng những độ phân giải này hoàn toàn không tương ứng với độ phân giải của màn hình trên các điện thoại di động mới nhất. Chúng có thể hiển thị độ phân giải HD đôi khi thậm chí còn cao hơn một số màn hình máy tính. Ví dụ như iPhone X sẽ có độ phân giải 1125 x 2436 và Samsung Galaxy S10E có độ phân giải 1080 × 2280.

Tại sao cần có một trang web thân thiện với thiết bị di động?

người dùng trẻ tuổi lướt web trên thiết bị di động

Lý do 1: Đừng bỏ lỡ một nửa dân số thế giới!

Như chúng ta đã thấy trước đây, trên thực tế, trên khắp thế giới, 50% lượt truy cập nội dung Internet được thực hiện qua thiết bị di động. Và trong số những lý do khiến người dùng rời khỏi trang web của bạn, thiếu phiên bản web thân thiện với thiết bị di động rất có thể là một trong những lý do đầu tiên.

Trang web không thân thiện với thiết bị di động chắc chắn là vấn đề cần phải được giải quyết đầu tiên.

Lý do 2: Xây dựng hình ảnh thương hiệu

Trong năm 2020, kỳ vọng của người dùng Internet ngày càng khắt khe, sự kỳ vọng đó đi đôi với sự cải tiến của công nghệ di động. Khi điện thoại di động trở thành một chiếc máy tính bỏ túi thật sự với ngày càng nhiều tính năng tuyệt vời hơn, người dùng mong muốn được sử dụng những nền tảng, ứng dụng, trình duyệt,… được tối ưu cho chiếc điện thoại yêu quý của họ.

Một trang web không thân thiện với thiết bị di động sẽ bị những người khó tính bỏ qua, hoạt động kinh doanh của bạn sẽ bị suy giảm và có thể tạo ra cái nhìn tiêu cực của một người về công ty của bạn. Tất nhiên, nếu một người dùng Internet có thể bỏ qua việc website không thân thiện với thiế bị di động cho một công ty nhỏ hoặc cho một công ty có tất cả các dịch vụ mà anh ta đã biết, điều đó có thể là công ty đó dành nhiều sự quan tâm cho khách hàng hơn là tối ưu website thân thiện với thiết bị di động. Nhưng với việc khách hàng đang ngày càng trở thành một người dùng Internet, không có website thân thiện với thiết bị di động thì sớm hay muộn, bạn cũng sẽ bị cướp đi những khách hàng trunh thành đầy tiềm năng đó.

Lý do 3: Làm Google hài lòng và cải thiện SEO

Như chúng ta đã thảo luận trong bài viết “SEO: Cách xếp hạng trang web của bạn trên Google”, Google có một loạt các tiêu chí rất đa dạng trong thuật toán của mình để đánh giá chất lượng của kết quả tìm kiếm. Trong số các kết quả đó, yếu tố thân thiện với thiết bị di động của một trang web là một trong những yếu tố được ưu tiên hàng đầu, cũng như yếu tố tốc độ hoặc mức độ liên quan của nội dung và từ khóa..

Do đó, có một trang web thân thiện với thiết bị di động là điều cần thiết cho vị trí xếp hạng của bạn trong trang kết quả tìm kiếm và sẽ cho phép bạn thu hút nhiều lượt truy cập hơn.

Lý do 4: Tiết kiệm cho các chiến dịch quảng cáo của bạn!

Những gì Google áp dụng cho kết quả của công cụ tìm kiếm, cũng được áp dụng cho Google Ads (trước đây là Adwords). Thật vậy, khi một trang web dường như không được điều chỉnh phù hợp trên thiết bị di động, các quảng cáo trả phí của bạn sẽ nhận được điểm chất lượng kém. Khi có điểm chất lượng thấp hơn đối thủ cạnh tranh, bạn sẽ phải trả nhiều tiền hơn cho vị trí quảng cáo của mình so với họ. Đây là lý do tại sao nếu bạn chạy các chiến dịch Google Ads, việc có một trang web thân thiện với thiết bị di động sẽ chẳng những giúp bạn thúc đẩy tỷ lệ chuyển đổi mà còn tiết kiệm tiền về lâu dài.

Và không chỉ có Google! Mới đây, Facebook, gã khổng lồ quảng cáo trực tuyến lớn thứ hai thế giới, cũng đã thông báo rằng những doanh nghiệp không có trang web phù hợp với thiết bị di động sẽ có những hạn chế khi quảng cáo.

Lý do 5: Sáng tạo gấp đôi!

Với phiên bản PC và phiên bản dành cho thiết bị di động, bạn có cơ hội khám phá hai cách thiết kế khác nhau, tận dụng điểm mạnh của mỗi phương tiện để truyền tải thông điệp của bạn tốt hơn.

Đối với tất cả các ngành nghề hoặc ngành công nghiệp sáng tạo, việc có một phiên bản dành riêng cho thiết bị di động khác với phiên bản “Máy tính để bàn” là để khẳng định sự độc đáo của bạn.

Các câu hỏi cần được giải quyết

bản vẽ thiết kế thân thiện với thiết bị di động

Trước hết, làm thế nào để biết một trang web có “Thân thiện với thiết bị di động” hay không?

Google đã đưa ra một công cụ cụ thể để tìm hiểu xem trang web của bạn có phù hợp với mong đợi của Google và của người dùng Internet hay không, tại liên kết này.

Chỉ cần nhập URL trang web của bạn và nhấp vào “ Kiểm tra URL” và bạn sẽ có kết quả trong vài giây.

Nói một cách tổng quát hơn, đó là tất cả về tỷ lệ và khả năng truy cập: website có khó điều hướng hay không, website có cần phải zoom vào hoặc zoom ra hay không, văn bản có khó đọc hay không, hình ảnh bị cắt bỏ hay không, hay là một số tính năng thậm chí không hoạt động, thì đó là những thứ mà bạn cần phải chỉnh sửa ngay lập tức.

Nếu trang web của bạn không “Mobile-Friendly” thì sao?

Tùy thuộc vào công nghệ mà bạn sử dụng để tạo website và độ tuổi của nó, sẽ có 2 hướng giải  quyết.

Trường hợp đầu tiên, nếu website có thể được truy cập vào bên trong và có cấu trúc không quá phức tạp, bạn có thể đơn giản gọi cho một Web Agency hoặc một lập trình viên / nhà thiết kế web chuyên nghiệp để họ biến website của bạn trở nên thân thiện với thiết bị di động.

Trường hợp thứ hai, nếu trang web quá phức tạp hoặc sử dụng công nghệ, thành phần lỗi thời không hiển thị trên điện thoại, cách tốt nhất là tạo lại một website hoàn toàn mới. Tùy thuộc vào ngành công nghiệp của bạn, nếu website của bạn đã có tuổi đời từ trên 3 đến 5 năm, xem xét làm lại một website mới cũng không phải là một ý tồi.

Bằng cách xây dựng lại một website mới (trong khi vẫn giữ nguyên toàn bộ nội dung của trang web, nếu bạn muốn), bạn sẽ thay đổi theo xu thế (hay còn được gọi là “bắt trend”) và được nhìn nhận là một doanh nghiệp năng động và hiện đại. Nếu website của bạn kiếm tiền từ các lượng truy cập thường xuyên hàng tháng hoặc hàng năm, đây cũng là một cơ hội tốt để đem đến những thứ mới mẻ cho các vị khách truy cập thường xuyên của bạn. Nếu không có thay đổi nào ảnh hưởng đến thói quen của họ trên website, sự thay đổi về diện mạo của website chắc chắn sẽ được họ hưởng ứng theo một cách tích cực nhất có thể.

trang web không thân thiện và trang web thân thiện với điện thoại di động

Chọn cái gì? Mobile-Responsive hay Mobile-First?

Trước hết, bạn phải hiểu rằng việc sử dụng Internet trên điện thoại di động và PC truyền thống là không giống nhau. Và lý do đầu tiên khiến các mục đích sử dụng này khác nhau là thời lượng (hoặc điều kiện) điều hướng website.

Trong mọi trường hợp, trải nghiệm duyệt và tìm kiếm trên máy tính sẽ vượt trội hơn vì diện tích màn hình lớn hơn, sử dụng chuột để lướt web cũng như có môi trường phù hợp hơn (ví dụ: văn phòng, không có sự phản chiếu của ánh nắng mặt trời, v.v.).

Do đó, chúng ta dành ít thời hơn gian dành cho các lượt truy cập trên thiết bị di động, đặc biệt là khi đang nghiên cứu cái gì đó, so với trên máy tính. Và thời gian sử dụng ít hơn cũng có nghĩa là tỷ lệ tương tác cũng sẽ thấp hơn.

Bạn sẽ luôn cảm thấy thoải mái hơn khi mua sắm trực tuyến hoặc viết thư liên hệ trên máy tính. Và đúng là như vậy, tỷ lệ chuyển đổi không biết nói dối: lượt truy cập trên PC luôn có tỷ lệ chuyển đổi cao hơn khoảng 2 đến 3 lần so với trên điện thoại di động.
tỷ lệ chuyển đổi thương mại điện tử trên máy tính, máy tính bảng và điện thoại di động năm 2013-2019 ở Mỹ

Đây là lý do tại sao, để khôi phục sự cân bằng giữa thiết bị di động và PC, một số công ty như Agoda (chuyên đặt phòng khách sạn trực tuyến) đang tạo ra các ưu đãi tiếp thị và giảm giá dành riêng cho người dùng di động!

Một lý do khác khiến tỷ lệ chuyển đổi này thấp hơn, ngoài thời gian sử dụng, vẫn là thiết kế. Thật vậy, nhiều năm trôi qua, tỷ lệ chuyển đổi tăng lên, không chỉ nhờ vào chất lượng kết nối internet(4G/ LTE) tốt hơn, chất lượng thiết bị tốt hơn… mà còn do các trang web đang cải thiện nhiều hơn cho thiết kế của phiên bản di động.

Cuối cùng, cần phải nhớ rằng trong nhiều trường hợp, khách truy cập di động và khách truy cập PC trên thực tế là cùng một người. Thật vậy, lúc đầu anh ta có thể truy cập phiên bản di động của trang web, bị “dụ dỗ” bởi những lời đề nghị hấp dẫn trên website của bạn mà không có thời gian tìm hiểu kỹ hơn, anh ta có thể không truy cập vào phiên bản di động của trang web nữa cho đến mãi một lúc sau, khi anh ta có thể truy cập trang web trên máy tính, đó cũng chính là lúc mà anh ta sẽ thực hiện giao dịch hoặc liên hệ với bạn!

Đây là lý do giải thích cho việc biểu đồ tỷ lệ chuyển đổi có thể bị sai lệch: tỷ lệ chuyển đổi trên máy tính cao hơn vì chúng được hưởng lợi từ các lượt truy cập trước đó trên thiết bị di động.

Bây giờ vấn đề này đã được làm rõ, dưới đây là hai lựa chọn cho bạn.

1. Giải pháp “Mobile-Responsive”

Một trang web được cho là “Mobile-Responsive” khi nó được thiết kế để sử dụng chủ yếu trên máy tính, nhưng tỷ lệ hay thiết kế phải được điều chỉnh để “vừa vặn” với màn hình điện thoại di động.

Đây là giải pháp được sử dụng rộng rãi nhất, vì nó thường là giải pháp tiết kiệm nhất.

2. Giải pháp “Mobile-First”

Một trang web được cho là “Mobile-First” khi nó được thiết kế để sử dụng chủ yếu trên điện thoại di động hoặc sử dụng phiên bản điện thoại di động trên máy tính. Tất nhiên giải pháp này sẽ yêu cầu những thiết kế và điều hướng hoàn toàn khác so với giải pháp thông thường như “Mobile-Responsive”.

Đây là giải pháp tối ưu nhất, bởi vì bằng cách này bạn sẽ đảm bảo rằng bạn có một phiên bản hoàn hảo trên tất cả các phương tiện.

Để lựa chọn giữa giải pháp này và giải pháp kia, bạn không những cần phải biết càng nhiều càng tốt thói quen duyệt web của khách hàng và nguồn gốc của các thói quen đó, mà còn phải biết các tiêu chuẩn trong ngành của bạn.

Những người trẻ sẽ sử dụng điện thoại di động và mạng xã hội / nhắn tin nhiều hơn, nếu bạn chủ yếu phục vụ tệp khách hàng này, thì sự ưu tiên nên được đặt vào giải pháp Mobile-First.

Tùy thuộc vào quốc gia của bạn và mức độ phát triển của quốc gia, câu trả lời cũng sẽ khác nhau. Các nước đang phát triển sẽ có nhiều người dùng di động hơn so với máy tính, những thứ này ít tốn kém hơn, và bởi vì đôi khi mạng di động chỉ đơn giản là tốt hơn khi không có kết nối cáp quang trong nhà. Mặt khác, đây cũng không là một quy chuẩn chung, vì vậy hãy tìm hiểu kỹ về nó. Ví dụ, trong trường hợp của Việt Nam, chỉ có 45% dân số sở hữu điện thoại có truy cập 3G và 4G, đó là lý do tại sao một số người chỉ có thể truy cập Internet trên máy tính.

Một thực tế đáng chú ý khác, nếu bản chất trang web của bạn yêu cầu bạn dành nhiều thời gian (tài liệu, quản trị, sản phẩm phức tạp hoặc có thể tùy chỉnh, v.v.), hãy ưu tiên đầu tư vào phiên bản PC của trang web của bạn. Ngược lại, nếu trang web của bạn đơn giản và khách truy cập dành ít thời gian cho nó, hãy chọn Mobile-First. Điều này cũng liên quan đến khái niệm về sự cấp bách.

Người dùng đang muốn tìm một chiếc xe hơi, một ngôi nhà hoặc một căn hộ sẽ thích lướt PC hơn cho nghiên cứu của mình: đó là một quyết định quan trọng để đưa ra, do đó cần phải dành thời gian xem xét kỹ lưỡng các mô tả, ưu đãi, hình ảnh…
giỏ hàng 3D xuyên qua màn hình điện thoại trong suốt

Mặt khác, đối với thông tin nhanh chóng, các công việc lặt vặt hoặc giao hàng một lần, các dịch vụ cá nhân (tiệm làm tóc, thợ sửa khóa, nhà hàng…), các tìm kiếm mục tiêu của bạn được thực hiện “ngay lập tức”, và công cụ dễ dàng sử dụng nhất sẽ là điện thoại di động, đặc biệt nếu bạn sử dụng điện thoại như một phương tiện liên lạc chính. Vì vậy, có một trang web ưu tiên thiết bị di động (mobile-first) sẽ phù hợp nhất.

Tóm lại, giữa Mobile-Responsive và Mobile-First, câu trả lời là… người tiêu dùng là trên hết! Trước tiên, hãy nghĩ về họ, thói quen và mong muốn của họ để xem xét và lựa chọn nền tảng kỹ thuật số của bạn.

Tạo responsive web hoặc mobile first web có tốn nhiều chi phí không?

Một lần nữa, hãy nhớ rằng cái giá phải trả lớn nhất đối với bạn là tự tước đi 50% lượng khách hàng tiềm năng của mình. Do đó, đầu tư vào một trang web responsive là một điều thực sự cần thiết, câu hỏi này cũng lố bịch giống như là: “Bạn có nên lắp cửa vào cửa hàng của mình không?”. Câu trả lời rõ ràng là có!

Ngoài ra, một mặt, các công nghệ hiện tại có thể làm cho các trang web đáp ứng nhanh hơn trước, với kết quả tốt hơn và do đó, chi phí cũng rẻ hơn trước đây.

Tuy nhiên, mặt khác, bạn phải hiểu rằng ngày nay các nhà thiết kế và nhà phát triển phải đối phó với một môi trường rất phức tạp. Nếu như 10 hay 20 năm trước, việc sử dụng Internet nhìn chung đều giống nhau thì ngày nay, số lượng thiết bị kết nối đã bùng nổ, với tất cả những đặc điểm riêng của chúng.

Như đã thấy trước đây, ngày nay, độ phân giải và tỷ lệ màn hình cực kỳ khác nhau, cũng như hệ điều hành (Windows, Mac, Android, iOS iPhone … tất cả đều ở các phiên bản khác nhau) Và trình duyệt (trình duyệt di động độc quyền, Chrome, Edge, Firefox và nhiều hơn nữa). Do đó, việc có một trang web hiển thị hoàn hảo với thiết kế nhất quán từ màn hình này sang màn hình khác có thể trở thành một vấn đề thực sự đau đầu. Nó cần nhiều suy nghĩ hơn về thiết kế, và quan trọng nhất, cần phải có rất nhiều, rất nhiều lần thử nghiệm. Với nhiều thời gian cần thiết để hoàn thiện những chi tiết này, chi phí sẽ tăng lên một cách tất yếu.

Thật vậy, khi một nhà thiết kế đang làm việc trên một mẫu trang hoàn toàn mới cho website của bạn và nhà phát triển đang tích hợp nó, bạn phải cân nhắc rằng công việc đó gồm hai phần: 1 phần cho phiên bản PC, 1 phần cho phiên bản di động. Không nhất thiết phải tăng gấp đôi chi phí, chắc chắn rằng nó đơn thuần là một dạng đầu tư.

Tiến xa hơn nữa: phát triển các ứng dụng di động

Cuối cùng, sau khi xử lý được hai loại trang web trên, một tùy chọn khác cũng có sẵn, đó là ứng dụng di động chuyên dụng.

Không phụ thuộc vào trình duyệt internet, các ứng dụng di động cho phép bạn có thể linh hoạt hơn trong việc sáng tạo và phát triển chúng. Nó cũng phức tạp hơn, có nghĩa là lựa chọn phát triển một ứng dụng di động sẽ là lựa chọn phù hợp cho các dự án cần tương tác nhiều hơn.

Trong trường hợp một trang web thường là “màn hình hiển thị” với một số tính năng tương tác (Trò chuyện, Liên hệ, Mua hàng, v.v.), ứng dụng di động sẽ giúp bạn có thể tận dụng các tính năng cụ thể của điện thoại: máy ảnh, vị trí địa lý, nhắn tin, thông báo, vân tay, gia tốc kế, tương tác 3D, lịch sử, v.v. và cung cấp trải nghiệm tốt nhất cho người dùng của bạn.

Chúng tôi cung cấp dịch vụ thiết kế, phát triển và tiếp thị tại Việt Nam.

featured

Plus d'articles

Mun xem thêm?

Xem chúng tôi có khả năng gì!

mosaic of apps

Bạn cần thông tin không?

Chuyên gia của chúng tôi sẵn sàng giúp bạn.

Contact Us Icon

Chúng tôi cung cấp dịch vụ thiết kế, phát triển và tiếp thị tại Việt Nam.

Services

Thiết kế

UI icon

Công thái học tốt nhất

Palette icon

Hãy kể câu chuyện của bạn

3D icon

3D

Trí tưởng tượng vô hạn

brochure icon

Cho truyền thông in ấn

Packaging icon

Thiết kế bao bì độc đáo, gói gọn ý tưởng

Phát triển

Website icon

Xây dựng trang web đẳng cấp

E Commerce icon

Bán trực tuyến để phát huy tiềm năng đầy đủ.

Touch icon

Phát triển ứng dụng di động đỉnh cao

Maintenance icon

Bảo trì và quản lý trang web hiệu quả

Tiếp thị

Content icon

Tạo nội dung tiếp thị hấp dẫn

SEO icon

SEO

Đòi vị trí số một.

User icon

Biến người theo dõi thành khách hàng trung thành

growth icon

Tăng tốc sự phát triển bằng quảng cáo trực tuyến.