Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Thiết kế web đáp ứng(responsive) – Nó là gì và Cách sử dụng nó

Đa số mọi người rất rất muốn sở hữu website của họ trên những nền tảng Smartphone. Hiện nay, các thiết bị điện từ nhất là nền tảng tablet và smartphone phát triển và độ phân giải của chúng cũng đa dạng về kích cỡ hơn. Do đó chúng đòi hỏi yêu cầu cao hơn và cần phải tương thích với những thiết bị này  

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Trong lĩnh vực thiết kế và phát triển web, chúng tôi nhanh chóng đi đến điểm không thể theo kịp với vô số độ phân giải và thiết bị mới. Đối với nhiều trang web, việc tạo một phiên bản trang web cho từng độ phân giải và thiết bị mới sẽ là không thể, hoặc ít nhất là không thực tế. Chúng ta có nên gánh chịu hậu quả của việc mất khách truy cập từ một thiết bị này, vì lợi ích của việc giành được khách truy cập từ thiết bị khác không? Hay là có một lựa chọn khác?

Các bài viết khác:

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

Thiết kế web đáp ứng là cách tiếp cận đề xuất rằng thiết kế và phát triển phải đáp ứng hành vi và môi trường của người dùng dựa trên kích thước màn hình, nền tảng và định hướng.

Thực tiễn bao gồm sự kết hợp của các lưới và bố cục linh hoạt, hình ảnh và sử dụng thông minh các truy vấn phương tiện CSS. Khi người dùng chuyển từ máy tính xách tay của họ sang iPad, trang web sẽ tự động chuyển đổi để phù hợp với độ phân giải, kích thước hình ảnh và khả năng viết tập lệnh. Người ta cũng có thể phải xem xét các cài đặt trên thiết bị của họ; ví dụ: nếu họ có VPN cho iOS trên iPad của họ, thì trang web sẽ không chặn quyền truy cập của người dùng vào trang. Nói cách khác, trang web phải có công nghệ để tự động phản hồi tùy chọn của người dùng. Điều này sẽ loại bỏ nhu cầu về một giai đoạn thiết kế và phát triển khác nhau cho mỗi thiết bị mới trên thị trường.

Khái niệm về thiết kế web đáp ứng

Ethan Marcotte đã viết một bài báo giới thiệu về cách tiếp cận, Thiết kế web đáp ứng, cho A List Apart. Nó bắt nguồn từ khái niệm thiết kế kiến ​​trúc đáp ứng, theo đó một căn phòng hoặc không gian tự động điều chỉnh theo số lượng và lưu lượng người trong đó:

“Gần đây, một kỷ luật mới nổi có tên là” kiến ​​trúc đáp ứng “đã bắt đầu đặt câu hỏi về cách không gian vật lý có thể phản ứng với sự hiện diện của người đi qua chúng. Thông qua sự kết hợp giữa robot nhúng và vật liệu chịu lực, các kiến ​​trúc sư đang thử nghiệm các tác phẩm sắp đặt nghệ thuật và cấu trúc tường uốn cong, linh hoạt và mở rộng khi đám đông đến gần chúng. Cảm biến chuyển động có thể được ghép nối với hệ thống kiểm soát khí hậu để điều chỉnh nhiệt độ của căn phòng và ánh sáng xung quanh khi nó lấp đầy mọi người. Các công ty đã sản xuất “công nghệ kính thông minh” có thể tự động trở nên mờ khi có người trong phòng đạt đến một ngưỡng mật độ nhất định, mang lại cho họ một lớp bảo mật bổ sung. “

Truyền nguyên tắc này vào thiết kế Web và chúng tôi có một ý tưởng tương tự nhưng hoàn toàn mới. Tại sao chúng ta nên tạo một thiết kế Web tùy chỉnh cho từng nhóm người dùng; Rốt cuộc, các kiến ​​trúc sư không thiết kế một tòa nhà cho từng quy mô và loại nhóm đi qua nó? 

Giống như kiến ​​trúc đáp ứng, thiết kế Web sẽ tự động điều chỉnh. Nó không yêu cầu vô số giải pháp tùy chỉnh cho từng loại người dùng mới.Rõ ràng, chúng ta không thể sử dụng cảm biến chuyển động và robot để thực hiện điều này theo cách mà một tòa nhà sẽ làm. Thiết kế web đáp ứng yêu cầu một cách suy nghĩ trừu tượng hơn. 

Tuy nhiên, một số ý tưởng đã được thực hiện: bố cục linh hoạt, truy vấn phương tiện và tập lệnh có thể định dạng lại các trang Web và đánh dấu dễ dàng (hoặc tự động).Nhưng thiết kế web đáp ứng không chỉ về độ phân giải màn hình có thể điều chỉnh và hình ảnh có thể thay đổi kích thước tự động, mà còn là một cách suy nghĩ hoàn toàn mới về thiết kế. Hãy nói về tất cả các tính năng này, cùng với các ý tưởng bổ sung trong quá trình thực hiện.

Xem thêm Dịch vụ thiết kế website

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

Với nhiều thiết bị hơn, các độ phân giải, định nghĩa và hướng màn hình khác nhau. Các thiết bị mới với kích thước màn hình mới đang được phát triển hàng ngày và mỗi thiết bị này có thể xử lý các biến thể về kích thước, chức năng và thậm chí cả màu sắc. Một số ở phong cảnh, một số khác ở chế độ dọc, những bức khác thậm chí còn hoàn toàn là hình vuông. Như chúng ta đã biết từ sự phổ biến ngày càng tăng của iPhone, iPad và các điện thoại thông minh tiên tiến, nhiều thiết bị mới có thể chuyển từ dọc sang ngang theo ý muốn của người dùng. Làm thế nào là một thiết kế cho những tình huống này?

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Ngoài việc thiết kế cho cả phong cảnh và dọc (và cho phép các hướng đó có thể chuyển đổi ngay lập tức khi tải trang), chúng tôi phải xem xét hàng trăm kích thước màn hình khác nhau. Có, có thể nhóm chúng thành các danh mục chính, thiết kế cho từng loại và làm cho mỗi thiết kế trở nên linh hoạt khi cần thiết. 

Nhưng điều đó có thể gây choáng ngợp, và ai biết được con số sử dụng sẽ như thế nào trong 5 năm nữa? Bên cạnh đó, nhiều người dùng không tối đa hóa trình duyệt của họ, chính điều này đã để lại quá nhiều chỗ cho sự đa dạng giữa các kích thước màn hình.

Morten Hjerde và một số đồng nghiệp của ông đã xác định số liệu thống kê về khoảng 400 thiết bị được bán từ năm 2005 đến năm 2008. Dưới đây là một số thông tin phổ biến nhất:

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Kể từ đó, nhiều thiết bị hơn nữa đã ra đời. Rõ ràng là chúng tôi không thể tiếp tục tạo ra các giải pháp tùy chỉnh cho từng giải pháp. Vì vậy, chúng ta phải đối phó với tình huống này như thế nào?

MỘT PHẦN GIẢI PHÁP: LINH HOẠT MỌI THỨ

Một vài năm trước, khi bố cục linh hoạt gần như là một thứ “xa xỉ” đối với các trang web, những thứ duy nhất linh hoạt trong một thiết kế là các cột bố cục (yếu tố cấu trúc) và văn bản. Hình ảnh có thể dễ dàng phá vỡ bố cục và thậm chí các yếu tố cấu trúc linh hoạt đã phá vỡ hình thức của bố cục khi được đẩy đủ. 

Các thiết kế linh hoạt không thực sự linh hoạt như vậy; họ có thể cho hoặc lấy vài trăm pixel, nhưng họ thường không thể điều chỉnh từ màn hình máy tính lớn sang netbook.Bây giờ chúng tôi có thể làm cho mọi thứ linh hoạt hơn. 

Hình ảnh có thể được điều chỉnh tự động và chúng tôi có các cách giải quyết để bố cục không bao giờ bị vỡ (mặc dù chúng có thể trở nên nhỏ và không đọc được trong quá trình này). Mặc dù đây không phải là một bản sửa lỗi hoàn chỉnh, nhưng giải pháp này cung cấp cho chúng tôi nhiều tùy chọn hơn. 

Nó hoàn hảo cho các thiết bị chuyển từ hướng dọc sang ngang ngay lập tức hoặc khi người dùng chuyển từ màn hình máy tính lớn sang iPad.

Trong bài viết của Ethan Marcotte, anh ấy đã tạo một thiết kế Web mẫu có bố cục linh hoạt tốt hơn này:

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Toàn bộ thiết kế là sự kết hợp đáng yêu của lưới chất lỏng, hình ảnh linh hoạt và đánh dấu thông minh khi cần thiết. Tạo lưới chất lỏng là thực tế khá phổ biến và có một số kỹ thuật để tạo hình ảnh chất lỏng:

Để biết thêm thông tin về cách tạo trang web linh hoạt, hãy nhớ xem cuốn sách “Thiết kế web linh hoạt: Tạo bố cục lỏng và đàn hồi với CSS” của Zoe Mickley Gillenwater và tải xuống chương mẫu “Tạo hình ảnh linh hoạt”. 

Ngoài ra, Zoe còn cung cấp danh sách đầy đủ các hướng dẫn, tài nguyên, nguồn cảm hứng và các phương pháp hay nhất sau đây để tạo lưới và bố cục linh hoạt: “Tài nguyên cần thiết để tạo bố cục lỏng và đàn hồi”.

Mặc dù từ góc độ kỹ thuật, điều này hoàn toàn có thể thực hiện được một cách dễ dàng, nhưng không chỉ là việc cắm các tính năng này vào là xong. Hãy xem logo trong thiết kế này, ví dụ:

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Nếu thay đổi kích thước quá nhỏ, hình ảnh sẽ có chất lượng thấp, nhưng việc giữ cho tên của trang web hiển thị và không cắt nó đi là điều quan trọng. Vì vậy, hình ảnh được chia thành hai: một (của hình minh họa) được đặt làm nền, được cắt và duy trì kích thước của nó, và hình còn lại (của tên) được thay đổi kích thước tương ứng.

<h1 id=”logo”><a href=”#”><img src=”site/logo.png” alt=”The Baker Street Inquirer” /></a></h1>

Ở trên, phần tử h1 giữ hình minh họa làm nền và hình ảnh được căn chỉnh theo nền của vùng chứa (tiêu đề).

Đây chỉ là một ví dụ về kiểu tư duy giúp thiết kế Web đáp ứng thực sự hiệu quả. Nhưng ngay cả với các bản sửa lỗi thông minh như thế này, một bố cục có thể trở nên quá hẹp hoặc ngắn để trông đúng. 

Trong ví dụ về logo ở trên (mặc dù nó hoạt động), tình huống lý tưởng là không cắt một nửa hình minh họa hoặc giữ cho logo không quá nhỏ đến mức khó đọc và “nổi” lên.

Hình ảnh linh hoạt

Một vấn đề chính cần được giải quyết với thiết kế Web đáp ứng là làm việc với hình ảnh. Có một số kỹ thuật để thay đổi kích thước hình ảnh theo tỷ lệ và nhiều kỹ thuật có thể thực hiện dễ dàng. Tùy chọn phổ biến nhất, được lưu ý trong bài viết của Ethan Marcotte về hình ảnh linh hoạt nhưng lần đầu tiên được thử nghiệm bởi Richard Rutter, là sử dụng chiều rộng tối đa của CSS để dễ dàng sửa chữa.

img { max-width: 100%; }

Miễn là không có kiểu hình ảnh dựa trên chiều rộng nào khác ghi đè quy tắc này, mọi hình ảnh sẽ tải ở kích thước ban đầu, trừ khi vùng xem trở nên hẹp hơn chiều rộng ban đầu của hình ảnh. Chiều rộng tối đa của hình ảnh được đặt thành 100% chiều rộng của màn hình hoặc trình duyệt, vì vậy khi 100% đó trở nên hẹp hơn, hình ảnh cũng vậy. Về cơ bản, như Jason Grigsby đã lưu ý, “Ý tưởng đằng sau hình ảnh linh hoạt là bạn cung cấp hình ảnh ở kích thước tối đa mà chúng sẽ được sử dụng. 

Bạn không khai báo chiều cao và chiều rộng trong mã của mình, nhưng thay vào đó, hãy để trình duyệt thay đổi kích thước hình ảnh nếu cần trong khi sử dụng CSS để hướng dẫn kích thước tương đối của chúng ”. Đó là một kỹ thuật tuyệt vời và đơn giản để thay đổi kích thước hình ảnh một cách đẹp mắt.

Lưu ý rằng chiều rộng tối đa không được hỗ trợ trong IE, nhưng sử dụng tốt chiều rộng: 100% sẽ giải quyết vấn đề một cách gọn gàng trong một biểu định kiểu dành riêng cho IE. Một vấn đề nữa là khi hình ảnh được thay đổi kích thước quá nhỏ trong một số trình duyệt cũ hơn trong Windows, kết xuất không rõ ràng như bình thường. Tuy nhiên, có một JavaScript để khắc phục sự cố này, được tìm thấy trong bài viết của Ethan Marcotte.

Mặc dù ở trên là một bản sửa lỗi nhanh tuyệt vời và bắt đầu tốt cho hình ảnh đáp ứng, nhưng độ phân giải hình ảnh và thời gian tải xuống phải là những yếu tố chính được cân nhắc. Mặc dù việc thay đổi kích thước hình ảnh cho thiết bị di động có thể rất đơn giản, nhưng nếu kích thước hình ảnh gốc dành cho các thiết bị lớn, nó có thể làm chậm đáng kể thời gian tải xuống và chiếm dung lượng không cần thiết.

HÌNH ẢNH PHẢN ỨNG CỦA NHÓM FILAMENT

Kỹ thuật này, do Filament Group trình bày, sẽ xem xét vấn đề này và không chỉ thay đổi kích thước hình ảnh một cách tương xứng mà còn thu hẹp độ phân giải hình ảnh trên các thiết bị nhỏ hơn, vì vậy hình ảnh rất lớn không lãng phí không gian một cách không cần thiết trên màn hình nhỏ. Kiểm tra trang demo ở đây.Kỹ thuật này yêu cầu một vài tệp, tất cả đều có sẵn trên Github. 

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Đầu tiên, một tệp JavaScript (rwd-images.js), tệp .htaccess và tệp hình ảnh (rwd.gif). Sau đó, chúng ta có thể chỉ sử dụng một chút HTML để tham chiếu đến cả hình ảnh có độ phân giải lớn hơn và nhỏ hơn: đầu tiên, hình ảnh nhỏ, với tiền tố .r để làm rõ rằng nó phải đáp ứng và sau đó là tham chiếu đến hình ảnh lớn hơn bằng cách sử dụng dữ liệu- fullsrc.

<img src=”smallRes.jpg” data-fullsrc=”largeRes.jpg”>

Data-fullsrc là một thuộc tính HTML5 tùy chỉnh, được xác định trong các tệp được liên kết ở trên. Đối với bất kỳ màn hình nào rộng hơn 480 pixel, hình ảnh có độ phân giải lớn hơn (LargeRes.jpg) sẽ tải; màn hình nhỏ hơn sẽ không cần tải hình ảnh lớn hơn và do đó hình ảnh nhỏ hơn (smallRes.jpg) sẽ tải.

Tệp JavaScript chèn một phần tử cơ sở cho phép trang tách các hình ảnh đáp ứng khỏi những hình ảnh khác và chuyển hướng chúng khi cần thiết. Khi tải trang, tất cả các tệp được ghi lại về dạng ban đầu và chỉ những hình ảnh lớn hoặc nhỏ mới được tải khi cần thiết. 

Với các kỹ thuật khác, tất cả các hình ảnh có độ phân giải cao hơn sẽ phải được tải xuống, ngay cả khi các phiên bản lớn hơn sẽ không bao giờ được sử dụng. Đặc biệt đối với các trang web có nhiều hình ảnh, kỹ thuật này có thể giúp tiết kiệm băng thông và thời gian tải.Kỹ thuật này được hỗ trợ đầy đủ trong các trình duyệt hiện đại, chẳng hạn như IE8 +, Safari, Chrome và Opera, cũng như các thiết bị di động sử dụng cùng các trình duyệt này (iPad, iPhone, v.v.). 

Các trình duyệt cũ hơn và Firefox giảm chất lượng tốt và vẫn thay đổi kích thước như người ta mong đợi về một hình ảnh đáp ứng, ngoại trừ việc cả hai độ phân giải được tải xuống cùng nhau, vì vậy lợi ích cuối cùng của việc tiết kiệm dung lượng bằng kỹ thuật này là vô hiệu.

DỪNG ĐẶT LẠI KÍCH THƯỚC HÌNH ẢNH MÔ PHỎNG IPHONE

Một điều thú vị về iPhone và iPod Touch là thiết kế Web tự động thay đổi tỷ lệ để phù hợp với màn hình nhỏ. Một thiết kế có kích thước đầy đủ, trừ khi được chỉ định khác, sẽ chỉ thu nhỏ theo tỷ lệ cho trình duyệt nhỏ, không cần cuộn hoặc phiên bản dành cho thiết bị di động. 

Sau đó, người dùng có thể dễ dàng phóng to và thu nhỏ khi cần thiết.Tuy nhiên, có một vấn đề mà trình mô phỏng này đã tạo ra. 

Khi thiết kế web đáp ứng thành công, nhiều người nhận thấy rằng hình ảnh vẫn thay đổi tương ứng với trang ngay cả khi chúng được tạo riêng cho (hoặc có thể phù hợp với) màn hình nhỏ. 

Điều này lần lượt thu nhỏ văn bản và các yếu tố khác.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Vì điều này chỉ hoạt động với trình mô phỏng của Apple, chúng tôi có thể sử dụng thẻ meta dành riêng cho Apple để khắc phục sự cố, đặt thẻ này bên dưới phần  của trang web. Nhờ bài viết về thay đổi kích thước hình ảnh của Think Vitamin, chúng tôi có thẻ meta bên dưới:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0″>

Đặt tỷ lệ ban đầu thành 1 sẽ ghi đè mặc định để thay đổi kích thước hình ảnh theo tỷ lệ, trong khi vẫn giữ nguyên nếu chiều rộng của chúng giống với chiều rộng của thiết bị (ở chế độ dọc hoặc lanscape). Tài liệu của Apple có nhiều thông tin hơn về thẻ meta chế độ xem.

Cấu trúc bố cục tùy chỉnh

Đối với những thay đổi về kích thước quá lớn, chúng tôi có thể muốn thay đổi toàn bộ bố cục, thông qua một biểu định kiểu riêng biệt hoặc hiệu quả hơn, thông qua một truy vấn phương tiện CSS. 

Điều này không phải là rắc rối; hầu hết các kiểu có thể được giữ nguyên, trong khi các biểu định kiểu cụ thể có thể kế thừa các kiểu này và di chuyển các phần tử xung quanh với số nổi, chiều rộng, chiều cao, v.v.

Ví dụ: chúng ta có thể có một biểu định kiểu chính (cũng sẽ là mặc định) sẽ xác định tất cả các thành phần cấu trúc chính, chẳng hạn như #wrapper, #content, #sidebar, #nav, cùng với màu sắc, hình nền và kiểu chữ. Chiều rộng linh hoạt và phao nổi mặc định cũng có thể được xác định.

Nếu một biểu định kiểu làm cho bố cục quá hẹp, ngắn, rộng hoặc cao, thì chúng tôi có thể phát hiện điều đó và chuyển sang một biểu định kiểu mới. 

Biểu định kiểu con mới này sẽ áp dụng mọi thứ từ biểu định kiểu mặc định và sau đó chỉ cần xác định lại cấu trúc của bố cục.

Đây là nội dung style.css (mặc định):

/* Default styles that will carry to the child style sheet */

html,body{

   background…

   font…

   color…

}

h1,h2,h3{}

p, blockquote, pre, code, ol, ul{}

/* Structural elements */

#wrapper{

  width: 80%;

  margin: 0 auto;

  background: #fff;

  padding: 20px;

}

#content{

  width: 54%;

  float: left;

  margin-right: 3%;

}

#sidebar-left{

  width: 20%;

  float: left;

  margin-right: 3%;

}

#sidebar-right{

  width: 20%;

  float: left;

}

Đây là nội dung mobile.css (con):

#wrapper{

  width: 90%;

}

#content{

  width: 100%;

}

#sidebar-left{

  width: 100%;

  clear: both;

  /* Additional styling for our new layout */

  border-top: 1px solid #ccc;

  margin-top: 20px;

}

#sidebar-right{

  width: 100%;

  clear: both;

  /* Additional styling for our new layout */

  border-top: 1px solid #ccc;

  margin-top: 20px;

}

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

TRUY VẤN PHƯƠNG TIỆN TRUYỀN THÔNG

CSS3 hỗ trợ tất cả các loại phương tiện tương tự như CSS 2.1, chẳng hạn như màn hình, bản in và thiết bị cầm tay, nhưng đã thêm hàng chục tính năng phương tiện mới, bao gồm chiều rộng tối đa, chiều rộng thiết bị, định hướng và màu sắc. Các thiết bị mới được sản xuất sau khi phát hành CSS3 (chẳng hạn như iPad và các thiết bị Android) chắc chắn sẽ hỗ trợ các tính năng đa phương tiện. 

Vì vậy, việc gọi một truy vấn phương tiện sử dụng các tính năng CSS3 để nhắm mục tiêu các thiết bị này sẽ hoạt động tốt và nó sẽ bị bỏ qua nếu được truy cập bởi trình duyệt máy tính cũ hơn không hỗ trợ CSS3.

Trong bài viết của Ethan Marcotte, chúng ta thấy một ví dụ về truy vấn phương tiện đang hoạt động:

<link rel=”stylesheet” type=”text/css”

  media=”screen and (max-device-width: 480px)”

  href=”shetland.css” />

Truy vấn phương tiện này khá dễ hiểu: nếu trình duyệt hiển thị trang này trên màn hình (thay vì in, v.v.) và nếu chiều rộng của màn hình (không nhất thiết là chế độ xem) là 480 pixel trở xuống, thì hãy tải shetland. css.Các tính năng CSS3 mới cũng bao gồm hướng (dọc so với ngang), chiều rộng thiết bị, chiều rộng thiết bị tối thiểu và hơn thế nữa. 

Xem “Truy vấn Phương tiện Định hướng” để biết thêm thông tin về cách đặt và hạn chế chiều rộng dựa trên các tính năng truy vấn phương tiện này.Người ta có thể tạo nhiều biểu định kiểu, cũng như các thay đổi bố cục cơ bản được xác định để phù hợp với phạm vi chiều rộng – ngay cả đối với hướng ngang và hướng dọc. 

Hãy nhớ xem phần bài báo của Ethan Marcotte có tựa đề “Đáp ứng truy vấn trên phương tiện truyền thông” để biết thêm ví dụ và giải thích cặn kẽ hơn.

Nhiều truy vấn phương tiện cũng có thể được đưa ngay vào một biểu định kiểu duy nhất, đây là tùy chọn hiệu quả nhất khi được sử dụng:

/* Smartphones (portrait and landscape) ———– */

@media only screen

and (min-device-width : 320px)

and (max-device-width : 480px) {

/* Styles */

}

/* Smartphones (landscape) ———– */

@media only screen

and (min-width : 321px) {

/* Styles */

}

/* Smartphones (portrait) ———– */

@media only screen

and (max-width : 320px) {

/* Styles */

}

Đoạn mã trên là từ một mẫu miễn phí cho nhiều truy vấn đa phương tiện giữa các thiết bị phổ biến của Andy Clark. Xem sự khác biệt giữa cách tiếp cận này và bao gồm các tệp biểu định kiểu khác nhau trong phần đánh dấu như được mô tả trong cuốn sách “Thiết kế web cứng” của ông.

CÂU HỎI VỀ PHƯƠNG TIỆN CSS3

Trên đây là một vài ví dụ về cách các truy vấn phương tiện, cả từ CSS 2.1 và CSS3 có thể hoạt động. Bây giờ chúng ta hãy xem xét một số cách thực hiện cụ thể để sử dụng các truy vấn phương tiện CSS3 để tạo các thiết kế Web đáp ứng. Nhiều ứng dụng trong số này có liên quan đến ngày hôm nay và tất cả chắc chắn sẽ có thể sử dụng được trong tương lai gần.

Thuộc tính chiều rộng tối thiểu và chiều rộng tối đa thực hiện chính xác những gì chúng đề xuất. Thuộc tính chiều rộng tối thiểu đặt trình duyệt hoặc chiều rộng màn hình tối thiểu mà một tập hợp kiểu nhất định (hoặc biểu định kiểu riêng biệt) sẽ áp dụng. Nếu bất kỳ điều gì nằm dưới giới hạn này, liên kết trang định kiểu hoặc các kiểu sẽ bị bỏ qua. Thuộc tính max-width làm ngược lại. 

Bất kỳ thứ gì cao hơn chiều rộng màn hình hoặc trình duyệt tối đa được chỉ định sẽ không áp dụng cho truy vấn phương tiện tương ứng.Lưu ý trong các ví dụ bên dưới rằng chúng tôi đang sử dụng cú pháp cho các truy vấn phương tiện có thể được sử dụng tất cả trong một biểu định kiểu. 

Như đã đề cập ở trên, cách hiệu quả nhất để sử dụng các truy vấn phương tiện là đặt tất cả chúng trong một CSS style sheet, với các style còn lại cho trang web. Bằng cách này, không cần phải thực hiện nhiều yêu cầu cho nhiều biểu định kiểu.

@media screen and (min-width: 600px) {

     .hereIsMyClass {

          width: 30%;

          float: right;

     }

}

Lớp được chỉ định trong truy vấn phương tiện ở trên (hereIsMyClass) sẽ chỉ hoạt động nếu chiều rộng của trình duyệt hoặc màn hình trên 600 pixel. Nói cách khác, truy vấn phương tiện này sẽ chỉ chạy nếu chiều rộng tối thiểu là 600 pixel (do đó, 600 pixel hoặc rộng hơn).

@media screen and (max-width: 600px) {

     .aClassforSmallScreens {

          clear: both;

      font-size: 1.3em;

     }

}

Giờ đây, với việc sử dụng chiều rộng tối đa, truy vấn phương tiện này sẽ chỉ áp dụng cho chiều rộng trình duyệt hoặc màn hình có chiều rộng tối đa 600 pixel hoặc hẹp hơn.

Mặc dù chiều rộng tối thiểu và chiều rộng tối đa ở trên có thể áp dụng cho kích thước màn hình hoặc chiều rộng trình duyệt, nhưng đôi khi chúng tôi muốn một truy vấn phương tiện có liên quan cụ thể đến chiều rộng thiết bị. 

Điều này có nghĩa là ngay cả khi trình duyệt hoặc khu vực xem khác được thu nhỏ thành một thứ gì đó nhỏ hơn, truy vấn phương tiện sẽ vẫn áp dụng cho kích thước của thiết bị thực tế. 

Thuộc tính truy vấn phương tiện chiều rộng thiết bị tối thiểu và chiều rộng thiết bị tối đa rất phù hợp để nhắm mục tiêu các thiết bị nhất định với kích thước đã đặt mà không áp dụng cùng kiểu cho các kích thước màn hình khác trong trình duyệt bắt chước kích thước của thiết bị.

@media screen and (max-device-width: 480px) {

     .classForiPhoneDisplay {

          font-size: 1.2em;

     }

}

@media screen and (min-device-width: 768px) {

     .minimumiPadWidth {

          clear: both;

      margin-bottom: 2px solid #ccc;

     }

}

Đối với iPad cụ thể, cũng có một thuộc tính truy vấn phương tiện được gọi là định hướng. Giá trị có thể là ngang (hướng ngang) hoặc dọc (hướng dọc).

@media screen and (orientation: landscape) {

     .iPadLandscape {

          width: 30%;

      float: right;

     }

}

@media screen and (orientation: portrait) {

     .iPadPortrait {

          clear: both;

     }

}

Thật không may, thuộc tính này chỉ hoạt động trên iPad. Khi xác định hướng cho iPhone và các thiết bị khác, bạn nên sử dụng chiều rộng thiết bị tối đa và chiều rộng thiết bị tối thiểu.Ngoài ra còn có nhiều truy vấn phương tiện có ý nghĩa khi kết hợp. 

Ví dụ: các truy vấn phương tiện chiều rộng tối thiểu và chiều rộng tối đa được kết hợp mọi lúc để đặt một kiểu cụ thể cho một phạm vi nhất định.

@media screen and (min-width: 800px) and (max-width: 1200px) {

     .classForaMediumScreen {

          background: #cc0000;

          width: 30%;

          float: right;

     }

}

Mã trên trong truy vấn phương tiện này chỉ áp dụng cho chiều rộng màn hình và trình duyệt từ 800 đến 1200 pixel. Một cách sử dụng tốt của kỹ thuật này là hiển thị nội dung nhất định hoặc toàn bộ thanh bên trong một bố cục tùy thuộc vào lượng không gian ngang có sẵn.Một số nhà thiết kế cũng muốn liên kết đến một bảng định kiểu riêng cho một số truy vấn phương tiện nhất định, điều này hoàn toàn ổn nếu lợi ích của tổ chức lớn hơn hiệu quả bị mất. 

Đối với các thiết bị không chuyển hướng hoặc đối với các màn hình không thể thay đổi chiều rộng trình duyệt theo cách thủ công, sử dụng một biểu định kiểu riêng biệt sẽ ổn.Ví dụ: bạn có thể muốn đặt tất cả các truy vấn phương tiện trong một biểu định kiểu (như ở trên) cho các thiết bị như iPad. Bởi vì một thiết bị như vậy có thể chuyển từ dọc sang ngang ngay lập tức, nếu hai truy vấn phương tiện này được đặt trong các biểu định kiểu riêng biệt, trang web sẽ phải gọi từng tệp biểu định kiểu mỗi khi người dùng chuyển hướng. Đặt truy vấn phương tiện cho cả hướng ngang và dọc của iPad trong cùng một tệp bảng định kiểu sẽ hiệu quả hơn nhiều.

Một ví dụ khác là thiết kế linh hoạt dành cho màn hình máy tính tiêu chuẩn với trình duyệt có thể thay đổi kích thước. Nếu trình duyệt có thể được thay đổi kích thước theo cách thủ công, thì việc đặt tất cả các truy vấn đa phương tiện trong một biểu định kiểu sẽ là tốt nhất.

Tuy nhiên, tổ chức có thể là chìa khóa và một nhà thiết kế có thể muốn xác định các truy vấn phương tiện trong thẻ liên kết HTML chuẩn:

<link rel=”stylesheet” media=”screen and (max-width: 600px)” href=”small.css” />

<link rel=”stylesheet” media=”screen and (min-width: 600px)” href=”large.css” />

<link rel=”stylesheet” media=”print” href=”print.css” />

JAVASCRIPT

Một phương pháp khác có thể được sử dụng là JavaScript, đặc biệt như một bản sao lưu cho các thiết bị không hỗ trợ tất cả các tùy chọn truy vấn phương tiện CSS3. May mắn thay, đã có một thư viện JavaScript được tạo sẵn giúp các trình duyệt cũ hơn (IE 5+, Firefox 1+, Safari 2) hỗ trợ các truy vấn phương tiện CSS3. 

Nếu bạn đang sử dụng các truy vấn này, chỉ cần lấy một bản sao của thư viện và đưa nó vào mark-up: css3-mediaqueries.js.Ngoài ra, bên dưới là đoạn mã jQuery mẫu phát hiện chiều rộng trình duyệt và thay đổi biểu định kiểu cho phù hợp – nếu người ta thích cách tiếp cận thực hành hơn:

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script>

<script type=”text/javascript”>

  $(document).ready(function(){

    $(window).bind(“resize”, resizeWindow);

    function resizeWindow(e){

      var newWindowWidth = $(window).width();

      // If width width is below 600px, switch to the mobile stylesheet

      if(newWindowWidth < 600){        $(“link[rel=stylesheet]”).attr({href : “mobile.css”});        }       // Else if width is above 600px, switch to the large stylesheet       else if(newWindowWidth > 600){

        $(“link[rel=stylesheet]”).attr({href : “style.css”});

      }

    }

  });

</script>

Có nhiều giải pháp để ghép nối JavaScript với các truy vấn phương tiện CSS. Hãy nhớ rằng truy vấn phương tiện không phải là một câu trả lời tuyệt đối, mà là những lựa chọn tuyệt vời cho thiết kế Web đáp ứng khi nói đến các giải pháp dựa trên CSS thuần túy. Với việc bổ sung JavaScript, chúng ta có thể chứa nhiều biến thể hơn. Để biết thông tin chi tiết về việc sử dụng JavaScript để bắt chước hoặc làm việc với các truy vấn phương tiện, hãy xem “Kết hợp Truy vấn phương tiện và JavaScript”.

Hiển thị hoặc Ẩn Nội dung

Có thể thu nhỏ mọi thứ theo tỷ lệ và sắp xếp lại các yếu tố khi cần thiết để làm cho mọi thứ vừa vặn (hợp lý) khi màn hình nhỏ hơn. Thật tuyệt khi điều đó có thể xảy ra, nhưng việc cung cấp mọi nội dung từ màn hình lớn trên màn hình nhỏ hơn hoặc thiết bị di động không phải lúc nào cũng là câu trả lời tốt nhất. Chúng tôi có các phương pháp hay nhất cho môi trường di động: điều hướng đơn giản hơn, nội dung tập trung hơn, danh sách hoặc hàng thay vì nhiều cột.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Thiết kế web đáp ứng không chỉ là cách tạo bố cục linh hoạt trên nhiều nền tảng và kích thước màn hình. Nó cũng phải là về việc người dùng có thể chọn và chọn nội dung. May mắn thay, CSS đã cho phép chúng tôi hiển thị và ẩn nội dung một cách dễ dàng trong nhiều năm!

display: none;

Khai báo display: none cho phần tử khối HTML cần được ẩn trong một biểu định kiểu cụ thể hoặc phát hiện chiều rộng trình duyệt và thực hiện điều đó thông qua JavaScript. Ngoài việc ẩn nội dung trên màn hình nhỏ hơn, chúng tôi cũng có thể ẩn nội dung trong biểu định kiểu mặc định của chúng tôi (đối với màn hình lớn hơn) mà chỉ có sẵn trong các phiên bản di động hoặc trên các thiết bị nhỏ hơn. 

Ví dụ: khi chúng tôi ẩn các phần nội dung chính, chúng tôi có thể thay thế chúng bằng điều hướng đến nội dung đó hoặc hoàn toàn bằng một cấu trúc điều hướng khác.Lưu ý rằng chúng tôi chưa sử dụng khả năng hiển thị: ẩn ở đây; 

điều này chỉ ẩn nội dung (mặc dù nó vẫn ở đó), trong khi thuộc tính hiển thị hoàn toàn loại bỏ nó. Đối với các thiết bị nhỏ hơn, không cần phải giữ lại phần đánh dấu trên trang – nó chỉ chiếm tài nguyên và thậm chí có thể gây ra việc cuộn hoặc phá vỡ bố cục không cần thiết.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Đây là đánh dấu của chúng tôi:

<p class=”sidebar-nav”><a href=”#”>Left Sidebar Content</a> | <a href=”#”>Right Sidebar Content</a></p>

<div id=”content”>

  <h2>Main Content</h2>

</div>

<div id=”sidebar-left”>

  <h2>A Left Sidebar</h2>

</div>

<div id=”sidebar-right”>

  <h2>A Right Sidebar</h2>

</div>

Trong biểu định kiểu mặc định của chúng tôi bên dưới, chúng tôi đã ẩn các liên kết đến nội dung thanh bên.

Vì màn hình của chúng tôi đủ lớn nên chúng tôi có thể hiển thị nội dung này khi tải trang.Đây là nội dung style.css (mặc định):

#content{

  width: 54%;

  float: left;

  margin-right: 3%;

}

#sidebar-left{

  width: 20%;

  float: left;

  margin-right: 3%;

}

#sidebar-right{

  width: 20%;

  float: left;

}

.sidebar-nav{display: none;}

Bây giờ, chúng tôi ẩn hai thanh bên (bên dưới) và hiển thị các liên kết đến các phần nội dung này. Thay vào đó, các liên kết có thể gọi đến JavaScript để hủy hiển thị: 

không hiển thị gì khi được nhấp vào và các thanh bên có thể được sắp xếp lại trong CSS để nổi bên dưới nội dung (hoặc theo một cách hợp lý khác).

Đây là nội dung mobile.css (đơn giản hơn):

#content{

  width: 100%;

}

#sidebar-left{

  display: none;

}

#sidebar-right{

  display: none;

}

.sidebar-nav{display: inline;}

Với khả năng dễ dàng hiển thị và ẩn nội dung, sắp xếp lại các thành phần bố cục và tự động thay đổi kích thước hình ảnh, các thành phần biểu mẫu và hơn thế nữa, một thiết kế có thể được chuyển đổi để phù hợp với nhiều kích thước màn hình và loại thiết bị khác nhau. Khi màn hình nhỏ hơn, hãy sắp xếp lại các phần tử để phù hợp với các nguyên tắc dành cho thiết bị di động; 

ví dụ: sử dụng tập lệnh hoặc biểu định kiểu thay thế để tăng khoảng trắng hoặc để thay thế các nguồn điều hướng hình ảnh trên thiết bị di động để có khả năng sử dụng tốt hơn (các biểu tượng sẽ có lợi hơn trên màn hình nhỏ hơn).

TOUCHSCREENS VS. CURSORS

Màn hình cảm ứng ngày càng trở nên phổ biến. Giả sử rằng các thiết bị nhỏ hơn có nhiều khả năng được cung cấp chức năng màn hình cảm ứng là điều dễ dàng, nhưng đừng nhanh như vậy. Hiện tại, màn hình cảm ứng chủ yếu có trên các thiết bị nhỏ hơn, nhưng nhiều máy tính xách tay và máy tính để bàn trên thị trường cũng có khả năng màn hình cảm ứng. Ví dụ, HP Touchsmart tm2t là một máy tính xách tay màn hình cảm ứng cơ bản với bàn phím và chuột truyền thống có thể biến đổi thành máy tính bảng.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Màn hình cảm ứng rõ ràng đi kèm với các nguyên tắc thiết kế khác với tương tác hoàn toàn dựa trên con trỏ và cả hai cũng có các khả năng khác nhau. May mắn thay, việc tạo ra một thiết kế cho cả hai không tốn nhiều công sức. Màn hình cảm ứng không có khả năng hiển thị di chuột qua CSS vì không có con trỏ; khi người dùng chạm vào màn hình, họ sẽ nhấp vào. 

Vì vậy, đừng dựa vào CSS di chuột để xác định liên kết; chúng nên được coi là một tính năng bổ sung chỉ dành cho các thiết bị dựa trên con trỏ.Xem bài viết “Thiết kế màn hình cảm ứng” để có thêm ý tưởng. 

Nhiều đề xuất thiết kế trong đó là tốt nhất cho màn hình cảm ứng, nhưng chúng cũng không nhất thiết làm giảm khả năng sử dụng dựa trên con trỏ. Ví dụ: điều hướng phụ ở phía bên phải của trang sẽ thân thiện hơn với người dùng màn hình cảm ứng, vì hầu hết mọi người đều thuận tay phải; do đó họ sẽ không vô tình va chạm hoặc gạt điều hướng khi cầm thiết bị bằng tay trái. 

Điều này sẽ không có gì khác biệt đối với người dùng con trỏ, vì vậy chúng tôi có thể tuân theo nguyên tắc thiết kế màn hình cảm ứng trong trường hợp này. Nhiều hướng dẫn khác thuộc loại này có thể được rút ra từ khả năng sử dụng dựa trên màn hình cảm ứng.

Giới thiệu về thiết kế web đáp ứng

Dưới đây, chúng tôi có một vài ví dụ về thiết kế Web đáp ứng trong thực tế ngày nay. Đối với nhiều trang web trong số các trang web này, có nhiều sự thay đổi về cấu trúc và phong cách hơn là được hiển thị trong các cặp ảnh chụp màn hình được cung cấp. Nhiều người có một số giải pháp cho nhiều loại trình duyệt và một số thậm chí còn điều chỉnh kích thước các phần tử một cách linh động mà không cần kích thước trình duyệt cụ thể. Truy cập từng cái này và điều chỉnh kích thước trình duyệt của bạn hoặc thay đổi thiết bị để xem chúng hoạt động.

Art Equals Work là một ví dụ đơn giản nhưng tuyệt vời về thiết kế Web đáp ứng. Ảnh chụp màn hình đầu tiên bên dưới là chế độ xem từ kích thước màn hình máy tính tiêu chuẩn. Trang web linh hoạt với chiều rộng trình duyệt theo các tiêu chuẩn truyền thống, nhưng khi trình duyệt quá hẹp hoặc được chuyển sang thiết bị có màn hình nhỏ hơn, thì bố cục sẽ chuyển sang định dạng dễ đọc và thân thiện với người dùng hơn. 

Thanh bên biến mất, điều hướng lên trên cùng và văn bản được phóng to để đọc dọc dễ dàng và đơn giản.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Với Think Vitamin, chúng tôi thấy một cách tiếp cận tương tự. Khi trên màn hình hoặc trình duyệt nhỏ hơn, thanh bên và thanh trên cùng bị xóa, điều hướng sẽ đơn giản hóa và di chuyển ngay phía trên nội dung, cũng như biểu trưng. Biểu trưng vẫn giữ giao diện chung nhưng được sửa đổi để có hướng thẳng đứng hơn, với dòng giới thiệu bên dưới biểu tượng chính. Khoảng trắng xung quanh nội dung trên màn hình lớn hơn cũng rộng rãi và thú vị hơn, trong khi nó được đơn giản hóa cho các mục đích thực tế trên màn hình nhỏ hơn.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Thiết kế trang web của 8 Faces rất linh hoạt, phù hợp với thiết bị netbook hoặc máy tính bảng tiêu chuẩn và mở rộng về số lượng nội dung và chiều rộng bố cục khi xem trên màn hình rộng hơn hoặc trình duyệt mở rộng. Khi xem trên màn hình hẹp hơn, vấn đề nổi bật ở bên phải bị cắt bỏ, nội dung bên dưới được rút gọn và sắp xếp lại bố cục, chỉ để lại những thông tin cần thiết.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Trang web Hicksdesign có ba cột khi xem trên màn hình máy tính thông thường với trình duyệt được tối đa hóa. Khi được thu nhỏ chiều rộng, thiết kế có một bố cục mới: cột thứ ba ở bên phải được sắp xếp lại phía trên cột thứ hai và biểu trưng di chuyển bên cạnh văn bản giới thiệu. Do đó, không cần xóa nội dung nào cho kích thước nhỏ hơn. Đối với các màn hình và chiều rộng trình duyệt thậm chí còn hẹp hơn, nội dung bên sẽ bị loại bỏ hoàn toàn và một phiên bản đơn giản hóa được chuyển lên trên cùng. Cuối cùng, kích thước phông chữ thay đổi theo chiều rộng màn hình và trình duyệt; khi trình duyệt thu hẹp hơn, kích thước phông chữ trong toàn bộ sẽ nhỏ hơn và vẫn tương xứng.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Đây là một ví dụ tuyệt vời về một hình ảnh linh hoạt. Hình ảnh trong thiết kế này tự động thay đổi kích thước sau một số điểm “ngắt” nhất định, nhưng giữa những thay đổi về chiều rộng đó, chỉ có lề bên và khoảng trắng thừa được thay đổi. Trên màn hình nhỏ hơn và trình duyệt thu nhỏ, điều hướng sẽ đơn giản hóa và các cột điều hướng ở trên cùng bị tắt. Ở phiên bản nhỏ nhất của thiết kế, điều hướng đơn giản hóa chỉ thành một menu thả xuống, hoàn hảo để tiết kiệm không gian mà không phải hy sinh các liên kết điều hướng quan trọng.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Trang web cho Garret Keizer hoàn toàn linh hoạt trong các trình duyệt rộng hơn và trên màn hình lớn hơn: ảnh, biểu trưng và các hình ảnh khác thay đổi kích thước theo tỷ lệ, cũng như các tiêu đề và vùng khối cho văn bản. Tại một số điểm, một số đoạn văn bản thay đổi kích thước phông chữ và nhỏ hơn khi màn hình hoặc trình duyệt thu hẹp hơn. Sau một điểm ngắt nhất định, bố cục sẽ chuyển thành những gì chúng ta thấy trong ảnh chụp màn hình thứ hai bên dưới, với một biểu trưng đơn giản, văn bản giới thiệu và cấu trúc dọc đơn giản cho nội dung còn lại.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Với bốn cột tương đối nhiều nội dung, có thể dễ dàng thấy nội dung ở đây có thể dễ dàng bị thu nhỏ như thế nào khi xem trên các thiết bị nhỏ hơn. Tuy nhiên, do các cột được tổ chức dễ dàng, chúng tôi cũng có thể thu gọn chúng khá đơn giản khi cần thiết và chúng tôi có thể xếp chúng theo chiều dọc khi không gian không cho phép một khoảng ngang hợp lý. Khi trình duyệt được thu nhỏ hoặc người dùng đang sử dụng thiết bị nhỏ hơn, đầu tiên các cột thu gọn thành hai và sau đó thành một. Tương tự như vậy, các đường ngang cho điểm ngắt cũng thay đổi về chiều rộng mà không làm thay đổi kích thước hoặc kiểu của văn bản tiêu đề của mỗi dòng.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Trên trang web CSS Tricks, giống như nhiều thiết kế Web có thể thu gọn khác, các thanh bên có nội dung thừa là phần đầu tiên bị rơi ra khi màn hình hoặc trình duyệt quá hẹp. Trên trang web cụ thể này, cột giữa hoặc thanh bên đầu tiên ở bên trái là cột đầu tiên biến mất; và thanh bên với quảng cáo và phần bổ sung của trang web cũng làm như vậy khi trình duyệt thậm chí còn hẹp hơn. Cuối cùng, thiết kế rời khỏi các bài đăng, sử dụng ít khoảng trắng hơn xung quanh điều hướng và biểu trưng và di chuyển thanh tìm kiếm xuống bên dưới điều hướng. Cách bố trí và thiết kế còn lại là linh hoạt nhất có thể vì tính đơn giản của nó.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Như có thể thấy, điều hướng chính ở đây là bố cục đơn giản của các thiết kế áo thun, trải dài theo cả chiều dọc và chiều ngang của màn hình. Khi trình duyệt hoặc màn hình nhỏ hơn, các cột sẽ thu gọn và di chuyển bên dưới. Điều này xảy ra ở mỗi điểm ngắt khi bố cục được nhấn mạnh, nhưng ở giữa các điểm ngắt, hình ảnh chỉ thay đổi tương ứng về kích thước. Điều này duy trì sự cân bằng trong thiết kế, đồng thời đảm bảo rằng bất kỳ hình ảnh nào (cần thiết cho trang web) không quá nhỏ đến mức không thể sử dụng được.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Ten by Twenty là một thiết kế khác không dùng đến việc thay đổi cấu trúc bố cục sau một số điểm ngắt nhất định, mà đơn giản hóa thiết kế Web đáp ứng bằng cách làm cho mọi thứ hoàn toàn linh hoạt và tự động thay đổi kích thước, bất kể màn hình hoặc chiều rộng trình duyệt là bao nhiêu. Sau một thời gian, thiết kế có một chút căng thẳng và có thể được hưởng lợi từ việc sắp xếp lại nội dung. Nhưng nhìn chung, việc thay đổi kích thước hình ảnh và không gian nội dung linh hoạt cho phép một giải pháp khá đơn giản có thể đáp ứng nhiều kích thước màn hình.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Trên màn hình rộng và trình duyệt, tất cả nội dung trên trang web được thiết kế đơn giản này được tổ chức tốt thành các cột, thanh bên và điều hướng đơn giản lên trên cùng. Đó là một bố cục khá chuẩn và hiệu quả. Trên màn hình nhỏ hơn, thanh bên là phần đầu tiên được thả ra và nội dung của nó được chuyển xuống bên dưới các bản xem trước sách và thông tin cần thiết. Bị giới hạn về không gian, thiết kế này bảo tồn hệ thống phân cấp quan trọng của nó. Trong khi trên một màn hình rộng hơn, chúng ta sẽ nhìn từ trái sang phải, trên một màn hình hẹp hơn, chúng ta có xu hướng nhìn từ trên xuống dưới. Nội dung ở bên phải được di chuyển bên dưới nội dung sẽ xuất hiện ở bên trái trên một màn hình rộng hơn. Cuối cùng, khi không gian ngang bị giới hạn hoàn toàn, điều hướng được đơn giản hóa và xếp chồng lên nhau theo chiều dọc và một số yếu tố lặp lại hoặc không cần thiết sẽ bị loại bỏ.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Thiết kế này có bố cục phức tạp trông lấy cảm hứng từ phong cách in. Khi được xem trên màn hình máy tính rộng tiêu chuẩn, nhiều phần danh mục đầu tư hơn được làm nổi bật và kéo dài theo chiều ngang trên trang. Khi một người di chuyển xuống trang, nhiều đồ họa và hình ảnh hơn bao trùm không gian. Trên một màn hình nhỏ hơn, phần danh mục đầu tư được cắt giảm xuống còn một, và cuối cùng bị loại bỏ hoàn toàn cho màn hình rất nhỏ và trình duyệt hẹp. Hình ảnh trực quan bên dưới thu gọn thành ít cột hơn và nhiều hàng hơn, và một lần nữa, một số hiển thị hoàn toàn cho màn hình rất nhỏ. Thiết kế này cho thấy một cách sáng tạo và thông minh để làm cho một bố cục không phổ biến hoạt động một cách có phản ứng.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Thiết kế này có ba giai đoạn chính trong đó thiết kế và bố cục thu gọn thành một hình thức thân thiện hơn, tùy thuộc vào độ rộng của màn hình hoặc trình duyệt. Hình ảnh chính (loại nổi bật) được chia tỷ lệ theo tỷ lệ thông qua phương pháp hình ảnh linh hoạt. Mỗi “cấu trúc bố cục” hoàn toàn linh hoạt cho đến khi đạt đến điểm phá vỡ, lúc này bố cục chuyển sang một thứ gì đó dễ sử dụng hơn với không gian chiều ngang ít hơn. Bốn cột dưới cùng cuối cùng thu gọn thành hai, biểu trưng di chuyển phía trên điều hướng và các cột điều hướng bên dưới được di chuyển lên trên hoặc dưới nhau. Ở giai đoạn hẹp nhất của thiết kế, điều hướng được siêu đơn giản hóa và một số nội dung không cần thiết bị loại bỏ hoàn toàn.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Bố cục này không thay đổi gì cả; không có nội dung nào bị loại bỏ hoặc sắp xếp lại; và kích thước văn bản cũng không thay đổi. Thay vào đó, thiết kế này vẫn giữ nguyên dạng ban đầu, không có vấn đề gì thay đổi về không gian theo chiều ngang và chiều dọc. Thay vào đó, nó tự động thay đổi kích thước hình ảnh tiêu đề và hình ảnh cho điều hướng. Khoảng trắng, lề và phần đệm cũng linh hoạt, mang lại nhiều không gian hơn khi thiết kế mở rộng và thu nhỏ.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Đây có lẽ là ví dụ đơn giản nhất về thiết kế Web đáp ứng trong buổi giới thiệu này, nhưng cũng là một trong những ví dụ linh hoạt nhất. Phần duy nhất trong bố cục thay đổi theo chiều rộng của trình duyệt là ngày của bài đăng trên blog, ngày này sẽ di chuyển lên trên tiêu đề của bài đăng hoặc sang một bên, tùy thuộc vào lượng không gian ngang có sẵn. Ngoài ra, điều duy nhất thay đổi là độ rộng của vùng nội dung và không gian lề ở bên trái và bên phải. Mọi thứ đều được căn giữa, vì vậy cảm giác cân bằng được duy trì bất kể chiều rộng màn hình hoặc trình duyệt. Do tính đơn giản của thiết kế này, việc chuyển đổi giữa độ rộng của trình duyệt và màn hình rất nhanh chóng và dễ dàng.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Harry Roberts cho thấy rằng thiết kế đáp ứng cũng có thể có những cách sử dụng khá khiêm tốn. Nếu người dùng có chế độ xem lớn, trang web sẽ hiển thị ba cột với menu điều hướng nổi ở bên trái. Đối với người dùng có chế độ xem từ 481px đến 800px, một phiên bản hẹp được hiển thị: điều hướng nhảy lên đầu trang để lại khu vực cho cột nội dung và thanh bên. Cuối cùng, chế độ xem iPhone hiển thị thanh bên dưới khu vực nội dung. Harry cũng đã viết một bài báo chi tiết về các kiểu CSS mà anh ấy đã thêm vào biểu định kiểu trong bài báo của mình “Truy vấn phương tiện, phức tạp hơn bạn nghĩ”. Một ví dụ hay về cách một vài điều chỉnh CSS đơn giản có thể cải thiện giao diện của trang web trên các thiết bị khác nhau.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Thiết kế cuối cùng này của Bryan James cho thấy rằng thiết kế Web đáp ứng không chỉ cần áp dụng cho các trang web HTML và CSS tĩnh. Được thực hiện trong Flash, cái này có hình nền kích thước đầy đủ và linh hoạt theo chiều rộng và chiều cao nhất định. Do phong cách thiết kế, trên các màn hình quá nhỏ, hình ảnh nền hầu như bị ẩn đi và nội dung có thể trở nên khó đọc và bị bóp méo. Tuy nhiên, thay vì chỉ để như vậy, một thông báo bật lên thông báo cho người dùng rằng màn hình quá nhỏ để có thể xem đầy đủ trang web. Sau đó, nó sẽ nhắc người dùng chuyển sang màn hình lớn hơn. Người ta có thể thảo luận xem giải pháp thiết kế tốt hay xấu về khả năng sử dụng, nhưng ví dụ cho thấy rằng các trang web Flash cũng có thể đáp ứng với khung nhìn của người dùng.

Thiết kế web responsive(đáp ứng) -Cách sử dụng nó
Thiết kế web responsive(đáp ứng) -Cách sử dụng nó

Phần kết luận

Chúng ta thực sự đang bước vào một kỷ nguyên thiết kế và phát triển Web mới. Hiện có quá nhiều lựa chọn và sẽ còn quá nhiều trong tương lai để tiếp tục điều chỉnh và tạo ra các giải pháp tùy chỉnh cho từng kích thước màn hình, thiết bị và tiến bộ trong công nghệ. Chúng ta nên bắt đầu một kỷ nguyên mới ngay hôm nay: tạo ra các trang web sẵn sàng cho tương lai ngay bây giờ. 

Việc hiểu cách làm cho một thiết kế đáp ứng được nhu cầu của người dùng không cần phải học quá nhiều và chắc chắn việc này có thể đỡ căng thẳng và hiệu quả hơn rất nhiều so với việc học cách thiết kế và viết mã đúng cách cho mọi thiết bị có sẵn.Thiết kế web đáp ứng và các kỹ thuật được thảo luận ở trên không phải là câu trả lời cuối cùng cho thế giới di động luôn thay đổi. 

Thiết kế web đáp ứng là một khái niệm đơn thuần mà khi được triển khai đúng cách có thể cải thiện trải nghiệm người dùng, nhưng không hoàn toàn giải quyết được vấn đề đó cho mọi người dùng, thiết bị và nền tảng. Chúng tôi sẽ cần liên tục làm việc với các thiết bị, độ phân giải và công nghệ mới để liên tục cải tiến trải nghiệm người dùng khi công nghệ phát triển trong những năm tới.

Bên cạnh việc cứu chúng ta khỏi sự thất vọng, thiết kế Web đáp ứng cũng tốt nhất cho người dùng. Mọi giải pháp tùy chỉnh đều tạo ra trải nghiệm người dùng tốt hơn. Với thiết kế Web đáp ứng, chúng tôi có thể tạo ra các giải pháp tùy chỉnh cho nhiều người dùng hơn, trên nhiều loại thiết bị hơn. 

Một trang web cũng có thể được điều chỉnh cho phù hợp với ai đó trên máy tính xách tay hoặc thiết bị cũ cũng như nó có thể dành cho đại đa số những người sử dụng các tiện ích xu hướng nhất xung quanh và tương tự như vậy đối với một số ít người dùng sở hữu các tiện ích tiên tiến nhất hiện nay và trong những năm tới đến. Thiết kế web đáp ứng tạo ra trải nghiệm tùy chỉnh tuyệt vời cho mọi người. Là những nhà thiết kế web, tất cả chúng ta đều cố gắng vì điều đó mỗi ngày trong mọi dự án, phải không?

Leave a Reply