Thinking » Topics » Designing for the Web Canvas
As a blogger, I’ve spent a lot of time telling stories. Joining Oomph has given me the chance to help other people tell theirs. In today’s world of data abundance and sensory overload, though, it can be difficult to break through the distortion and noise. Data visualization is one way we are able to cut through the chaos and present purpose and order to our narrative. It gives voice to otherwise emotionless statistics and data.
Recently, I had the pleasure of attending OpenVis Conf, a data visualization conference brought to us from the folks at Bocoup. The speakers came from all over the world to give talks on data vis and their experiences. Three of those talks really stood out for me.
- The closing keynote given by Juan Velasco (blog) from National Geographic tops my list. National Geographic has been a pioneer in early data visualization since their very first issue in 1888. Velasco is the art director for the magazine, overseeing the visuals and art for the print and digital editions. The biggest take away from this keynote was the need to keep things simple but, he said, doing so is by no means a simple effort. He and his staff go to great lengths researching and executing the most factually accurate visuals to put in the magazine. Months of research can go into a single image or photograph. As an example, the team scanned every bone in a cheetah’s skeleton to get the most accurate 3-D rendering to date for a piece called “The Anatomy of Speed,” picture above.
- Miguel Rios of Twitter gave a more technical talk sharing his insight into the different rendering APIs commonly used for data visualization, including SVG, Canvas and WebGL. He had some very helpful advice on the advantages and disadvantages of each. Rios open-sourced his presentation and posted it to Github for anyone to fork.
- The final talk that really captivated me was given by Kim Rees of Periscopic. She started her presentation with a quote: “A single death is a tragedy. A million deaths is a statistic.” It’s a very powerful statement and one that holds especially true when dealing with large amounts of aggregated data as many do when dealing with data visualization. After the Newtown tragedy, her team responded with the visualization at guns.periscopic.com. It’s an interactive graph displaying the number of deaths from gun violence in a given year and the total number of life years stolen. The projected lifetime of each victim and natural cause of death was based on statistical analysis of the data available for each person including age, race and location. The point of this and her talk was to remind us that these statistics are people and we need to keep emotion in the stories we tell with our data and visuals.
I gained a great deal of insight from this conference and look forward to telling better stories because of what I have learned—and helping others do the same.
It is not often that web designers have to accommodate browsers that are considered “best of breed”. Maybe we are snobby when most of us design for Safari or Firefox and then “fix” things in other browsers, but, everyone has their preferred way of working. Internet Explorer is usually stricter in its interpretations of CSS, which makes some use it as a standard and other wince , but I digress…
So it was with extra frustration that I had to investigate a rendering bug in Safari / Webkit. Granted, it was happening only on an older version, Safari 4, and Safari 5 has been out for more than a few months now. But still, when you think Safari or Firefox are better browsers, it’s a wake-up-call to realize that like any browser, they have funny bugs and issues.
Microsoft has officially released IE9 to the public, making IE6 even older! Microsoft has improved leaps and bounds since those days however, and the new IE9 is a testament to that.
Benchmarks abound; you can actually see the difference. Even on older hardware having the GPU render the canvas helps immensely. Now instead of everything loading at roughly the same speed, you can actually witness IE9 rendering the entire page, and waiting for Flash to finish! This really helps with the responsiveness and smoothness while you are browsing around, notably scrolling under low-end hardware.
CSS3 and HTML5 Support
Although it doesn’t support everything, Microsoft has really stepped up supporting a large number of these new standards. Let’s hope this continues, and help remove some of the negativity around Internet Explorer. If you’re interested in what exactly IE9 supports, head on over to Microsoft’s MSDN page.
Integrated Tracking Protection
In the world of spam, tracking, and targeted advertisement, this is a great new addtion. IE9 Includes the ability to add pre-made, managed, and custom tracking lists. This helps protect you from people attempting to track your behavior, including your searching, surfing, and buying habits. However, it cannot protect you until you set it up. It is very straight forward: just click on the Cog in the upper right, safety, tracking protection. From here click “Get a Tracking Protection List Online…” and select one (or more) lists you want to use to help protect your privacy.
Media Query Support
One of the more interesting aspects of CCS3 is Media Queries. It really adds a new layer of creativeness to the designers and how they can create a flowing, unique, and engaging website at various levels of screen size and hardware. You can read more about an actual use of these in a previous post from J.
Back in December, 2010, the owners of Garden Grille were about to soft launch a new bakery concept a few doors down from their successful vegetarian restaurant. The new cafe would feature only vegan – devoid of animal products, no honey, eggs, milk or cheese – baked goods and desserts, as well as a handful of gluten-free options. In addition to the baked goods, the cafe would offer an extensive menu of fresh pressed juices, which very few – if any – cafes offered in the area. The cafe was to be called Wildflour.
In November 2010, before the initial build-out phase was complete, Oomph sat down with the owners, Rob and Uschi, to develop a branding plan and to set goals for print and web projects. After a long winter of getting the cafe running, testing products, perfecting the menu, and gathering information for the new website, Wildflour is now poised to attract customers who are started to venture outside again after a long winter.
The site is a simple WordPress theme, and the homepage is running the NextGen gallery, which Oomph found was a pleasure to work with. Since Wildflour has an active Facebook presence, Oomph decided to feature the Activity Stream right on the home page. That way, daily specials are written once to Facebook for those users, and consequently show up on the homepage. Special areas for announcements are available in the theme, as well as a blog which the staff at Wildflour will start to flesh out with healthful tips and more information about the products featured in the cafe.
Best of all, unlike some restaurant sites, the menu is plain HTML text – no PDFs to download or Flash to load – which makes one of the most important features easy to access on mobile devices. It’s also just quicker for people who want to check out the menu right away.
So next time you think you need a healthy beverage to perk you up, or a slow-brewed pour-over coffee, or just a place to relax and indulge in a dense piece of chocolate torte, check out www.WildflourVeganBakeryCafe.com, and head on down.
Endeca is a search and business intelligence company whose focus is business on the web. When they wanted a new blog that would focus on trends and insights for eBusiness, the team at Oomph decided it was time to use CSS3′s @media declarations for responsive template designs to optimize the site for multiple mobile and desktop devices.
The result was a super flexible theme, built on WordPress, that scales according to the user’s device size. One set of templates displays content in a few different ways, optimized for the iPhone, Android, iPad and desktop monitors of all sizes. Visit the site, grab the window corner to resize it, and watch what happens. Just one catch: current versions of Internet Explorer don’t yet support CSS3 (version 9, which is right around the corner, does add support).
For the developers out there, read on for a quick run down of what we did and how it works.
As a professional web shop, our HTML / CSS developers are frequently taking a professional graphic artist’s vision of a website’s look and feel and converting it to work with this unique canvas we call a website. The graphic artists’ digital toolbox is full of powerful applications like Adobe Photoshop, that provide near total control over the final presentation, on a fixed sized canvas, down to the pixel.
There’s one big problem: the web developer’s canvas just isn’t that controlled or robust. And it’s not just that the unique characteristics of web layout or the code that defines how a web page should look lacks a good way to pull off a design element (which it does, often enough). There’s a bigger problem: several kinds of interpreters trying to understand the canvas, each with its own quirks and limitations. Welcome to to the world wide web canvas.