Thiết kế Website

Thiết kế web đáp ứng: khái niệm cơ bản cho người mới

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.

Thiết kế web đáp ứng

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.

Cha của thiết kế web responsive

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:

Chiều rộng cố định 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":

Bố cục lưới chất lỏng-thiết kế responsive

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.

Thiết kế điện thoại di động đầu tiên

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.

Firefox Developer Tools-chế độ thiết kế responsive

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.

Công cụ Chrome dev-kiểm tra phản hồi

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í!

Vinu Saseedaran Renish

Nội dung Creator

Vinu là một người đam mê công nghệ và nội dung Writer tại DayDigital, thúc đẩy bởi niềm đam mê của mình cho công nghệ và văn bản. Một kỹ sư khoa học máy tính bằng cấp và một alumnus Red Hat, cô được lấy cảm hứng từ độ nghiêng của mình để tìm hiểu điều gì đó mới, là một người mới bắt đầu, để đạt được những hiểu biết mới và phát triển mỗi ngày. Bạn có thể kết nối với cô ấy trên Twitter xử lý @VinuSRenish.

Trước điều
Cloud Server so với máy chủ chuyên dụng: điều gì tốt hơn cho bạn?
Tiếp theo điều
6 lời khuyên cho Mobile App bản địa hoá đó cung cấp kết quả
Bài viết liên quan
đạo đức Hacking để kiểm tra lỗ hổng bảo mật
Chung

Sử dụng đạo đức Hacking để cải thiện an ninh CNTT...

An ninh thông tin là cần của giờ! Nó quan trọng hơn bao giờ hết để bảo vệ tài sản kỹ thuật số của bạn. Có đạo đức Hacking giải pháp của bạn? Các máy chủ mạng, email, trang web và ứng dụng của bạn dễ bị tấn công độc hại từ bất kỳ góc nào trên thế giới. Có rất nhiều...

0
Ứng dụng di động quốc tế hoá
Localization

6 lời khuyên cho di động App bản địa hoá đó cung cấp Re...

Nội địa hóa ứng dụng di động là phải nếu bạn muốn tiếp cận đối tượng toàn cầu và tăng số lượng người dùng. Để nhập thị trường quốc tế, bạn nên suy nghĩ về bản địa hóa trước khi bạn có kế hoạch cho bất kỳ sáng kiến tiếp thị nào khác. Thị trường thực sự là toàn cầu trong...

0
Our-Post-->
Bài viết liên quan
đạo đức Hacking để kiểm tra lỗ hổng bảo mật
Chung

Sử dụng đạo đức Hacking để cải thiện CNTT secu...

An ninh thông tin là cần của giờ! Nó quan trọng hơn bao giờ hết để bảo vệ tài sản kỹ thuật số của bạn. Có đạo đức Hacking giải pháp của bạn? Các máy chủ mạng, email, trang web và ứng dụng của bạn dễ bị tấn công độc hại từ bất kỳ góc nào trên thế giới. Có rất nhiều...

Ứng dụng di động quốc tế hoá
Localization

6 lời khuyên cho Mobile App bản địa hoá đó...

Nội địa hóa ứng dụng di động là phải nếu bạn muốn tiếp cận đối tượng toàn cầu và tăng số lượng người dùng. Để nhập thị trường quốc tế, bạn nên suy nghĩ về bản địa hóa trước khi bạn có kế hoạch cho bất kỳ sáng kiến tiếp thị nào khác. Thị trường thực sự là toàn cầu trong...

WordPress chủ đề được cung cấp bởi jazzsurf.com