Giao diện Responsive là gì? phương pháp cơ bản để làm web resposive

0 749

Nhu cầu sử dụng web vào việc bán hàng, kinh doanh online ngày càng trở nên rộng rãi, hiện nay với sự phát triển của HTML 5 chúng ta cần một website toàn diện không chỉ đẹp ở giao diện desktop mà còn đẹp ở cả khi xem ở trên các thiết bị di động khác. Đồng thời một trang web có thể thân thiện với khả năng xem trên mọi thiết bị khác nhau sẽ là một lợi thế rất nhiều. Điều này có lợi cho cả bạn và dễ dàng tiếp cận khách hàng tiềm năng.

 

Xem công cụ kiểm tra web thân thiện với thiết bị di động:

 

google than thien voi di dong

Một website đạt được tiêu chí như trên gọi là web Responsive.

 

Web responsive là gì ?
Web Resposive là một cách thiết kế website để tạo ra một website đáp ứng mọi thiết bị và môi trường của người dùng, đáp ứng đầy đủ các tiêu chí về kích thước, chiều rộng và chiều cao của màn hình hiển thị. Và để làm được này chúng ta phải kết hợp nhiều phương pháp và sử dụng các kỹ thuật như Flexible grid, responsive image, css… Mỗi khi người sử dụng truy cập vào trang web bằng các thiết bị khác nhau như ipad, iphone, laptop thì khi đó trang web sẽ tự thay đổi để phù hợp với kích thước màn hình và xử lý nội dung phù hợp.
Điều chỉnh độ phân giải màn hình.
Nhiều thiết bị có thể truy cập vào trang web mà nó sử dụng với kích thước màn hình khác nhau, với mỗi loại thiết bị cũng có thể xoay màn hình theo chiều dọc hoặc theo chiều ngang.
Có rất nhiều thiết bị cũ và Các thiết bị mới được phát minh ra và chúng ta không thể cập nhật hết được nó. Vậy đâu là một giải pháp toàn diện cho vấn đề này?
Giải pháp:
Nếu như bạn đang dũng mã nguồn wordpress mà theme bạn đang sử dụng lại không hỗ trợ Responsive thì bạn có thể sử dụng các Plugin như sau: Plugin Mobile Smart hoặc Any Mobile Theme Switcher và cầu hình để chạy trên các thiết bị sao cho phù hợp.
Ngoài ra bạn cũng có thể sử dụng kỹ thuật như sau:
• Sử dụng fluid layout
• Sử dụng flexible image
• Sử dụng responsive navigation
Sử dụng CSS3 media queries:
Đây là một phương pháp sử dụng media query nhằm tạo fluid layout và flexible content.
Ví dụ cấu trúc của một CSS giao diện Responsive thông thường:

body {
background: #fff;
color: 333;
}

@media all and (max-width: 320px) {
body {
background: #e7e7e7;
}
}
@media only screen and (min-width: 320px) and (max-width: 860px) {...}

Sử dụng Flexible images;
Nếu như một thiết bị hiển thị có kích thước quá nhỏ dẫn đến việc hiển thị hình ảnh với chất lượng rất thấp, Tuy nhiên chúng ta không muốn bỏ đi vì hình ảnh đó quan trọng. Do đó, hình ảnh được chia thành 2 nhóm:
– Nhóm cắt bỏ những phần không quan trọng.
– Nhóm giữ nguyên hình ảnh nhưng sẽ hiển thị nhỏ đi hoặc to lên.

Sử dụng stylesheet với img{max-width: 100%;}
• Sử dụng phần tử HTML5 và javascript

• Sử dụng dịch vụ Cloud để đáp ứng hình ảnh phù hợp với từng thiết bị Sử dụng Responsive navigation: Trên đây là một vài giải pháp cho việc thiết lập phần content, Tuy nhiên đối với một trang web tối thiểu cần phải có đó chính là Menu, Việc bố trí menu trên điện các thiết bị màn hình nhỏ và bố trí menu ở màn hình lơn hơn sẽ khác nhau. giải pháp như sau:

 

•Do nothing – Giữ nguyên định dạng của top main menu

•Tùy biến top main menu thành top flow menu (mỗi menu item sẽ chỉ hiện thị trên một row)

• Tùy biến top main menu thành dropdown list
xem thêm: 3 bước để thiết kế giao diện Responsive

Để lại một bình luận