Web Responsive là gì ? tác dụng của Web Responsive trong thiết kế web

1. Thiết kế web responsive là gì?

• Web responsive hay còn được gọi là Responsive Web Design(dân lập trình thường viết tắt RWD) là một kiểu thiết kế làm cho web bạn chạy trên tất cả các thiết bị mà không bị bẻ hoặc bố cục không bị lộn xộn, hình ảnh không bị to nhỏ thất thường. Nói tóm lại web responsive là cách thiết kế giúp web chạy tốt phù hợp với mọi thết bị duyệt web và chạy tốt trên mọi độ phân giải màn hình.
• VD: khi bạn duyệt web của ITSEOVN trên đi động và trên máy bàn sẽ khác nhau, và khi bạn duyệt web ITSEOVN ở chế độ 1400, 1024, 800,.. thì trang ITSEOVN sẽ hiển thị và ẩn hoặc giao diện sẽ đổi đi giúp người đọc, đọc nội dung được tốt nhât.

2. Lợi ích của Responsive Web Design

• RWD dùng để bố cục lại giao diện trang web cho tương thích với nhiều loại kích cỡ màn hình khác nhau.
• Khi bạn sử dụng 1 chiếc điện thoại có độ phân giải thấp, khi bạn duyệt web trên máy tính sẽ thấy 1 mớ quảng cáo ình xèo từ các web khác, nếu web bạn không được tối ưu theo RWD thì khi bạn duyệt web trên di động đó, sẽ là 1 mớ hỗn độn về quảng cáo,... nhìn rất khó coi.
• RWD giúp bạn duyệt web trên di động hoặc máy tính có độ phân giải thấp khi duyệt web vẫn đạt được hiệu quả cao.
• Với một web site không được RWD khi duyệt trên di động và máy tính sẽ giống nhau, việc đọc nội dung bài viết rất khó khăn, chắc chắn khách hàng sẽ sợ và không bao giờ quay lại web bạn.
• => RWD là một xu hướng thiết kế hoàn toàn có lợi bởi nó đảm bảo bạn sẽ luôn luôn có những trải nghiệm tốt nhất, đẹp nhất khi xem trang web dù bạn có đang dùng thiết bị nào đi nữa. Nó giúp nhà lập trình web tận dụng tối đa không gian để trình diễn những nội dung cho chúng ta xem theo cách thoải mái và thích thú nhất có thể.

3. Cách thiết kế RWD đơn giản.

• Giá trị chiều rộng phải để đơn vị % hoặc em (vd : width=20% hoặc width=5%). Mục đích là để nó có thể co dãn theo chiều rộng màn hình.
• Cùng một thuộc tính (VD: background-color) quy định với nhiều màn hình: > 600px, > 700px; > 800px, thì bạn cần đặt !important cho CSS của >= 700px; >= 800px (Tức là bỏ cái CSS bình thường và cái nhỏ nhất (> 600px))
• Để ý đoạn code bên trên của mình : Thuộc tính background-color, mình quy định trong 4 trường hợp: Bình thường, > 600px, > 700px; > 800px. Bạn cần đặt thêm !important vào sau mỗi thuộc tính CSS của > 700px; > 800px. Bạn sẽ đổi màu cho phù hợp để dễ nhìn hơn trong các kiểu màn hình.
• Ngược lại nếu ở trên mình không dùng min-width mà dùng max-width thì cần thêm !important vào sau mỗi thuộc tính CSS của < 700px; < 600px.
• Tóm lại là CSS giao diện mặc định, giá trị nhỏ nhất (nếu min-width), giá trị lớn nhất (nếu max-width) thì ko thêm !important, còn lại thì để giống trên.
• Trên là 1 số ví dụ để giao diện phù hợp mới mọi kiểu view và màu sắc web cũng thay đổi với từng chế độ, ngoa ra trong đoạn code đó bạn có thể chế biến thêm tùy ý thích.

Để biết thêm các công cụ giúp thiết kế web responsive hiệu quả thì bạn đọc bài sau : công cụ thiết kế web hiệu quả.