Phương pháp thiết kế web responsive rất hữu dụng 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 biệt lập của website. Ngoại giả, 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ế web 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 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 mô tả một cách xác thự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 chẳ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ể dùng một menu ẩn, chỉ hiển thị các danh mục khi khách hàng muốn từng. 2. Biến dạng yếu tố Đây là trường hợp khi mà các nhân tố bị thay đổi hệ thống phân cấp khi thiết kế web bán hàng 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 sửng sốt là cách giải quyết tình huống này khôn cùng đơn giản, bạn chỉ cần thiết lập chiều rộng, chiều cao và khoảng cách giữa các nhân tố một cách rõ ràng. Nếu nó chuyển di ra khỏi vị trí và che lên các nhân tố khác. Bạn có thể khăng khăng nó tại nơi bạn muốn bằng cách để nó trong thẻ div và thiết lập lề. 3. Dùng các bức ảnh với chiều rộng nhất quyết Phần nội dung thường được thiết lập để có kích tấc tương đối so với màn hình. Bởi vậy, khi một hình ảnh được nhất mực 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 cảnh huống này bằng cách sử dụng các đơn vị hệ trọng để thiết lập chiều rộng của hình ảnh hoặc có thể dùng một framework để tương trợ như Bootstrap chả hạn.
