Thiết kế web responsive trao quyền cho trang web của bạn để thích ứng với thiết bị mà người dùng của bạn đang xem. Bố cục trang web thay đổi tự động, dựa trên kích thước của màn hình và khả năng của thiết bị. Cho đến gần đây, đáp ứng là một tiền thưởng, nhưng bây giờ nó là một phần thiết yếu của thiết kế web tốt!
Trong bài viết blog này, chúng tôi sẽ giới thiệu những điều cơ bản của thiết kế web đáp ứng, khám phá các nguyên tắc thiết kế làm cho một trang web đáp ứng. Nếu bạn là một người mới bắt đầu khám phá khái niệm này, những điều cơ bản được bảo hiểm ở đây sẽ giúp bạn để bắt đầu. Tạo trang web của riêng bạn hoạt động trên nhiều thiết bị-máy tính để bàn, điện thoại di động hoặc máy tính bảng!
Thiết kế web responsive là gì và tại sao nó lại quan trọng?
Nếu đang tạo trang web, bạn nên biết rằng người xem của bạn có thể truy cập website đó từ nhiều thiết bị khác nhau với kích thước màn hình. Có một số lượng ngày càng tăng của trình duyệt web bằng cách sử dụng điện thoại di động hoặc máy tính bảng của họ để xem các trang web.
Trong ví dụ bên dưới, trang web đã được thiết kế để đáp ứng. Như bạn có thể thấy, bố cục và nội dung thích ứng để hiển thị theo kích thước màn hình và độ phân giải.
Nếu trang web của bạn không đáp ứng, nội dung sẽ không được trình bày rõ ràng trên màn hình có kích thước Hiển thị bị hạn chế. Vì vậy, điều cần thiết là bố trí trang web của bạn có thể thích ứng với phù hợp với thiết bị.
Nó chỉ là về kích thước màn hình khác nhau?
Mục đích là không chỉ để làm cho họ linh hoạt mà còn thích ứng với các thiết bị mà ám các trang web của bạn. Kích thước màn hình là yếu tố chính, nhưng cũng có những cân nhắc khác, như mật độ pixel hiển thị, cho dù đó là màn hình cảm ứng, v.v.
Mục tiêu của bạn nên được để thiết kế một trang web hoạt động tốt trên bất kỳ thiết bị bất kể kích thước viewport, độ phân giải hoặc làm thế nào người dùng tương tác với nó. Bạn nên lập kế hoạch và tạo bố cục, phương tiện của bạn và thậm chí cả điều hướng cho khả năng sử dụng tốt nhất trên mọi thiết bị.
Ethan Marcotte-cha của thiết kế web responsive
Khi bạn nghe về thiết kế web đáp ứng, bạn có thể được nghiêng để nghĩ về nó như là một tiêu chuẩn thiết kế hoặc công nghệ. Tuy nhiên, thuật ngữ này không phải là bất kỳ điều đó. Nó đề cập đến một tập hợp các nguyên tắc thiết kế mà bạn nên tuân thủ trong khi tạo ra các trang web của bạn, để làm cho họ chất lỏng.
Ethan đưa ra thuật ngữ và đặt ra các nguyên tắc, và được biết đến như là cha đẻ của thiết kế web đáp ứng. Ethan Marcotte đã đưa ra một nguyên tắc thiết kế sử dụng CSS khéo léo để render cùng một trang web trên các kích thước màn hình khác nhau, mà không ảnh hưởng đến khả năng đọc hoặc khả năng dùng của nó.
Ba thành phần cơ bản của thiết kế web responsive
Sử dụng CSS Media queries để tùy chỉnh Styling
Trong quá khứ, các nhà thiết kế web phụ thuộc vào "người dùng-Agent sniffing" để tự động phục vụ HTML/CSS mã khác nhau hoặc dựa vào chuyển hướng URL. CSS3 giới thiệu một kỹ thuật mới được gọi là "Media query."
Bằng cách sử dụng @media quy tắc, bạn có thể bao gồm một khối đặc tính CSS cụ thể sau khi xác minh cho một điều kiện nhất định. Bạn có thể kiểm tra các điều kiện sau:
- Chiều rộng/chiều cao viewport
- Chiều rộng/chiều cao của thiết bị
- Định hướng (chân dung/phong cảnh)
- Giải quyết
Bạn có thể kiểm tra các điều kiện và sử dụng Media queries để cung cấp các khối tạo kiểu cụ thể, theo loại thiết bị.
Cú pháp đối với Media query
@media not|only mediatype and (expressions) {
CSS-Code;
}
Ví dụ Media query
Có rất nhiều ví dụ và một trình soạn thảo "try it yourself" tiện dụng, có sẵn trên trang web W3Schools.
Trong ví dụ dưới đây, @media truy vấn được sử dụng để kiểm tra xem chiều rộng viewport là 375px hoặc hơn. Nếu nó hơn 375px, trình đơn sẽ được hiển thị phía trên nội dung và nếu thấp hơn 375px, trình đơn sẽ nổi sang bên trái.
@media screen and (min-width: 375px) {
#leftsidebar {width: 150px; float: left;}
#main {margin-left:220px;}
}
Bố cục dựa trên lưới chất lỏng
Thuật ngữ "Fluid Grid" mô tả một bố cục trong đó thay vì sử dụng giá trị pixel cố định, bạn mã tất cả chúng theo tỷ lệ tương đối của các yếu tố khác. Kết quả là, dòng thành phần (tính lưu loát) và thích ứng với thiết bị.
Trong bố cục truyền thống, bạn sẽ định vị các yếu tố bằng cách sử dụng các lưới chiều rộng cố định. Tuy nhiên, bây giờ chúng ta đang đối phó với một loạt các kích thước màn hình. Một cách tiếp cận như vậy sẽ dẫn đến các trang web của bạn đang tìm kiếm xấu đặt ra. Hãy có một cái nhìn tại một ví dụ về phương pháp tiếp cận bố trí truyền thống CSS:
Cách tiếp cận Fluid Grid sử dụng "tỷ lệ tương đối", ví dụ, bạn nên mã chiều cao và chiều rộng của mỗi phần tử dưới dạng phần trăm hoặc kích thước tương đối. Trong ví dụ bên dưới, các thành phần có kích thước bằng cách sử dụng cách tiếp cận "tỷ lệ phần trăm":
Hình ảnh chất lỏng
Trong cách tiếp cận thiết kế web đáp ứng, bạn nên sử dụng CSS để xác định chiều rộng tối đa cho tất cả các hình ảnh nhưng không phải là chiều rộng tối thiểu.
Bằng cách xác định chiều rộng tối đa, bạn đang đảm bảo rằng hình ảnh sẽ không bao giờ bị pixelated vượt quá giá trị sẽ ảnh hưởng đến chất lượng xuất hiện của nó. Bởi không xác định một chiều rộng tối thiểu, bạn đang cho phép CSS để thu nhỏ kích thước cho bất kỳ giá trị (yêu cầu để phù hợp trong bối cảnh).
CSS duy trì tỷ lệ khía cạnh, và do đó hình ảnh của bạn sẽ trông không kéo dài.
Thiết kế điện thoại di động đầu tiên
Sử dụng điện thoại di động đã vượt qua sử dụng máy tính để bàn trong 2017. Tính đến ngày hôm nay, StatCounter tiết lộ rằng 50,87% người dùng duyệt từ điện thoại di động như chống 44,78% từ máy tính để bàn.
Điều này làm tăng sử dụng điện thoại di động có nghĩa là nhà thiết kế nên chú ý thêm vào cách trang web của họ sẽ xem xét trên màn hình điện thoại di động. Vì vậy, nhiều nhà thiết kế hơn và nhiều hơn nữa là sau "điện thoại di động đầu tiên" quy tắc trong khi thiết kế.
"Điện thoại di động đầu tiên" là một phương pháp thiết kế cho thấy rằng bạn bắt đầu thiết kế trang web để xem xét tốt nhất của nó cho điện thoại di động (vì nó có những hạn chế nhất), sau đó mở rộng sang máy tính bảng và cuối cùng là Desktop.
Kiểm tra thiết kế của bạn-mô phỏng và học tập
Bạn sẽ tìm thấy nhiều công cụ trực tuyến để mô phỏng các yêu cầu khác nhau của các thiết bị khác nhau và thử nghiệm trang web của bạn. Khi thiết kế trang web đáp ứng, bạn nên sử dụng các công cụ như vậy để mô phỏng và kiểm tra giao diện và hành vi của trang web trên các thiết bị khác nhau.
Công cụ dành cho nhà phát triển Firefox – chế độ thiết kế responsive
Firefox cung cấp một công cụ phát triển để chuyển đổi Chế độ thiết kế responsive bật/tắt. Khi được bật, bạn có thể đặt vùng nội dung thành một kích thước màn hình cụ thể, như được hiển thị trong hình dưới đây. Bạn có thể mô phỏng các kích cỡ khác nhau và kiểm tra trang web của bạn.
Chrome DevTools – chế độ thiết bị
Nếu bạn thích Chrome DevTools, sử dụng Chế độ thiết bị để mô phỏng một loạt các kích thước màn hình và độ phân giải. Kiểm tra các trang web của bạn với chế độ thiết bị được bật, đảm bảo rằng bạn đang xây dựng một trang web đầy đủ đáp ứng.
Công cụ này rất mạnh mẽ và cũng cho phép bạn mô phỏng tọa độ vị định vị, định hướng thiết bị. Bạn cũng có thể mô phỏng một loạt các trình duyệt để kiểm tra cách trang web của bạn sẽ xuất hiện/hành xử trên các trình duyệt web khác.
Nếu bạn cần hỗ trợ với thiết kế web đáp ứng, DayDigital có thể giúp bạn! Chúng tôi đã giúp một số doanh nghiệp xây dựng các trang web tuyệt đẹp và đánh dấu sự hiện diện trực tuyến của họ. Liên hệ với chúng tôi ngay để có tư vấn miễn phí!