Có một bạn học viên mới bắt đầu học làm web từng gửi cho chúng tôi trang cá nhân đầu tay. Bạn khoe làm xong chỉ trong một buổi tối. Trên laptop, trang trông khá ổn. Chữ căn đều, ảnh sắc nét, khung nào nằm đúng khung đó. Nhưng khi chúng tôi mở thử trên điện thoại, dòng chữ tràn ra ngoài màn hình. Các nút bấm dồn hết vào một góc. Người xem phải zoom qua zoom lại mới đọc được. Bạn ấy không biết mình đã bỏ sót điều quan trọng nhất, và đó chính là tính đáp ứng của giao diện. Kiến thức nền tảng responsive design là gì và vì sao người mới học web cần nắm vững thực ra không khó, nhưng rất dễ bị bỏ qua nếu không có ai nhắc.
Câu chuyện này khá quen với đội ngũ chúng tôi. Người mới thường học trên một chiếc máy tính quen tay. Nhìn thấy kết quả đẹp là họ yên tâm. Ít ai nghĩ đến việc người đọc sẽ mở trang bằng một màn hình nhỏ hơn rất nhiều. Chúng tôi thấy việc này lặp lại đủ nhiều lần để hiểu rằng vấn đề nằm ở thói quen kiểm tra, chứ không phải ở năng lực của người học.
Vì sao kiến thức này dễ bị bỏ qua khi mới học
Nguyên nhân nằm ở chính cách học. Ban đầu, người học tập trung vào việc đặt đúng thẻ HTML và viết đúng thuộc tính CSS. Mỗi khi làm xong một phần, họ mở trang lên để xem. Màn hình họ nhìn chính là màn hình họ đang dùng. Giao diện vì thế dần được hoàn thiện theo đúng một kích thước duy nhất, và cảm giác hài lòng đến rất nhanh.
Trên thực tế, phần lớn người dùng internet hiện nay lướt web chủ yếu bằng điện thoại. Một website chỉ đẹp trên máy cá nhân rất dễ vỡ bố cục khi đến tay người dùng thật. Vì vậy, khả năng thích ứng màn hình không phải lớp trang trí thêm về sau. Nó là một phần của nền tảng ngay từ đầu, giống như móng nhà phải được tính toán trước khi xây tường.
Khi đã nhận ra điều này, bạn sẽ bắt đầu nhìn trang web bằng con mắt khác. Nếu màn hình nhỏ đi một nửa, khối nội dung này sẽ nằm ở đâu? Nút bấm kia có đủ lớn để ngón tay bấm trúng không? Chữ ở đoạn này còn dễ đọc khi phải nheo mắt không? Những câu hỏi ấy mới là tư duy đúng khi làm giao diện.
Responsive design là gì trong thiết kế web
Hiểu đơn giản, responsive design là cách xây dựng website sao cho bố cục, kích thước chữ và hình ảnh tự co giãn theo màn hình đang hiển thị. Cùng một trang, mở trên điện thoại thì các cột nội dung xếp chồng lên nhau theo chiều dọc. Mở trên máy tính thì chúng nằm cạnh nhau theo chiều ngang. Người dùng không cần thao tác gì thêm.
Về kỹ thuật, phần việc này thường dựa vào media query trong CSS. Media query cho phép lập trình viên đặt ra các điểm ngắt, tức là những mốc kích thước màn hình mà tại đó bố cục sẽ thay đổi. Ví dụ, khi chiều rộng nhỏ hơn khoảng 768 pixel, thanh menu ngang có thể thu gọn thành biểu tượng ba gạch quen thuộc. Nhờ vậy, người đọc trên điện thoại không phải đối mặt với một hàng menu chật kín.
Mục tiêu cuối cùng là một trải nghiệm nhất quán trên mọi thiết bị, từ điện thoại, máy tính bảng cho tới máy tính để bàn. Người đọc không phải kéo ngang màn hình, không phải phóng to thu nhỏ, và không bấm nhầm chỉ vì hai nút nằm quá sát nhau. Khi làm được điều đó, bạn đã hiểu đúng bản chất của việc này.
Vì sao người mới học web cần nắm vững nguyên tắc này
Lý do đầu tiên khá thực tế. Hầu hết dự án website, dù là bài tập hay sản phẩm cho khách, đều coi việc hiển thị tốt trên di động là yêu cầu tối thiểu. Nhiều đơn vị nhận thiết kế kiểm tra giao diện trên điện thoại trước khi nghiệm thu. Nếu chưa làm chủ phần này, bạn khó nhận được một dự án đủ chuẩn, dù HTML và CSS cơ bản đã vững đến đâu.
Lý do thứ hai liên quan đến công cụ tìm kiếm. Google từ lâu đã chú trọng trải nghiệm trên thiết bị di động, vì phần lớn lượt tìm kiếm hiện nay đến từ điện thoại. Một website không thân thiện với di động có thể bị đánh giá thấp hơn đối thủ có giao diện tốt hơn, dù nội dung bên trong có chất lượng.
Lý do thứ ba thường xuất hiện khi người học bắt đầu làm dự án riêng. Giả sử bạn muốn xây một trang giới thiệu cho lớp học nhỏ của mình. Bạn sẽ phải cân nhắc nên làm landing page hay ứng dụng trước. Quyết định này khi mở trung tâm dạy online thường phụ thuộc khá nhiều vào việc trang đó có hiển thị mượt trên điện thoại hay không. Phần lớn học viên tiềm năng tìm hiểu qua điện thoại trước khi đăng ký, nên một trang vỡ bố cục rất dễ khiến họ rời đi.
Khi hiểu rõ nguyên tắc này, bạn cũng dễ đưa ra lựa chọn sát thực tế hơn. Mỗi hướng đi có yêu cầu hiển thị khác nhau trên từng loại màn hình. Đội ngũ chúng tôi từng tư vấn cho một người làm đào tạo kỹ năng, và điều khiến họ cân nhắc kỹ nhất chính là chi phí cho từng phương án. Bạn có thể tham khảo thêm so sánh landing page, hosting riêng và app mobile cho mô hình dạy học để thấy rõ sự khác biệt giữa từng hướng đi.
Ngoài ra, nếu bạn quan tâm đến việc đưa trang web ra thị trường nhanh và tiết kiệm, bạn sẽ thấy đây là một trong những yếu tố then chốt khi nghĩ đến marketing online. Giao diện thân thiện với di động giúp người dùng ở lại trang lâu hơn, điều mà công cụ tìm kiếm cũng quan tâm. Bạn có thể đọc thêm về những điều cần biết về SEO và marketing online trước khi tự làm cho shop nhỏ.
Vài việc nên làm ngay từ những ngày đầu
Nếu bạn đang học web, có mấy thói quen đơn giản nhưng hiệu quả. Mỗi lần thêm một khối giao diện, hãy thử kéo nhỏ cửa sổ trình duyệt để xem nó phản ứng thế nào. Công cụ phát triển có sẵn trong trình duyệt cho phép giả lập nhiều kích thước điện thoại khác nhau.
Nếu có điều kiện, hãy kiểm tra trên một chiếc điện thoại thật. Cảm giác chạm bằng ngón tay khác hẳn với click chuột, và nhiều lỗi chỉ lộ ra khi bạn thử thao tác thật. Đội ngũ chúng tôi thường khuyên học viên ghi lại các lỗi gặp trong từng bài tập. Sau một thời gian, bạn sẽ thấy những lỗi lặp đi lặp lại, như ảnh bị tràn, bảng dữ liệu không cuộn được hay chữ quá nhỏ trên màn hình hẹp. Biết trước những bẫy này sẽ giúp bạn tiết kiệm rất nhiều thời gian khi bước vào dự án thật.
Một điều nữa đáng nhắc là đừng để việc này trở thành công đoạn làm sau cùng, khi cả trang đã xong. Hãy thử đi theo hướng ngược lại: bắt đầu từ bản điện thoại rồi mở rộng dần lên máy tính. Cách làm này, thường gọi là mobile-first, buộc bạn giữ nội dung gọn gàng ngay từ đầu. Với người mới, đây là thói quen đáng hình thành sớm nhất.
Kết luận
Nắm chắc nguyên tắc co giãn giao diện ngay từ những bài học đầu tiên sẽ giúp người mới học web tránh được tình huống dở khóc dở cười như bạn học viên chúng tôi kể ở đầu bài. Đó cũng là nền móng để tiếp thu các kỹ thuật thiết kế hiện đại về sau, từ bố cục linh hoạt đến các framework giao diện.
Vì vậy, đừng vội chạy theo công cụ hay framework phức tạp khi chưa hiểu bản chất việc một trang web co giãn và thích ứng ra sao. Hãy bắt đầu bằng quan sát, thử nghiệm và đặt câu hỏi cho từng khối giao diện mình làm ra. Khi phần này đã vững, mọi kiến thức phía sau sẽ trở nên dễ tiếp cận hơn nhiều.