50 công cụ thiết kế web đáp ứng hữu ích cho các nhà thiết kế
Trong vài ngày qua, chúng tôi đã cho bạn thấy một số chủ đề đáp ứng WordPress và Joomla tốt nhất mà bạn có thể tải xuống và sử dụng trên trang web của mình. Hôm nay, chúng tôi sẽ cung cấp cho bạn công cụ. Bao gồm các khung, dịch vụ và tập lệnh tải xuống, chúng tôi nghĩ rằng chúng sẽ giúp ích rất nhiều khi phát triển web đáp ứng.
Để dễ dàng đi xuống toàn bộ danh sách các công cụ, chúng tôi đã phân loại chúng thành các phần sau:
- Lưới & Khung
- Bảng vẽ phác thảo & khung lưới
- Các plugin JavaScript & jQuery
- Kiểm tra & Xem trước
- Thanh trượt
- Khác
Lưới & Khung
[Trở lại đầu trang]
Cột
Cột là một dự án Pulp + Pixels, đã được mượn từ cssgrid.net trong khi một số nguồn cảm hứng mã đã được lấy từ 960.gs. Cột giúp bạn rất nhiều trong thiết kế web đáp ứng của bạn, bằng cách làm cho lưới của bạn linh hoạt để thay đổi linh hoạt khi cửa sổ trình duyệt được thay đổi kích thước.
Bộ xương
Skeleton là một khung CSS đơn giản và mạnh mẽ, chủ yếu được các nhà phát triển và thiết kế yêu thích vì tính đơn giản và hiệu quả của nó. Không có gì nặng nề với Javascript ở đây, chỉ có CSS tốt và thuần túy với tài liệu sạch.
Bài tập 4
Ít khung hơn ít nhiều là một khung, nhân danh người tạo ra nó. Đây là một hệ thống lưới CSS thích ứng dựa trên việc sử dụng các truy vấn phương tiện CSS nội tuyến, giúp cho việc phát triển các trang web đáp ứng dễ dàng hơn nhiều.
Hệ thống lưới ngữ nghĩa
Semantic Grid System được sử dụng để thiết kế bố trí lưới đáp ứng. Nó sử dụng các phần mở rộng CSS được xử lý trước như LESS, SCSS hoặc Stylus để mang lại hiệu quả tối đa. Bạn có thể chọn độ rộng cột và máng xối, chọn số lượng cột và chuyển đổi giữa pixel và tỷ lệ phần trăm.
Hệ thống lưới vàng
Golden Grid System là một hệ thống lưới chất lỏng, đóng vai trò là điểm khởi đầu của thiết kế web đáp ứng của bạn. Nó cho phép trang web phục vụ các trang đẹp mắt từ 240 đến 2560px.
320 trở lên
320 và Up là một bản tóm tắt truy vấn phương tiện CSS, được dùng làm mẫu khởi đầu cho thiết kế đáp ứng của bạn. Nó tuân theo một cách tiếp cận hoàn toàn ngược lại so với một số mẫu nồi hơi khác có sẵn.
Inuit.css
Inuit.css là một khung CSS, cực kỳ dễ sử dụng, ngay cả đối với người mới. Nó có một cách tiếp cận tối giản, do đó bạn chỉ cần xử lý những thứ cần thiết, nhưng nếu cần, nó cũng có thể được mở rộng với một số bổ sung có sẵn.
Không lưới
Gridless là một bản tóm tắt để tạo các trang web đáp ứng và trình duyệt chéo với kiểu chữ đẹp. Công cụ này tập trung vào sự phát triển tiến bộ của một dự án và nó đóng vai trò là điểm khởi đầu của bất kỳ thiết kế nào.
Lưới CSS 1140
Lưới CSS 1140 là một hệ thống lưới CSS tuyệt vời được thiết kế bởi nhà thiết kế Melbourne, Andy Taylor, cho phép thiết kế của bạn phù hợp hoàn hảo ở mức 1140px cho màn hình lớn và bố cục chất lỏng của bạn sẽ thích ứng liền mạch với các độ phân giải nhỏ hơn khác với rất ít công việc phụ.
1KBCSSGrid
Lưới CSS 1KB được thiết kế bởi Tyler Tate, là một trình tạo CSS Grid đơn giản và nhẹ. Nó sẽ cho phép bạn đặt số lượng cột, chiều rộng cột và chiều rộng máng xối và bạn có thể nhận được CSS có thể tải xuống cho lưới trang web của mình.
Bootstrap
Bootstrap, được tạo và duy trì, bởi Mark Otto và Jacob Thornton tại Twitter, là một bộ tuyệt vời các yếu tố giao diện người dùng, bố cục và công cụ javascript, có sẵn miễn phí để bạn tải xuống và sử dụng trong các dự án thiết kế web của bạn.
Máy tính lưới chất lỏng
Công cụ đơn giản này sẽ giúp bạn nhanh chóng lấy CSS của thiết kế trang web lưới chất lỏng của bạn.
Lưới chất lỏng
Fluid Grid là một khung lưới chất lỏng đơn giản nhưng hữu ích, tạo ra các bố cục đáp ứng dựa trên 6, 7, 8, 9, 10, 12 hoặc 16 cột.
Flurid
Flurid là một khung lưới CSS trình duyệt chéo đơn giản và rất hữu ích với tối đa 16 cột. Và hơn nữa, nó không ẩn pixel vào lề.
Lưới
Gridset là một công cụ để tạo các lưới thuộc bất kỳ loại nào, chẳng hạn như, cột, không đối xứng, cố định, tỷ lệ, hợp chất, đáp ứng và nhiều hơn nữa. Công cụ này của Mark Boulton, vẫn đang trong giai đoạn thử nghiệm, nhưng chứng tỏ là đầy hứa hẹn. Và tôi đã đề cập, sử dụng nó đơn giản như nhúng một liên kết.
Lưới
Gridpak là một trình tạo lưới đáp ứng trực tuyến, trong đó số lượng cột, phần đệm và máng xối có thể được thay đổi và có thể thêm các điểm dừng tùy chỉnh. CSS được tạo bởi công cụ và sẵn sàng để tải xuống. Nó cũng cung cấp các mẫu lưới PNG, có thể được sử dụng cho các mục đích thiết kế trong Photoshop.
Đơn giản
SimpleGrid, được phát triển bởi Michael Kuhn, là một khung CSS rất đơn giản và dễ hiểu để tạo bố cục dựa trên lưới vô hạn. Theo mặc định, SimpleGrid được chuẩn bị cho 4 phạm vi kích thước màn hình khác nhau.
Bẩn
Susy của Oddbird, hoạt động tương tự như Hệ thống lưới ngữ nghĩa. Nó không sử dụng đánh dấu thêm hoặc bất kỳ lớp đặc biệt nào khác, mà chỉ nhắm đến người dùng Saas và La bàn mở rộng của nó.
Lưới chất lỏng nhỏ
Tiny Fluid Grid là một ứng dụng web tuyệt vời, có thể giúp bạn xác định hệ thống lưới của trang web của bạn theo cách tương tác. Bạn có thể đặt số lượng cột, tỷ lệ phần trăm máng xối, chiều rộng tối thiểu và tối đa của bố cục trang web của bạn và có thể lấy CSS có thể tải xuống cho nó.
Hệ thống lưới biến
Hệ thống lưới biến được SprySoft thiết kế và phát triển và dựa trên Hệ thống lưới 960. Nó cho phép các nhà phát triển và thiết kế tạo lưới tùy chỉnh và sau đó tải xuống tệp CSS đi kèm dựa trên lưới đó.
Bảng vẽ phác thảo & khung lưới
[Trở lại đầu trang]
Thiết kế Web Responsive
Công cụ này hữu ích trong việc vạch ra các vị trí của các yếu tố khác nhau trong bố cục trang web của bạn trên các thiết bị khác nhau. Với sự trợ giúp của thiết bị này, bạn có thể hình thành ý tưởng về nơi đặt các yếu tố cần thiết của trang web cho các kích thước và độ phân giải màn hình khác nhau.
Dây điện đáp ứng
Responsive Wireframes là một công cụ thử nghiệm được tạo bởi James Meller của Adobe. Nó được xây dựng chỉ với HTML và CSS (không sử dụng hình ảnh hoặc JS) mà bạn có thể sử dụng để hình dung thiết kế phản hồi của mình trông như thế nào trên các trình duyệt thực tế của nhiều máy tính để bàn và thiết bị di động.
StyleTiles
Style Tiles cung cấp cho bạn một cách để phát triển ý tưởng về một trang web sẽ trông như thế nào, độc lập với các phong cách phức tạp xuất hiện. Nó mang đến cho bạn cơ hội cho một quy trình thiết kế đáp ứng hoàn hảo và cả khả năng tích hợp phản hồi của khách hàng.
Các plugin JavaScript & jQuery
[Trở lại đầu trang]
Thích ứng.
Adapt.js là một giải pháp Javascript và là một giải pháp thay thế tuyệt vời cho các truy vấn phương tiện CSS. Sử dụng phương pháp @media là một cách làm tốt, nhưng điều này không hiệu quả với tất cả các trình duyệt. Nathan Smith, người tạo ra Hệ thống lưới 960, đã phát hành Adapt.js, một thư viện javascript rất nhẹ để khắc phục vấn đề này.
Đồng vị
Isotope là một plugin jQuery tuyệt vời, chứng tỏ nó rất hữu ích trong khi thiết kế một thiết kế đáp ứng. Nó không chỉ giúp sắp xếp lại các thành phần của trang khi cửa sổ trình duyệt được thay đổi kích thước hoặc kích thước màn hình nhỏ hơn mà còn giúp lọc các thành phần đó.
HTĐ
Masonry là một plugin jQuery tuyệt vời, được sử dụng để tạo bố cục năng động và thích ứng. Plugin này giúp sắp xếp lại các yếu tố trong thiết kế đáp ứng của bạn, để chúng có thể phù hợp hơn trong các điểm mở trên lưới.
Đáp ứng
Respond.js là tập lệnh nhanh và nhẹ (3 Kb rút gọn và 1 Kb được nén), mục đích chính của nó là cho phép thiết kế web đáp ứng trong những ứng dụng không hỗ trợ CSS Queries Media, như trình duyệt IE.
TinyNav.js
TinyNav.js là một plugin jQuery nhỏ và nhẹ, chỉ có 362 byte, chuyển đổi danh sách điều hướng lớn thành các menu thả xuống nhỏ cho màn hình nhỏ hơn.
Plugin Wookmark jQuery
Wookmark là một plugin jQuery phát hiện kích thước cửa sổ trình duyệt và tự động sắp xếp các thành phần của trang thành các cột. Bạn cũng có thể xem bản xem trước trực tiếp ở cuối trang.
Kiểm tra & Xem trước
[Trở lại đầu trang]
ProtoFluid
ProtoFluid là một công cụ tạo mẫu dựa trên web cho phép bạn kiểm tra các nguyên mẫu trang web của mình ở các kích cỡ và độ phân giải màn hình khác nhau. Chỉ cần nhập URL, chọn thiết bị (hoặc bất kỳ kích thước tùy chỉnh nào) và nhấn khởi chạy. Vì nó là một công cụ dựa trên web, nó cũng cho phép bạn sử dụng các tiện ích mở rộng khác như FireBug.
Responsive.Is
Responsive.Is được tạo bởi TypeCast một công cụ giả lập trình duyệt khác, mà bạn có thể sử dụng để kiểm tra thiết kế đáp ứng của mình. Chỉ cần nhập URL và nó sẽ tự động thay đổi kích thước tùy thuộc vào thiết bị bạn chọn.
Responsivepx.Com
ResponsivePx là một công cụ tuyệt vời để kiểm tra thiết kế trang web đáp ứng của bạn. Tính năng chính giúp phân biệt nó với các tính năng khác là khả năng thay đổi kích thước pixel của từng trang web. Tính năng tuyệt vời này, sẽ cho phép bạn xác định các điểm dừng và cũng kiểm tra cách các truy vấn phương tiện CSS đang hoạt động trong trang web của bạn.
Công cụ kiểm tra thiết kế Web Responsive
Một công cụ kiểm tra tuyệt vời, có thể cho phép bạn xem trang web phản hồi của mình ở nhiều kích thước màn hình khác nhau trong một màn hình, trong khi bạn xây dựng hoặc thiết kế chúng. Tôi thích công cụ này chủ yếu vì nó hiển thị tất cả các độ phân giải màn hình cạnh nhau giúp cho việc gỡ lỗi dễ dàng hơn.
ReView.Js
ReView là một hệ thống khung nhìn động, được phát triển bằng JavaScript thuần, mang đến cho bạn trải nghiệm xem tuyệt vời cho thiết kế Web đáp ứng của bạn.
Màn hình
Screenfly của QuirkTools, là một công cụ tuyệt vời cho phép bạn xem trang web phản hồi của mình trong nhiều thiết bị: Máy tính để bàn, Máy tính bảng, Điện thoại di động và TV. Nó cũng có các tùy chọn để bật hoặc tắt cuộn hoặc thậm chí để xoay màn hình.
Screenqueri.es
Screenqueri.es là một công cụ kiểm tra thiết kế đáp ứng hoàn hảo pixel. Chỉ cần nhập bất kỳ địa chỉ trang web nào bạn muốn kiểm tra và công cụ này thực hiện sẽ hiển thị trang web ở các kích cỡ màn hình khác nhau tùy theo thiết bị. Bạn cũng có thể thay đổi kích thước pixel theo pixel theo cách thủ công để xác định các điểm dừng.
Người phản hồi
Kiểm tra trang web của bạn trên nhiều thiết bị khác nhau từ iPhone và iPad, cho đến Kindle và trên Android trên Responsinator. Nó cũng hiển thị trang web của bạn cả ở chế độ dọc và ngang. Tôi thích công cụ này hơn nhiều vì các phác thảo của các thiết bị được hiển thị trên trang, điều này mang lại nhiều ý nghĩa hơn cho toàn bộ quá trình.
Thanh trượt
[Trở lại đầu trang]
Quả việt quất
Blueberry là một thanh trượt hình ảnh jQuery mã nguồn mở tuyệt vời, được viết để hoạt động cụ thể cho các bố cục chất lỏng hoặc đáp ứng.
Elastislide
Muốn một băng chuyền sẽ tự động điều chỉnh kích thước màn hình khi cửa sổ trình duyệt được thay đổi kích thước hoặc khi bạn ở màn hình nhỏ hơn? Elastislide là plugin jQuery phù hợp nhất cho nhu cầu của bạn.
Thanh trượt CSS3 đáp ứng
Đây là một thanh trượt CSS3 đáp ứng thuần túy có thể thích ứng với mọi kích thước màn hình và độ phân giải màn hình một cách dễ dàng. Điều hay ho của thanh trượt này là, các mũi tên đi vào bên trong hộp khi kích thước màn hình thiết bị đủ nhỏ. Không cần JavaScript.
ResponsiveSlides.Js
ResponsiveSlides.Js là một plugin jQuery rất đơn giản và cực kỳ nhẹ (chỉ 1Kb), tạo ra một thanh trượt đáp ứng bằng cách sử dụng danh sách không có thứ tự. Nó hoạt động trên nhiều trình duyệt, cũng như trên IE6 trở lên.
Khác
[Trở lại đầu trang]
Hình ảnh thích ứng
Thích ứng hình ảnh là một công cụ trực tuyến để thiết kế web đáp ứng, phát hiện kích thước màn hình của khách truy cập và tạo, lưu trữ và cung cấp hình ảnh được định cỡ lại, dựa trên kích thước và độ phân giải màn hình.
FitText.Js
FitText.js là một công cụ javascript nhỏ, cho phép tự động thay đổi kích thước văn bản và tiêu đề khi cửa sổ trình duyệt được thay đổi kích thước. Không còn lo lắng về sự không phù hợp kích thước văn bản với công cụ này trên tàu.
FitVid.Js
Bạn muốn chỉnh lại các video được nhúng khi cửa sổ trình duyệt được thay đổi kích thước hoặc thiết bị có độ phân giải nhỏ hơn? FitVid.Js có thể giúp bạn đạt được điều này. Đây là một plugin jQuery nhẹ, đơn giản, dễ sử dụng được sử dụng để đạt được các video nhúng chiều rộng chất lỏng.
Hình ảnh võng mạc
Retina Images là một giải pháp javascript tuyệt vời, sẽ tự động phục vụ hình ảnh độ phân giải cao lớn hơn @ 2X khi xem trên màn hình retina. Tất cả những gì bạn cần làm là đặt một phiên bản có độ phân giải cao của từng hình ảnh và nó sẽ quản lý phần còn lại.
Dàn ảnh đáp ứng liền mạch
Dàn ảnh đáp ứng liền mạch hiển thị hình ảnh từ trên xuống dưới trên trình duyệt, không có bất kỳ khoảng trống nào giữa các hình ảnh. Các bức ảnh được lát gạch và chúng chảy từ trái sang phải trong suốt trang theo cột. Số lượng cột điều chỉnh tương ứng khi cửa sổ trình duyệt được thay đổi kích thước.
SlabText
SlabText là một plugin hoặc công cụ jQuery của Brian McAllister dựa trên thuật toán slabText, phân tách các tiêu đề thành các hàng trước khi thay đổi kích thước mỗi hàng để lấp đầy không gian có sẵn. Nó khá giống với plugin FitText.Js đang hoạt động.
Zurb - ResponsiveTables
Bạn đã bao giờ tự hỏi làm thế nào để đối phó với các bảng dữ liệu lớn trong thiết kế đáp ứng? Zurb, một kết hợp CSS / JS cung cấp cho bạn câu trả lời; nó lấy các bảng dữ liệu và sửa đổi chúng để chúng không phá vỡ bố cục phản hồi trên các thiết bị màn hình nhỏ hơn.
Thể loại
Cargetorizr là một tập lệnh PHP rất nhỏ, cung cấp cho khách truy cập của bạn trải nghiệm web được nhắm mục tiêu nhiều hơn. Nó sẽ giúp bạn cung cấp các thiết kế dành riêng cho thiết bị cho Máy tính bảng, TV, Di động hoặc Máy tính để bàn.
Bookmarklet truy vấn phương tiện truyền thông
Bookmarklet truy vấn phương tiện cho bạn thấy kích thước khung nhìn hiện tại có kích thước nào và truy vấn phương tiện nào vừa được kích hoạt cho nó.
Máy tính đáp ứng
Responsive Calculator là một công cụ trực tuyến rất đơn giản có thể giúp bạn biến pixel thành tỷ lệ phần trăm trong khi thiết kế trang web đáp ứng của bạn.
Lên tuần sau
Trong tuần thứ hai của loạt bài này, chúng tôi sẽ giới thiệu cho bạn các hướng dẫn thực sự sẽ đưa bạn vào Thiết kế web đáp ứng (RWD).
Đừng bỏ lỡ nó.
