With the rise of popular frameworks like Bootstrap and the emergence of more HTML based apps, SPA-Single page Apps have become more prevalent on the Web. And for some Portfolio, Event, and Product sales websites, Single page applications make a lot of sense. Like so:
HTML Apps designed for mobile clients are especially inclined to go the SPA approach because multiple page transfers are minimized. However, then there some basic requirements for these Single Page Apps. First, responsive designs where shrinkable widgets ad images are paramount. Also navigation is paramount – excessive use of menus to take the user to the desired info defeats the mobile advantage. Next, Single Page Apps have to be carefull constructed so users know how to get around and don’t get get lost nor bogged down in slow response time. Finally, Single page Apps have to have sizzle that helps sell the message or product.
Enter Tabs, Accordions, and responsive Grids. I like the latter and have already featured Masonry.js and Gridly.js as two responsive grids. But two other grids, GridAccordion.js covered here and Isotope.js deserve your attention as well. Here is GridAccordion.js in action:
[iframe src=”http://theopensourcery.ca/slideshows/gridacc/crowr.html” width=”100%” height=”610″]
Grid-oriented widgets provide control functions that go way beyond menus, buttons or even tabs and accordions. First they grab the users attentions particularly when used in the autoplay mode. They have sizzle! Second, they are responsive so they “fit” on most kinds of client screens adapting responsively pretty well. Third, they are flexible in layout – adding text, links, and HTML+CSS styling with comparative ease.Finally, they allow the desiger to direct the attentio of the user to any of several links for further info or to sign up for or buy the service or product.
Here is another example of the Grid Accordion in action. Think of it as a portfolio product widget that goes beyond a tab or slider:
[iframe src=”http://theopensourcery.ca/slideshows/gridacc/cars.html” width=”100%” height=”610″]
This is like a product or portfolio embedded in context. Users looking at one item may get pulled to another; yet they can easily click for more details. Yet the Grid Accordion provides a full array of customizable features:
1)the grid has columns and rows that are dynamically resizable;
2)the grid is responsive and touch enabled;
3)the grid automatically provides pages for panels needed beyond columns * rows total. And those are swipeable as well as programmatically swappable;
4)the grid provides layers for text, images and other HTML elements so what and how a panel appears is highly controllable;
5)the resizing panels are backed by fancybox.js so users have a variety of panel click options;
6)videos can be the main content of a panel and the video panel can be programmatically controlled;
7)the grid has lazy loading and code minimization for maximum performance.
However, on the compatibility side I have found that different browsers, notably Microsoft IE and Chrome, have anomalous behavior for grid accordion’s rich UI control set – in particular mousewheel, keyboard and touch/swipe interaction. Right now Firefox and Safari browsers are the most feature complete. In defense of the developers, they have provided a steady stream of fixes since launching including one each in April and May of this year.
Summary
Grid-oriented jQuery widgets are rapidly improving. They are ideally suited for responsive Single page Application designs. But they add rich features and Grid Accordion has autoplay animation “sizzle” to attract people to your display of products or portfolios. The added benefit is a rich set of navigation options that takes users out of many menu and/or button press tedium.