NộI Dung
- Hình ảnh đáp ứng
- Hiệu suất
- Tải có điều kiện và lười biếng
- Kiểu chữ đáp ứng
- Truy vấn phương tiện trong JavaScript
- Tăng cường tiến bộ
- Bố trí
- Bố cục lưới CSS
- Cuối cùng
Thiết kế web đáp ứng nghe có vẻ vô cùng đơn giản. Chọn lưới linh hoạt cho bố cục, sử dụng phương tiện linh hoạt (hình ảnh, video, iframe) và áp dụng các truy vấn phương tiện để cập nhật các phép đo này nhằm sắp xếp nội dung tốt nhất trên bất kỳ chế độ xem nào. Trong thực tế, chúng tôi đã biết rằng nó không thực sự dễ dàng như vậy. Những vấn đề nhỏ xảy ra trong mỗi dự án khiến chúng ta phải vò đầu bứt tai, thậm chí đôi khi còn khắc những rãnh móng tay trên bàn làm việc của mình.
Kể từ khi tôi bắt đầu quản lý bản tin hàng tuần về Thiết kế đáp ứng, tôi đã may mắn được nói chuyện với nhiều thành viên của cộng đồng web và nghe kinh nghiệm của họ. Tôi muốn tìm hiểu chính xác những gì cộng đồng thực sự muốn học, vì vậy tôi đã đưa ra một cuộc khảo sát cho độc giả. Đây là kết quả hàng đầu:
- Hình ảnh đáp ứng
- Cải thiện hiệu suất
- Kiểu chữ đáp ứng
- Truy vấn phương tiện trong JavaScript
- Tăng cường tiến bộ
- Bố trí
Với những chủ đề đó, tôi đã chạy một loạt podcast để hỏi một số nhà lãnh đạo trong ngành của chúng tôi về suy nghĩ của họ. Trong câu trả lời của họ, họ nhất trí một điểm: hãy tập trung vào việc nắm bắt những điều cơ bản ngay trước khi bạn bắt đầu lo lắng về những kỹ thuật thú vị và nâng cao. Bằng cách đưa mọi thứ trở lại những điều cơ bản, chúng tôi có thể xây dựng một giao diện mạnh mẽ cho mọi người, phân lớp các tính năng khi thiết bị hoặc ngữ cảnh của người dùng cho phép.
“Vậy… còn những kỹ thuật tiên tiến này thì sao?” Tôi nghe bạn hỏi. Tôi nghĩ Stephen Hay đã tóm tắt nó tốt nhất khi anh ấy nói: 'Kỹ thuật RWD tối ưu là bắt đầu bằng cách không sử dụng bất kỳ kỹ thuật RWD nâng cao nào. Bắt đầu với nội dung có cấu trúc và xây dựng theo cách của bạn. Chỉ thêm một điểm ngắt khi thiết kế bị hỏng và nội dung quy định nó và ... thế là xong. "
Trong bài viết này, tôi sẽ bắt đầu với những điều cơ bản và thêm các lớp phức tạp khi tình hình cho phép, để xây dựng các kỹ thuật nâng cao đó. Bắt đầu nào.
Hình ảnh đáp ứng
Môi trường chất lỏng là một phần quan trọng của RWD khi nó được Ethan Marcotte xác định lần đầu tiên. chiều rộng: 100%; , chiều rộng tối đa: 100%; vẫn hoạt động ngày nay, nhưng cảnh quan hình ảnh đáp ứng đã trở nên phức tạp hơn rất nhiều. Với số lượng kích thước màn hình, mật độ điểm ảnh và thiết bị hỗ trợ ngày càng tăng, chúng tôi mong muốn kiểm soát tốt hơn.
Ba mối quan tâm chính được Nhóm Cộng đồng Hình ảnh Đáp ứng (RICG) xác định:
- Kích thước kilobyte của hình ảnh mà chúng tôi đang gửi qua dây
- Kích thước vật lý của hình ảnh mà chúng tôi đang gửi đến các thiết bị DPI cao
- Hình ảnh cắt theo hình thức hướng nghệ thuật cho kích thước cụ thể của chế độ xem
Yoav Weiss, với sự trợ giúp từ Indiegogo, đã thực hiện phần lớn công việc trong việc triển khai Blink - nhánh Google của WebKit và vào thời điểm bạn đang đọc, nó sẽ được chuyển đến Chrome và Firefox. Safari 8 sẽ xuất xưởng srcset, tuy nhiên thuộc tính kích thước chỉ có trong các bản dựng hàng đêm và hình ảnh> chưa được triển khai.
Với sự xuất hiện của bất kỳ điều gì mới trong quá trình phát triển web của chúng tôi, có thể khó để bắt đầu. Hãy xem qua một ví dụ từng bước.
img! - Khai báo hình ảnh dự phòng cho tất cả các trình duyệt không hỗ trợ hình ảnh -> src = "horse-350.webp"! - Khai báo tất cả các kích thước hình ảnh trong srcset. Bao gồm chiều rộng hình ảnh bằng cách sử dụng bộ mô tả w để thông báo cho trình duyệt về chiều rộng của mỗi hình ảnh. -> srcset = "horse-350.webp 350w, ngựa-500.webp 500w, ngựa-1024.webp 1024w, ngựa.webp 2000w "! - Kích thước thông báo cho trình duyệt về bố cục trang web của chúng tôi. Ở đây chúng tôi đang nói đối với bất kỳ chế độ xem nào có kích thước từ 64em trở lên, hãy sử dụng hình ảnh sẽ chiếm 70% chế độ xem -> kích thước = "(min-width: 64em) 70vw,! - Nếu chế độ xem không phải là lớn, thì đối với bất kỳ chế độ xem nào có kích thước từ 37,5em trở lên, hãy sử dụng hình ảnh chiếm 95% của chế độ xem -> (chiều rộng tối thiểu: 37,5em) 95vw,! - và nếu chế độ xem nhỏ hơn thế, thì hãy sử dụng hình ảnh chiếm 100% khung nhìn -> 100vw "! - luôn có văn bản thay thế .--> alt =" Một con ngựa "/>
Từ quan điểm hiệu suất, không thành vấn đề nếu bạn sử dụng chiều rộng tối thiểu hay chiều rộng tối đa trong thuộc tính kích thước - nhưng thứ tự nguồn mới quan trọng. Trình duyệt sẽ luôn sử dụng kích thước phù hợp đầu tiên.
Ngoài ra, hãy nhớ rằng chúng tôi đang mã hóa thuộc tính kích thước được xác định trực tiếp dựa trên thiết kế của chúng tôi. Điều này có thể gây ra sự cố khi di chuyển về phía trước. Ví dụ: nếu bạn thiết kế lại trang web của mình, bạn sẽ cần truy cập lại tất cả img> hoặc picture> s và xác định lại kích thước. Nếu bạn đang sử dụng CMS, điều này có thể được khắc phục trong quá trình xây dựng của bạn.
WordPress đã có một plugin để trợ giúp. Nó định nghĩa srcset trên các giống hình ảnh tiêu chuẩn WP và cho phép bạn khai báo kích thước ở vị trí trung tâm. Khi trang được tạo từ cơ sở dữ liệu, nó sẽ hoán đổi mọi đề cập trên img> và thay thế chúng bằng đánh dấu ảnh.
Căn bản
- Hãy suy nghĩ xem bạn có thực sự cần bao gồm một hình ảnh hay không. Nội dung cốt lõi của hình ảnh hay là trang trí? Một hình ảnh ít hơn sẽ có nghĩa là thời gian tải nhanh hơn
- Tối ưu hóa hình ảnh bạn cần đưa vào bằng ImageOptim
- Đặt tiêu đề hết hạn cho hình ảnh của bạn trên máy chủ của bạn hoặc tệp .htaccess (xem chi tiết trong phần "Hiệu suất")
- PictureFill cung cấp hỗ trợ polyfill cho hình ảnh
Nâng cao
- Tải hình ảnh của bạn bằng cách sử dụng plugin Lazy Load của jQuery
- Sử dụng HTMLImageElement.Sizes và HTMLPictureElement để phát hiện tính năng.
- Plugin PictureFill WP nâng cao, được tìm thấy trên Github, sẽ cho phép bạn xác định các giá trị kích thước và chiều rộng hình ảnh tùy chỉnh
Hiệu suất
Để nhận được hiệu suất nhanh nhất trên các trang của chúng tôi, chúng tôi cần tất cả HTML và CSS cần thiết để hiển thị phần trên cùng của trang trong phản hồi đầu tiên từ máy chủ. Con số kỳ diệu đó là 14kb và dựa trên kích thước cửa sổ tắc nghẽn tối đa trong thời gian khứ hồi đầu tiên (RTT).
Patrick Hamann, trưởng nhóm kỹ thuật frontend tại Guardian, và nhóm của anh ấy đã cố gắng phá vỡ rào cản 1000ms bằng cách sử dụng hỗn hợp các kỹ thuật frontend và backend. Cách tiếp cận của Guardian là đảm bảo nội dung được yêu cầu - bài báo - được chuyển đến người dùng nhanh nhất có thể và nằm trong con số kỳ diệu 14kb.
Hãy xem xét quá trình:
- Người dùng nhấp vào liên kết Google đến một câu chuyện tin tức
- Một yêu cầu chặn duy nhất được gửi đến cơ sở dữ liệu cho bài viết. Không có câu chuyện hoặc nhận xét liên quan nào được yêu cầu
- HTML được tải chứa CSS quan trọng
- trong đầu>
- Quá trình 'Cắt bỏ mù tạt' được thực hiện và mọi yếu tố điều kiện dựa trên các tính năng thiết bị của người dùng đều được tải
- Mọi nội dung liên quan đến hoặc hỗ trợ chính bài viết (hình ảnh bài viết liên quan, bình luận bài viết, v.v.) đều được tải vào vị trí
Tối ưu hóa đường hiển thị quan trọng như thế này có nghĩa là phần đầu> dài 222 dòng. Tuy nhiên, nội dung quan trọng mà người dùng xem vẫn nằm trong tải trọng ban đầu 14kb khi được gzipped. Chính quá trình này đã giúp phá vỡ rào cản hiển thị 1000ms đó.
Tải có điều kiện và lười biếng
Tải có điều kiện cải thiện trải nghiệm của người dùng dựa trên tính năng thiết bị của họ. Các công cụ như Modernizr cho phép bạn kiểm tra các tính năng này, nhưng lưu ý rằng chỉ vì trình duyệt cho biết nó cung cấp hỗ trợ, điều đó không có nghĩa là luôn hỗ trợ đầy đủ.
Một kỹ thuật là tạm dừng tải nội dung nào đó cho đến khi người dùng thể hiện ý định sử dụng tính năng đó. Điều này sẽ được coi là có điều kiện. Bạn có thể tạm dừng tải trong các biểu tượng xã hội cho đến khi người dùng di chuột qua hoặc chạm vào các biểu tượng hoặc bạn có thể tránh tải Bản đồ Google bằng khung nội tuyến trên các khung nhìn nhỏ hơn, nơi người dùng có thể thích liên kết với một ứng dụng bản đồ chuyên dụng. Một cách tiếp cận khác là ‘Cắt mù tạt’ - xem phần hộp bên trên để biết chi tiết về điều này.
Tải chậm được định nghĩa là thứ mà bạn luôn có ý định tải trên trang - hình ảnh là một phần của bài viết, nhận xét hoặc các bài viết liên quan khác - nhưng điều đó không cần thiết phải có để người dùng bắt đầu xem nội dung.
Căn bản
- Bật gzipping cho tệp và đặt tiêu đề hết hạn cho tất cả nội dung tĩnh (netm.ag/expire-260)
- Sử dụng plugin Lazy Load jQuery. Điều này tải hình ảnh khi tiếp cận khung nhìn hoặc sau một khoảng thời gian nhất định
Nâng cao
- Thiết lập Fastly hoặc CloudFlare. Mạng phân phối nội dung (CDN) cung cấp nội dung tĩnh của bạn cho người dùng nhanh hơn so với máy chủ của riêng bạn và có một số cấp miễn phí
- Bật SPDY cho các trình duyệt hỗ trợ http2 để tận dụng các tính năng của http2 như yêu cầu http song song
- Số lượng xã hội cho phép tải có điều kiện các biểu tượng xã hội của bạn
- Sử dụng API bản đồ tĩnh sẽ cho phép bạn chuyển đổi bản đồ tương tác của Google cho hình ảnh. Hãy xem ví dụ của Brad Frost tại netm.ag/static-260
- Mẫu bao gồm Ajax sẽ tải các đoạn nội dung từ thuộc tính data-before, data-after hoặc data-thay thế
Kiểu chữ đáp ứng
Kiểu chữ là làm cho nội dung của bạn dễ tiêu hóa. Kiểu chữ đáp ứng mở rộng điều này để đảm bảo khả năng đọc trên nhiều loại thiết bị và khung nhìn. Jordan Moore thừa nhận rằng kiểu người đó là một điều mà anh ấy không sẵn sàng nhúc nhích. Thả một hoặc hai hình ảnh nếu bạn cần, nhưng hãy đảm bảo rằng bạn có loại tốt.
Stephen Hay đề xuất đặt kích thước phông chữ HTML thành 100% (đọc: cứ để nguyên như vậy) vì mỗi trình duyệt hoặc nhà sản xuất thiết bị đặt một mặc định có thể đọc được hợp lý cho một độ phân giải hoặc thiết bị cụ thể. Đối với hầu hết các trình duyệt máy tính để bàn, đây là 16px.
Mặt khác, Moore sử dụng đơn vị REM và kích thước phông chữ HTML để đặt kích thước phông chữ tối thiểu cho các phần tử nội dung nhất định. Ví dụ: nếu bạn muốn dòng nội dung của bài viết luôn là 14px, thì hãy đặt kích thước đó làm kích thước phông chữ cơ sở trên phần tử HTML và đặt .byline {font-size: 1rem;}. Khi bạn chia tỷ lệ body: font-size: cho phù hợp với khung nhìn, bạn sẽ không ảnh hưởng đến kiểu .by-line.
Độ dài dòng đọc tốt cũng rất quan trọng - hãy nhắm đến từ 45 đến 65 ký tự. Có một bookmarklet mà bạn có thể sử dụng để kiểm tra nội dung của mình. Nếu bạn đang hỗ trợ nhiều ngôn ngữ với thiết kế của mình, thì độ dài dòng cũng có thể thay đổi. Moore đề xuất sử dụng: lang (de) article {max-width: 30em} để giải quyết mọi vấn đề ở đó.
Để duy trì nhịp điệu theo chiều dọc, hãy đặt lề dưới cùng với các khối nội dung, ul>, ol>, blockquote>, table>, blockquote>, v.v., giống với chiều cao dòng của bạn. Nếu nhịp điệu bị gián đoạn khi giới thiệu hình ảnh, bạn có thể khắc phục bằng cách thêm Baseline.js hoặc BaselineAlign.js.
Căn bản
- Phông chữ của bạn dựa trên 100 phần trăm nội dung
- Làm việc trong các đơn vị em tương đối
- Đặt lề của bạn theo chiều cao dòng của bạn để duy trì nhịp điệu dọc trong thiết kế của bạn
Nâng cao
- Cải thiện hiệu suất tải phông chữ với Enhance.js hoặc tải phông chữ hoãn lại
- Sử dụng Sass @includes cho các tiêu đề ngữ nghĩa.
- Thông thường, chúng ta cần sử dụng kiểu h5 trong tiện ích thanh bên yêu cầu đánh dấu h2. Sử dụng các Mixins đánh máy của Beard để kiểm soát kích thước và duy trì ngữ nghĩa với đoạn mã dưới đây:
.sidebar h2 {@include header-5}
Truy vấn phương tiện trong JavaScript
Kể từ khi chúng tôi có thể kiểm soát bố cục trên nhiều chế độ xem khác nhau thông qua các truy vấn phương tiện, chúng tôi cũng đang tìm cách để gắn điều đó vào việc chạy JavaScript của chúng tôi. Có một số cách để kích hoạt JavaScript trên các chiều rộng, chiều cao và hướng nhất định của khung nhìn và một số người thông minh đã viết một số plugin JS gốc dễ sử dụng như Enquire.js và Simple State Manager. Bạn thậm chí có thể tự xây dựng điều này bằng cách sử dụng matchMedia. Tuy nhiên, bạn gặp phải vấn đề là bạn cần sao chép các truy vấn phương tiện trong CSS và JavaScript của mình.
Aaron Gustafson có một mẹo nhỏ có nghĩa là bạn không phải quản lý và đối sánh các truy vấn phương tiện trong CSS và JS của mình. Ý tưởng ban đầu đến từ Jeremy Keith và trong ví dụ này, Gustafson đã triển khai nó một cách đầy đủ.
Sử dụng getActiveMQ (netm.ag/media-260), chèn div # getActiveMQ-watcher vào cuối phần tử body và ẩn nó. Sau đó, trong CSS đặt # getActiveMQ-watcher {font-family: break-0;} thành truy vấn phương tiện đầu tiên, font-family: break-1; đến thứ hai, font-family: break-2; đến thứ ba và như vậy.
Tập lệnh sử dụng watchResize () (netm.ag/resize-260) để kiểm tra xem kích thước của khung nhìn có thay đổi hay không và sau đó đọc lại họ phông chữ đang hoạt động. Giờ đây, bạn có thể sử dụng điều này để kết nối các cải tiến JS như thêm giao diện theo thẻ vào dl> khi chế độ xem cho phép, thay đổi hoạt động của hộp đèn hoặc cập nhật bố cục của bảng dữ liệu. Kiểm tra getActiveMQ Codepen tại netm.ag/active-260.
Căn bản
- Quên về JavaScript cho các khung nhìn khác nhau. Cung cấp nội dung và chức năng trang web cho người dùng theo cách họ có thể truy cập trên tất cả các chế độ xem. Chúng ta không bao giờ cần JavaScript
Nâng cao
- Mở rộng phương pháp của Gustafson bằng cách sử dụng Breakup làm danh sách các truy vấn phương tiện được xác định trước và tự động tạo danh sách các họ phông chữ cho getActiveMQ-watcher
Tăng cường tiến bộ
Một quan niệm sai lầm phổ biến về tính năng nâng cao tiến bộ là mọi người nghĩ, 'Ồ, tôi không thể sử dụng tính năng mới này', nhưng thực sự thì ngược lại. Cải tiến liên tục có nghĩa là bạn có thể cung cấp một tính năng nếu tính năng đó chỉ được hỗ trợ trong một hoặc thậm chí không có trình duyệt nào và theo thời gian, mọi người sẽ có được trải nghiệm tốt hơn khi có phiên bản mới.
Nếu bạn nhìn vào chức năng cốt lõi của bất kỳ trang web nào, bạn có thể cung cấp chức năng đó dưới dạng HTML và yêu cầu phía máy chủ thực hiện tất cả quá trình xử lý. Thanh toán, biểu mẫu, Thích, chia sẻ, email, trang tổng quan - tất cả đều có thể được thực hiện. Khi nhiệm vụ cơ bản được xây dựng, chúng ta có thể xếp lớp các công nghệ tuyệt vời lên trên nó, bởi vì chúng ta có một mạng lưới an toàn để bắt những công nghệ lọt qua. Hầu hết các cách tiếp cận nâng cao mà chúng tôi đã đề cập ở đây đều dựa trên sự nâng cao tiến bộ.
Bố trí
Bố cục linh hoạt có thể nói là đơn giản, nhưng nó có nhiều cách tiếp cận khác nhau. Tạo bố cục lưới đơn giản với ít đánh dấu hơn bằng cách sử dụng: nth-child () selector.
/ * khai báo chiều rộng di động đầu tiên cho lưới * / .grid-1-4 {float: left; chiều rộng: 100%; } / * Khi chế độ xem ít nhất là 37,5em thì hãy đặt lưới thành 50% cho mỗi phần tử * / @media (min-width: 37,5em) {.grid-1-4 {width: 50%; } / * Xóa float mỗi phần tử thứ hai SAU phần tử đầu tiên. Điều này nhắm mục tiêu thứ 3, 5, 7, 9 ... trong lưới. * / .Grid-1-4: nth-of-type (2n + 1) {clear: left; }} @media (min-width: 64em) {.grid-1-4 {width: 25%; } / * Xóa xóa trước đó * / .grid-1-4: nth-of-type (2n + 1) {clear: none; } / * Xóa float mọi phần tử thứ 4 SAU phần tử đầu tiên. Điều này nhắm mục tiêu thứ 5, thứ 9 ... trong lưới. * / .Grid-1-4: nth-of-type (4n + 1) {clear: left; }}
Vẫy tay tạm biệt với việc sử dụng vị trí và thả nổi cho các bố cục của bạn. Mặc dù họ đã phục vụ chúng tôi tốt cho đến nay, nhưng việc sử dụng chúng để bố trí là một điều cần thiết. Giờ đây, chúng tôi đã có hai đứa trẻ mới trong khối sẽ giúp khắc phục tất cả các vấn đề về bố cục của chúng tôi - Flexbox và Grids.
Flexbox rất phù hợp cho các mô-đun riêng lẻ, kiểm soát bố cục của các phần nội dung trong mỗi mô-đun. Có những bố cục mà chúng tôi cố gắng cung cấp có thể dễ dàng đạt được hơn bằng cách sử dụng Flexbox và điều này càng đúng hơn với các trang web đáp ứng. Để biết thêm về điều này, hãy xem hướng dẫn về Thủ thuật CSS cho Flexbox hoặc Flexbox Polyfill.
Bố cục lưới CSS
Grid là nhiều hơn cho bố cục cấp macro. Mô-đun bố cục lưới cung cấp cho bạn một cách tuyệt vời để mô tả bố cục của bạn trong CSS của bạn. Mặc dù hiện tại nó vẫn đang trong giai đoạn dự thảo, tôi đề xuất bài viết này về bố cục CSS Grid của Rachel Andrew.
Cuối cùng
Đây chỉ là một số mẹo để mở rộng thực hành đáp ứng của bạn. Khi tiếp cận bất kỳ công việc đáp ứng mới nào, hãy lùi lại một bước và đảm bảo rằng bạn hiểu đúng những điều cơ bản. Bắt đầu với trải nghiệm cải thiện nội dung, HTML và lớp của bạn dựa trên chúng và sẽ không có bất kỳ giới hạn nào đối với nơi bạn có thể thực hiện các thiết kế của mình.
Bài báo này ban đầu xuất hiện trong số 260 của tạp chí net.
