Responsive là gì? Thiết kế website responsive là như thế nào?

20/05/2019

Ngày này, người dùng sử dụng điện thoại để xem tin tức, để mua hàng ngày càng nhiều. Vì thế, khi thiết kế website các doanh nghiệp phải có 1 phiên bản di động cho trang web của mình. Các thiết bị di động đa dạng như Iphone, ipad, netbook... nên phải có bản thiết kế cho mỗi độ phân giải màn hình của các thiết bị đó.

Tìm hiểu về website Responsive nhé! 

Khái niệm về Responsive Web design

1. Khái niệm

 Responsive là một tính từ để chỉ một website có thể hiển thị tương thích trên mọi kích thước hiển thị của trình duyệt. Ví dụ, nếu giao diện website đặt một chiều rộng cố định là 800px thì xem ở trình duyệt điện thoại với chiều ngang chỉ từ 320px – 420px sẽ không hiển thị hết được.

Responsive Web Design (RWD) là xu hướng mới theo đó quy trình thiết kế và phát triển web đáp ứng mọi thiết bị và môi trường của người dùng theo các tiêu chí kích thướcchiều của màn hình thiết bị. Để làm được điều đó, phải sử dụng linh hoạt kết hợp các kỹ thuật bao gồm flexible grid, responsive image và CSS media query.

Khi người dùng chuyển từ máy tính xách tay của họ sang iPad hay iPhone, trang web sẽ tự động chuyển đổi để phù hợp với kích thước màn hình và kịch bản xử lý. Nói cách khác, trang web cần phải có công nghệ tự động đáp ứng theo thiết bị của người dùng. Điều này loại bỏ sự cần thiết cho nhiều thiết kế web khác nhau và giảm thiểu thời gian cũng như chi phí thiết kế web.

Đối với các doanh nghiệp, tạo ra từng phiên bản website phù hợp với mỗi thiết bị có độ phân giải mới là điều không thể, hoặc ít nhất là không thực tế. Nên chúng ta phải lựa chọn là mất một lượng khách hàng truy cập từ các thiết bị di động mới hoặc có giải pháp…

2. Điều chỉnh độ phân giải màn hình

Các thiết bị mới đang được phát triển mỗi ngày và mỗi thiết bị này có thể xử lý các biến kích thước, chức năng và ngay cả màu sắc khác nhau. Một số thích dùng màn hình nhỏ, một số dùng màn hình to, có người thích dùng theo chiều dọc và có người thích dùng chiều ngang. Sự phổ biến của điện thoại thông minh iPhone, iPad và các dòng điện thoại Android khác có thể chuyển đổi từ dọc sang ngang theo ý thích của người dùng.  

3. Linh hoạt tất cả mọi thứ trên web (flexible content)

Một vài năm trước, khi flexible layout gần như là một thứ “xa xỉ” và “cao cấp” cho trang web. Điều duy nhất mà sự linh hoạt được sử dụng trong thiết kế là linh động trong layout dạng cột và nội dung text. Các hình ảnh có thể dễ dàng vỡ layout, và thậm chí các phần tử cấu trúc cũng gây ra việc làm vỡ layout khi chúng bỉ đẩy ra. Thiết kế linh hoạt chưa thực sự linh hoạt – các nhà thiết họ có thể cung cấp giao diện hàng trăm pixel, nhưng họ lại không thể điều chỉnh giao diện từ một màn hình máy tính lớn để phù hợp với một chiếc netbook.

Bây giờ, chúng ta có thể làm cho mọi việc linh hoạt hơn. Hình ảnh có thể được tự động điều chỉnh, và chúng ta có cách giải quyết để layout không bao giờ bị phá vỡ .

Giải pháp linh hoạt nội dung là hoàn hảo cho các thiết bị chuyển đổi từ cách truy xuất trên màn hình chiều ngang sang màn hình chiều đứng trên các thiết bị mobile như iPad hay iPhone.

thiet-ke-website-responsive-la-gi

Để xây dựng fexible content chúng ta có thể kết hợp các kỹ thuật như sau:

  • + Sử dụng fluid layout
  • + Sử dụng flexible image
  • + Sử dụng responsive navigation

4. CSS3 media queries

thiet-ke-web-responsive

Chúng ta sẽ sử dung một tính năng trong CSS3 đó là media query nhằm tạo nên fluid layout và flexible content. Các thuộc tính min-width and max-width sẽ làm chính xác những gì chúng ta đề nghị để đáp kích thước của màn hình và trình duyệt của thiết bị.

- Thuộc tính min-width đặt trình duyệt và màn hình với chiều rộng tối thiểu theo một tập hợp của các style nhất định (hoặc phong cách đặc trưng riêng biệt) phù hợp thiệt bị phù hới với độ rộng tối thiểu đó. Nếu bất cứ thiết bị với kích cỡ màn hình dưới mức giới hạn này thì các định dạng stylesheets sẽ bị bỏ qua.

- Thuộc tính max-width làm điều ngược lại. Bất cứ thiết bị có trình duyệt hoặc chiều rộng tối đa màn hình vượt quá quy định sẽ không áp dụng các định dạng stylesheets tương ứng. Đoạn code dưới đây sẽ tự động thay đổi màu nền trang web theo các kích cỡ khác nhau của thiết bị:

 

5. Flexible images

Nếu thay đổi kích thước ảnh quá nhỏ, hình ảnh sẽ xuất hiện với chất lượng thấp. Tuy nhiên chúng ta vẫn muốn nó sẽ xuất hiện trên web và không muốn bỏ nó đi vì nó quan trọng. Vì vậy, hình ảnh được chia thành 2 nhóm: một nhóm có thể cắt bỏ đi những phần không quan trọng và nhóm khác sẽ giữ nguyên ảnh nhưng sẽ bị zoom nhỏ hoặc to lên.
 Sau đây là 3 khuynh hướng thông dung:

  • + 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ị
  • 6. Responsive navigation

    Một điều rất quan trọng đối với việc sử dụng các chức năng chính của website liên quan mật thiết đến việc bố trí main menu. Làm thế nào để bố trí một menu phù hợp và hiệu qua trên mọi thiết bị với các kích cỡ màn hình khác nhau? 

    • + 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
  •  

  • Làm thế nào để áp dụng Responsive lên giao diện website?

  • Bước 1. Khai báo meta viewport

  • Trước tiên bạn cần đặt thẻ này vào cặp <head> trên trong mã HTML của website.

    01
    <meta name="viewport" content="width=device-width, initial-scale=1">

    meta viewport nghĩa là một thẻ thiết lập cho trình duyệt hiển thị tương ứng với kích thước màn hình. Chẳng hạn như ví dụ trên, có nghĩa là bạn sẽ thiết lập trình duyệt hiển thị cố định và tương ứng trên tất cả các thiết bị dựa vào chiều rộng của thiết bị (device-width) và không cho phép người dùng phóng to (thiết lập initial-scale với giá trị cố định là 1). Đây là thẻ mình khuyến khích bạn sử dụng cho toàn bộ các dự án Responsive.

  • Bước 2. Viết CSS cho chiều rộng của thiết bị

    Chúng ta sẽ tiến hành viết CSS tương ứng cho từng mức chiều rộng hoặc chiều cao của thiết bị, thường thì chúng ta chỉ viết dựa theo chiều rộng và được tính trên đơn vị là pixel. Nhiều người có thể tính dựa trên đơn vị là em, rem, DPI, phần trăm,…nhưng nếu bạn là người mới thì cứ dùng pixel.

  • Làm sao để kiểm tra Responsive?

    Kiểm tra Responsive bằng cách co giãn kích thước trình duyệt thủ công nhưng nó không được “thông minh” cho lắm. Các bạn sử dụng các công cụ hỗ trợ để kiểm tra, một trong những công cụ kiểm tra Responsive mà mình thích nhất đó là Resizer, rất dễ sử dụng và gọn nhẹ. 

  • Một số kiến thức cần biết khi viết CSS Responsive

    • Ngoài đơn vị của breakpoint là px, các đơn vị đo chiều dài trong website nên là phần trăm. Hay nói đúng hơn là sử dụng đơn vị tương đối.
    • Nên sử dụng max-width thay vì width để tránh cố định chiều rộng.
    • Sử dụng display: none cho các thành phần cần ẩn đi ở từng thiết bị mà bạn muốn ẩn. Và display: block ở các thiết bị cần hiển thị ra.
    • Sử dụng tùy chọn !important nếu cần đè viết đè CSS.

    Liên hệ với SOTA để được tư vấn nhiều hơn về thiết kế website nhé! 

  •  Gọi 024-730-86986
    📞 Hotline 085.676.6986 - 0981 858 858
    📩 support@sotavn.com

 

Tin tức mới

Upsell và Cross sell là gì

17/06/2019

Upsell và Cross sell là gì? Nên áp dụng hai thủ thuật này trong buôn bán tại điểm bán và với khách hàng như thế nào? Cùng SOTA nắm cách làm chủ hai thủ thuật hiệu quả này nhé!

Mẫu web thời trang đẹp Các mẫu thiết kế web đẹp Cách viết content facebook hay Kích thước ảnh avatar fanpage 2019 Mẫu thiết kế web bán hàng