As a follow up to my post last year “A Financial Web Designer’s Toolkit” I thought it was time to revisit some of the tools that our team here have used or shared recently. When it comes to information design and building such things as Secure Web Portals and Tools for Fund Manager websites, we use a whole host of web technologies to make products that not only function well, but also look awesome.
DataTables is a powerful plugin for jQuery and is great for taking control of large amounts of table data. Amongst other features, it gives you pagination and column header control, plus it can integrate with jQuery UI themes and even Twitter Bootstrap.
FooTable solves the issue tables have when it comes to displaying on mobile devices, by letting you choose “breakpoints” based on device widths. It also comes with features like sorting and filtering.
Filtering & Sorting
Isotope uses CSS transitions, transforms and jQuery to create a beautiful user experience when sorting or filtering items on a web page. There are loads of configuration options that can be used to work with functions like infinite scrolling and URL hash history.
MixItUp is a “jQuery plugin that provides beautiful animated filtering and sorting of categorized and ordered content”. It’s ideal for using with responsive/fluid layouts and has some cool configuration options.
16. Pines Notify
jNotify is a really easy-to-implement plugin to display messages or information (such as success or failure), that can be skinned via CSS. Truly awesome information design means taking your dialog boxes and other notifications seriously!
Holler uses Node.js to display notifications in real-time to web or mobile apps.
FitText is a awesome plugin that resizes text to fit certain areas. If you have a responsive or fluid web app, this can help maximize the info design impact for specific areas of type on a page. (See also #25 BigText, further below.)
BigText is a jQuery plugin that “calculates the font-size and word-spacing needed to match a line of text to a specific width.” See this thorough FitText comparison by BigText creator Zach Leatherman.