alogo

Single Page Web Design:Luminato Festival

For the past few months theOpenSourcery has been emphasizing web tools that expedite info-intensive SPD-Single Page Designs. These tools include jQuery based routines that expedite layouts of grids/tables of images and and HTML blocks but also CSS powered layouts as well. For example, see the following reviews:
Isotope.js for Grid Widget Sizzle – shows power of filtering & sorting grid element
Gridly.js: More Portfolio Layout Options – illustrate multi-sized image control
Masonry.js: Portfolio Layout – another exmaple of multi-image display with captioning and links
FancyBox 2- Versatile Media Display – used with other grids for popup image & HTML block display
Simple Tabs in jQuery – Tabs and accordions are vital part of Single Page Design
Abandonment of Styling Options in HTML5 – TABLE tag is still very versatile in layouts too.
However, despite these many code examples there has been no comprehensive sample of Single Page Design. Well that changes now.

Luminato Festival Website

Luminato is an annual Spring Festival of the Arts in Toronto. There are dozens of venues, shows, and exhibitios all over downtown Toronto both free and for a fee,. the Problem for the week long Luminato Festival is to figure out what, when and where . Yes the local ewspapers certainly feature some of their favorite choices but a comprehensive guide  to whats up has been lacking. No more:
uitabsluminnato
This looks like the work of the jQuery Easy Tab routine or maybe the Dynamic Tab.  Whatever the case, the use of the the big Day of the week +  Number in the tab header is brilliant. The body of the tab then descends revealing the day’s hourly schedule for each of the Luminato locations. Each entry is also a link to a full page description of the Luminato event often with an associated image slider.

Keeping the tab header in a sticky position at the top of the screen is a polyfill.js routine. Now just below this massive controlling tab menu is a Masonry-like grid layout:
uimasonryluminato
This layout, just below the tab shows, provides capsule  details of the day’s events. Click on any of these event panels and again users are ushered to a detail page. And the masonry contents change depending on which day tab is currently clicked on.The masonry grid itself  was replaced by a slider or a grid list depending on whether users had clicked on the Grid or List option as seen below:
uisliderluminato
As can be seen in the screenshot above, the slider is sophisticated with left sidebar-like captioning and a autoplay mode of operation. However, the Listview display of event data was also nicely done:
uilistviewluminato
This is where to find a quick overview of an event and its cost. Even better, all of the navigational tools are responsive, resizing to meet various smartphone, tablet or PC screen sizes. In short, mobile users are well served at Luminato Festival website.

Summary

The Luminato website is a dramatic example of how a Single Page Design for primary navigation on a big event site can be made to work very well. Toronto’s Now Magazine, the city’s free Art & Events newspaper, has plenty of experience with showing the schedule of daily and weekly events around town – see how well they cope with the task. Kudos to the Luminato website developers for a tour de force Single Page Navigation Center Design.

 

Pin It on Pinterest