Cách làm cho trang web của bạn thân thiện với thiết bị di động: 11 bước để nâng cao trải nghiệm người dùng

Vào mùa hè năm 2015, lần đầu tiên có nhiều tìm kiếm trên Google được thực hiện qua điện thoại di động hơn máy tính để bàn – và bạn nên tin rằng chúng chỉ tăng lên kể từ đó! Ngày nay, nhiều công cụ xây dựng trang web giúp bạn tạo một trang web thân thiện với thiết bị di động bằng các công cụ và mẫu, nhưng bạn phải đảm bảo các trang của mình tải và trông đẹp mắt trên các thiết bị khác nhau tùy thuộc vào bạn.

Nếu bạn đang đọc bài viết này, rất có thể bạn đã nhận thức được tầm quan trọng của việc có một trang web thân thiện với thiết bị di động và đang tìm cách đảm bảo rằng trang web của bạn mang lại trải nghiệm tuyệt vời cho người dùng di động. Chúng tôi có thể dạy bạn làm thế nào để làm điều đó!

Thân thiện với thiết bị di động thực sự có nghĩa là gì?

Khi chúng tôi nói về trang web ‘thân thiện với thiết bị di động’, chúng tôi đang nói về việc hiển thị một ‘phiên bản’ khác của trang web của bạn cho khách truy cập xem trang web của bạn từ thiết bị di động để mang lại cho họ trải nghiệm tốt hơn.

Có một số cách bạn có thể đạt được điều này:

• Thiết kế đáp ứng – thiết kế trang web của bạn điều chỉnh để thích ứng với kích thước màn hình, cho dù bạn chỉ thay đổi kích thước tab trên máy tính để bàn hay duyệt từ điện thoại di động hoặc máy tính bảng.
  Phục vụ động – khách truy cập được hiển thị một phiên bản khác, được xây dựng có mục đích của trang web, tùy thuộc vào thiết bị mà họ đang xem.
• Ứng dụng dành cho thiết bị di động – trong một số trường hợp, có một ứng dụng hoàn toàn riêng biệt dành cho đối tượng trên thiết bị di động của bạn sẽ có ý nghĩa nhất (mặc dù trong trường hợp này, bạn cũng nên đảm bảo rằng trang web của mình được cập nhật cho những người không muốn tải xuống ứng dụng đó ).
• Thiết kế đáp ứng là mức tối thiểu mà bạn nên hướng tới và đó là những gì Google khuyến nghị – chưa kể là một trong những lộ trình chính bạn có thể thực hiện để làm cho trang web của mình dễ truy cập hơn. Điều đó nói rằng, chúng tôi nghĩ rằng dù sao thì cũng đáng để chỉnh sửa thêm trang web dành cho thiết bị di động được tạo tự động của bạn – xét cho cùng, bạn muốn nhắm đến trải nghiệm người dùng trên thiết bị di động tuyệt vời, thay vì trải nghiệm ‘chấp nhận được’.

Nếu bạn cho rằng ứng dụng dành cho thiết bị di động sẽ phù hợp với trang web của mình, chúng tôi khuyên bạn nên liên hệ với nhà phát triển có thể giúp bạn giải quyết vấn đề đó.

1. Chọn Chủ đề hoặc Mẫu đáp ứng trên thiết bị di động

Được rồi, đây là bước đầu tiên và cũng là bước quan trọng: chọn một chủ đề hoặc mẫu đáp ứng cho thiết bị di động!
Bởi vì việc có một thiết kế tương thích với thiết bị di động là rất quan trọng nên đó là điều mà gần như mọi công cụ xây dựng trang web hàng đầu đều đề cập đến trên từng mẫu của nó. Ví dụ:

Squarespace – có khả năng đáp ứng di động chặt chẽ và sẽ là lựa chọn hàng đầu của chúng tôi nếu bạn đang xây dựng một trang web từ đầu và xem trải nghiệm di động là ưu tiên hàng đầu.

Wix – tất cả các mẫu đều tương thích với thiết bị di động, nhưng hãy luôn nhớ kiểm tra chế độ xem trên thiết bị di động khi bạn di chuyển. Bởi vì các trang web Wix rất có thể tùy chỉnh nên đôi khi những thay đổi lớn không diễn ra liền mạch và bạn sẽ phải thực hiện một số điều chỉnh.

Nếu bạn đang xây dựng một trang web bằng hệ thống CMS, chẳng hạn như WordPress, hãy đảm bảo rằng chủ đề bạn chọn để xây dựng trang web của mình là đáp ứng cho thiết bị di động – hoặc nếu bạn đã xây dựng một trang web, hãy chuyển sang chủ đề tương thích!

Chỉ cần tìm kiếm ‘chủ đề đáp ứng’ trong thư viện chủ đề riêng của WordPress hoặc trên trang web của bên thứ ba như Themeforest. Đảm bảo rằng bạn đã đọc các bài đánh giá và nếu có thể, hãy xem bất kỳ trang web nào đang sử dụng chủ đề này từ điện thoại di động của bạn để đánh giá trải nghiệm cho chính bạn.

2. Lấy lại nội dung của bạn

Bạn đã chọn một chủ đề hoặc mẫu đáp ứng đáng yêu, vì vậy bây giờ bạn đã sẵn sàng, phải không? Sai!

Chuyển sang mẫu hoặc chủ đề phù hợp là một bước tiến lớn, nhưng đó chỉ là một trong nhiều bước bạn nên thực hiện để hoàn thiện trải nghiệm di động đó.

Bây giờ, đã đến lúc xem chế độ xem tự động trên thiết bị di động của trang web của bạn và loại bỏ nó:

Chắt lọc ưu đãi của bạn

Tìm ra mục tiêu chính của trang bạn đang truy cập và đừng ngần ngại làm cho mục tiêu này nổi bật hơn trên phiên bản di động của bạn.
Trang chủ được thiết kế để khuyến khích người dùng tìm kiếm vé tàu và hình thức này chiếm vị trí trung tâm trên phiên bản di động. Trên phiên bản máy tính để bàn, điều này có vẻ quá khó khăn, nhưng trên phiên bản di động, nó hoạt động.

Tránh các đoạn văn bản lớn

Nội dung trên trang web của bạn phải ngắn gọn và hấp dẫn nhất (ngoại trừ các bài đăng trên blog, như bài đăng này!), nhưng trên thiết bị di động, tất cả điều này trở nên quan trọng hơn. Hãy đọc qua các mẹo viết cho web của chúng tôi và sử dụng chiếc kéo ảo của bạn để cắt bất kỳ đoạn văn bản dài nào.

Rút ngắn biểu mẫu

Điền vào các biểu mẫu dài đôi khi là một việc vặt, nhưng trên điện thoại di động thì sao? Di chuyển? Quên đi! Các biểu mẫu dài sẽ làm mất độc giả của bạn nhanh hơn bạn có thể nói ‘đây là trường bắt buộc’. Đảm bảo rằng mọi biểu mẫu bạn đang hiển thị trên thiết bị di động chỉ yêu cầu thông tin thực sự cần thiết.

3. Làm cho hình ảnh và CSS nhẹ nhất có thể

Làm cho trang web của bạn nhẹ nhất có thể luôn là một ý tưởng hay – nhưng chính xác thì điều đó có nghĩa là gì? Chà, mỗi phần tử trên trang web của bạn đều mang một ‘trọng số’ ảo – cho dù đó là video hay hình ảnh có kích thước tệp hoặc mã cần được tải mỗi khi trang web được nhấp vào.

Google đã rất rõ ràng về thực tế rằng tốc độ trang web là một yếu tố xếp hạng quan trọng, có nghĩa là các trang web chậm (hay còn gọi là ‘nặng’) sẽ thua cuộc cạnh tranh trên các trang kết quả của công cụ tìm kiếm (SERPs).

Khi nói đến điện thoại di động, điều này càng quan trọng hơn. Nếu bạn đã từng thử tải một trang web ở đâu đó từ xa, chỉ để xem từng phần tử rơi vào vị trí một cách chậm chạp, bạn sẽ hiểu tại sao.

Vì vậy, bạn có thể làm gì về nó?

Nén hình ảnh của bạn

Khi bạn tải bất kỳ hình ảnh nào lên trang web của mình – phiên bản dành cho thiết bị di động hoặc máy tính để bàn – điều quan trọng là bạn phải tối ưu hóa hình ảnh bằng cách nén chúng. Bạn thực hiện việc này bằng công cụ trực tuyến miễn phí, chẳng hạn như kraken.io. Điều này làm giảm đáng kể kích thước tệp hình ảnh của bạn mà không ảnh hưởng đến chất lượng hình ảnh.

Lưu trữ video của bạn với bên thứ ba

Bằng cách tải video của bạn lên bên thứ ba rồi nhúng chúng vào trang web của bạn, điều đó có nghĩa là ‘trọng lượng’ ảo của những video này phần lớn được giữ cho trang web đã chọn đó, thay vì trang web của bạn.

Wistia là một nền tảng phổ biến cho việc này, nhưng YouTube cũng hoạt động – bạn sẽ chỉ muốn đảm bảo rằng mình đang tắt tính năng tự động phát để video không liên quan không phát sau video của bạn. Để làm điều này, chỉ cần:

• Truy cập trang WordPress hoặc bài đăng của bạn
• Tìm mã nhúng và nhấp vào tab ‘văn bản’
• Tìm phần có nội dung src=”youtubeurlhere”
• Thêm ?autoplay=0&rel=0 sau youtubeurltại đây
• Bây giờ mã sẽ đọc src=”youtubeurlhere?autoplay=0&rel=0″
• Nhấn ‘Cập nhật’ và bạn đã sẵn sàng

4. Tránh Flash

Flash thường được sử dụng để tạo hoạt ảnh, nhưng nó thường không được thiết bị di động hỗ trợ, vì vậy tốt nhất bạn nên tránh hoàn toàn.

Mẹo hàng đầu!

Thay vì sử dụng Flash, hãy cân nhắc sử dụng các kỹ thuật hoạt ảnh hiện đại như hoạt ảnh CSS hoặc JavaScript để thêm các yếu tố tương tác và hấp dẫn trực quan vào trang web của bạn.

5. Thay đổi kích thước và vị trí nút

Hầu hết mọi trang web đều sử dụng các nút để liên kết đến các phần khác hoặc đến các biểu mẫu. Nhưng một nút ‘tốt’ có thể nhanh chóng trở thành một nút ‘xấu’ trên thiết bị di động nếu nó ở sai vị trí hoặc sai kích thước.

Hãy suy nghĩ về cách bạn cầm và sử dụng điện thoại của mình. Rất có thể bạn đang sử dụng ngón tay cái của mình cho hầu hết mọi thứ, nghĩa là bất cứ thứ gì bạn không thể với tới bằng ngón tay cái đều trở thành một nỗi đau hoàn toàn.

Vì vậy, bây giờ bạn đã có các nút của mình ở đúng vị trí, đã đến lúc làm cho chúng có kích thước phù hợp. Nói chung, điều đó có nghĩa là bạn sẽ cần phóng to chúng lên một chút – xét cho cùng, việc nhấp chính xác bằng ngón tay cái khó hơn rất nhiều so với bằng chuột.

6. Bỏ trống các liên kết của bạn

Nói về mức độ khó để nhấp chính xác bằng ngón tay cái so với bằng chuột, điều đó đưa chúng ta đến điểm tiếp theo một cách thú vị: hãy xem các liên kết của bạn!

Cụ thể hơn, bạn sẽ muốn kiểm tra xem có bất kỳ siêu liên kết nào trên trang web dành cho thiết bị di động của mình không:

Không quá gần nhau, để tránh mọi người vô tình bấm nhầm.

Liên kết đến các trang cũng được tối ưu hóa cho thiết bị di động để mang lại hành trình liền mạch cho người dùng.

7. Sử dụng phông chữ lớn và dễ đọc

Bạn nên sử dụng kích thước phông chữ ít nhất là 14px trên máy tính để bàn, nhưng hãy đảm bảo rằng bạn đã kiểm tra xem nó trông như thế nào trên phiên bản di động của mình – rất có thể bạn sẽ thấy nó hiển thị hơi nhỏ và bạn sẽ muốn chỉnh sửa nó một chút.

Kiểm tra kỹ khả năng đọc của phông chữ của bạn. Thử một phông chữ thử nghiệm hơn trên máy tính để bàn là một chuyện, nhưng động thái này khó có thể thành công trên thiết bị di động. Điều đó nói rằng, bạn sẽ muốn giữ phông chữ là ‘có thương hiệu’ nhất có thể trên tất cả các nền tảng.

Khi làm việc trên chế độ xem trên thiết bị di động của trang web của bạn, bạn có một khu vực nhỏ hơn nhiều để thao tác. Trên máy tính để bàn, bạn có thể tạo khoảng trắng cho văn bản bằng dấu ngắt dòng và hình ảnh. Trên thiết bị di động, hãy thử in đậm hoặc viết hoa các dòng văn bản khác nhau để ngăn chúng hợp nhất với nhau.

8. Loại bỏ cửa sổ bật lên

Khi được sử dụng cẩn thận, cửa sổ bật lên có thể hoạt động rất tốt trên phiên bản máy tính để bàn của một trang web. Bạn có thể nhận thấy chúng là thứ chúng tôi sử dụng trên một vài trang ở đây trên WBE.

Nhưng khi nói đến thiết bị di động, tốt nhất nên tránh các cửa sổ bật lên. Bạn không chỉ có một màn hình nhỏ hơn để xử lý mà còn không thể điều chỉnh cửa sổ bật lên để kích hoạt vào những thời điểm quan trọng, chẳng hạn như khi người dùng thoát khỏi màn hình của bạn.

9. Tối ưu hóa biểu mẫu và trường nhập liệu cho thiết bị di động

Việc điền biểu mẫu trên thiết bị di động có thể phức tạp khi chúng không được tối ưu hóa. Điều này thường dẫn đến sự thất vọng và không thể hoàn thành. Đối với nhiều doanh nghiệp, điều này có thể tàn phá khi các hành động có giá trị như biểu mẫu liên hệ, biểu mẫu tạo khách hàng tiềm năng và thậm chí cả trang thanh toán đều bị bỏ rơi.

Dưới đây là một số phương pháp hay nhất để đảm bảo biểu mẫu hoạt động tốt trên thiết bị di động:

• Giảm số trường (nếu không cần thiết thì bỏ đi)
• Sử dụng mặt nạ đầu vào và các tùy chọn tự động điền để giúp tăng tốc các quy trình
• Cung cấp thông báo lỗi rõ ràng và phản hồi xác thực để giúp người dùng xác định họ đã sai ở đâu và họ đã nhập thông tin chính xác ở đâu.

10. Tối ưu hóa tốc độ tải trang web của bạn

Tốc độ tải trang web có tác động rất lớn đến trải nghiệm người dùng và hiệu suất công cụ tìm kiếm của bạn. Xét cho cùng, không ai thích đợi một trang web tải mãi mãi.

Bạn có thể kiểm tra thời gian tải trang web của mình bằng các công cụ miễn phí như Thông tin chi tiết về tốc độ trang của Google. Nếu bạn thấy chúng hơi chậm, đây là một số mẹo giúp tăng tốc mọi thứ:

• Nén tất cả các hình ảnh bạn sử dụng, bạn có thể sử dụng trực tuyến miễn phí để làm điều này
• Kích hoạt bộ nhớ đệm của trình duyệt
• Thu nhỏ tệp CSS và JavaScript11

11. Kiểm tra thường xuyên

Cách tốt nhất để tìm hiểu xem trang web dành cho thiết bị di động của bạn thân thiện với thiết bị di động như thế nào là kiểm tra nó! Bạn sẽ muốn làm điều này theo ba cách khác nhau:

Chạy URL thông qua Công cụ thân thiện với thiết bị di động của Google

Google có một công cụ kiểm tra tính thân thiện với thiết bị di động miễn phí mà bất kỳ ai cũng có thể sử dụng để kiểm tra mức độ thân thiện với thiết bị di động của bất kỳ URL cụ thể nào – cho dù đó là trang chủ (như bên dưới) hay một trang trong trang web của bạn.

Thử các kích thước thiết bị khác nhau từ máy tính để bàn của bạn

Một cách tuyệt vời để kiểm tra mức độ phản hồi của trang web của bạn là thử với hình dạng của tab trên trang web mà bạn đã mở. Khi bạn giảm độ rộng của tab, bạn sẽ nhận thấy trang web của mình bắt đầu ‘co lại’ và biến thành phiên bản thân thiện với thiết bị di động hơn.

Để nhanh chóng kiểm tra giao diện của bất kỳ thứ gì trên thiết bị di động, bạn cũng có thể nhấp chuột phải vào trang web của mình, chọn ‘Kiểm tra’, sau đó nhấp vào biểu tượng hai màn hình xuất hiện trên thanh công cụ ở trên cùng.

Tin tốt cho hầu hết các trang web là phần lớn công việc khó khăn có thể sẽ được thực hiện cho bạn theo chủ đề hoặc mẫu của bạn. Điều đó nói rằng, chúng tôi nghĩ rằng bạn nên thực hiện các điều chỉnh bổ sung được nêu ở trên để đảm bảo người dùng thiết bị di động của bạn nhận được trải nghiệm tuyệt vời, thay vì trải nghiệm chấp nhận được. Rốt cuộc, các số liệu thống kê cho biết họ có thể sẽ chiếm phần lớn người dùng của bạn!

CÔNG TY CP ĐÀO TẠO VÀ HUẤN LUYỆN PHÁT TRIỂN DOANH NGHIỆP TC 

Fanpage: www.facebook.com/ChuyendoisoDoanhNghiepToandien

Website: hosting.org.vn

Hotline: 1900 2929 44 (Phím 3)

Số điện thoại: 0868 77 39 39