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).

3 sai lầm khi thiết kế website responsive

3 sai lầm khi thiết kế website responsive

Bài viết này đưa ra 3 sai lầm hàng đầu khi thiết kế website responsive, đồng thời đưa ra những phương pháp để tránh những sai lầm này.

Thiết kế mở rộng, thiết kế “mềm” và responsive

Có rất nhiều sự nhầm lẫn về 3 loại hình thiết kếở trên. Các nhà thiết kế web chuyên nghiệp cũng không bao giờ sử dụng chúng để thay thế cho nhau. Trên thức tế, mỗi loại hình thiết kế là một bước tiến trong lĩnh vực thiết kế website dựa trên sự phát triển công nghệ.

Thiết kế mở rộng được thiết kế để mở rộng các yếu tố để có thể tương thích với những thay đổi trong kích thước. Sự bố trí trên website vẫn duy trì một sự nhất quán so với bản gốc trên màn hình máy tính. Điểm trừ của dạng thiết kế này là các văn bản, hình ảnh trở nên quá nhỏ, người xem cần phóng to lên mới có thể xem được nội dung.

Thiết kế mở rộng

Thiết kế "mềm" khác hơn một chút, bởi các yếu tố được thiết kế sao cho có thể tự thay đổi để phù hợp với kích thước. Tuy nhiên các thiết kế có thể bị phá vỡ khi người dùng thay đổi kích thước.

Thiết kế "mềm"

Thiết kế responsive không được thiết kế để mở rộng các yếu tố. Thay vào đó, nó được thiết kế để thay đổi cách hiển thị website dựa trên kích thước màn hình.

Thiết kế responsive

Và đây là những sai lầm khi thiết kế website responsive:

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 thể hiện một cách chính 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.

Thanh điều hướng

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 tìm kiếm.

2. Biến dạng yếu tố

Đây là trường hợp khi mà các yếu tố bị thay đổi hệ thống phân cấp khi thiết kế website 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 ngạc nhiên là cách giải quyết tình huống này vô 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 yếu tố một cách rõ ràng. Nếu nó di chuyển ra khỏi vị trí và bao phủ lên các yếu 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ề.

Biến dạng yếu tố

3. Sử dụng các bức ảnh với chiều rộng cố định

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. Vì vậy, khi một hình ảnh được cố định chiều rộng lớn hơn so với kích thước màn hình, hình ảnh này sẽ không thể hiển thị đầy đủ. Trường hợp này thường xảy ra với các banner khi thiết kế website thương mại điện tử. Bạn có thể tránh tình huống này bằng cách sử dụng các đơn vị liên quan để 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.

Sử dụng các bức ảnh với chiều rộng cố định

Bài viết này chỉ thảo luận về 3 sai lầm thường gặp nhất trong thiết kế web responsive, nhưng sẽ có rất nhiều trường hợp khiến bạn mắc sai lầm. Hạn chế lỗi là điều không quá khó khăn. Các trình duyệt hiện đại đã được xây dựng để thử nghiệm các layout responsive. Vì vậy, hãy lập kế hoạch cho riêng mình và kiểm tra tiến trình thiết kế thường xuyên.

Xem thêm >>> Sự khác biệt khi thiết kế website trên trình duyệt và Photoshop