Kỹ thuật và chiến lược trong Responsive Web Design

Responsive Web Design (RWD) ngày càng nhận được nhiều sự chú ý đối với cộng đồng những người phát triển web cũng như doanh nghiệp. Tuy nhiên, sự khác nhau thực sự khi chúng ta chuyển từ cách thiết kế web “truyền thống” sang xu hướng RWD là gì? và RWD có phải là một xu hướng áp đảo mới cho những nhà thiết kế web không?

Cuối cùng, chúng tôi đã biên soạn bài viết này để giới thiệu một cách đầy đủ nhất các nguồn lực tạo ra responsive website bao gồm các hướng dẫn, kỹ thuật, bài báo, công cụ và tất cả đều hướng tới mục đích cung cấp cho bạn những kiến ​​thức cụ thể nhất để bạn có thể tạo ra responsive website của bạn.

Các kỹ thuật trong Responsive Design

CSS Transitions và Media Queries

Elliot Jay Stock cung cấp cái nhìn sâu sắc về sự kết hợp của CSS media queries và CSS transitions. Nguyên tắc cơ bản là: bạn sử dụng media queries để thiết kế nên các responsive web mà thích ứng với tất cả các layout theo chiều rộng của trình duyệt và bạn có thể thay đổi kích thước trình duyệt của bạn để trang web sẽ đáp ứng theo. Tuy nhiên mỗi khi có sự thay đổi về kích cỡ trình duyệt thì sẽ có là một sự chuyển đổi rõ ràng và đột ngột giữa style cho màn hình với kích cỡ đầu tiên và màn hình với kích cỡ của lần chuyển đổi thứ hai. Tại sao không sử dụng một số kỹ thuật CSS transitions đơn giản để làm mịn hơn quá trình chuyển đổi style mỗi khi kích cỡ media thay đổi? Đây rõ ràng là một trường hợp đáng nghiên cứu…

Responsive Data Tables

Chris Coyier và Scott Jehl đang thử nghiệm các kỹ thuật trong RWD để hiển thị các bảng dữ liệu. Theo mặc định, các bảng dữ liệu có thể là khá rộng và nhất thiết phải như vậy. Bạn có thể thu nhỏ và xem toàn bộ bảng, nhưng như thế kích thước văn bản sẽ là quá nhỏ để đọc. Bạn có thể phóng to, thu nhỏ để làm cho nó có thể đọc được, nhưng sau đó bạn sẽ phải di chuyển cả theo chiều dọc và chiều ngang (hơi mệt một tí…) để duyệt các bảng dữ liệu. Một giải pháp là tạo ra định dạng bảng có thể dễ đọc hơn theo chiều hướng là lược bỏ những cột dữ liệu không quan trọng. Một cách khác là chúng ta có thể hiển thị dữ liệu thay thế trên một biểu đồ dạng pie. Tuy nhiên thông dụng nhất vẫn là tạo nên một dạng mini-table với đủ nhất nội dụng cơ bản từ một full table và làm sao cho nó vừa với kích cỡ chiều rộng của cửa sổ trình duyệt.

Responsive Navigation Menus: Chuyển Menu sang dạng Dropdown cho màn hình nhỏ

Chris Coyier mô tả một kỹ thuật khác để chuyển đổi một hàng các menu item chứa cách đường link chính của website ở trên chuyển thành dạnh một danh sách dropdown chứa các link khi website hiển thị trên các cửa sổ trình duyệt có chiều rộng hẹp. Khi người sử dụng trên một màn hình nhỏ và nhấp chuột vào dropdown thả xuống, họ sẽ có một danh sách các đường link và lựa chọn nhấn vào một link. Như thế trong sẽ đẹp và dễ dàng lựa chọn hơn so với cách bố trí menu dàng hàng dài truyền thống. Rõ ràng đây là một lựa chọn tốt về navigation cho các màn hình nhỏ…

CSS Media Queries and Using Available Space

Một hướng dẫn từ CSS-Tricks đã chỉ ra cách làm thế nào để làm cho những thay đổi tinh tế về media queries và làm thế nào để sử dụng media queries trong một phong cách duy nhất. Ví dụ, nếu bạn có một fluid-width design, trong đó phần sidebar chiếm 35% chiều rộng của trang, tùy thuộc vào độ rộng của cửa sổ trình duyệt, bạn có thể nói, “Nếu trình duyệt thực sự thu hẹp, làm điều này. Nếu đó là rộng hơn, hãy làm điều này. Nếu nó thực sự rộng, cũng vẫn làm điều này”. Hãy đọc kỹ bài viết của CSS-Tricks, bạn sẽ tìm hiểu làm thế nào để sửa đổi một danh sách các liên kết theo viewport của trình duyệt…

Các kỹ thuật về Responsive Images và Videos

Fluid Images

Fluid Images là một khía cạnh trung tâm và quan trọng của RWD. Bài viết của Ethan Marcotte đưa ra một cái nhìn tổng quan toàn diện về cách tạo ra fluid image bằng cách sử dụng thẻ img cổ điển: img{max-width: 100%;}, cũng như các chi tiết khác để giúp bạn bắt đầu tạo ra responsive images cho website của bạn…

Responsive Image: Thử nghiệm với việc thay đổi kích cỡ ảnh theo ngữ cảnh

Một cách tiếp cận thay thế cho việc dùng fluid images do Filament Group đưa ra. Kỹ thuật này cho phép các nhà thiết kế có thể tạo ra các layout với những hình ảnh đáp ứng các kích thước với độ phân giải khác nhau. Thực sự hiệu quả, nó cho phép các nhà thiết kế có thể tạo ra nhửng image tối ưu hóa cho điện thoại di động với màn hình nhỏ và sau đó phục vụ cho độ phân giải cao hơn các phiên bản màn hình lớn hơn. Filament Group đã phát triển kỹ thuật sử dụng các tập tin htaccess và JavaScript để phục vụ các hình ảnh có kích thước khác nhau dựa vào độ rộng màn hình. Một giải pháp thay thế là sử dụng các công cụ như TinySrc cho phép bạn chỉ đơn thuần là thay thế các URL của các hình ảnh lớn trong mã nguồn của bạn với một URL TinySrc, phần còn lại sẽ được thực hiển bởi công cụ TinySrc…

Responsive Images và kịch bản thay đổi kích cỡ hình ảnh về phía máy chủ (PHP)

Craig Russell đã phát triển một kỹ thuật sử dụng kịch bản phía máy chủ (trong PHP) để đáp ứng các hình ảnh với độ phân giải khác nhau. Ý tưởng là trong kịch bản PHP, một mảng lồng nhau được sử dụng để liệt kê các tập tin hình ảnh và tỷ lệ phần trăm tương đối của chúng. Trong HTML, thuộc tính src của hình ảnh sẽ được thiết lập để set hoặc get id của hình ảnh được yêu cầu, nhưng với tỷ lệ chưa được xác định. JavaScript tính toán tỷ lệ phần trăm chiều rộng tương đối của hình ảnh so với chiều rộng tối đa của container và con số này sau đó được nối vào cuối của thuộc tính src của image như là một tham số tỷ lệ. Nội dung ​​trong bài viết có chứa một số ý tưởng tốt đẹp bạn có thể cải thiện được việc xây dựng responsive images trong website của bạn..

Responsive Images sử dụng CSS3

Phương pháp của Nicolas Gallagher dựa trên việc sử dụng @media queries, nội dung được tạo ra bởi CSS3 và thêm một hàm trong CSS là attr (). Bằng cách kết hợp các thuộc tính về nội dung với hàm attr (), bạn có thể chỉ ra giá trị của attribute nên được dịch ra thàn một URL thông qua việc sử dụng hàm url(). Trong trường hợp này, nó có nghĩa là bạn sẽ có thể thay thế nội dung của hình ảnh với hình ảnh được tìm thấy tại URL đích, được chứa trong một thuộc tính tùy chọn HTML data-*…

Responsive Images sử dụng Cookies

Keith Clark cho thấy rằng chúng ta có thể sử dụng cookie để đáp ứng hình ảnh nhỏ hơn khi người dùng sử dụng điện thoại di động lướt web. Bất cứ khi nào một trình duyệt yêu cầu một tập tin từ một máy chủ, nó sẽ tự động chuyển tiếp bất kỳ dữ liệu cookie cùng với các yêu cầu. Nếu chúng ta sử dụng JavaScript để lưu trữ mộ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 thực hiện bởi trình duyệt sẽ chuyển đến máy chủ sẽ bao gồm cả thông tin kích cỡ màn hình. Nói cách khác, các máy chủ sẽ biết kích thước chính xác màn hình của thiết bị và sẽ đáp ứng các file ảnh phù hợp với thiết bị của người dùng…

CSS: Elastic Videos

Nick La áp dụng lựa chọn CSS max-width:100%;  cho video và biểu diễn các kỹ thuật để tạo nên HTML5 video và các đối tượng responsive video hay iframe chứa responsive videos nhúng vào trang web. Thực sự, kỹ thuật này rất đơn giản. Chỉ cần nhúng đoạn mã chứa một container div và chỉ ra thuộc tính padding-bottom khoảng từ 50% đến 60%. Sau đó, xác định các yếu tố con (iFrame, đối tượng nhúng) và chiều rộng 100% và chiều cao 100%, với vị trí tuyệt đối. Điều này sẽ buộc các yếu tố nhúng có thể tự động mở rộng chiều rộng đầy đủ. Kỹ thuật này được đưa ra bởi Thierry Koblentz…

Resizeable Images (giữ nguyên độ phân giải)

Một hướng dẫn nhanh chóng và cực kỳ có ích từ CSS-Tricks dự trên thay đổi kích thước hình ảnh trong khi vẫn duy trì độ phân giải…

Responsive Design Tools

Bạn có thể xây dựng một responsive website từ giai đoạn đầu và bạn có thể sử dụng một số trong những công cụ được liệt kê dưới đây để tăng tốc độ và làm mịn website của bạn.

Respond.js

Đây cũng là một sản phẩm của Scott Jehl nhanh và nhẹ cho việc sử dụng min-width và max-width trong CSS3 media queries…

Debugging CSS Media Queries

Trong RWD, chúng tôi đang làm việc với các thiết bị thông dụng cho từng quốc gia khác nhau và chúng có độ rộng và kích thước khung nhìn khác nhau. Johan Brook chia sẻ một mẹo nhanh chóng cho thấy media queries đã khởi động và có hiệu quả như thế nào. Bài viết có sẵn demo để tham khảo…

Responsive Design Testing

Công cụ này dành cho tất cả mọi người có nhu cầu thử nghiệm một cách nhanh chóng và dễ dàng thiết kế trang web của họ trong các loại màn hình có độ rộng khác nhau. Thay đổi biến defaultURL ở đầu của file responsive.js trang web của riêng bạn và điều hướng trang web của bạn từ bên trong các khung…

Responsive Design Frameworks

1140 CSS Grid

1140 CSS Grid được tối ưu hóa để làm việc trên các màn hình khác nhau, từ kích thước của điện thoại di động tới độ rộng màn hình 1280 pixel. Nó đơn giản là một 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 nó sắp xếp các cột trên đầu trang của một cột khác…

inuit.css

CSS framework này được xây dựng để cung cấp một nền tảng vững chắc cho các lập trình viên có thể thiết kế ra các website phù hợp cho cả các màn hình nhỏ (chẳng hạn như tablet hay mobile) mà tốn ít công sức nhất. Framework này thể giúp tạo dễ dàng tạo ra fluid layout thông qua bộ xây dựng grid layout tùy chọn…

FluidGrids

FluidGrids là một fluid grid framework giúp ta có thể dễ dàng tạo ra những layout dựa trên 6, 7, 8, 9, 10, 12 hoặc 16 cột…

Less Framework 4

Less Framework 4 là một CSS Grid giúp chúng ta có thể dễ dàng tạo nên các responsive layout. Nó bao gồm bốn loại layout cơ bản (bao gồm cả tablet, mobile và wide mobile), với ba bộ các mẫu thiết lập kiểu chữ…

Quy trình và chiến lược phát triển Responsive Web Design

Quy trình làm việc của các Responsive Designer

Hội nghị của Luke Wroblewski đã lưu ý phần trình bày của Ethan Marcotte về việc áp dụng các nguyên tắc thiết kế responsive web trong việc thiết kế lại của một trang web của một tờ báo lớn. Cùng với những minh họa và ví dụ khác, Ethan đã giải thích cách ông tiếp cận phương pháp responsive design. Cụ thể ông đã giải thích responsive design process là gì và các mẫu thử được làm như thế nào để phù hợp với các tiêu chí của responsive design…

Phương pháp tiếp cận Goldilocks cho Responsive Web Design

Phương pháp tiếp cận Goldilocks nhấn mạnh những layout không phụ thuộc vào thiết sẽ được hiển thị trông thật hoàn hảo bất kể các thiết bị nào đang hiển thị nội dung trên layout đó…

Hãy chú ý tới nội dung có tính cấu trúc đầu tiên (Structured Content First)

Trong bài trình bày này, Stephen Hay thảo luận về một vài khó khăn bạn gặp phải, cụ thể là khi việc hoạch định và lặp luận đúng cấu trúc nội của bạn có thể dễ dàng chuyển đổi sang các nền tảng thiết bị duyệt nôi dung khác trong tương lại.  Stephen gợi ý mà chúng tôi nghĩ về việc tạo và thiết kế nội dung cấu trúc đầu tiên phục vụ tốt nhất cho nhóm các thiết bị có màn hình nhỏ hoặc là chỉ hỗ trợ trình duyệt hiện thị văn bản. Nội dung này sẽ có thể tiếp tục đi tới bất cứ nơi nào…

Thiết kế hướng về kinh nghiệm của người sử dụng trước (Design for a Target Experience First)

Một khía cạnh thú vị khác về quy trình làm việc của một responsvie designer, Nathan C. Ford tập trung vào kinh nghiệm của người sử dụng thiết bị duyệt web trước và sau đó đưa ra những kịch bản của người dùng và cụ thể về những thiết bị sẽ được sử dụng để duyệt web. “Mục tiêu ở đây là tạo ra các website khiến người dùng với các thiết bị khác nhau vẫn dễ dàng đọc được nội dung của website đó và điều này không thể thiếu những kinh nghiệm duyệt web của người dùng. Nathan C.Ford đã làm việc trên một dự án như vậy. Cách tiếp cận của họ là nghiên cứu kỹ những kinh nghiệm của khách hàng sau đó sẽ tối ưu các kịch bản cho người dùng có khả năng và tốt nhất. Từ kết quả đó, chúng tôi tiếp tục chỉnh sửa và trau dồi cho các media query khác nhau”…

Phát triển chiến lược cho các thiết bị Mobile hiện đại

Trong bài trình bày này, Dave Olsen trình bày một chiến lược cho các điện thoại di động hiện đại bao gồm các chiến lược khách hàng, chiến lược nội dung và chiến lược nền tảng. Dave cho rằng để phát triển một chiến lược bền vững và khả năng mở rộng của điện thoại di động, bạn cần trả lời các câu hỏi: “Khách hàng mục tiêu sẽ nhận được giá trị gì từ nội dung của bạn?” và “Làm thế nào để chúng ta phát triển các giải pháp để xử lý trên cả điện thoại di động và ứng dụng trên desktop, cũng như các thiết bị của tương lai?”. Quả thật đây là một buổi trình bày rất thú vị…

Trên đây là những gợi ý cơ bản nhất cho các bạn khi bắt tay vào thiết kế và phát triển các Responsive Web. Tuy nhiên có những yêu cầu đòi hỏi bạn phải rất thành thạo những kỹ thuật như HTML5, CSS3 hay jQuery. Vì vậy, nếu các bạn cảm thấy mình vẫn chưa thành thạo những kỹ thuật đó thì nên dành chút thời gian nghiên cứu những nội dung đó. Cuối cùng chúng tôi xin chúc bạn sẽ thành công với the first responsive web của chính mình.