Hướng dẫn dành cho người mới bắt đầu về thiết kế web đáp ứng (Mẫu mã & ví dụ về bố cục) – cách thiết kế đáp ứng

Thiết bị di động đã vượt qua máy tính để bàn và chiếm hơn 50% lưu lượng truy cập web. Tìm hiểu thêm về các nguyên tắc của thiết kế web đáp ứng trong hướng dẫn này.

Bạn đang xem : cách thiết kế đáp ứng

Với Internet ngày càng được truy cập nhiều hơn từ các thiết bị di động, việc có một trang web tĩnh thiết kế chỉ đẹp trên màn hình máy tính.

Chưa kể, bạn cũng phải cân nhắc đến máy tính bảng, máy tính xách tay 2 trong 1 và các mẫu điện thoại thông minh khác nhau có kích thước màn hình khác nhau khi đưa ra thiết kế.

Vì vậy, việc đặt nội dung của bạn vào một cột duy nhất và gọi nội dung đó là thoát sẽ không cắt bỏ nội dung đó.

Với thiết kế web , bạn có thể đảm bảo trang web của mình trông đẹp nhất trên điện thoại di động, máy tính bảng, máy tính xách tay và màn hình máy tính để bàn.

Và việc cải thiện trải nghiệm người dùng đồng nghĩa với việc chuyển đổi và tăng trưởng kinh doanh cao hơn.

Hướng dẫn này sẽ cung cấp cho bạn mọi thứ bạn cần biết về thiết kế trang web đáp ứng, bao gồm định nghĩa, hướng dẫn từng bước, ví dụ, v.v.

Xem hướng dẫn bằng video của chúng tôi về Thiết kế web đáp ứng:

Hãy xem Kinsta chống lại đối thủ như thế nào.

Thiết kế web đáp ứng là gì?

Thiết kế đáp ứng là một cách tiếp cận thiết kế web giúp nội dung web của bạn thích ứng với các kích thước màn hình và cửa sổ khác nhau của nhiều loại thiết bị.

Ví dụ: nội dung của bạn có thể được tách thành các cột khác nhau trên màn hình máy tính để bàn vì chúng đủ rộng để chứa thiết kế đó.

Nếu bạn tách nội dung của mình thành nhiều cột trên thiết bị di động, người dùng sẽ khó đọc và tương tác.

Thiết kế đáp ứng giúp bạn có thể phân phối nhiều bố cục riêng biệt của nội dung và thiết kế của bạn tới các thiết bị khác nhau tùy thuộc vào kích thước màn hình.

Trang web của bạn trông đẹp là chưa đủ trên màn hình máy tính. 🖥 Máy tính bảng, máy tính xách tay 2 trong 1 và điện thoại thông minh đều là một phần của phương trình … và hướng dẫn này bao gồm mọi thứ bạn cần biết về thiết kế đáp ứng 🤳

Nhấp để đăng Tweet

< / p>

Thiết kế web đáp ứng và Thiết kế thích ứng

Sự khác biệt giữa thiết kế đáp ứng và thiết kế thích ứng là thiết kế đáp ứng điều chỉnh việc hiển thị một phiên bản trang duy nhất. Ngược lại, thiết kế thích ứng cung cấp nhiều phiên bản hoàn toàn khác nhau của cùng một trang.

thiết kế thích ứng đáp ứng

Cả hai đều là xu hướng thiết kế web quan trọng giúp quản trị viên web kiểm soát giao diện trang web của họ trên các màn hình khác nhau, nhưng cách tiếp cận là khác nhau.

Với thiết kế đáp ứng, người dùng sẽ truy cập vào cùng một tệp cơ bản thông qua trình duyệt của họ, bất kể thiết bị nào, nhưng mã CSS sẽ kiểm soát bố cục và hiển thị khác nhau dựa trên kích thước màn hình. Với thiết kế thích ứng, có một tập lệnh kiểm tra kích thước màn hình, sau đó truy cập vào mẫu được thiết kế cho thiết bị đó.

Tại sao thiết kế đáp ứng lại quan trọng

Nếu bạn chưa quen với thiết kế web, phát triển hoặc viết blog , bạn có thể thắc mắc tại sao thiết kế đáp ứng lại quan trọng ngay từ đầu.

Câu trả lời rất đơn giản. Nó không còn đủ để thiết kế cho một thiết bị. Lưu lượng truy cập web di động đã vượt qua máy tính để bàn và hiện chiếm phần lớn lưu lượng truy cập trang web , chiếm hơn 51% .
Thị phần thiết bị di động, máy tính bảng, máy tính để bàn

Khi hơn một nửa số khách truy cập tiềm năng của bạn đang sử dụng thiết bị di động để duyệt Internet, bạn không thể chỉ cung cấp cho họ một trang được thiết kế cho máy tính để bàn. Nó sẽ khó đọc, khó sử dụng và dẫn đến trải nghiệm người dùng không tốt.

Nhưng đó không phải là tất cả. Người dùng trên thiết bị di động cũng chiếm phần lớn lượt truy cập vào công cụ tìm kiếm .

Lưu lượng tìm kiếm trên thiết bị di động

Cuối cùng, trong vài năm qua, điện thoại di động đã trở thành một trong những kênh quảng cáo quan trọng nhất. Ngay cả trong một thị trường hậu đại dịch, điện thoại di động chi tiêu cho quảng cáo đang tăng 4,8% lên 91,52 tỷ đô la.

Cho dù bạn chọn quảng cáo trên mạng xã hội hay sử dụng phương pháp tiếp cận không phải trả tiền như YouTube SEO , phần lớn lưu lượng truy cập của bạn sẽ đến từ người dùng thiết bị di động.

Nếu trang đích của bạn không được tối ưu hóa cho thiết bị di động và dễ sử dụng, bạn sẽ không thể tối đa hóa ROI cho các nỗ lực tiếp thị của mình. Tỷ lệ chuyển đổi kém sẽ dẫn đến ít khách hàng tiềm năng hơn và lãng phí chi tiêu cho quảng cáo.

Các trang web WordPress có đáp ứng không?

Các trang web WordPress có đáp ứng hay không tùy thuộc vào chủ đề của trang web WP của bạn. Chủ đề WordPress tương đương với mẫu cho một trang web tĩnh và kiểm soát thiết kế và bố cục nội dung của bạn.

Nếu bạn sử dụng chủ đề WordPress mặc định, như Twenty Twenty , thì thiết kế này có thể đáp ứng, nhưng vì đó là thiết kế một cột, bạn có thể không nhận ra nó khi nhìn nó trên các màn hình khác nhau.

Nếu sử dụng một chủ đề WordPress khác, bạn có thể kiểm tra xem chủ đề đó có đáp ứng hay không bằng cách so sánh giao diện của nó trên các thiết bị khác nhau hoặc sử dụng Công cụ dành cho nhà phát triển Chrome.

Khối xây dựng của thiết kế web đáp ứng

Trong phần này, chúng tôi sẽ đề cập đến nền tảng cơ bản cho thiết kế trang web đáp ứng và các khối xây dựng khác nhau của nó.

CSS và HTML

Nền tảng của thiết kế đáp ứng là sự kết hợp của HTML và CSS , hai ngôn ngữ kiểm soát nội dung và bố cục của trang trong bất kỳ trình duyệt web nhất định nào.

html vs css

HTML chủ yếu kiểm soát cấu trúc, các phần tử và nội dung của một trang web. Ví dụ: để thêm hình ảnh vào trang web , bạn phải sử dụng mã HTML như sau:

  & lt; img src = "image.gif" alt = "image" class = ”full-width-img” & gt;  

Bạn có thể đặt “lớp” hoặc “id” mà sau này bạn có thể nhắm mục tiêu bằng mã CSS .

Bạn cũng có thể kiểm soát các thuộc tính chính như chiều cao và chiều rộng trong HTML của mình, nhưng đây không còn được coi là phương pháp hay nhất nữa.

Thay vào đó, CSS được sử dụng để chỉnh sửa thiết kế và bố cục của các phần tử bạn đưa vào trang bằng HTML. Mã CSS có thể được đưa vào phần & lt; style & gt; của tài liệu HTML hoặc dưới dạng tệp biểu định kiểu .

Xem Thêm  Cách căn giữa văn bản theo chiều dọc với CSS - tâm căn chỉnh dọc css

Ví dụ: chúng tôi có thể chỉnh sửa chiều rộng của tất cả các hình ảnh HTML ở cấp phần tử như sau:

  img {
chiều rộng: 100%;
}  

Hoặc chúng tôi có thể nhắm mục tiêu lớp cụ thể “full-width-img” bằng cách thêm dấu chấm ở phía trước.

 . full-width-img {
chiều rộng: 100%;
}  

Bạn cũng có thể kiểm soát thiết kế ngoài chiều cao, chiều rộng và màu . Sử dụng CSS như thế này là cách bạn tạo ra một thiết kế đáp ứng khi bạn kết hợp nó với một kỹ thuật được gọi là truy vấn phương tiện.

Truy vấn phương tiện

Truy vấn phương tiện là một phần cơ bản của CSS3 cho phép bạn hiển thị nội dung để thích ứng với các yếu tố khác nhau như kích thước hoặc độ phân giải màn hình.

truy vấn phương tiện - thiết kế web đáp ứng

Nó hoạt động theo cách tương tự như “mệnh đề if” trong một số ngôn ngữ lập trình , về cơ bản là kiểm tra xem khung nhìn của màn hình đủ rộng hay quá rộng trước khi thực thi mã thích hợp.

  @ media screen và (min-width: 780px) {
.full-width-img {
margin: tự động;
chiều rộng: 90%;
}  

Nếu màn hình có chiều rộng ít nhất là 780 pixel, hình ảnh lớp “full-width-img” sẽ chiếm 90% màn hình và tự động được căn giữa theo các lề rộng bằng nhau.

Bố cục Linh hoạt

Bố cục linh hoạt là một phần thiết yếu của thiết kế đáp ứng hiện đại. Ngày xưa, bạn sẽ đặt giá trị tĩnh cho mọi phần tử HTML, chẳng hạn như 600 pixel.

Một bố cục linh hoạt thay vào đó dựa vào các giá trị động như tỷ lệ phần trăm của chiều rộng khung nhìn.

bố cục linh hoạt - thiết kế web đáp ứng

Phương pháp này sẽ tự động tăng hoặc giảm các kích thước phần tử vùng chứa khác nhau dựa trên kích thước của màn hình.

Bố cục Flexbox

Mặc dù bố cục dựa trên tỷ lệ phần trăm là linh hoạt, nhưng nhiều nhà thiết kế và nhà phát triển web cảm thấy nó không đủ năng động hoặc linh hoạt. Flexbox là một mô-đun CSS được thiết kế như một cách hiệu quả hơn để bố trí nhiều phần tử, ngay cả khi kích thước của nội dung bên trong vùng chứa không xác định.

Hộp chứa linh hoạt mở rộng các mục để lấp đầy không gian trống có sẵn hoặc thu nhỏ chúng để ngăn tràn. Các vùng chứa linh hoạt này có một số thuộc tính duy nhất, chẳng hạn như justify-content, mà bạn không thể chỉnh sửa bằng phần tử HTML thông thường.

Chiều rộng flexbox justify

Đây là một chủ đề phức tạp, vì vậy nếu bạn muốn sử dụng nó trong thiết kế của mình, bạn nên đọc hướng dẫn về flexbox của Thủ thuật CSS .

Hình ảnh đáp ứng

Sự lặp lại cơ bản nhất của hình ảnh đáp ứng tuân theo khái niệm giống như bố cục linh hoạt, sử dụng đơn vị động để kiểm soát chiều rộng hoặc chiều cao. Mã CSS mẫu mà chúng tôi đề cập trước đó đã thực hiện được điều này:

  img {
chiều rộng: 100%;
}  

Đơn vị% gần đúng với một phần trăm chiều rộng hoặc chiều cao của chế độ xem và đảm bảo hình ảnh vẫn cân đối với màn hình.

Vấn đề với phương pháp này là mọi người dùng phải tải xuống hình ảnh có kích thước đầy đủ, ngay cả trên thiết bị di động.

Để cung cấp các phiên bản khác nhau được chia tỷ lệ cho các thiết bị khác nhau, bạn cần sử dụng thuộc tính HTML srcset trong thẻ img của mình, để chỉ định nhiều kích thước hình ảnh để lựa chọn.

  & lt; img srcset = "large-img.jpg 1024w,
middle-img.jpg 640w,
small-img.jpg 320w "
src = "small.jpg"
/ & gt;  

WordPress tự động sử dụng chức năng này cho các hình ảnh có trong bài đăng hoặc trang.

Tốc độ

Khi bạn đang cố gắng tạo thiết kế đáp ứng cho trang web của mình, tốc độ tải phải là ưu tiên hàng đầu .

Các trang tải trong 2 giây có tỷ lệ thoát trung bình 9% , trong khi các trang mất 5 giây dẫn đến tỷ lệ thoát 38%. < / p>

Phương pháp tiếp cận khả năng phản hồi của bạn không được chặn hoặc trì hoãn việc hiển thị đầu tiên của trang hơn mức cần thiết.

Có một số cách bạn có thể làm cho các trang của mình nhanh hơn. Tối ưu hóa hình ảnh của bạn , triển khai bộ nhớ đệm , thu nhỏ, sử dụng bố cục CSS hiệu quả hơn, tránh JS chặn hiển thị cải thiện tính quan trọng của bạn đường dẫn hiển thị là tất cả những ý tưởng tuyệt vời mà bạn nên xem xét.

Khách hàng của Kinsta có quyền truy cập vào một cách nhanh chóng và dễ dàng để thực hiện điều này bằng cách sử dụng tính năng rút gọn mã được tích hợp ngay trong trang tổng quan MyKinsta , cho phép khách hàng bật CSS và JavaScript tự động rút gọn chỉ với một cú nhấp chuột đơn giản.

Bạn cũng có thể thử triển khai Google AMP cho các trang trên thiết bị di động của mình, nhưng trong nghiên cứu điển hình về Google AMP , khách hàng tiềm năng trên thiết bị di động của chúng tôi đã giảm 59%.

Đăng ký nhận bản tin

Bạn muốn biết cách chúng tôi tăng lưu lượng truy cập hơn 1000%?

Tham gia cùng hơn 20.000 người khác nhận bản tin hàng tuần của chúng tôi với các thủ thuật WordPress nội bộ!

Các điểm ngắt phản hồi phổ biến

Để làm việc với các truy vấn phương tiện, bạn cần quyết định về “điểm ngắt đáp ứng” hoặc điểm ngắt kích thước màn hình. Điểm ngắt là chiều rộng của màn hình nơi bạn sử dụng truy vấn phương tiện để triển khai các kiểu CSS mới.

Kích thước màn hình phổ biến

  • Di động: 360 x 640
  • Di động: 375 x 667
  • Di động: 360 x 720
  • iPhone X: 375 x 812
  • Pixel 2: 411 x 731
  • Máy tính bảng: 768 x 1024
  • Máy tính xách tay: 1366 x 768
  • Máy tính xách tay hoặc máy tính để bàn có độ phân giải cao: 1920 x 1080

Nếu bạn chọn phương pháp thiết kế ưu tiên thiết bị di động, với một cột duy nhất và kích thước phông chữ nhỏ hơn làm cơ sở, bạn không cần bao gồm các điểm ngắt trên thiết bị di động – trừ khi bạn muốn tối ưu hóa thiết kế cho các mô hình cụ thể.
di động đầu tiên - thiết kế web đáp ứng

Vì vậy, bạn có thể tạo thiết kế đáp ứng cơ bản chỉ với hai điểm ngắt, một cho máy tính bảng và một cho máy tính xách tay và máy tính để bàn.

Điểm ngắt đáp ứng của Bootstrap

Là một trong những khuôn khổ đáp ứng đầu tiên và phổ biến nhất, Bootstrap đã dẫn đầu cuộc tấn công vào thiết kế web tĩnh và giúp thiết kế ưu tiên thiết bị di động trở thành tiêu chuẩn ngành.

Do đó, nhiều nhà thiết kế cho đến ngày nay vẫn tuân theo các điểm ngắt về chiều rộng màn hình của Bootstrap.

Xem Thêm  Đọc và ghi tệp trong Python: Với các ví dụ - đọc và ghi tệp python

bootstrap responsive breakpoints

Họ sử dụng các truy vấn phương tiện để nhắm mục tiêu điện thoại ngang (576px), máy tính bảng (768px), máy tính xách tay (992px) và màn hình máy tính để bàn cực lớn (1200px).

Cách làm cho trang web của bạn trở nên thích ứng

Giờ bạn đã quen thuộc với các khối xây dựng, đã đến lúc làm cho trang web của bạn trở nên thích ứng.

Đặt phạm vi truy vấn phương tiện của bạn (Điểm ngắt đáp ứng)

Đặt phạm vi truy vấn phương tiện của bạn dựa trên nhu cầu riêng của thiết kế của bạn. Ví dụ: nếu chúng tôi muốn tuân theo các tiêu chuẩn Bootstrap cho thiết kế của mình, chúng tôi sẽ sử dụng các truy vấn phương tiện sau:

  • 576px cho điện thoại dọc
  • 768px cho máy tính bảng
  • 992px cho máy tính xách tay
  • 1200px cho các thiết bị lớn

Phần tử bố cục kích thước với phần trăm hoặc tạo bố cục lưới CSS

Bước đầu tiên và quan trọng nhất là thiết lập các kích thước khác nhau cho các phần tử bố cục khác nhau tùy thuộc vào truy vấn phương tiện hoặc điểm ngắt màn hình.

Số lượng vùng chứa bố cục bạn có sẽ tùy thuộc vào thiết kế, nhưng hầu hết các trang web đều tập trung vào các yếu tố được liệt kê bên dưới:

  • Gói hoặc Hộp chứa
  • Tiêu đề
  • Nội dung
  • Thanh bên
  • Chân trang

bố cục trang web chung

Bằng cách sử dụng phương pháp ưu tiên thiết bị di động , bạn có thể tạo kiểu cho các phần tử bố cục chính như thế này (không có truy vấn phương tiện cho các kiểu cơ bản dành cho điện thoại di động):

  # wrapper {width: 95%; margin: 0 auto; }

#header {chiều rộng: 100%; }

#content {width: 100%; }

# thanh bên {chiều rộng: 100%; }

#footer {width: 100%; }

// Thiết bị nhỏ (điện thoại ngang, 576px trở lên)

@media (chiều rộng tối thiểu: 576px) {

// Thiết bị trung bình (máy tính bảng, 768px trở lên)

@media (chiều rộng tối thiểu: 768px) {

#wrapper {chiều rộng: 90%; margin: 0 auto; }

#content {chiều rộng: 70%; float: trái; }

# thanh bên {chiều rộng: 30%; float: phải; }

// Thiết bị lớn (máy tính để bàn, 992px trở lên)

@media (min-width: 992px) {...}

}

// Thiết bị cực lớn (máy tính để bàn lớn, 1200px trở lên)

@media (min-width: 1200px) {

#wrapper {chiều rộng: 90%; margin: 0 auto; }

}  

Trong cách tiếp cận dựa trên tỷ lệ phần trăm, thuộc tính “float” kiểm soát phần tử sẽ xuất hiện ở phía nào trên màn hình, bên trái hoặc bên phải.

Nếu bạn muốn vượt ra ngoài những điều cơ bản và tạo một thiết kế đáp ứng vượt trội, bạn cần tự làm quen với bố cục CSS flexbox và các thuộc tính của nó như box- định cỡ flex .

Cần một máy chủ lưu trữ thân thiện với nhà phát triển, nhanh chóng, an toàn và thân thiện với các trang web khách hàng của bạn ? Kinsta được xây dựng với các nhà phát triển WordPress và cung cấp nhiều công cụ cũng như bảng điều khiển mạnh mẽ. Kiểm tra các kế hoạch của chúng tôi

Triển khai hình ảnh đáp ứng

Một cách để đảm bảo rằng hình ảnh của bạn không bị vỡ là sử dụng giá trị động cho tất cả các hình ảnh, như chúng tôi đã đề cập trước đó.

  img {
chiều rộng: 100%;
}  

Nhưng điều đó sẽ không làm giảm tải cho khách truy cập trên thiết bị di động khi họ truy cập trang web của bạn.

Đảm bảo rằng bạn luôn bao gồm srcset với các kích thước khác nhau của ảnh khi bạn thêm hình ảnh vào các trang của mình.

Làm điều này theo cách thủ công có thể khá tốn thời gian, nhưng với CMS như WordPress , việc này sẽ tự động xảy ra khi bạn tải lên các tệp phương tiện .

Kiểu chữ thích ứng cho văn bản trang web của bạn

Trọng tâm chính của thiết kế web đáp ứng là khả năng đáp ứng của các khối bố cục, phần tử và phương tiện. Văn bản thường được coi là phương tiện đi sau.

Tuy nhiên, để có thiết kế đáp ứng thực sự, bạn cũng nên điều chỉnh kích thước phông chữ của mình một cách thích hợp để phù hợp với kích thước màn hình.

Cách dễ nhất để làm như vậy là đặt giá trị tĩnh cho kích thước phông chữ, chẳng hạn như 22 px và điều chỉnh nó trong mỗi truy vấn phương tiện .

2 kích thước phông chữ biểu đồ phân tán opt

Bạn có thể nhắm mục tiêu nhiều phần tử văn bản cùng một lúc bằng cách sử dụng dấu phẩy để phân tách từng phần tử.

  @ media (min-width: 992px) {

cơ thể, p, a, h4 {

font-size: 14px;

}

}  

Kiểm tra phản hồi

Trước tiên, bạn muốn kiểm tra xem trang web của mình có thân thiện với thiết bị di động hay không bằng thử nghiệm thân thiện với thiết bị di động của Google . Chỉ cần nhập URL của trang web của bạn và nhấp vào nút “URL kiểm tra” để nhận kết quả.

Kiểm tra tính thân thiện với thiết bị di động của Google

Đừng lo lắng nếu mất một lúc để tìm nạp trang web của bạn. Điều đó không phản ánh tốc độ tải trang của bạn.

Nếu bạn đã làm theo các bước được nêu trong bài viết này, điều đó có nghĩa là bạn có một trang web thân thiện với thiết bị di động.

Sau đó, bạn muốn kiểm tra trang web của mình trên nhiều kích thước màn hình bằng một công cụ như Công cụ dành cho nhà phát triển Chrome .

Nhấn CTRL + Shift + I trên máy tính Windows hoặc Command + Option + I trên máy Mac để mở chế độ xem thiết bị liên quan. Từ đây, bạn có thể chọn thiết bị di động hoặc máy tính bảng mà mình chọn để kiểm tra khả năng đáp ứng của thiết kế.

Kiểm tra bố cục đáp ứng trong Chrome

Có một số câu hỏi bạn muốn trả lời khi thực hiện quá trình này.

  • Bố cục có điều chỉnh cho đúng số lượng cột không?
  • Nội dung có vừa khít với các thành phần bố cục và vùng chứa trên các màn hình khác nhau không?
  • Kích thước phông chữ có phù hợp với từng màn hình không?

Đơn vị CSS và Giá trị cho Thiết kế Đáp ứng

CSS có cả đơn vị đo lường tuyệt đối và tương đối. Ví dụ về đơn vị độ dài tuyệt đối là cm hoặc px. Đơn vị tương đối hoặc giá trị động phụ thuộc vào kích thước và độ phân giải của màn hình hoặc kích thước phông chữ của phần tử gốc.

PX vs EM vs REM vs Viewport Units cho thiết kế đáp ứng

  • PX – một pixel duy nhất
  • EM – đơn vị tương đối dựa trên kích thước phông chữ của phần tử.
  • REM – đơn vị tương đối dựa trên kích thước phông chữ của phần tử.
  • VH, VW -% chiều cao hoặc chiều rộng của khung nhìn.
  • % – phần trăm của phần tử chính.

Một nhà thiết kế hoặc nhà phát triển web mới có lẽ nên gắn bó với pixel cho văn bản vì chúng là đơn vị độ dài dễ hiểu nhất trong CSS.

Nhưng khi đặt chiều rộng và chiều rộng tối đa của hình ảnh và các phần tử khác, sử dụng% là giải pháp tốt nhất. Cách làm này sẽ đảm bảo các thành phần điều chỉnh phù hợp với kích thước màn hình của mọi thiết bị.

Xem Thêm  Cách căn giữa mọi thứ bằng CSS - Căn chỉnh Div, Text, v.v. - vị trí trung tâm trong css

Ví dụ về thiết kế đáp ứng

Dưới đây, chúng tôi sẽ đề cập đến một số ví dụ về thiết kế web đáp ứng từ các ngành khác nhau – và tìm hiểu từ những điều họ làm đúng và sai.

1. Báo điện tử: New York Times

nyt responsive design

Trên máy tính để bàn, bố cục NYT khiến bạn liên tưởng đến một tờ báo truyền thống, chứa nhiều hình ảnh và các hàng và cột nội dung khác nhau. Dường như có một cột hoặc một hàng riêng cho mọi danh mục tin tức.

Trên thiết bị di động, nó tuân theo tiêu chuẩn một cột và cũng điều chỉnh menu ở định dạng accordion để dễ sử dụng hơn.

2. Blog: Nghệ thuật của sự không tuân thủ

chris guildlebeau responsive design 2

Blog của Chris Guillebeau “Nghệ thuật của sự không tuân thủ” đã phát triển mạnh mẽ trong hơn một thập kỷ. Mặc dù thiết kế không phải là điểm vượt trội nhất, nhưng nó đáp ứng và điều chỉnh thanh bên hai cột và bố cục nội dung chính cho phù hợp với thiết kế một cột trên thiết bị di động.

3. Thương mại điện tử: Amazon

amazon responsive design 1

Amazon là công ty dẫn đầu toàn cầu về thương mại điện tử vì một lý do, giao diện người dùng của họ hoàn toàn linh hoạt trên tất cả các thiết bị.

Bố cục máy tính bảng của họ chỉ đơn giản là loại bỏ một số khoảng trắng và thêm một phần biểu tượng có thể cuộn để phù hợp với nhiều nội dung hơn vào một gói nhỏ hơn.

Bố cục trên thiết bị di động của họ đưa nó vào một cột duy nhất, tập trung vào các yếu tố cần thiết, như lịch sử mua hàng gần đây, thay vì các biểu tượng liên kết phần khác nhau từ trang chủ chính của họ.

4. Trang web video: YouTube

youtube responsive design

YouTube trên điện thoại di động, máy tính bảng và máy tính xách tay

Cốt lõi của thiết kế trang chủ của YouTube là một lưới linh hoạt gồm các video có liên quan đến từng người dùng. Trên máy tính bảng, số cột trong mỗi hàng giảm xuống còn ba. Trên thiết bị di động, nó được rút gọn thành thiết kế một cột.

Phiên bản dành cho thiết bị di động cũng di chuyển menu chính xuống cuối màn hình, gần với ngón tay cái của người dùng điện thoại thông minh của họ hơn. Động thái đơn giản này cải thiện điều hướng và UX.

5. Tạp chí Trực tuyến: Có dây

thiết kế đáp ứng có dây

Phương pháp tiếp cận thiết kế web đáp ứng của Wired tập trung vào việc triển khai bố cục một cột trên tất cả các màn hình nhỏ hơn, bắt đầu từ máy tính bảng.

Đây là một bố cục cơ bản nhưng giúp người dùng dễ dàng thu hút sự chú ý đến những tin bài hàng đầu và CTA đăng ký của họ.

Đảm bảo trang web của bạn trông tuyệt đẹp ✨ trên các thiết bị với hướng dẫn thiết kế đáp ứng này!

Nhấp để đăng Tweet

Tóm tắt

Có rất nhiều yếu tố khác nhau đi vào thiết kế web đáp ứng. Nếu không có hiểu biết cơ bản về HTML và CSS, bạn có thể dễ mắc lỗi.

Nhưng thông qua việc tự làm quen với các khối xây dựng khác nhau, phân tích các ví dụ bằng các công cụ dành cho nhà phát triển web và thử nghiệm khi sử dụng mã mẫu, bạn sẽ có thể làm cho trang web của mình đáp ứng mà không gặp bất kỳ vấn đề lớn nào.

Nếu điều đó nghe có vẻ quá khó để đạt được, bạn luôn có thể thuê nhà phát triển WordPress hoặc chỉ cần đảm bảo rằng chủ đề của bạn đã đáp ứng.

Tiết kiệm thời gian, chi phí và tối đa hóa hiệu suất trang web với:

  • Trợ giúp tức thì từ các chuyên gia lưu trữ WordPress, 24/7.
  • Tích hợp Cloudflare Enterprise.
  • Tiếp cận khán giả toàn cầu với 34 trung tâm dữ liệu trên toàn thế giới.
  • Tối ưu hóa với tính năng Giám sát hiệu suất ứng dụng được tích hợp sẵn của chúng tôi.

Tất cả những điều đó và hơn thế nữa, trong một gói không có hợp đồng dài hạn, di chuyển được hỗ trợ và đảm bảo hoàn tiền trong 30 ngày. Xem các gói của chúng tôi hoặc nói chuyện với bộ phận bán hàng để tìm gói phù hợp với bạn.


Xem thêm những thông tin liên quan đến chủ đề cách thiết kế đáp ứng

Discover the Power of Responsive Website Design | Editor X

alt

  • Tác giả: Editor X
  • Ngày đăng: 2020-07-26
  • Đánh giá: 4 ⭐ ( 9810 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Meet Editor X—The advanced website creation platform made exclusively for designers and agencies. Build outstanding fluid sites using flexible CSS grids, full breakpoint control and flexbox technology. Experience a revolutionary combination of advanced design capabilities and integrated business solutions to bring your boldest visions to life.

    Start creating now:https://www.editorx.com/webcreation

Thiết kế đáp ứng : Điều bạn cần biết ?

  • Tác giả: skynet-software.com
  • Đánh giá: 3 ⭐ ( 2875 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế đáp ứng ở khắp mọi nơi hiện nay, và chúng tôi có thể cảm ơn ngành công nghiệp thiết bị di động đang phát triển cho điều đó.

Kích thước website chuẩn 2021 rosponsive cho mọi màn hình hiển thị

  • Tác giả: eznet.com.vn
  • Đánh giá: 5 ⭐ ( 6303 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Kích thước website chuẩn năm 2021 và về sau như thế nào đáp được nhiều màn hình hiển thị? Thiết kế đáp ứng và phương pháp thiết kế website kích thước chuẩn.

10 công cụ tốt nhất để thiết kế trang web đáp ứng

  • Tác giả: 1shortly.com
  • Đánh giá: 5 ⭐ ( 8878 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phản ứng nhanh nhẹn thiết kế trang web được đề xuất bởi Google, nó cho phép một trang web cung cấp cho khách hàng một cuộc gặp gỡ bất thường trên nhiều

Thiết kế đáp ứng: Năm cách có thể tăng lưu lượng truy cập của bạn

  • Tác giả: helpex.vn
  • Đánh giá: 3 ⭐ ( 6389 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế đáp ứng là rất quan trọng không chỉ đối với khả năng sử dụng và giao diện thực tế của trang web của bạn mà còn đối với lưu lượng truy cập mà trang web của bạn sẽ nhận được ngay từ…

Cách Thiết kế Logo Đáp ứng Chuyển đổi số

  • Tác giả: www.saokim.com.vn
  • Đánh giá: 3 ⭐ ( 4981 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Chuyển đổi số không đơn giản là Online. Vậy cách thiết kế Logo đáp ứng cho quá trình chuyển đổi số như thế nào?

Ưu và nhược điểm thiết kế web thích ứng và thiết kế web đáp ứng

  • Tác giả: www.adcvietnam.net
  • Đánh giá: 3 ⭐ ( 5613 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết kế web thích ứng so với thiết kế web đáp ứng. ADC Việt Nam sẽ đi sâu vào sự khác biệt và tương đồng giữa Thiết kế đáp ứng và Thiết kế thích ứng

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình