Thiết kế website đa thiết bị

Responsive nghĩa là cùng một website, cùng một địa chỉ, cùng nội dung, nhưng tự sắp xếp lại cách bày để vừa với màn hình người xem đang dùng. Trên điện thoại, mọi thứ xếp dọc một cột cho dễ cuộn; trên laptop, nó dàn ra nhiều cột tận dụng chiều rộng. Người dùng không phải phóng to, không phải kéo ngang để đọc. Sở dĩ đây là bắt buộc vì hai lẽ: phần lớn người vào web bằng điện thoại, và Google dùng chính bản trên điện thoại của web để đánh giá và xếp hạng. Một web không hiển thị tốt trên điện thoại vừa mất khách vừa bị thiệt trên tìm kiếm.

Đây là phần chuyên sâu nằm trong trang dịch vụ gốc của Web22 — trang tổng nói về làm web nói chung, còn trang này đi thẳng vào phần hiển thị đa thiết bị.

Có một cách cũ là thiết kế web cho máy tính trước rồi cố cắt gọt cho vừa điện thoại, và cách đó thường để lại một bản điện thoại chắp vá. Mobile-first làm ngược lại: thiết kế cho màn hình nhỏ nhất trước, lo cho trải nghiệm điện thoại được tốt nhất, rồi mới mở rộng dần lên các màn lớn hơn. Vì điện thoại là nơi đông người dùng nhất và cũng là nơi Google nhìn vào, đặt nó lên đầu là hợp lý. Web22 dựng web theo hướng mobile-first, để bản điện thoại không phải là phần bị bỏ quên mà là phần được lo kỹ nhất.

Có ba cách để phục vụ người dùng điện thoại, và với hầu hết website, cách responsive một bản là tốt nhất. Làm một bản web riêng cho điện thoại (kiểu địa chỉ bắt đầu bằng chữ m) là cách cũ đã lỗi thời: bạn phải nuôi hai địa chỉ, sửa hai nơi dễ lệch nhau, và việc có hai bản nội dung làm loãng tín hiệu trên Google. Làm một ứng dụng riêng để khách tải về thì tốn kém, và ứng dụng không hiện trên kết quả tìm kiếm. Một web responsive thì chỉ một bản, một địa chỉ: sửa một nơi áp cho mọi màn, gom hết sức mạnh về một chỗ trên Google, và rẻ cũng như dễ bảo trì nhất. Ứng dụng riêng chỉ đáng làm khi bạn có nhu cầu rất đặc thù mà một web không đáp ứng được.

Web responsive không co giãn lung tung mà đổi bố cục tại những ngưỡng chiều rộng định trước, gọi là điểm gãy. Ví dụ dưới một ngưỡng nào đó (cỡ điện thoại) thì mọi thứ xếp một cột; rộng hơn một chút (máy tính bảng) thì thành hai cột; tới cỡ laptop thì hiện đủ ba cột và menu đầy đủ; lên màn lớn thì dàn rộng với nhiều khoảng thở hơn. Việc chọn điểm gãy ở đâu và mỗi cỡ bày thế nào là phần thiết kế thật, không phải để web tự xử bừa. Web22 cân nhắc các điểm gãy để màn nào đọc cũng dễ và bấm cũng thuận.

Hiển thị tốt trên điện thoại không chỉ là thu nhỏ lại. Bố cục phải co giãn mềm: cột rộng theo tỷ lệ thay vì cố định, ảnh và video tự thu cho vừa khung, không bị tràn ra ngoài. Quan trọng không kém là phần chạm: trên điện thoại người ta dùng ngón tay chứ không dùng chuột, nên nút bấm phải đủ to để chạm không trượt, chữ phải đủ lớn để đọc không cần phóng to, và những thứ chỉ hiện khi rê chuột phải có cách thay thế. Web22 dựng các phần này theo đúng cách người ta thật sự dùng điện thoại.

Người xem trên điện thoại thường dùng mạng di động chập chờn và ít kiên nhẫn hơn, nên tốc độ trên điện thoại còn quan trọng hơn trên máy tính. Web22 giữ web đạt ngưỡng tốc độ Google đòi hỏi (Core Web Vitals — bộ chỉ số đo trang hiện nội dung nhanh ra sao, phản hồi thao tác có mượt không, bố cục có nhảy lúc tải không) bằng cách nén ảnh, khai báo sẵn kích thước để trang không nhảy, và giữ mã gọn. Làm responsive đúng cách không làm web chậm đi; web chậm là do ảnh nặng và mã thừa, không phải do hỗ trợ nhiều thiết bị. Web cũ chậm thì xem tối ưu hiệu năng.

Đây là điều nhiều người chưa biết: Google không còn nhìn bản máy tính của web để xếp hạng, mà nhìn bản trên điện thoại. Nghĩa là nếu web bạn đẹp trên máy tính nhưng vỡ hoặc thiếu nội dung trên điện thoại, thứ hạng của bạn bị đánh giá theo cái bản kém đó. Một web responsive làm tốt đảm bảo bản điện thoại đầy đủ và mượt như bản máy tính, nên không bị thiệt. Đây là một lý do nữa để responsive không phải tuỳ chọn mà là nền tảng. Muốn hiểu sâu phần làm web để lên Google, xem thiết kế website chuẩn SEO.

Một web nhìn ổn khi thu nhỏ cửa sổ trình duyệt trên máy tính vẫn có thể gặp lỗi khi mở trên điện thoại thật: nút bị che, chữ bị tràn, một số thao tác chạm không ăn. Vì vậy Web22 kiểm thử web trên thiết bị thật với nhiều cỡ màn khác nhau chứ không chỉ tin vào công cụ giả lập. Đây là bước hay bị bỏ qua, và là lý do nhiều web “responsive” trên giấy tờ vẫn khó dùng trên điện thoại thật.

Đôi khi bạn nghe thêm từ adaptive (thích ứng) và dễ nhầm với responsive. Khác biệt nằm ở cách web đổi bố cục. Responsive co giãn liên tục và mượt theo chiều rộng màn, nên cỡ màn nào cũng vừa. Adaptive thì chuẩn bị sẵn vài bố cục cố định cho vài cỡ màn nhất định rồi nhảy giữa chúng, nên ở những cỡ màn nằm giữa có thể không khít. Với sự đa dạng màn hình ngày nay, từ điện thoại nhỏ tới màn rất lớn, cách responsive co giãn liên tục thường an toàn và bền hơn. Web22 dựng theo hướng responsive để web vừa khít trên mọi cỡ màn chứ không chỉ vài cỡ định sẵn.

Nếu web hiện tại của bạn khó xem trên điện thoại, có thể cải thiện được, mức độ tuỳ vào cách nó được dựng. Một số web thêm được lớp responsive mà không phải làm lại từ đầu. Nhưng nếu web quá cũ hoặc dựng theo cách không còn phù hợp, vá chắp vá có khi tốn công mà vẫn khó dùng, lúc đó dựng lại gọn gàng lại đáng hơn. Web22 xem web cũ của bạn rồi nói thẳng nên sửa hay nên làm lại.

Web22 không tính responsive như một khoản riêng, mọi web Web22 làm đều responsive sẵn. Giá web vì vậy phụ thuộc vào loại web và quy mô: số trang, mức tuỳ biến, tính năng. Web giới thiệu thường từ khoảng 3 – 7 triệu, web tuỳ chỉnh theo thương hiệu 7 – 15 triệu, web bán hàng hoặc nhiều tính năng 15 – 30 triệu. Đây là dải tham khảo, con số chính xác chốt sau buổi tư vấn. Xem trọn các gói ở bảng giá tổng. Web22 không xuất hoá đơn VAT (Web22 chưa có pháp nhân), sẽ nói rõ khi bạn hỏi.

Bạn cho biết mình cần loại web gì — Web22 tư vấn 30 phút miễn phí, không ràng buộc, dựng web responsive chuẩn mobile-first và báo giá chính xác trong 24h. Liên hệ: [email protected] · 0981 828 781.

Tác giả

Nguyen Hien

Sáng lập Web22 — trực tiếp làm thiết kế website và SEO từ 2018. Facebook