Thiết kế website responsive hiển thị gọn trên điện thoại và mọi màn hình

Thử để ý người quanh bạn tra cứu một tiệm ăn, một chỗ sửa xe hay một nhà cung cấp: gần như ai cũng rút điện thoại ra chứ không mở máy tính. Với phần lớn ngành ở Việt Nam, số người vào web bằng điện thoại đã vượt xa số người dùng máy tính từ lâu. Nếu web của bạn mở trên điện thoại mà chữ bé xíu, phải chụm hai ngón phóng to, nút bấm trượt ra ngoài, thì bạn đang mất khách ngay ở giây đầu tiên, trước cả khi họ kịp đọc bạn bán gì.

Đó là lý do thiết kế website responsive không còn là một tính năng cho sang, mà là điều kiện tối thiểu để một web đáng để chạy. Responsive (một bản web tự xếp lại cho vừa từng màn hình) nghĩa là dù khách mở trên điện thoại nhỏ, máy tính bảng hay màn hình lớn, mọi thứ vẫn gọn gàng, đọc được, bấm được, không ai phải vật lộn.

Web22 dựng mọi web theo chuẩn này ngay từ đầu, và trang này nói rõ responsive thật ra là gì, Web22 làm thế nào, kiểm tra ra sao, và vì sao nó ăn thẳng vào chuyện web của bạn có giữ được khách hay không. Đây là phần nền mà mọi web trong dịch vụ thiết kế website của Web22 đều có sẵn.

Nhiều người nghĩ để web chạy được trên điện thoại thì phải làm thêm một bản riêng cho điện thoại. Đó là cách làm cũ, và nó kéo theo phiền phức: hai bản web, hai nơi để sửa, dễ lệch nội dung, và Google phải phân vân không biết bản nào là chính.

Responsive đi theo hướng ngược lại. Chỉ có một web, một địa chỉ, và chính web đó tự nhận ra khách đang mở bằng màn hình rộng bao nhiêu để sắp xếp lại cho hợp. Trên điện thoại, các khối xếp thành một cột dọc cho dễ cuộn. Trên máy tính bảng, chúng dàn thành hai cột. Trên màn hình lớn, nội dung trải rộng ra tận dụng chỗ trống. Vẫn cùng một nội dung, chỉ là cách bày khác đi theo chỗ ngồi của người xem.

Cái được của một bản duy nhất không chỉ là gọn. Bạn sửa một chỗ là mọi màn hình cập nhật theo, khỏi lo bản điện thoại quên chưa sửa. Nội dung không bị nhân đôi nên tín hiệu gửi tới Google gom về một mối thay vì loãng ra. Và khách chia sẻ link nào thì người nhận mở ra cũng thấy đúng trang đó, dù họ đang cầm thiết bị gì.

Có một điều nhiều chủ web chưa biết: khi Google đánh giá web của bạn để xếp hạng, nó nhìn vào bản hiển thị trên điện thoại chứ không phải bản trên máy tính. Cách làm này Google gọi là lập chỉ mục ưu tiên thiết bị di động, và đã áp dụng cho gần như mọi web. Bạn có thể đọc thẳng tài liệu chính thức của Google về việc này.

Hệ quả rất thực tế. Nếu bản điện thoại của web thiếu nội dung, tải chậm hoặc khó dùng, thứ hạng của bạn trên Google chịu ảnh hưởng, kể cả với người tìm kiếm bằng máy tính. Một web responsive làm tốt phần điện thoại vì thế không chỉ giữ khách, mà còn giữ cho phần kỹ thuật SEO của bạn không bị trừ điểm oan.

Web22 dựng web responsive gắn liền với chuyện làm chuẩn SEO ngay từ nền, để bản điện thoại đầy đủ nội dung y như bản máy tính, không phải một bản rút gọn thiếu trước hụt sau. Web22 không hứa một thứ hạng cụ thể vì điều đó do Google quyết, nhưng phần kỹ thuật trong tầm kiểm soát thì làm cho chắc.

Cách làm dở nhất là dựng web cho màn hình máy tính trước, tới lúc gần xong mới cố nhồi cho nó co lại vừa điện thoại. Kiểu đó thường ra một bản điện thoại chắp vá, chữ chồng chữ, khoảng trống lộn xộn. Web22 làm ngược lại, gọi là ưu tiên điện thoại: hình dung và dựng cho màn nhỏ trước, rồi mới mở rộng dần ra máy tính bảng và màn lớn.

Lý do đơn giản. Màn nhỏ là chỗ khó nhất, ép bạn phải chọn ra thứ gì thật sự quan trọng để đưa lên trước, thứ gì để sau. Khi phần khó nhất đã gọn gàng, mở rộng ra màn lớn chỉ là thêm chỗ thở, dễ hơn nhiều so với chiều ngược lại. Khách mở điện thoại thấy đúng cái cần, không phải cuộn qua một mớ để tìm nút gọi.

Trong lúc dựng, Web22 đặt các điểm gãy, tức là những cỡ màn mà web đổi cách bày khối. Dưới một cỡ thì một cột, qua một cỡ thì hai cột, rộng hơn nữa thì dàn ba cột. Nhờ vậy web không bao giờ rơi vào cảnh chật cứng trên điện thoại hay trống trải giữa một màn hình rộng, mà luôn vừa vặn với chỗ nó đang hiển thị.

Một web nhìn thì responsive nhưng bấm lại ức chế thì vẫn hỏng. Trên máy tính, con trỏ chuột nhọn và chính xác, bấm trúng một liên kết bé tí cũng được. Trên điện thoại, người ta bấm bằng đầu ngón tay, to hơn con trỏ nhiều, nên mọi thứ phải được tính cho vừa ngón tay.

Web22 để nút và các chỗ bấm đủ to, cách nhau đủ rộng để ngón tay không bấm nhầm sang nút bên cạnh. Cỡ chữ trên điện thoại đủ lớn để đọc mà không phải nheo mắt hay phóng to. Menu gom lại gọn thành một nút mở ra thay vì trải một hàng dài tràn màn hình. Số điện thoại thì bấm vào gọi được ngay, địa chỉ thì chạm mở thẳng bản đồ, những thao tác khách trên điện thoại hay cần.

Những chi tiết này nghe nhỏ nhưng cộng lại quyết định khách ở lại hay bỏ đi. Một tiệm bánh gần nhà có web đẹp tới đâu, mà khách trên điện thoại không tìm ra nút gọi trong ba giây thì cũng như không.

Nếu bạn đang có một web cũ hiển thị tốt trên máy tính nhưng vỡ giao diện trên điện thoại, câu hỏi đầu tiên là nên vá lại hay dựng mới. Câu trả lời tuỳ vào cách web đó được dựng, và Web22 sẽ nói thẳng sau khi xem qua mã nguồn.

Với một số web, phần khung còn tốt, chỉ thiếu lớp xử lý cho màn nhỏ, thì thêm phần responsive vào là chạy được, đỡ tốn hơn làm lại. Với web quá cũ, dựng theo kiểu đã lỗi thời hoặc chắp vá nhiều lần, thì vá responsive có khi tốn công hơn và vẫn không bền, lúc đó dựng lại một bản gọn gàng lại hoá ra rẻ hơn về lâu dài. Web22 không giấu chuyện này để nhận việc, mà cân cho bạn cái nào đáng tiền hơn.

Nếu hướng đi là làm lại, bạn xem thêm cách Web22 tiếp cận việc thiết kế lại một web cũ, giữ những gì còn dùng được và thay phần đã lỗi thời, thay vì đập đi xây lại từ số không.

Đây là chỗ dễ bị làm ẩu nhất. Nhiều nơi chỉ thu nhỏ cửa sổ trình duyệt trên máy tính rồi bảo web đã responsive. Cách đó bỏ sót rất nhiều thứ, vì một cửa sổ thu nhỏ không hành xử y như một chiếc điện thoại thật với ngón tay thật.

Web22 kiểm tra web qua nhiều cỡ màn khác nhau, mở thử trên điện thoại thật để soi từng chỗ: chữ có đủ lớn không, nút có bấm trúng không, ảnh có tràn ra ngoài không, bảng dữ liệu dài có cuộn ngang gọn không, biểu mẫu có gõ được thoải mái không. Cả cảnh xoay ngang điện thoại cũng được thử, vì nhiều người xem web ở tư thế đó. Đây là phần thuộc về thiên hướng làm việc rõ ràng của Web22: có một danh mục các thứ phải soi, đi hết rồi mới bàn giao.

Nhờ bước kiểm tra này, tới tay bạn là một web đã chạy mượt trên thiết bị thật, không phải một bản đẹp trên màn hình thiết kế mà ra điện thoại mới lòi lỗi. Khi bàn giao, Web22 cũng chỉ bạn cách tự mở web trên chính điện thoại của mình để kiểm, để bạn yên tâm bằng mắt mình.

Một điều Web22 muốn nói rõ để bạn khỏi băn khoăn: responsive không phải một món phụ thu. Mọi web Web22 dựng đều responsive mặc định, giá đã gồm sẵn phần đó, không có chuyện báo một giá rồi tính thêm tiền để web chạy được trên điện thoại. Với web mới, bạn cứ hình dung chi phí theo loại web mình cần, con số cụ thể Web22 chốt sau khi nghe rõ nhu cầu. Các mức tham khảo có ở bảng giá tổng.

Trường hợp khác là bạn đã có web nhưng đang vỡ trên điện thoại và chỉ muốn sửa riêng phần đó. Khi ấy giá phụ thuộc vào việc web hiện tại được dựng thế nào, vá thêm lớp responsive hay phải dựng lại, nên Web22 báo số sau khi đánh giá mã nguồn chứ không áp một mức chung. Đánh giá này Web22 làm trước và nói thẳng, để bạn tự quyết trên thông tin rõ ràng.

Còn hoá đơn đỏ thì Web22 chưa xuất được, do nhóm vẫn chạy dạng freelance chưa lập pháp nhân. Bên nào cần chứng từ cho khoản làm web thì báo trước để hai bên cân đối cho hợp.

Mọi lời mô tả về responsive đều thua một lần bạn tự mở. Cách thành thật nhất Web22 có thể mời là bạn cầm điện thoại của mình, mở thử một web Web22 đã dựng, rồi xoay dọc xoay ngang, cuộn, bấm thử vài nút để tự cảm nhận nó gọn tới đâu.

Bên dưới là hình một web Web22 dựng đặt cạnh nhau ở hai khổ, trên máy tính và trên điện thoại, để bạn thấy cùng một web mà bày lại khác nhau thế nào cho vừa từng màn. Đây là các bản Web22 tự dựng và đang chạy thật, bạn mở ra kiểm chứng được từng phần, không phải ảnh minh hoạ dàn dựng.