Once again, I have multiple topics in this newsletter. This time they both involve ways to handle content with the goal of getting the greatest visual impact.
How to visualize
Since the commercialization of the Web in the early 1990s, online content has moved with increasing rapidity to be visually oriented.
Just consider that YouTube, Google’s video hosting service, is now ranked No.3 for traffic according to Alexa.
This shows that not only does video matter but visual presentation in general is really important: People really care about how your content looks.
If you’re looking for insight into how to visualize data, arguably one of the hardest design hurdles a Web Applications designer faces, you should read “Beautiful Visualization” (pub. O’Reilly) edited by Julie Steele and Noah Illiinsky.
Drawing on insight from an impressive roster of experts, this book covers everything from discussions of what do we mean by “beauty” through visualizing civilian air traffic, to visualizing autopsies.
This book is not only useful in developing your understanding of how to think about the nature of visualizations as well as how to develop visualization strategies, it’s also enormously practical as it includes code examples that implement many of the visualizations discussed.
How to Present
One thing I really dislike on many Web sites is content that doesn’t just drop “below the fold” (i.e. extend beyond the bottom of the screen), it goes on and on and on … making the content three, four, or more pages long.
While there are a few situations where this tactic is justifiable in most cases the endless page just illustrates poor architecting of the content narrative. Now some of you might think I’m arguing for a dumbing down of content into bite-sized chunks to make them easily digested for the notoriously short attention span of the average Web user but that’s not the case.
The reality is that as most content contains many hyperlinks, to maintain a narrative requires that you manage the flow of the user’s attention making navigation and telling the story complementary rather than antagonistic.
A technique that lends itself beautifully to many types of content is the “accordion” technique where content that can be logically broken up into chunks presented in as multiple sliding panes.
Adobe’s Dreamweaver offers one of its Spry tools, the Accordion Widget, that does just that; it creates content that in a folded, almost book-like, organization.
While the Adobe Dreamweaver tool is very good I’ve just found a much slicker version of the same idea: SlideDeck published by digital telepathy.
SlideDeck is based upon the jQuery library I wrote about a few weeks ago, and creates both horizontally and vertically sliding presentations that can display text and or images.
SlideDeck is SEO friendly because it is based on JavaScript and therefore “indexable”, content can be autoplayed, it can be customized using CSS, it is “skinable”, the paid-for version can be unbranded, touch interaction is support making it compatible with rendering on iPhone, iPad, and Android devices, it includes APIs for slide control which includes support for call backs for customization, is designed for WordPress integration, RSS feeds can be presented, and slides support background images.
There are both free and charged-for versions of SlideDeck that supports both WordPress and JavaScript with the Pro version currently priced at $99.
This is a very cool tool and my only complaint is that it could use more documentation … in common with many similar tools it requires you to tease apart the CSS to figure out what controls what – a small amount of commenting would save hours of work.
That said, I think this is an incredibly useful tool and one that I will most likely be using in future projects.
