Web responsive là gì ?

Thiết kế website như thế nào

Hiểu một cách đơn giản Web Responsive là phong cách thiết kế website làm sao cho phù hợp trên tất cả các thiết bị, mọi độ phân giải màn hình. Một website đẹp trên máy tính nhưng khi xem trên điện thoại bố cục lộn xộn, hình ảnh, bài viết không cân đối thì không thể gọi là Web Responsive

Ví dụ về Web Responsive: Bạn mở trang chủ website của mình, rồi thu nhỏ trình duyệt hoặc đổi độ phân giải màn hình, bạn sẽ thấy website của mình không hề xuất hiện Scrollbar ngang, mà nó sẽ tự động co dãn sao cho phù hợp với chiều rộng màn hình máy tính bạn.

Tại sao phải thiết kế những trang web có tính đáp ứng (responsive)?

Hiện tại ngày càng có nhiều thiết bị kết nối mạng (xem thêm: the internet of things), hệ điều hành, trình duyệt được phát triển. Do đó chúng ta không thể tối ưu thiết kế của mình cho từng loại thiết bị khác nhau được. RWD hay thiết kế web mang tính đáp ứng mang lại một tư duy và nền tảng mới trong thiết kế web, nó giúp cho một thiết kế có thể tồn tại lâu hơn so với thiết kế bố cục cố định truyền thống.

Sau đây là 4 tiêu chí quan trọng của Responsive Web Design:

4 tiêu chí quan trọng của Responsive Web Design

1. A fluid grid

Kỹ thuật này là 1bước tiến xa hơn so với liquid layout (một dạng canh theo percent).

Công thức: target / context = result

2. Fluid images & Videos

Kỹ thuật Fluid images & Videos cho phép các nhà thiết kế có thể tạo ra các layout với những hình ảnh đáp ứng các kích thước với độ phân giải khác nhau. Tạo ra những image tối ưu hóa cho điện thoại di động với màn hình nhỏ và sau đó phục vụ cho độ phân giải cao hơn các phiên bản màn hình lớn hơn

3. Media queries: (CSS3)

Tự thay đổi bố cục theo yếu tố màn hình, nghĩa là sẽ tạo ra các mảng để chứa các độ phân giải của từng màn hình, khi người duyệt website trên các thiết bị khác nhau, thì hệ thống tự lấy CSS trong mảng ra tương ứng với độ phân giải của thiết bị đó.

4. Responsive Navigation

Kỹ thuật này có thể tùy biến Navigation bar thành Dropdown list (Khi hiển thị trên màn hình lớn thì thanh menu trải dài theo chiều ngang).

Kết luận

Tổng kết lại những vấn đề đã trình bày, mình chia sẻ 1 số điểm cần lưu ý khi ứng dụng RWD

Đừng cố gắng thử với một project mới và quan trọng.

Đừng cố gắng thử khi chưa thực sự giỏi HTML, HTML5, CSS, CSS3, Javascript

Đừng cố gắng thử khi chưa đủ “công lực”.

RWD chưa thể đánh bại Mobile App.

Không đơn giản để đạt đến ĐẸP & CHUẨN

Với những kiến thức hữu ích mà chúng tôi đã chia sẻ, Ban tổ chức cuộc thi TÌM KIẾM TÀI NĂNG THIẾT KẾ WEBSITE TRỌN GÓI hy vọng các đội dự thi có thể tạo nên những website mang tính chuyên nghiệp cao, điều quan trọng hơn hết là các bạn có thể trải nghiệm thực tế và có được những kinh nghiệm quý báu giúp ích cho công việc của mình trong hiện tại và cả tương lai.