50 công cụ tuyệt vời để thiết kế web đáp ứng

Tác Giả: Monica Porter
Ngày Sáng TạO: 17 Hành Khúc 2021
CậP NhậT Ngày Tháng: 17 Có Thể 2024
Anonim
😍Smart Appliances, Gadgets For Every Home/ Versatile Utensils(Inventions & Ideas) #238
Băng Hình: 😍Smart Appliances, Gadgets For Every Home/ Versatile Utensils(Inventions & Ideas) #238

NộI Dung

Như đã được Ethan Marcotte giới thiệu / đặt ra trong cả bài viết "Thiết kế web đáp ứng" cũng như cuốn sách bán chạy nhất của anh ấy, người ta cần ba yếu tố để tạo ra một trang web đáp ứng:

  1. Một lưới linh hoạt / chất lỏng
  2. Hình ảnh đáp ứng
  3. Truy vấn phương tiện truyền thông

Có rất nhiều bài viết tuyệt vời khác đề cập đến các động cơ, khái niệm và kỹ thuật liên quan đến thiết kế web đáp ứng, vì vậy, chúng tôi sẽ giữ trọng tâm của bài viết này về một số công cụ hàng đầu sẽ giúp bạn trở nên phản hồi có trách nhiệm.

Công cụ để bắt đầu

Trước khi bắt đầu xây dựng trang web của mình, tốt nhất bạn nên phác thảo cách các phần tử trên trang sẽ thích ứng như thế nào để phù hợp với các kích thước trình duyệt khác nhau của các thiết bị khác nhau mà chúng sẽ được xem và để tránh tình trạng mất kết nối thường xuất phát từ việc suy nghĩ chủ yếu về thiết kế máy tính để bàn và phần còn lại của các lần lặp đáp ứng như một suy nghĩ sau (đặc biệt là xem bình luận của Stephanie (Sullivan) Rewis)).

01. Trang tính phác thảo thiết kế web đáp ứng

Tập hợp các tờ phác thảo đáp ứng này, của Jeremy P Alford, là một điểm khởi đầu tuyệt vời để bắt đầu vạch ra cách các phần trang sẽ thay đổi theo các độ phân giải khác nhau.


02. Sách phác thảo thiết kế đáp ứng

Nếu bạn muốn giữ tất cả các bản phác thảo của mình ở một nơi, thì bạn có thể muốn xem xét cuốn sách có 50 tờ phác thảo đáp ứng này của công ty App Sketchbook.

03. Khung dây đáp ứng

Một trong những khó khăn của việc xây dựng các trang web đáp ứng là sử dụng khung dây để cho biết thiết kế đáp ứng sẽ hoạt động như thế nào. James Mellers của Adobe đã kết hợp công cụ thử nghiệm này để cho thấy cách hoạt động của wireframing đối với các bố cục phức tạp.


04. Các mẫu bố cục đa thiết bị

Khi lập kế hoạch cho một thiết kế đáp ứng, bạn nên xem cách những người khác đã tiếp cận nó trước bạn như thế nào, vì vậy, các Mẫu Bố cục Đa thiết bị của Luke Wroblewski, liệt kê các mẫu phổ biến có liên kết đến các ví dụ, là một nơi tuyệt vời để bắt đầu.

05. Gạch phong cách

Gạch phong cách của Samanatha Warren đề xuất một kỹ thuật mới cho thiết kế trong thời đại thích ứng; chứ không phải là các mô hình thiết kế có chiều rộng cố định, những mô hình này giống như các mẫu hoặc bảng tâm trạng thể hiện phương pháp thiết kế chung mà không đi sâu vào chi tiết cụ thể.

Công cụ cho lưới linh hoạt / chất lỏng

Như đã nêu trước đó, thành phần đầu tiên cần thiết cho thiết kế đáp ứng là một lưới linh hoạt / chất lỏng.Những thứ sau đã được tạo sẵn: bạn chỉ cần tải chúng xuống và bạn sẽ nhanh chóng đến được một trang web đáp ứng tốt hơn.


06. Hệ thống lưới vàng

Joni Korpi, người cũng đã phát triển Less Framework, gần đây đã phát hành phiên bản mới này của hệ thống lưới đáng tin cậy cho thiết kế đáp ứng. Được coi là "gấp" vì nó dễ dàng điều chỉnh từ 16, thành tám, thành bốn cột, Hệ thống Lưới vàng cũng có một lớp phủ trình duyệt nhỏ để hiển thị lưới trên các trang của bạn để thử nghiệm.

07. Foldy960

Các chuyên gia tài năng tại Paravel, Inc. đã phát hành lưới 960.gs được sửa đổi mà họ sử dụng làm cơ sở cho các dự án đáp ứng của họ.

08. SimpleGrid

SimpleGrid, của Conor Muirhead, được xây dựng với khả năng phản hồi tích hợp, vì vậy, bạn có thể dễ dàng bắt đầu và chạy với dự án trang web đáp ứng của mình.

09. Lưới CSS 1140px

Một hệ thống lưới đáp ứng tuyệt vời khác là Lưới CSS 1140px của nhà thiết kế người Melbourne Andy Taylor, chuyển từ độ phân giải máy tính để bàn rộng xuống di động.

10. Hệ thống lưới CSS Columnal

Hệ thống lưới Columnal, được tạo ra bởi Pulp + Pixels hay còn gọi là giám đốc sáng tạo Nick Gorsline, dựa trên hệ thống lưới 1140px, nhưng với một số tiện ích bổ sung như bộ thiết kế với các bản phác thảo và các mẫu khung dây, cũng như các kiểu gỡ lỗi CSS.

11. Hệ thống lưới ngữ nghĩa

Các phần mở rộng CSS được xử lý trước như Sass và LESS đang ngày càng trở nên phổ biến hơn và hệ thống lưới Ngữ nghĩa của Tyler Tate sử dụng chúng để phát huy tác dụng tối đa trong hệ thống lưới này tuyên bố không sử dụng các lớp hoặc phần tử không cần thiết. Đọc thêm tại coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

12. SUSY

Giống như hệ thống lưới ngữ nghĩa SUSY của Oddbird đã tạo ra một hệ thống lưới không sử dụng thêm đánh dấu hoặc các lớp đặc biệt, nhưng SUSY chỉ nhắm đến người dùng Sass (và phần mở rộng của nó, La bàn).

13. Gridpak

Gridpak, của Erskine Design, là một trong những máy phát điện lưới đáp ứng mới nhất hiện nay. Nó cho phép bạn đặt các cột và rãnh nước của mình ở một số điểm ngắt, sau đó xuất ra các tệp CSS, JavaScript và PNG để cả nhóm của bạn đang làm việc từ cùng một điểm xuất phát.

14. Gridset

Vẫn còn một chút bí ẩn đối với Gridset vì tại thời điểm tôi viết bài này, nó vẫn chưa thực sự được phát hành. Nhưng công cụ của Mark Boulton Design hứa hẹn các hệ thống lưới được thiết kế riêng, không theo quy định và một cách để lưu và quản lý hệ thống lưới của bạn trực tuyến.

15. Một lưới Photoshop tốt hơn cho RWD

Elliot Jay Stocks đề xuất bỏ tiêu chuẩn lưới trên thực tế 960px cũ và thay vào đó làm việc từ cơ sở 1000px, làm cho tất cả các phép tính tỷ lệ phần trăm hoạt động dễ dàng hơn. Nếu bạn đồng ý, anh ấy sẽ làm một PSD để bạn bắt đầu làm việc.

16. Lưới chất lỏng

Nếu thiết kế của bạn có tính chuyên môn cao và bạn cần tạo lưới tùy chỉnh của riêng mình, bạn có thể làm như vậy với máy tính lưới linh hoạt của giải thưởng .net dành cho người mới được đề cử xuất sắc Harry Roberts.

17. Máy tính đáp ứng

Một công cụ tính tỷ lệ phần trăm pixel khác, nhưng công cụ này của Stu Robson tiến xa hơn những công cụ khác bằng cách tạo ra tất cả các quy tắc CSS cho bạn, nghĩa là bạn có thể chỉ cần sao chép và dán chúng vào bảng định kiểu của mình.

Công cụ cho hình ảnh đáp ứng (và văn bản)

Một thành phần quan trọng khác của thiết kế web đáp ứng là hình ảnh linh hoạt. Mặc dù kỹ thuật để đạt được hình ảnh linh hoạt rất đơn giản, nhưng việc tối ưu hóa hiệu suất và tải trang cho các thiết bị khác nhau dường như là một trong những thách thức lớn nhất trong thiết kế web đáp ứng. Dưới đây là một số tài nguyên để tiếp cận vấn đề.

18. Hình ảnh đáp ứng

Nhóm Filament đã nghĩ ra một cách để gửi một hình ảnh có kích thước phù hợp dựa trên độ phân giải màn hình. Thử nghiệm này với hình ảnh ưu tiên trên thiết bị di động mở rộng quy mô một cách nhạy bén và có trách nhiệm để có hai hình ảnh có kích thước khác nhau để tham khảo.

19. Hình ảnh thích ứng

Matt Wilcox đã lấy cảm hứng từ công cụ Hình ảnh thích ứng để tạo Hình ảnh thích ứng, sử dụng PHP và một chút JavaScript để cung cấp hình ảnh thích hợp cho thiết bị của người dùng mà không yêu cầu thêm bất kỳ đánh dấu nào.

20. Sencha.io Src (trước đây là Tinysrc)

Sencha cung cấp một dịch vụ đám mây gửi các phiên bản được tối ưu hóa của hình ảnh được lưu trữ cho kích thước của thiết bị yêu cầu chúng. Để tìm hiểu cách sử dụng, hãy xem docs.sencha.com/io/src/.

21. FitText

Tuy nhiên, một viên ngọc khác từ Paravel, Inc là FitText.js, một trình cắm thêm jQuery để làm cho loại web tiêu đề đáp ứng với thiết kế và thiết bị. Chi tiết xem trentwalton.com/2011/05/10/fit-to-scale/.

22. slabText

Lấy cảm hứng từ FitText và thuật toán SlabType, slabText của Brian McAllister là một trình cắm thêm jQuery tạo ra các khối văn bản in đậm có thể thay đổi kích thước một cách thích ứng trong khi vẫn giữ được độ rộng xác định.

Công cụ cho truy vấn phương tiện

Bây giờ bạn đã có ý tưởng về cách bố cục của mình sẽ thay đổi đối với các thiết bị khác nhau, lưới linh hoạt và hình ảnh linh hoạt, bạn cần các truy vấn phương tiện để chuyển các phần tử của trang sang trạng thái đáp ứng.

23. Respond.js

Một vấn đề với thiết kế đáp ứng là các trình duyệt không thể đọc các truy vấn phương tiện sẽ bị bỏ lại phía sau. Đây có thể không phải là vấn đề với đối tượng mục tiêu của bạn, nhưng vẫn là một phương pháp hay để thu hút người dùng trên các trình duyệt cũ hơn. Respond.js, bởi Scott Jehl, chỉ hỗ trợ các thuộc tính chiều rộng tối thiểu và chiều rộng tối đa.

Để biết thêm, hãy xem filamentgroup.com/lab/respondjs_fast_css3_media_queries_for_internet_explorer_6_8_and_more/.

24. CSS3-Mediaqueries.js

CSS3-Mediaqueries.js, của Wouter van der Graaf, cho phép các phiên bản IE cũ hơn và các trình duyệt khác kiểm tra và áp dụng hiệu quả tất cả các loại truy vấn phương tiện.

25. Adapt.js

Nathan Smith, tác giả của hệ thống lưới 960.gs ban đầu, đã viết Adapt.js, một tập lệnh phát hiện kích thước trình duyệt và chỉ phục vụ các biểu định kiểu cần thiết - như truy vấn phương tiện nhưng không có truy vấn phương tiện, có nghĩa là nó cũng hoạt động trong các trình duyệt cũ hơn.

26. Categorizr

Đây là tính năng phát hiện thiết bị được tiếp cận từ góc độ ngược lại - tập lệnh Categorizr của Brett Jankord giả định rằng các thiết bị là thiết bị di động trừ khi được phát hiện là máy tính để bàn hoặc máy tính bảng, cho phép bạn cung cấp tài nguyên cho trình duyệt theo cách thông cảm.

Lò hơi thiết kế đáp ứng (và di động)

Với tinh thần của một quy trình làm việc đáp ứng hiệu quả, các bản soạn thảo tạo điều kiện thuận lợi cho quá trình chuyển thiết kế sang trình duyệt sớm hơn. Hầu hết các bảng điện tử này kết hợp những công cụ tốt nhất được đề cập ở trên thành một gói gọn gàng: một lưới linh hoạt được tăng cường với các tập lệnh, đồng thời thực hiện triết lý nội dung đầu tiên trên thiết bị di động.

27. 320 trở lên

Andy Clarke's 320 trở lên là bản soạn sẵn dành cho thiết bị di động đầu tiên tích hợp với nhiều công cụ thiết kế web hiện đại khác, chẳng hạn như LESS và Bootstrap (xem # 30). Đó là một cách nhẹ nhàng và nhanh nhẹn để thiết lập và chạy một trang web nhanh chóng. Ngoài ra, hãy xem cuộc phỏng vấn của chúng tôi với Andy, trong đó anh ấy cho chúng tôi biết thêm về phiên bản mới.

28. Không có lưới

Gridless là một bản soạn thảo HTML5 và CSS3 có thể dùng làm nền tảng cho các thiết kế đáp ứng của bạn, tập trung vào kiểu chữ và khả năng tương thích đa trình duyệt.

29. Bộ xương

Không giống như hai boilerplate trước, có điểm khởi đầu là với độ phân giải nhỏ nhất, bộ công cụ phát triển Skeleton, do Dave Gamache tạo ra, dựa trên hệ thống lưới 960.gs và quy mô xuống thiết bị di động. Skeleton cũng tự hào có một khuôn khổ phong cách tuyệt vời cho các nhà phát triển để xây dựng các phong cách trên đó.

30. Bootstrap

Được xây dựng bởi Twitter và hiện có nguồn mở, Bootstrap là một khuôn khổ và một loạt các thành phần để nhanh chóng đưa một trang web trực tuyến và kể từ phiên bản hai, tất cả các phần cốt lõi của nó đều hoạt động một cách nhạy bén.

Plugin, miếng chêm và polyfills

Mặc dù các trình duyệt và phần mềm hiện đại có xu hướng được thiết kế để đáp ứng, nhưng đôi khi chúng ta phải sử dụng các công cụ bổ sung để cung cấp trải nghiệm nhất quán.

31. Plugin đáp ứng

Marios Lublinski đã viết một plugin WordPress hứa hẹn biến bất kỳ chủ đề WP hiện tại nào thành một chủ đề đáp ứng. Nó hoạt động như thế nào thì tôi vẫn chưa biết vì nó vẫn chưa được phát hành vào thời điểm viết bài này, nhưng nếu nó hoạt động đúng với lời hứa của nó thì nó sẽ rất hữu ích.

32. Lật đổ

Xử lý tràn nội dung hoạt động tốt trên trình duyệt máy tính để bàn, nhưng các trình duyệt di động cũ hơn xử lý nó không nhất quán. Polyfill Overthrow từ Tập đoàn Filament chăm chỉ bổ sung khả năng xuống cấp ổn định trên các thiết bị, đảm bảo rằng tất cả người dùng di động đều có được trải nghiệm tốt nhất có thể.

33. MediaTable

Plugin jQuery của Marco Pegoraro, MediaTable, hoạt động với Respond.js để giúp bạn giải quyết vấn đề về cách hiển thị bảng dữ liệu lớn trên thiết bị màn hình nhỏ, tạo các cột đáp ứng và thêm nút chuyển hiển thị / ẩn khi thích hợp.

"Kiểm tra, thử nghiệm: 1-2-3..."

Một khía cạnh khác của quy trình đáp ứng là biết các thiết bị và độ phân giải mục tiêu của bạn và sau đó kiểm tra chúng.

34. resizeMyBrowser

resizeMyBrowser, bởi nhà phát triển giao diện người dùng Chen Luo, có một số kích thước đặt trước cho cửa sổ trình duyệt của bạn để kiểm tra các trang được thiết kế thích ứng hoặc tạo một giá trị đặt trước mới nếu bạn không thể tìm thấy thứ nguyên phù hợp với nhu cầu của mình.

35. responsivepx

Giống như resizeMyBrowser, responsivepx, được xây dựng bởi Remy Sharp, tải các trang của bạn trong một cửa sổ nơi bạn có thể kiểm tra chiều rộng và chiều cao để xác định xem các truy vấn phương tiện của bạn đang hoạt động tốt như thế nào và vị trí của các điểm ngắt trong thiết kế.

36. Kiểm tra thiết kế đáp ứng

Một công cụ cực kỳ hữu ích của nhà thiết kế và nhà phát triển Matt Kersley: chỉ cần nhập URL của trang web đáp ứng của bạn trong Kiểm tra thiết kế thích ứng để xem cách nó hiển thị ở các kích thước trình duyệt khác nhau.

37. Người phản hồi

Nhập URL và Trình phản hồi sẽ hiển thị cho bạn cách nó hiển thị ở nhiều kích thước thiết bị phổ biến - với hiệu quả robot tàn nhẫn. Tama Pugsley và Andy Hovey chịu trách nhiệm về việc này.

38. Responsive.is

Một trình giả lập thiết bị trong trang khác, Responsive.is cho phép bạn nhập URL sau đó nhanh chóng thay đổi kích thước giữa một loạt các giá trị đặt trước khác nhau. Nó được tạo ra bởi nhóm đằng sau ứng dụng Typecast sắp ra mắt.

39. Screenqueri.es

Thêm một công cụ kích thước trình duyệt nữa, nhưng Screenqueri.es của Mandar Shirke tạo sự khác biệt bằng cách có một bộ cài đặt trước dành cho thiết bị di động và máy tính bảng phong phú, cũng như lưới và thước đo giúp việc đo lường chính xác trở nên dễ dàng hơn nhiều.

40. Aptus

Một ứng dụng khác để thử nghiệm các trang web ở nhiều kích thước xác định, nhưng Aptus là bản gốc dành cho Mac. Tính năng này có sẵn thông qua Mac App Store và bản địa mang lại các tính năng bổ sung như ảnh chụp màn hình dễ dàng và hỗ trợ ngoại tuyến.

41. Bookmarklet thiết kế đáp ứng

Victor Coulon đã tạo ra một bookmarklet rất đơn giản nhưng hiệu quả; khi bạn kích hoạt nó trên bất kỳ trang web nào, nó sẽ thêm một thanh công cụ cho phép bạn chuyển đổi giữa bốn kích thước màn hình phổ biến để bạn có thể xem cách trang web của mình hiển thị ở các kích thước khác nhau.

42. Bookmarklet Kiểm tra Thiết kế Đáp ứng

Bookmarklet này của Benjamin Keen cho phép tùy chỉnh nhiều hơn bằng cách cho phép bạn xác định kích thước thiết bị của riêng mình và nhiều hay ít tùy thích. Khi được kích hoạt, nó sẽ hiển thị trang web ở tất cả các kích thước đã chọn, cạnh nhau để dễ dàng so sánh.

43. Screenfly

Screenfly, của QuirkTools, cho phép bạn kiểm tra một trang web ở các độ phân giải khác nhau trên máy tính để bàn, máy tính bảng, điện thoại di động và tivi. Thử nghiệm trên máy tính để bàn hiện chỉ giới hạn ở Safari, trong khi máy tính bảng và thiết bị di động có nhiều tùy chọn hơn cho thiết bị và trình duyệt. Truyền hình được giới hạn trong Opera.

44. Chỉ báo truy vấn phương tiện

Johan Brook cung cấp một cách CSS thuần túy để kiểm tra khi một truy vấn phương tiện được kích hoạt bởi trình duyệt. Media Query Indicator là một công cụ tốt khác để kiểm tra và thử nghiệm các điểm đột phá trong thiết kế.

45. Shim

Một trong những công cụ được sử dụng để thiết kế lại Boston Globe, chàng trai áp phích của phong trào RWD, Shim là một ứng dụng Node.js chạy một trang web trên nhiều thiết bị trên cùng một mạng Wifi, giúp việc kiểm tra trên nhiều thiết bị trở nên dễ dàng hơn nhiều .

46. ​​Lái xe vào

Nếu bạn không có máy chủ Node.js để chạy Shim, Scott Jehl đã tạo một phiên bản đơn giản hơn có tên Drive-In về cơ bản hoạt động theo cùng một cách, nhưng sử dụng PHP, Apache và tệp .htaccess.

47. Adobe Shadow

Adobe tiếp tục đẩy mạnh công nghệ web với công cụ gỡ lỗi từ xa này. Cài đặt Shadow và tiện ích mở rộng Chrome trên Mac hoặc Windows, cùng với ứng dụng Shadow trên Android hoặc iPhone và bạn có thể chia sẻ các trang web giữa nhiều thiết bị khác nhau.

48. Trình mô phỏng di động Opera + Gỡ lỗi từ xa

Một cách dễ dàng hơn để gỡ lỗi các trang di động là cài đặt Opera và Trình mô phỏng di động Opera và kết nối cả hai với tùy chọn Gỡ lỗi từ xa của chúng. Thiết lập đơn giản và nhanh chóng và có thêm lợi ích là thử nghiệm trên nhiều hơn WebKit.

Thêm cảm hứng

Bạn muốn có ý tưởng về cách những người khác làm cho thiết kế của họ đáp ứng?

49. MediaQueri.es

Nếu bạn chưa xem, thì trang Mediaqueri.es có số lượng ngày càng tăng các trang đã chuyển sang mặt phản hồi.

50. @RWD

Ethan Marcotte điều hành một tài khoản Twitter, nơi cung cấp tin tức, công cụ và giới thiệu mới nhất từ ​​thế giới RWD.

Denise Jacobs yêu thích việc trở thành một diễn giả, tác giả, nhà đào tạo thiết kế web và nhà truyền bá sáng tạo, trong khi Peter Gasston là tác giả của Cuốn sách về CSS3 và là một nhà phát triển web kỳ cựu viết blog tại Broken Links.

Thích cái này? Đọc những thứ này!

  • Mẹo chuyên nghiệp để xây dựng trang web trên điện thoại di động
  • Các kỹ thuật CSS và JavaScript hàng đầu
  • Cách tạo ứng dụng
  • Các phông chữ web miễn phí tốt nhất cho các nhà thiết kế
  • Khám phá điều gì tiếp theo cho Thực tế tăng cường
  • Tải xuống các kết cấu miễn phí: độ phân giải cao và sẵn sàng sử dụng ngay bây giờ
Bài Báo TrướC

Giao diện người dùng và người dùng: Tại sao sự khác biệt lại quan trọng
ĐiềU TiếP Theo

ĐÁNH GIÁ: Ứng dụng M.dot cho iPhone
ĐượC Đề Nghị BởI Chúng Tôi
Bảng dữ liệu có thể truy cập
Hơn NữA

Bảng dữ liệu có thể truy cập

Có Thể 2024
Bảng dữ liệu có thể không phải là thứ ly kỳ nhất từng được tạo ra trong HTML, nhưng chúng vẫn là một trong những thứ thường xuyên được phổ biến nhất trên web ngà...
Brian Suda về lý do tại sao hình ảnh cần phải đẹp
Hơn NữA

Brian Suda về lý do tại sao hình ảnh cần phải đẹp

Có Thể 2024
Brian uda là một người đàn ông có nhiều phần. Anh ấy inh ra ở Mỹ, học ở Anh nhưng ống và làm việc ở Iceland. Anh ấy là một chủ doanh nghiệp nghiêm túc c...
Xem một nhà thiết kế áo phông hàng đầu đang làm việc trong Illustrator
Hơn NữA

Xem một nhà thiết kế áo phông hàng đầu đang làm việc trong Illustrator

Có Thể 2024
Tại Creative Bloq, chúng tôi là những người hâm mộ lớn các thiết kế giàu trí tưởng tượng của Glenn Jone , lấy cảm hứng từ nhiều nguồn khác nhau bao gồm động vật...