Chúng tôi đã từng xuất bản bài viết “Responsive Web Design: What It Is and How to Use It.” Responsive design vẫn tiếp tục nhận được rất nhiều sự chú ý từ cộng đồng thiết kế nhưng nó khác phương pháp thiết kế truyền thống như thế nào, liệu nó có quá sức đối với những designer chưa từng thử nghiệm.
Và trong bài viết này, chúng tôi sẽ cung cấp rất nhiều nguồn tham khảo để tạo các thiết kế responsive website design. Bao gồm các hướng dẫn, kỹ thuật, các bài viết, công cụ … tất cả sẽ giúp bạn biết được những kiến thức cụ thể để tạo responsive design của riêng bạn.
Các kỹ thuật responsive design
CSS Transitions and Media Queries
Elliot Jay Stocks cung cấp một cái nhìn sâu sắc khi kết hợp các CSS media queries và CSS transitions. Tiền đề cơ bản chính là việc bạn sử dụng media queries để thiết kế responsive website, làm cho layout thích ứng với chiều rộng của browser và bạn phải liên tục thay đổi kích thước của browser để thấy cách website hiển thị, nhưng mỗi lần truy vấn sẽ khá khó khăn khi chuyển đổi giữa phong cách đầu tiên và phong cách thứ hai.
Tại sao bạn không sử dụng CSS transition để việc chuyển đổi trở nên mượt mà hơn bằng cách tạo hiệu ứng động thay đổi kích thước? Đó cũng là một case study đáng để thử nghiệm.
Chris Coyier và Scott Jehl đang thử nghiệm với các kỹ thuật responsive design để hiển thị các bảng dữ liệu. Theo mặc định, các bảng dữ liệu có thể khá rộng và đó là điều tất yếu. Bạn có thể thu nhỏ để thấy toàn bộ bảng nhưng kích thước text sẽ rất nhỏ để có thể đọc được. Bạn có thể phóng to để dễ dàng đọc hơn nhưng bạn cần scroll theo cả chiều dọc và ngang để xem toàn bộ bảng.
Một giải pháp cho vấn đề này chính là định dạng bảng để có thể dễ đọc hơn. Một cách khác là hiển thị biểu đồ từ dữ liệu. Tuy nhiên có một cách khác là thích ứng bảng vào các đồ họa nhỏ cho màn hình hẹp nhưng không can thiệp quá nhiều vào nội dung khi bảng được hiển thị đầy đủ.
Responsive Navigation Menus: Convert a Menu để tạo Dropdown cho các màn hình hiển thị nhỏ
Chris Coyier mô tả một kỹ thuật khác nhằm chuyển đổi một hàng link thông thường thành dropdown menu khi cửa sổ browser quá hẹp. Khi người dùng sử dụng màn hình nhỏ và nhấp chuột vào dropdown, họ sẽ thấy giao diện lựa chọn tùy chọn quá đẹp và to, giúp người dùng dễ dàng lựa chọn. Rõ ràng nó tốt hơn rất nhiều khi hiển thị một liên kết nhỏ.
CSS Media Queries và sử dụng các khoảng trống có sẵn
Hướng dẫn của CSS-Tricks thảo luận về cách làm thế nào để tạo một sự thay đổi tinh tế với các media query và cách sử dụng media query để tạo một sheet đơn thật phong cách. Ví dụ, nếu bạn có một thiết kế fluid-width với sidebar chiếm 35% chiều rộng, phụ thuộc vào chiều rộng của cửa số browser, bạn có thể nói “Nếu browser thật sự hẹp, hãy thực hiện. Nếu nó rộng hơn, hãy thực hiện. Và nếu nó thực sự rộng, cũng hãy thực hiện”. Trong bài viết này, bạn sẽ học cách sửa đổi một danh sách phụ thuộc vào viewport của browser.
Responsive Images, Responsive Videos
Fluid Images là một mảng chính của responsive design. Bài viết của Ethan Marcotte sẽ cho bạn một cái nhìn tổng thể về cách tạo ra chúng bằng cách sử dụng đoạn mã classic img { max-width: 100%; } cũng như chi tiết giúp bạn có thể bắt đầu.
Responsive Image: Thử nghiệm cùng Context-Aware Image Sizing
Đây là một cách tiếp cận thay thế cho fluid images của Filament Group. Tất cả những kỹ thuật này cho phép designer tạo các responsive layout phục vụ cho các hình ảnh có kích thước khác nhau với các độ phân giải khác nhau. Nó cho phép các designer tạo hiển thị hình ảnh tối ưu cho các màn hình kích thước nhỏ và sau đó dùng cho các phiên bản có độ phân giải cao hơn, màn hình lớn hơn.
Filament Group đã phát triển kỹ thuật này bằng cách sử dụng tập tin .htaccess và JavaScript để phục vụ cho hình ảnh có kích thước khác nhau phụ thuộc vào độ rộng của màn hình. Một giải pháp thay thế là sử dụng các công cụ như TinySrc, bạn chỉ đơn thuần ghép tiền tố cho tất cả các hình ảnh có kích thước lớn trong source code với TinySrc URL và công cụ sẽ thực hiện phần còn lại.
Responsive Images and Context-Aware Image Sizing
Craig Russess đã phát triển một kỹ thuật sử dụng script server-side trong PHP để phục vị cho các hình ảnh có độ phân giải khác nhau. Ý tưởng hoàn toàn là PHP script, sử dụng sắp xếp lớp cho danh sách các hình ảnh và phần trăm scale liên quan. Trong HTML, thuộc tính src của hình ảnh được thiết lập để có id yêu cầu của hình ảnh nhưng không quy định scale.
Một phép tính JavaScript về sự liên quan giữa tỷ lệ tương đối giữa chiều rộng của hình ảnh và chiều rộng tối đa của container và sau đó, con số này được nối vào thuộc tính src như tham số scale. Một số ý kiến trong bài viết này có đưa ra một số ý tưởng khá hay và một số đề xuất nhằm cải thiện kỹ thuật.
Ý tưởng của Harry Robert là sử dụng yếu tố img cho hình ảnh nhỏ hơn trong hai hình ảnh, hình ảnh mà bạn sẽ muốn người dùng di động download. Bạn cũng có một file chứa div để sử dụng cho các phiên bản hình ảnh lớn hơn như background thông qua CSS.
Sau đó bạn sẽ ẩn img từ màn hình người dùng máy tính và cho họ một background CSS lớn và ẩn hình ảnh background từ thiết bị của người dùng di động và chỉ đưa ra những hình ảnh nội tuyến nhỏ hơn.
Responsive Images bằng cách sử dụng CSS3
Phương pháp của Nicolas Gallagher dựa trên các truy vấn @media, nội dung CSS3 tạo ra và mở rộng CSS3 thành chức năng attr(). Bằng cách kết hợp nội dung với attr() mở rộng của CSS3, bạn có thể xác định giá trị của thuộc tính được hiểu như một phần URL của url(). Trong trường hợp này, điều đó có nghĩa là bạn sẽ phải thay thế nội dung của hình ảnh với hình ảnh được tìm thấy tại đích URL, được lưu trữ trong thuộc tính data-* của HTML.
Responsive Images bằng cách sử dụng Cookies
Keith Clark gợi ý sử dụng cookies để phục vụ cho các hình ảnh nhỏ hơn cho người dùng di động. Bất cứ khi nào một browser yêu cầu file từ máy chủ, nó sẽ tự động chuyển dữ liệu cookies phụ thuộc vào yêu cầu.
Nếu chúng ta sử dụng JavaScript để phổ biết cookie với kích thước màn hình hiện tại, tất cả các yêu cầu tiếp theo của browser sẽ truyền dữ liệu đến máy chủ. Nói cách khác, máy chủ sẽ biết kích thước màn hình của thiết bị yêu cầu tập tin đó.
Responsive Images với ExpressionEngine
John Faulds trình bày một kỹ thuật cho responsive image về sự khác biệt của các kỹ thuật được trình bày ở trên. Nó liên quan đến chuỗi truy vấn của người dùng để xác định đó là điện thoại di động và sau đó thiết lập một biến toàn cầu có thể sử dụng trong các mẫu nhằm thay đổi kích thước của hình ảnh đầu ra.
Về cơ bản, chỉ có một hình ảnh được gởi đến trình duyệt nhưng hình ảnh sẽ khác nhau phụ thuộc vào việc bạn đang xem trên thiết bị di động hay máy tính.
Nick La sử dụng max-width: 100%; cắt nhỏ đoạn video và trình bày các kỹ thuật giúp video và đối tượng trong HTML5 đáp ứng iFrame nhúng video. Sau đó, thủ thuật trở nên rất đơn giản. Chỉ cần nhúng code trong div container và specify là 50% đến 60% padding-bottom. Tiếp theo, xác định các yếu tố con (iFrame, đối tượng được nhúng) và 100% width, 100% height với vị trí tuyệt đối. Điều này sẽ buộc các yếu tố được nhúng tự động mở rộng với màn hình rộng. Kỹ thuật này được phát hiện đầu tiên bởi Thierry Koblentz.
Thay đổi kích thước hình ảnh (với Full Resolution)
Một hướng dẫn nhanh từ CSS_Tricks về việc thay đổi kích thước các hình ảnh nhưng vẫn giữ được độ phân giải.
Responsive Email Newsletters
Tối ưu hóa Email cho các thiết bị di động với Media Query
Các emails rộng thường yêu cầu phải scoll theo chiều ngang đặc biệt khi có một hình ảnh lớn. Case study của Campaign Monitor giải thích tại sao email có thể được tối ưu hóa cho các thiết bị di động bằng cách sử dụng media queries và cung cấp các kỹ thuật hữu ích và các đoạn được sử dụng ngay lập tức.
Responsive Design cho Email, một lượng lớn người sử dụng trên thiết bị do động
Một case study thú vị khác giúp bạn thấy được cách phát triển của Beanstalk bằng cách sử dụng các media queries có kích thước màn hình cụ thể cho phong cách chính, những quyết định thiết kế đã thực hiện giúp trải nghiệm email trên di động tốt hơn.
Bài viết này bao gồm cả cách sử dụng media queries cho các khách hàng sử dụng email di động.
Hướng dẫn hỗ trợ CSS trong Email
Thiết kế email HTML nhằm nhất quán các email chính của khách hàng có thể cần rất nhiều thời gian. Thậm chí việc hỗ trợ CSS đơn giản cho các khách hàng và các phiên bản khác nhau cho cùng một hách hàng.
Chiến dịch Monitor đã có một số hướng dẫn giúp bạn tiết kiệm thời gian và nhanh chóng tìm được giải pháp. Với 24 email khách hàng được thử nghiệm khác nhau, bao gồm các ứng dụng phổ biến trên web, máy tính để bạn và email di động.
Các công cụ Responsive Design
Bạn có thể xây dựng một responsive design ngay từ ban đầu hoặc có thể sử dụng một số công cụ bên dưới để cải tiến quá trình.
Polyfill nhanh và nhẹ của Scott Jehl cho min-width và max-width của media queries CSS3 (dành cho IE 6 đến 8 và các phiên bản mới hơn). css3-mediaqueries-js là một script khách cho phép IE 5+, Safari 2 và Firefox 1+ không nhầm lẫn các cú pháp, thử nghiệm và sử dụng các media queries CSS3.
WebPutty: Scientific Progress CSS Editing
Công cụ là là editor Web phụ thuộc CSS sẽ tự động lưu trữ tính năng và thời gian xem thực tế trên website của bạn. WebPutty cũng có CSS selector highlighting và hỗ trợ SCSS cho Sass và LESS như hỗ trợ Compass. Để sử dụng công cụ này, chỉ cần nhúng một link tag vào cuối tag head của website.
Trong thiết kế responsive web, chúng ta sẽ làm việc với rất nhiều trạng thái, width và kích thước viewport khác nhau. Johan Brook đã chia sẽ một bí quyết nhanh chóng chỉ với CSS trong đó media query cũng cần thiết. Bài viết cũng cung cấp cách kết hợp cho các deverloper sử dụng Sass. Một bản demo để giúp bạn thấy rõ hơn.
Công cụ này giúp những ai muốn một cách nhanh chóng và dễ dàng để thử nghiệm thiết kế website của họ trong các màn hình có độ rộng khác nhau. Thay đổi defaultURL trên cùng của tập tin responsive.js cho website và điều hướng của bạn với các frame.
Responsive Containers: Selector Queries
JavaScript của Andy Hume cho phép bạn thêm các selector queries và responsive container cho thiết kế của bạn. Về cơ bản, bạn có thể sử dụng các giá trị class khác nhau cho một yếu tố HTML dựa trên chiều rộng của nó.
Nếu bạn cần browser hiển thị nội dung hình ảnh trong kích thước cửa sổ mà bạn đã tìm kiếm. Chỉ cần click vào kích thước bạn cần và kiểm tra xem website của bạn sẽ hiển thị như thế nào. Nó không hoạt động trong Chrome và Opera do vấn đề với “ResizeTo”.
Một công cụ tiện dụng cho phép bạn thấy chính xác kích thước viewport và media query. Kéo vào bookmarks bar và sử dụng nó khi cần thiết.
Sử dụng thông tin tiện ích này nhằm cung cấp cho các media query của bạn để tạo các responsive design.
Một công cụ tạo mẫu nhanh chóng của responsive design. Bạn có thể dùng CSS nguyên mẫu trên các thiết bị phổ biến với kích thước khác nhau, orientation và browser, có thể là các điện thoại (BlackBerry Torch, Googke Nexus One, iPhone, Motorola Droid), các tablet (BlackBerry PlayBook, iPad, Samsung Galaxy Tab, Dell Streak), các màn hình hoặc ti vi (720 dpi, 1080p). Bạn có thể xem trước các thiết kế ngay trên browser và sử dụng các công cụ phát triển như Firebug. Bạn có thể sẽ muốn kiểm tra một công cụ thay thế ScreenFly.
Harry Roberts đã phát triển bảng tính và fluid grid cho responsive design của bạn. Chỉ cần cung cấp số cột, chiều rộng của cột và chiều rộng của gutter, công cụ sẽ tạo ra hệ thống fluid grid trong CSS cho bạn. Thật đơn giản và tiện dụng, đúng không?
HTML5/CSS3 WordPress 3.1+ Theme miễn phí với Responsive Layout: Yoko
Yoko là một theme WordPress hiện đại và linh hoạt. Với responsive layout dựa trên CSS3 media queries, theme sẽ điều chỉnh cho phù hợp với kích thước các màn hình khác nhau. Để blog của bạn mang tính cá nhân hơn, bạn có thể sử dụng các định dạng mới như gallery, aside hoặc quote), chọn logo của riêng bạn và hình ảnh header, tùy chọn background và màu sắc link.
Scherzo, a Responsive WordPress Theme
WordPress theme là một ví dụ khá tốt về responsive design, hiển thị rất đẹp trên hầu hết các thiết bị và màn hình.
Các TemplatesResponsive Design
320 and Up hoạt động dựa trên nguyên tắc “màn hình nhỏ trước”, nghĩa là các thiết kế sẽ được tạo cho các màn hình di động trước và sau đó mở rộng cho tablet, màn hình máy tính và các màn hình lớn hơn. Nó hoạt động khá tốt như một phần mở rộng của HTML5 Boilerplate và như một bộ công cụ độc lập.
Media Queries for Standard Devices
Đây là Templates hữu dụng cho media queries cho các thiết bị chuẩn: giữ khoảng trống cho các thiết bị mục tiêu và các thuộc tính mà bạn sẽ thấy rất thú vị khi thực hiện responsive design.
Dưới đây là Templates tùy chỉnh để tạo các ứng dụng web phong phú và có hiệu suất cao. Bạn sẽ nhận được qua cross-browser giữa smartphone hạng A và hỗ trợ dự phòng cho BlackBerrym Symbian và IE Mobile. Bạn cũng sẽ nhận được bộ nhớ đệm miễn phí, các button click, một truy xuất media query và rất nhiều Webkit tối ưu hóa website.
Skeleton: Boilerplate xinh đẹp cho Responsive, phát triển ứng dụng Mobile thân thiện
Skeleton là một bộ sưu tập nhỏ của CSS và JavaScripr có thể giúp bạn nhanh chóng phát triển các website khá đẹp ở bất kỳ kích thước nào, có thể là màn hình laptop 17 inch hay iPhone. Skeleton là một grid thích ứng với di động. Nó được tổ chức và sắp xếp khá tốt, cung cấp hầu hết các phong cách cơ bản như một nền tảng.
Các Framework responsive design
1140 CSS Grid được tối ưu hóa để hoạt động trên các màn hình khác nhau của điện thoại di động, lên đến chiều rộng 1280 pixel. Nó đơn giản là hệ thống grid linh hoạt sử dụng media queries cho các màn hình nhỏ hơn, về cơ bản là sắp xếp cột trên đầu trang.
CSS framework được xây dựng nhằm cung cấp một nền tảng vững chắc cho các thiết kế trên các màn hình nhỏ (tablet) và các màn hình nhỏ hơn (điện thoại) một cách đơn giản. Nó cũng cung cấp hệ thống grid builder để tạo các hệ thống fluid grid.
Flurid là layout liquid grid với 16 cột.
FluidGrids là một fluid grid framework nhằm tạo các layout dựa trên 6, 7, 8, 9, 10, 12 hoặc 16 cột.
Một hệ thống CSS grid nhằm tạo các layout thích ứng. Nó có 4 layout cơ bản (bao gồm tablet, mobile và wide mobile) với 3 thiết lập typography.
Fluid Grid framework bao gồm typographic grid và baseline grid.
Tyny Fluid Grid giúp bạn tạo fluid grid của riêng mình với 12, 16 hoặc 24 cột, chiều rộng tối đa và tối thiểu và gutter dựa trên tỷ lệ.
Workflow và chiến lược thiết kế Responsive Design
The Responsive Designer’s Workflow
Lưu ý của Luke Wroblewski dựa trên trình bày của Ethan Marcotte về cách áp dụng các nguyên tắc thiết kế responsive Web và workflow cho việc thiết kế lại website của một tờ báo lớn. Trong đó, Ethan giải thích cách ông đã tiếp cận các phương pháp responsive design, quá trình thiết kế như thế nào và cách thực hiện prototyping trong responsive design.
The Goldilocks Approach to Responsive Web Design
Phương pháp tiếp cạn Glodilock nhấn mạnh các layout độc lập trông hoàn hão hơn dù được hiển thị trên bất kỳ thiết bị nào.
Hãy đọc để xem làm thế nào để website của bạn thích ứng với các tiêu chuẩn hiện tại. Bắt đầu từ tỷ lệ kích thước là cách tốt nhất để trải nghiệm ở bất kỳ kích thước nào.
Nội dung được cấu trúc trước tiên
Trong bài trình bày này, Stepen Hay đã thảo luận một loạt các vấn đề bạn sẽ gặp phải trong quá trình cấu trúc lại nội dung và cấu trúc nội dung cho các platform tương lai. Stephen gợi ý rằng chúng ta nên nghĩ đến việc tạo và thiết kế cấu trúc nội dung trước để thích ứng việc bố trí nội dung dù đó là một màn hình nhỏ hoặc trình duyệt nội dung. Nội dung có thể chạy bất cứ nơi nào có thể.
Thiết kế Target Experience đầu tiên
Đây là một khía cạnh thú vị khác về workflow của responsive design. Nathan C. Ford tập trung vào trải nghiệm của ngườ diùng trước và sau đó sử dụng dữ liệu trải nghiệm người dùng và media queries. “Có những mục tiêu khác nhau của một website vượt xa cả khả năng có thể đọc được, việc thiếu các tính năng có thể làm giảm trải nghiệm người dùng.
Hiện tại, tôi đang thực hiện một dự án. Phương pháp tiếp cận của chúng tôi là kiểm tra nội dung và trải nghiệm người dùng phổ biến nhất. Từ đó, chúng tôi chỉnh sửa và làm phong phú cho mỗi media query.”
Thêm nhiều Responsive Design hơn nữa
Bài viết của Jason Things đã bao gồm responsie design dựa trên layout / nội dung / khả năng / ý định của người dùng, tất cả đều là những thách thức thú vị mà responsive design đã tạo ra. Điều đó cũng khá thú vị và chắc chắc sẽ rất đáng để tìm hiểu.
Lule Wroblewski đã có một số ghi chú tại Hội Nghị Breaking Development khi Stephen Hay nói về thực tế của việc thiết kế cho các trải nghiệm khác nhau trên các thiết bị.
Patterns cho Multiscreen Strategies
Một góc nhìn đơn giản nhưng hiệu quả để có một ý tưởng trong đó các yếu tốt cốt lõi đóng vai trò như concept của multiscreen.
Responsive Web Design từ tương lai
Theo Kyle Neath, thiết kế responsive design đáp ứng rất nhiề ukhông chỉ riêng màn hình của bạn. Bài viết nói về cách GitHub đã xử lý links, url bar, cập nhật một phần của trang và giải thích tại sao Kyle nghĩ rằng HTML5 history API là cái quan trọng nhất cho phát triển front-end từ Firebug. Tôi cho rằng đây là một bài thuyết trình đầy cảm hứng.
Phát triển chiến lược cho Mobile
Trong bài trình bày này, Dave Olsen đã trình bày một chiến lược tiến bộ cho di động bao gồm chiến lược đối tượng mục tiêu, chiến lược nội dung và platform. Dave lập luận rằng phát triển một chiến lược bền vững và khả năng mở rộng điện thoại di động, bạn cần trả lời các câu hỏi “Giá trị nào sẽ giúp bạn đạt được các đối tượng mục tiêu từ nội dung?” và “Làm thế nào để phát triển các giải pháp cho cả di động và máy tính, cũng như các thiết bị khác trong tương lai?”. Đây cũng là một bài trình bày khá hấp dẫn.
Cách sử dụng CSS3 Media Queries để tạo Mobile Version cho website của bạn
Trong một bài viết của Smashing Magazine, Rachel Andrew giải thích cách tạo phiên bản iPhone cho website của bạn bằng cách sử dụng một số nguyên tắc của CSS3. Bạn sẽ thấy một ví dụ cực kỳ đơn giản và họ quá trình thêm các style sheet cho các thiết bị nhỏ hơn cho website và thấy rằng chúng ta có thể dễ dàng thêm các style sheet cho website di động. Bạn có thể cân nhắc xem bài viết “Adaptive Layouts With Media Queries” của Aaron Gustafson và “Respond to Different Devices With CSS3 Media Queries” của Emily Lewis.
Các thảo luận và quan điểm về Responsive design
Các bài viết ở đây giúp bạn có một cái nhìn sâu sắc hơn về lý do bạn nên sử dụng các kỹ thuật responsive design và lúc nào bạn không nên sử dụng.
Andy Hume giải thích quan điểm của ông về tất cả. Đó là những gì một website được load trên browser không tên hoặc thiết bị nào đó. Cách giúp bạn thích ứng với môi trường phần mềm không ngừng phát triển thông qua Douglas Crockford. Cũng như một chiến lược tăng cường giúp bạn thích ứng với website chứ không phải là chống đối lại nó.
Responsive Web Design or Separate Mobile Site? Eh, It Depends
Một bài thảo luận thú vị về ưu và nhược điểm của responsive design so với các website dành riêng cho di động.
Các trường hợp chống lại Responsive Web Design
Dường như không công bằng khi tập hợp những ý kiến bất đồng ở đây về responsive design và cho rằng nó không phù hợp. Bài viết thảo luận tại sao responsive design không phải lúc nào cũng mang lại ý nghĩa từ góc độ trải nghiệm người dùng. Bạn hãy theo dõi cả phần comment. Luke Jones cũng có một ý kiến tương tự.
Một cuộc thảo luận trên blog của Jeremy Keith về các phần cần thiết của responsive design và cách tạo các layout hiệu quả khác nhau dựa trên kích thước màn hình. Bài viết cũng có các ví dụ kèm theo.
Một giới thiệu tuyệt vời về responsive design như cách nghĩ chứ không phải là công cụ hay kỹ thuật. Jeremy Keith lập luận rằng responsive không phải là chiến thuật vào cuối quá trình thực hiện. Thay vì những pixel hoàn hảo, chúng ta nên nghĩ đến việc hoàn thiện tỷ lệ.
Mobile-First Responsive Web Design
Thiết kế Mobile- Responsive Web trước là sự kết hợp giữa lý thuyết và chiến lược với mục đích đạt được ứng dụng rộng lớn từ các khu vực tốt nhất.
Where are the Mobile First Web Designs?
Trong bài viết này, Jason Grigsby trình bày cách tìm kiếm responsive design, các tính năng và sự xuất hiện cũng như những nhận xét chung về responsive design.
Các nguồn tham khảo khác
Dưới đây là một số nguồn tham khảo khác về responsive design
Một bộ sưu tập về website sử dụng media queries
Responsive Web Design, một cuốn sách được viết bởi Ethan Marcotte và được xuất bản bởi A Book Apart, đó là nguồn tham khảo tuyệt vời về responsive website. Nó bao gồm các nguyên tắc cơ bản cảu responsive Web, các hệ thống grid linh hoạt, hình ảnh và media queries, nó cung cấp cho bạn một cái nhìn sâu hơn về responsive design.
The Big Web Show Episode #9: Responsive Web Design
Jeffrey Zeldman và Dan Benjamin đã cùng Ethan Marcoote xuất bản tập 9 về The Big Web Show – thảo luận về responsive design với rất nhiều chủ đề.
Cuối cùng
Slideshow với một số kỹ thuật và thủ thuật ít được biết đến của HTML5 có thể thể ứng dụng trong các browser trong tương lai gần: trong đó, có các media queries server-side với JavaScrip và các yếu tố hình thức.
