Phương pháp thiết kế web responsive rất hữu ích cho các nhà phát triển vì chúng cho phép hiển thị các nội dung trên mọi thiết bị mà không cần duy trì các phiên bản riêng biệt của website. Ngoài ra, nó không có một sô hạn chế như thiết kế mở rộng (scaling layout) hay thiết kế “mềm” (fluid layout).
Bài viết này đưa ra 3 sai lầm khi thiết kế website responsive, đồng thời đưa ra những phương pháp để tránh những sai trái này.
1. Thanh điều hướng
Nếu bạn sử dụng một thanh điều hướng ở phía trên cùng của trang, một thiết kế responsive cần phải diễn đạt một cách chuẩn xác nó với một định dạng nhỏ hơn khi website được hiển thị trên một màn hình nhỏ. Điều này đôi khi không hoạt động như bạn mong muốn, bởi các các trình đơn trong menu không thể xếp thành các hàng đồng đều. Điều này thường xảy ra khi thiết kế web bán hàng với nhiều danh mục sản phẩm khác nhau.
Có một số cách giải quyết vấn đề này. Đầu tiên là giảm thiểu các mục được hiển thị theo chiều ngang trên thanh điều hướng bằng cách phân loại chúng theo các chủ đề, sau đó có thể hiển thị theo cách thả xuống khi một chủ đề được chọn. Bên cạnh đó bạn cũng có thể sử dụng một menu ẩn, chỉ hiển thị các danh mục khi khách hàng muốn dạo.
2. Biến dạng yếu tố
Đây là trường hợp khi mà các nguyên tố bị thay đổi hệ thống phân cấp khi thiet ke web ban hang responsive. Điều này xảy ra khi các cột chưa được xử lý trở thành một hàng mới khi hiển thị. Đáng kinh ngạc là cách giải quyết tình huống này vô cùng đơn giản, bạn chỉ cấp thiết lập chiều rộng, chiều cao và khoảng cách giữa các nguyên tố một cách rõ ràng. Nếu nó di chuyển ra khỏi vị trí và lấp lên các nhân tố khác. Bạn có thể cố định nó tại nơi bạn muốn bằng cách để nó trong thẻ div và thiết lập lề.
3. Sử dụng các bức ảnh với chiều rộng nhất thiết
Phần nội dung thường được thiết lập để có kích thước tương đối so với màn hình. Bởi thế, khi một hình ảnh được nhất định chiều rộng lớn hơn so với kích tấc màn hình, hình ảnh này sẽ chẳng thể hiển thị đầy đủ. Trường hợp này thường xảy ra với các banner khi thiet ke website thuong mai dien tu. Bạn có thể tránh tình huống này bằng cách sử dụng các đơn vị can hệ để thiết lập chiều rộng của hình ảnh hoặc có thể sử dụng một framework để hỗ trợ như Bootstrap chẳng hạn.
Bài viết này đưa ra 3 sai lầm khi thiết kế website responsive, đồng thời đưa ra những phương pháp để tránh những sai trái này.
1. Thanh điều hướng
Nếu bạn sử dụng một thanh điều hướng ở phía trên cùng của trang, một thiết kế responsive cần phải diễn đạt một cách chuẩn xác nó với một định dạng nhỏ hơn khi website được hiển thị trên một màn hình nhỏ. Điều này đôi khi không hoạt động như bạn mong muốn, bởi các các trình đơn trong menu không thể xếp thành các hàng đồng đều. Điều này thường xảy ra khi thiết kế web bán hàng với nhiều danh mục sản phẩm khác nhau.
Có một số cách giải quyết vấn đề này. Đầu tiên là giảm thiểu các mục được hiển thị theo chiều ngang trên thanh điều hướng bằng cách phân loại chúng theo các chủ đề, sau đó có thể hiển thị theo cách thả xuống khi một chủ đề được chọn. Bên cạnh đó bạn cũng có thể sử dụng một menu ẩn, chỉ hiển thị các danh mục khi khách hàng muốn dạo.
2. Biến dạng yếu tố
Đây là trường hợp khi mà các nguyên tố bị thay đổi hệ thống phân cấp khi thiet ke web ban hang responsive. Điều này xảy ra khi các cột chưa được xử lý trở thành một hàng mới khi hiển thị. Đáng kinh ngạc là cách giải quyết tình huống này vô cùng đơn giản, bạn chỉ cấp thiết lập chiều rộng, chiều cao và khoảng cách giữa các nguyên tố một cách rõ ràng. Nếu nó di chuyển ra khỏi vị trí và lấp lên các nhân tố khác. Bạn có thể cố định nó tại nơi bạn muốn bằng cách để nó trong thẻ div và thiết lập lề.
3. Sử dụng các bức ảnh với chiều rộng nhất thiết
Phần nội dung thường được thiết lập để có kích thước tương đối so với màn hình. Bởi thế, khi một hình ảnh được nhất định chiều rộng lớn hơn so với kích tấc màn hình, hình ảnh này sẽ chẳng thể hiển thị đầy đủ. Trường hợp này thường xảy ra với các banner khi thiet ke website thuong mai dien tu. Bạn có thể tránh tình huống này bằng cách sử dụng các đơn vị can hệ để thiết lập chiều rộng của hình ảnh hoặc có thể sử dụng một framework để hỗ trợ như Bootstrap chẳng hạn.
