Bạn đã thiết kế trang web của mình trên máy tính để bàn. Nó trông rất tuyệt — ảnh sắc nét, bố cục gọn gàng, mọi thứ đều thẳng hàng hoàn hảo trên màn hình 24 inch của bạn. Sau đó, bạn mở nó trên điện thoại và tự hỏi điều gì đã xảy ra. Chữ quá nhỏ. Hình ảnh quá rộng. Bạn phải chụm và phóng to để đọc bất cứ thứ gì. Các nút không thể chạm được.
Bạn không tưởng tượng đâu. Trang web của bạn thực sự trông khác nhau trên các thiết bị khác nhau, và việc hiểu tại sao — và phải làm gì về điều đó — là điều cần thiết cho doanh nghiệp của bạn.
Giải thích kỹ thuật (Đơn giản hóa)
Màn hình máy tính để bàn thường rộng 1920 pixel. Màn hình điện thoại rộng khoảng 390 pixel. Đó là sự khác biệt gần 5 lần. Nếu trang web của bạn được xây dựng với chiều rộng cố định được thiết kế cho màn hình máy tính để bàn, điện thoại đơn giản là không thể hiển thị nó đúng cách.
Có ba cách tiếp cận để xử lý vấn đề này:
1. Thiết kế chiều rộng cố định (Cách cũ)
Các trang web được xây dựng trước khoảng năm 2012 thường được thiết kế với chiều rộng cố định — thường là 960 hoặc 1024 pixel. Trên máy tính để bàn, chúng trông ổn. Trên điện thoại, trình duyệt cố gắng hiển thị toàn bộ bố cục 960 pixel lên màn hình 390 pixel. Kết quả là mọi thứ bị thu nhỏ xuống khoảng 40% kích thước dự định. Do đó gây ra việc chụm, phóng to và sự khó chịu.
Nếu trang web của bạn được xây dựng cách đây hơn 8-10 năm và chưa bao giờ được thiết kế lại, thì đây gần như chắc chắn là điều đang xảy ra.
2. Thiết kế đáp ứng (Tiêu chuẩn hiện đại)
Thiết kế đáp ứng sử dụng CSS (mã điều khiển giao diện trang web) để điều chỉnh bố cục dựa trên kích thước màn hình. Thay vì một bố cục cố định, trang web có các hướng dẫn cho nhiều kích thước màn hình:
- Máy tính để bàn (1200px+): Bố cục đầy đủ, thiết kế đa cột, hình ảnh lớn
- Máy tính bảng (768-1199px): Bố cục đơn giản hóa một chút, điều chỉnh khoảng cách
- Điện thoại (dưới 768px): Bố cục một cột, các mục chạm lớn hơn, điều hướng đơn giản hóa
Cùng một trang web, cùng một nội dung — nhưng được sắp xếp lại và thay đổi kích thước để hoạt động tốt trên mọi thiết bị. Đây là tiêu chuẩn tối thiểu cho bất kỳ trang web kinh doanh nào ngày nay.
3. Thiết kế ưu tiên di động (Cách tiếp cận tốt nhất)
Thiết kế ưu tiên di động đưa thiết kế đáp ứng lên một tầm cao mới. Thay vì thiết kế cho máy tính để bàn rồi điều chỉnh cho điện thoại, bạn thiết kế cho điện thoại trước rồi mới mở rộng cho màn hình lớn hơn. Điều này đảm bảo trải nghiệm di động — nơi phần lớn khách truy cập của bạn — nhận được sự tập trung chính.
Tại sao điều này quan trọng đối với doanh nghiệp của bạn
Theo Statista, thiết bị di động chiếm khoảng 58,99% lưu lượng truy cập trang web toàn cầu trong quý đầu tiên năm 2022. Đối với các tìm kiếm dịch vụ địa phương nói riêng, BrightLocal báo cáo rằng 64% người tiêu dùng sử dụng điện thoại thông minh của họ.
Nếu trang web của bạn không hoạt động đúng cách trên điện thoại, bạn đang cung cấp trải nghiệm kém cho phần lớn khách truy cập của mình. Và "trải nghiệm kém" trực tiếp dẫn đến "mất khách hàng."
Nhưng nó còn sâu sắc hơn trải nghiệm người dùng. Kể từ tháng 3 năm 2021, Google đã sử dụng lập chỉ mục ưu tiên di động cho tất cả các trang web. Google chủ yếu đánh giá phiên bản di động của trang web của bạn khi quyết định xếp hạng bạn ở đâu. Nếu trang web di động của bạn có vấn đề — bố cục bị hỏng, văn bản quá nhỏ, các yếu tố quá gần nhau — Google sẽ phạt bạn trong bảng xếp hạng tìm kiếm cho tất cả các thiết bị.
Các vấn đề di động phổ biến và nguyên nhân của chúng
Văn bản quá nhỏ để đọc
Trên một trang web có chiều rộng cố định hiển thị trên điện thoại, văn bản chính có kích thước 16px thoải mái trên máy tính để bàn sẽ hiển thị hiệu quả ở mức 6-7px. Google đặc biệt gắn cờ văn bản nhỏ hơn 16px là vấn đề khả năng sử dụng trên thiết bị di động trong Search Console. Giải pháp là kích thước phông chữ đáp ứng điều chỉnh dựa trên chiều rộng màn hình.
Các mục chạm quá gần nhau
Các liên kết điều hướng, nút và các yếu tố có thể nhấp cần có khoảng cách thích hợp trên màn hình cảm ứng. Google khuyến nghị các mục chạm phải có kích thước ít nhất 48x48 pixel CSS với ít nhất 8 pixel khoảng cách giữa chúng. Khi các liên kết được đóng gói quá gần nhau, người dùng vô tình chạm nhầm — hoặc bỏ cuộc hoàn toàn.
Cuộn ngang
Nếu bạn phải cuộn ngang để xem nội dung trang web của mình trên điện thoại, có điều gì đó không ổn. Điều này thường do hình ảnh hoặc các yếu tố có chiều rộng cố định vượt quá chiều rộng màn hình. CSS hiện đại sử dụng các đơn vị tương đối (phần trăm, chiều rộng khung nhìn) thay vì chiều rộng pixel cố định để ngăn chặn điều này.
Nội dung bị ẩn hoặc thiếu trên di động
Một số thiết kế đáp ứng cũ hơn chỉ đơn giản là ẩn nội dung trên di động để mọi thứ vừa vặn. Đây là một thực hành tồi. Nếu nội dung đủ quan trọng để có trên trang web máy tính để bàn, nó cũng phải có thể truy cập được trên di động — chỉ cần sắp xếp lại để phù hợp với màn hình nhỏ hơn.
Tải chậm trên kết nối di động
Ngay cả khi một trang web trông đúng trên di động, nó có thể mất quá nhiều thời gian để tải qua kết nối di động. Các trang web được tối ưu hóa cho di động phục vụ hình ảnh có kích thước phù hợp, giảm thiểu JavaScript và sử dụng tải chậm (lazy loading) để đảm bảo hiệu suất nhanh ngay cả trên các kết nối chậm hơn.
Cách kiểm tra trải nghiệm di động của bạn
Có một số cách để đánh giá trải nghiệm di động của bạn:
- Chỉ cần sử dụng điện thoại của bạn. Mở trang web của bạn trên điện thoại và thử sử dụng nó. Bạn có thể đọc văn bản mà không cần phóng to không? Bạn có thể chạm vào các nút dễ dàng không? Nó có tải nhanh không? Bạn có thể tìm số điện thoại của mình và gọi chỉ với một lần chạm không?
- Công cụ kiểm tra thân thiện với thiết bị di động của Google: Truy cập search.google.com/test/mobile-friendly và nhập URL của bạn. Google sẽ cho bạn biết liệu trang của bạn có vượt qua tiêu chí thân thiện với thiết bị di động của họ hay không và gắn cờ bất kỳ vấn đề nào.
- PageSpeed Insights: Truy cập pagespeed.web.dev và nhập URL của bạn. Chọn tab "Di động". Bạn sẽ nhận được điểm hiệu suất chi tiết và danh sách các vấn đề di động cụ thể.
- Công cụ dành cho nhà phát triển của Chrome: Trong Google Chrome trên máy tính để bàn của bạn, nhấn F12 để mở công cụ dành cho nhà phát triển. Nhấp vào biểu tượng thiết bị để chuyển đổi chế độ xem kích thước điện thoại và xem trang web của bạn trông như thế nào trên các thiết bị khác nhau.
Chi phí khi bỏ qua di động
Đây là những gì một trải nghiệm di động kém thực sự gây thiệt hại cho bạn:
- Mất khách truy cập: 61% khách truy cập di động không có khả năng quay lại một trang web mà họ gặp khó khăn khi truy cập, theo nghiên cứu của Google/Ipsos.
- Mất lòng tin: 48% người dùng cho rằng nếu một trang web không hoạt động tốt trên di động, họ coi đó là dấu hiệu cho thấy doanh nghiệp không quan tâm, theo cùng nghiên cứu của Google/Ipsos.
- Mất thứ hạng: Google công khai xếp hạng các trang web không thân thiện với di động thấp hơn trong kết quả tìm kiếm.
- Mất khách hàng tiềm năng: Nếu số điện thoại của bạn không thể nhấp để gọi trên di động, bạn đang dựa vào khách hàng tự nhập số của bạn vào trình quay số của họ. Hầu hết sẽ không bận tâm — họ sẽ gọi kết quả tiếp theo.
Trải nghiệm di động tốt trông như thế nào
Khi một khách hàng tiềm năng truy cập trang web của bạn trên điện thoại của họ, trải nghiệm nên là như thế này:
- Trang tải trong vòng chưa đầy 2 giây
- Họ ngay lập tức thấy tên doanh nghiệp của bạn, những gì bạn làm và cách liên hệ với bạn
- Văn bản lớn và dễ đọc mà không cần phóng to
- Nút "Gọi ngay" hiển thị mà không cần cuộn
- Họ có thể cuộn qua các dịch vụ của bạn, xem đánh giá của bạn và xem ảnh công việc của bạn
- Mọi thứ chỉ cách một lần chạm ngón tay cái — không cần chụm, phóng to hay tìm kiếm
- Một biểu mẫu liên hệ dễ điền bằng bàn phím điện thoại
Đó là những gì trang web của đối thủ cạnh tranh của bạn nên trông như vậy, và đó là những gì trang web của bạn cần phải trông như vậy. Nếu không, bạn đang mất khách hàng vào tay các nhà thầu đã nhận ra điều này.
Tin tốt: có được một trang web thân thiện với di động dễ dàng và ít tốn kém hơn bao giờ hết. Tin xấu: mỗi ngày bạn chờ đợi là một ngày mất đi khách hàng tiềm năng. Khách hàng của bạn đang sử dụng điện thoại của họ ngay bây giờ, tìm kiếm các dịch vụ bạn cung cấp. Hãy đảm bảo những gì họ tìm thấy đáng giá thời gian của họ.