WebVisions 2008 in review: Part two
Friday, May 23, 2008
This is a continuation of WebVisions 2008 in review: Part one.
On Thursday and Friday, May 22-23, I attended the WebVisions 2008 conference at the Oregon Convention Center in Portland. Below is a quick overview (or: potentially understandable scrawling connected by lots of ellipses) of all five sessions I attended on Friday, with links. Many of the slides from these sessions and others are available at SlideShare.
Going Fast on the Slow Mobile Web – Jason Grigsby
(9:00 am to 10:15 am | session details)
There are 3.38 billion mobile devices in the world. This compares to the 1.58 billion TVs, 1.48 billion credit cards, 1.38 billion telephones, 0.98 billion PCs, and 0.88 billion cars. It’s the largest mass media/market in the world: “the mother of all markets.” In 2007, SMS revenue exceeded the movie, music, and video game industries combined. From the early 1990s of Gopher to Mosaic . . . and from WAP to the iPhone (the Mosaic of the mobile web). “It’s about usage. Not units.” That’s why there are iPhone-optimized web services despite the relatively low number of units (1% market share). We’ve left web optimization behind with broadband penetration . . . we’ve become bandwidth gluttons. Since 2003, web page size has tripled and the number of objects has doubled. Since 1996, web page size is 22x and the number of objects is 21x. Human factors research shows that: 0.1 seconds is viewed as instantaneous, 1.0 seconds allows users to move freely, and 10.0 seconds is the limit of being able to retain focus on a task. Web speed = perception . . . the usability, quality, service, and credibility of an organization is impacted (i.e., your brand is being damaged by a slow-loading site).
Yahoo’s 80/20 rule . . . the biggest impacts on a website’s performance are those things that are handled after the HTML document is loaded. Yahoo’s 13 Performance Rules (now 34!) include: make fewer HTTP requests, put stylesheets at the top and move scripts to the bottom. Also use GZIP compression; it can reduce download time by up to 75%. GZIP works on HTML, CSS, JavaScript, XML and JSON files. In the HTTP header you can add a GZIP line . . . server modules GZIPing files on the fly for client delivery. Make fewer HTTP requests because you only get two concurrent connections per domain in most browsers (which is why multiple domains/subdomains are used to load supporting CSS/image/scripts for a given site). The many(!) mobile browsers do not have documentation as to the number of allowed HTTP requests, but Jason has created a Mobile Browser Concurrency Test. Results: On mobiles, GZIP support is better than expected and caching support is much less than expected. For CSS support, use CSS sprites (“sliding doors”-type techniques). Inline images . . . you can use base64 code right in the image tag. Make sure to add an Expires header dated in the distant future. Also see YSlow Firebug add-on from Yahoo.
Jason mentioned the Mobile Portland Users Group. Jason’s websites are Cloudfour.com, Userfirstweb.com and Cloudfour.com/blog. Slides for this presentation are on SlideShare.
CSS Transformation – Christopher Schmitt
(10:30 am to 11:45 am | session details)
Christopher Schmitt is the author of CSS Cookbook. The limits to design are your experience, your tools and your browser. Semantic markup: “The radical notion of using the appropriate tag for the appropriate content.” There are 91 HTML elements (see W3.org site). He recommends using “CSS Reset” . . . don’t rely on browser default behavior (see Yahoo! UI Library: Reset CSS and Eric Meyer’s Reset CSS).
The project of this session was to create the USA flag using only CSS (including attribute selectors) and ordered list markup. Em-based layout has its benefits . . . every element scales up proportionally. For em-based sites, see Dan Cederholm, author of Bulletproof Web Design, who runs SimpleBits. “Default size in all browsers is 16 pixels.” Multiply font-size in body by 62.5% to get 10px. Also see Mark Newhouse and A List Apart (a favorite of mine) . . . putting Unicode characters into Web pages . . . auto-generated content.
Christopher is planning to publish his “how to create an American flag with CSS” tutorial on July 4. Look for it at ChristopherSchmitt.com.
The Web is Dead – Roger Black
(1:15 pm to 2:30 pm | session details)
Roger immediately denied the title of his presentation. He clarified: The old concept that the web has to be done a certain way is pretty much gone. The current/old web is about links (hypertext markup language) . . . but HTML creates a dangerous behavioral form (ADHD, excessive multitasking). Now clients are challenging the browser (Flash & Silverlight, video, widgets). YouTube is the best example; it’s primarily about video and not HTML. “There’s still religious objection to Flash in the HTML community.” But it has calmed down. People are regularly using it for interface design now. Roger told the crowd to check washingtontimes.com on Monday; there will be a new Flash component in the header.
The trends: search (Google is god); community; social networking; blogs, citizen journalism (millions of mommy blogs); aggregated content; and rich media. Old model: One (publisher/producer/author) to many (reader/viewer). New model: Many (user/producer) to many (user/producer). Mentioned Houston Chronicle‘s web presence as a newspaper that’s doing a good job. Multiple targets (publisher/producer/author to magazine, newsletter, website, RSS, newspaper, MySpace, Facebook, Twitter, radio, video, TV, podcasting, etc.) . . . then the flow is reversed: Subscribers to the new portal. Aggregators he mentioned: Popurls, iGoogle, Yelp, NetVibes (a graphical aggregator).
Narratives: How do you tell a story? How can the narrative form be told most effectively within the context of the Web? Example of WPF (Windows Presentation Foundation) in use: New York Times Reader. With WPF, the presentation layer of Windows could be its own object that could be “floated” off of Vista and scaled to mobile, Mac, Linux, etc. A multi-platform rich-media environment . . . like Adobe AIR. Click on “First Look” at the bottom of nytimes.com to access the Reader. The Reader has dynamically sizable windows . . . uses cleartype anti-aliasing. Microsoft abandoned WPF as a portable application. Silverlight has recently replaced WPF as the New York Times Reader. Fonts: Fitting to the grid (still look good at small text sizes) . . . typeface is very important. Implementation of Adobe AIR for a runtime environment. Example multimedia web magazines: Indigo, a digital magazine (in Spanish) and Flyp Media. Next for the web: live content, inline discussion, user design (design by users) and fix fonts. Font resources: Typophile, Typographica, Font Bureau. Also see rogerblack.com.
What You Need to Know About IE8 and Standards – Aaron Gustafson
(2:45 pm to 4:00 pm | session details)
This was a great in-depth presentation about how the team behind Internet Explorer 8 has almost fixed all of the annoying things that didn’t work in previous versions (or will have fixed them by the beta launch). Aaron also brought the audience through a brief history of Internet Explorer and how we got here. The bottom line: IE8 has been completely rewritten; it will conform to standards and will be CSS 2.1 compliant. A few key points: hasLayout is dead, object fallbacks work now, style is mostly available via DOM, list-style-type and white-space have been completed, background-position and table styles have been fixed, and you can choose between the content (W3C) or border (IE) box model. There are many other IE8 fixes and additions, including the very interesting version targeting. Complete slides are available at slideshare.net/AaronGustafson.
Overcoming Chaos: Designing the Future Web – Jeffrey Veen
(4:15 pm to 5:30 pm | session details)
Jeffrey focuses on data visualization and interface design. He’s interested in putting data into context (vs. data decoration). Author Steve Krug says: “Don’t make me think.” History lesson: Charles Joseph Minard created the classic thematic map model used to describe historical scenarios. A huge quantity of data can be related visually, such as with Napoleon’s disastrous Russian campaign of 1812. One random factoid that interested me: Napoleon lost 23,000 troops at the Berezina River . . . Berezina now means catastrophe in French.
Examples and selected mentions: Unnecessary data decoration using 3D woodgrain-textured charts, titled “Percentage of chart that is gratuitous” . . . The MegaPenny Project puts size into context . . . artist Chris Jordon does the same with objects/garbage of mass consumption. The idea is to make meaning from (abstract) statistics . . . add visual meaning to data to make it more usable and accessible. Starting with data visualization and moving into data interaction design . . . let users be part of the story; giving people the powerful tools to make their own visualization . . . Stamen Design . . . MeasureMap (blogging analytics tools) and Google Analytics (turn static reports into more of a narrative). Jeffrey led the team that redesigned Google Analytics last year . . . Post-it notes of ideas stuck everywhere during the process . . . he said the new Google Analytics chart style was inspired by the dotted flight path of Indiana Jones’s plane in Raiders of the Lost Ark). “Math is easy. Design is hard.” The goal is providing solutions for needs . . . solving problems/frustrations . . . allowing people to participate in the data. Book plug: Mental Models by Indi Young (nice cover design).
Jeffrey shared the following quote from a young Steve Jobs:
When you start looking at a problem and it seems really simple with all these simple solutions, you don’t really understand the complexity of the problem. And your solutions are way too oversimplified, and they don’t work. Then you get into the problem, and you see it’s really complicated. And you come up with all these convoluted solutions. That’s sort of the middle, and that’s where most people stop, and the solutions tend to work for a while. But the really great person will keep on going and find the key, underlying principle of the problem, and come up with a beautiful elegant solution that works.
—Steve Jobs, 1984
Overall, this was a great presentation and a perfect way to end the conference. The slides for this keynote presentation can be downloaded at veen.com/data-design.pdf. Jeffrey made a point to mention that he used Gotham font in his slides (as does the 9/11 Memorial and the current Obama campaign).