Articles, Opinions & Lab - MIX Online

In Defense of CSS Grid Frameworks

Nishant Kothary — Fri, 26 Jun 2009 23:02:15 GMT

CSS grid frameworks seem to have a pretty tarnished image as far as philosophical topics in front-end web development go. One quick search will reap a plethora of blog posts and articles on the topic. If you have a limited amount of time to get caught up on the controversy, I recommend that you read this, this, this, and finally, this.

For those of us who don’t really have the time or resources to take the plunge with a framework so as to form our own opinions, we usually pick the safer option: not using a grid framework. That's pretty much the only option I've picked in the past, but it's proven to be a sub-optimal one since I always end up creating a grid or a set of grids depending on number of layout templates for the site. What's more is that these share common characteristics (such as column count, gutter width, etc.) that I eventually abstract out under semantic class names (e.g. features_sidebar, main_content, etc.); dare I say, I end up creating a framework for layout? There are a slew of problems related to maintenance and extensibility with the approach of adding layout attributes in these semantic classes, but I'll spare you the details. Suffice to say, I've marked up enough sites over the years to remain frustrated with the approach of carefully building a layout from scratch purely because it’s a matter of pride. I'm with Ranae on this one.

Some developers treat it as a matter of personal pride to carefully build every layout from scratch — even if it means they're doing the same repetitive tasks over and over again. For my part, I treat it as a matter of pride to find ways to work smarter and be home in time for dinner.

Lately, I've had the opportunity to mark up a couple of small sites using a pretty popular framework, 960.gs, and a lesser known one, 1kbgrid. They're very lightweight (well, 1kb is obviously minuscule) and do one thing and only one thing really well: grid layout. In fact, if I were ever to abstract out the layout framework for my sites, I'd probably end up with something pretty close to either of these frameworks. Needless to say, I'm quickly becoming a fan of simple, elegant frameworks like 960 and 1kb especially in light of MIX Online's future needs, and the semantic trade-offs are starting to seem well worth what we get back in maintainability, consistency and clarity. I'd argue that the "grid_4" or "column" are pretty semantic class names, and a difference of opinion there is really just, well, semantics, but let's not start a bar brawl over that just yet. Click on the screenshot below to be taken to a little one-page site I built as the front for my personal domain, Rainypixels, and then view source. The code validates and meets my acceptance bar as far as semantics are concerned. If you have a different opinion on that, I'd love to hear it.

We're going to be launching a new issue here pretty soon, and we recently made a decision to decouple our lab sites from the core MIX Online experience. Right now are labs are just individual pages within the MIX Online chrome and that presents some challenges as our labs get bigger and start warranting multi-page sites. Decoupling, however, introduces the converse problem: we now have to build a fully functional, potentially visually unique web site every time we launch a new lab, and this site needs to feel like it's a part of the MIX Online family. One way to help draw the dotted line between future labs and MIX Online is consistent layout, and nothing shouts consistent like a decent implementation of a 12 or 16-column grid. Another thing we care about is that whoever is marking up the site is using consistent, clean and cross-browser friendly layout code. After all, we all roll up our sleeves on each other's work all the time. Frameworks like 960 and 1kb give us both and take the guesswork out of the layout process (possibly the most painful part of any web development exercise fondly known as Fire-the-designer-who-came-up-with-that-ridiculous-layout).

Having said all of this, I'm still not entirely sold (most likely because of the self-induced habitual superstition on the topic). I am, however, having tremendous difficulty coming up with reasons to hold off on dissolving my irrational fear of CSS grid frameworks. Would love to hear you argue either side (as you may point out something that'll save us some major heartbreak years from now). Leave a comment, or contact us on twitter.

Creating A Tree Map Data Visualization Out of 200,000 Tweets About Iran

Karsten Januszewski — Wed, 24 Jun 2009 17:43:38 GMT

I let The Archivist (a Twitter data mining application from the Mix Online experiements) loose on the term Iran and it has run for the last five days. At this point, I now have an archive of around ~200,000 tweets about Iran. So, then, the question becomes, what to do with all that data? After all, data is only interesting if you can do something with it.

Tim came up with an idea: what if we created a tree map that showed who the top 100 people were who tweeted the most about this topic. That way, you could quickly get a sense of who the people were most active on this topic. So with some guidance from Hans (who built a tree map control for the Descry project) and an assist on my LINQ query* from Joshua, I quickly put together the following infographic (click on it to see a larger version):

So, of the 200,000 tweets about Iran, the person in the upper left has tweeted most about Iran and then the data distributes itself from there. From here, you can imagine a lot of possibilities – different pivots on the data, drilling down, etc.

We just put this together this morning – not sure where it is going but am curious to hear if people find this interesting. Let us know and be sure to follow us on Twitter for the latest updates from MIX Online.

*Here’s the LINQ query by the way – the crux being the sub select that pulls the avatar out of the grouping:

            
var items = (from tweet in tweets
            group tweet by tweet.Username into grp
            orderby grp.Count() descending
            select new TreeMapItem
            {
                Size = grp.Count(),
                Label = grp.Key,
                PanelItemType = typeof(CustomTreeMapItem),
                Tag = (from subtweet in grp 
			select subtweet).First().Image
                
            }).Take(100)
            ;

Designing a Twitter Tree-Map

Tim Aidlin — Wed, 24 Jun 2009 01:09:00 GMT

I worked with irhetoric on many applications, one of which is The Archivist – a WPF Windows Application used to archive and export searches on Twitter. He and I have been both using The Archivist to save Tweets about Iran, and the recent problems around the election there. As the use of Twitter has been advertised so heavily in the news, we thought it an interesting focus for this experiement, as we could “capture history,” as well as pull an amazing dataset of information that could be of great importance. So far, we each have over 200,000 Tweets saved in xml files.

With so much information, what could we do with it? I asked irhetoric what the possibilities were regarding how much information we could pull from this data: location? Username? Friends? Almost anything is possible.

Mix Online published the Descry Prototype back in January of this year. The project centered around data-visualization and, specifically, infographics. I thought that I might be able to contribute to this project by building some myself.

I started in Photoshop, and produced some comps:

In this first example, the idea behind increasing the size of the avatars of the users who are “most-followed” is to be able to, at a glance, see who the most “influential” people are. If someone is highly followed, it stands to reason they reach the broadest audience, therefore making sense to reach out to those users first.

Placing these avatars on a timeline, as well, you can see the more active parts of the day. We’re also considering the potential of adding a third vertical axis that would deliniate the number of Tweets a user has sent. If someone Tweets a lot, but is not very influential, that would be different than someone who was very influential and Tweets a lot. Also, someone who is very influential but doesn’t Tweet much, might just be a celebrity or high-profile user. Again, this user has very different value than one who provides lots of good information, and is very influential.

Now, all of those numbers above are totally made up … lorem ipsum, if you will. The idea, though, of placing the “hotspots” from where people are Tweeting, I thought was interesting, especially if we bind that to time, so we could see the influence of Twitter, and how it affects global communication.

I designed this bar graph to demonstrate the volume of Tweets over time. The pink graph represents the Twitter-search: “Iran” and the blue bars represent the Twitter-search: “northkorea”. Again, all data is fake here, and that’s why I needed irhetoric to help me with the data.

Irhetoric was able to take some of the code that our MIX Online team member, Hans Hugli, wrote for Descry. He took his Tweets and created a basic tree-map visualization based on the number of Tweets associated with a user. He took the top 100 Twitter users, and displayed their avatars, usernames, and number of Tweets.

I'm looking forward to developing these ideas, and hope that anyone interested in implementing these data-visualizations should absolutely feel free. We hope you'll let us know were we can find your project. Be sure to download The Archivist to download, save, and export Tweets you care about. Leave a comment below and follow us on Twitter @MIXOnline!

Designing the pdc09 Experience

Tim Aidlin — Mon, 22 Jun 2009 20:03:40 GMT

It’s June and we’ve been deep in the planning and Creative Design for the Microsoft PDC09 conference to be held in Los Angeles this November. Working with an incredible team, as the “Creative Director” for the conference, I’m intimately engaged in helping guide the aesthetic and user-experience of the conference itself.

Since 1991, the Professional Developers Conference (PDC) has been Microsoft’s premier gathering of leading-edge developers and architects. Attend the PDC to understand the future of the Microsoft platform and to exchange ideas with fellow professionals. You’ll learn about upcoming products, meet Microsoft’s leaders and top engineers, write some code, and be inspired! Unplug for a few days and think about the future.

I’ve worked for Microsoft for years, but also have deep experience on the Agency side, working for clients on projects similar to this … user-research, creative exploration, styleguide, website wireframes, visual comps, markup. But now I find myself on the client-side, sometimes having to force myself to quell the desire to “just get in there and do it myself.”

We’ve engaged the Creative Agency, WorkTank, to help with the creation of the styleguide, website architecture, and front-end build, as well as producing all the necessary marketing and collateral materials to help support the conference and the conference attendees.

In this and forthcoming series of Opinions, it’s my goal to give attendees and those interested in building experiences like this large conference, as well as an online experience which features live streaming video, archived video, social-networking, and mobile. Throughout the lead-up and through the conference itself, I’ll try and provide insights into “the sausage-making” of an event like this, specifically geared toward the designers (but, of course, hopefully appealing to everybody.)

One of the things we’re going to be focusing on is the session-browsing experience. We found that at PDC08 and MIX09 both, finding and viewing sessions was less-than-intuitive. We’re spending particular attention to this aspect, and hope to greatly improve the experience.

Working on an event site like this is a particularly interesting series of problems, specifically centered around the fact we have two very specific demographics we’re trying to accommodate. Firstly, we’re trying to attract the “elite developers of the world” to the event, to join the conversation, learn, and collaborate. Before the conference we need to provide them with the information they need and *a reason to come.* Sometimes this is particularly difficult as we need to keep some announcements behind the curtain until the event – the very announcements that would attract developers to an event like this.

Additionally, we need to provide this group an easy way to find sessions they’d like to attend, create a schedule of sessions they’re interested in, update them with new conference-related information. Often this information is not actually available until sometimes fairly close to the event, presenting another challenge.

And with one team focused on the website, we also will be concurrently working on developing the actual conference experience, which includes everything from staging and signage to t-shirts, swag-bags, and everything that goes in them. Sometimes working with the agency on these items is a refreshing break from the bits and pixels of working on the web-experience. While working in print can be frustrating at times, it’s nice to change media from time-to-time.

The second “customer” we’re trying to reach is the developer that may not be able to actually attend the event, but still wants to experience the conference as if they had been there. We still need to provide the “virtual attendee” an intuitive way to browse the sessions, but for these attendees, the online-experience becomes even more crucial. We do our best to provide live-streaming of the keynotes, 24-hour turnaround for the on-demand sessions, and various ways for download and sharing of the sessions, including a “download all” option, so you can see everything.

So, as you can see from the above, there’s already a considerable amount of thought going into the event, and we’re just getting started. We welcome your feedback and ideas on how we can make the PDC09 experience the best for everyone, both at the event and online.

Have you attended a PDC before? What was your experience? Let us know and be sure to follow us on Twitter for the latest updates from MIX Online.

PDC09
Since 1991, the Professional Developers Conference (PDC) has been Microsoft’s premier gathering of leading-edge developers and architects. Attend the PDC to understand the future of the Microsoft platform and to exchange ideas with fellow professionals. You’ll learn about upcoming products, meet Microsoft’s leaders and top engineers, write some code, and be inspired! Unplug for a few days and think about the future.
Tuesday, November 17, 2009 through November 20, 2009

Los Angeles Convention Center

1201 South Figueroa Street

Los Angeles, CA 90015 USA

Welcome to the Webtop: Wiki-OS

Karsten Januszewski — Thu, 18 Jun 2009 23:35:37 GMT

Wiki-OS is a pretty interesting project I came across. They have created an in-browser environment where one can build, compile, execute and share .NET applications. Sound trippy? It is! They call it a webtop -- web meets the desktop. Here's how they describe themselves:

WIKI-OS.org is to software what Wikipedia is to knowledge: it is the world's only open-source user-generated web OS where anyone can contribute right away like a wiki. It allows launching rich-client applications directly inside the web browser without installation. It allows viewing and modifying the source code of any application by clicking the Edit button.

WIKI-OS.org includes an online Visual-Studio-like IDE to collaboratively develop C#/XAML/WPF .NET 3.0 applications. For the first time ever, the users of an application can modify the application directly from its user interface (patent-pending technology by Userware-Solutions), and, when someone makes a change to the source code, the application gets instantly updated on everyone's computer.

WIKI-OS.org encourages developers from all over the world to join their forces to build a place where every single connected person in the world can have free, instant, and unlimited access to the best open-source software applications.

Their "OS" includes notepad, a file browser, a XAML Designer, a code editor and some other utilities, as well as a bunch of nifty samples. Any application that you run can also be "edited" which means seeing the source code for that project. They also have this notion of friendly URLs, allowing you to link directly to one of their applications or an application you build. For example, here's a link directly to their version of Notepad: https://www.wiki-os.org/NotepadProject/Notepad.

The code editor is pretty nice, with color coding, code snippets, find/replace, property panes, events panes and even the ability to reference other people's projects, so that you can componentize applications. (For example, their IDE reuses the XAML designer application, which they also provide standalone.)

Speaking of the XAML designer, I was also impressed with that. They support drag/drop XAML creation of most of the basic control (buttons, checkbox, etc.) as well as most of the layout controls (grid, canvas, etc.). Their design surface supports nesting controls in other controls. And there is also a property pane and events pane for the XAML itself.

They even have a database layer, so that you can store/access information on their server from applications you build.

I spent some time playing with it and was impressed with the performance and general ease of use of the application. Plus, the spirit of the project is right on, bringing the "view source" mentality to rich-client applications running in the browser. I have always thought that XBAPs have a wealth of untapped potential; Wiki-os is a great example of what XBAPs can make possible inside the browser.

Join us at Web Design World 2009 in Seattle

Nishant Kothary — Wed, 17 Jun 2009 21:40:19 GMT

One of the cool aspects of being on the MIX Online team is that we get to participate and speak at several conferences. Members of our team have made appearances at various conferences over the past year including FOWA, An Event Apart, SxSW, Web 2.0 Expo, SIGGRAPH 2008, MIX09, PDC08, Google IO and Web Design World (Boston). I'm sure I'm forgetting a few. The upcoming year will likely be a little tougher because of the economy and inevitable budget cuts, but the good news is that we're lucky enough to have a couple of great events right here in Seattle. One that recently took place, An Event Apart, and one that's coming up, Web Design World.

Web Design World was a pioneer in the events space for web design and development (first one was held over a decade ago!) They have one of the more interesting about pages as far as conferences go, so if you want a little more history, check it out. They've stuck with their early vision of setting designers and developers with good presentation chops loose on stage. It's a simple recipe but it works wonders; the result being a conference with a line-up of fantastic speakers and sessions without the ambient noise you often find at conferences. I'm not going to name names, but many of the web designers who are now "household names" got their start at Web Design World.

We had the opportunity to speak at their Boston event last December where we also got to meet some of the conference organizers. Turns out that we share a lot in common, so when we heard they were going to be doing their next event right here, we jumped at the opportunity to get involved. None of us our speaking this year, but we'll be in attendence and we're also sponsoring the WDW MIX(er) on Day 2 at the Tap House Grill. We love being ambushed, so don't hesitate to say hello.

Oh, and before I forget, go register! We're offering an exclusive discount code to help you out in these rough times below. You have no excuses now.

Web Design World 2009 Seattle: July 20 - 22 The Web design conference for the here and now. More than 20 practical, no-fluff sessions and workshops on today's design and business challenges: CSS, JavaScript, community building, e-commerce, graphics, typography, Photoshop, and more. Learn from the best and network with your peers. Save $395 by registering with this promo code WDWMS to get the 3-day all access Passport Package for only $1,000.

Red Lion Hotel

1415 Fifth Avenue

Seattle, Washington 98101 United States

If you're planning on attending, let us know via twitter.

Sex, Evolution, and User Ratings

Joshua Allen — Mon, 15 Jun 2009 18:46:24 GMT

A few days ago during a design discussion, our team was forced to grapple with that age-old community-design question: 5-star user ratings for content, or a "likes" feature? When allowing users to provide feedback on your content, is it best to use a range of values, or give a "thumbs-up" (and maybe a thumbs-down)?

User ratings help foster participation and engagement, and help the best content filter to the top. But, as Derek Powazek has been saying since at least 2003 in his talks about community, whenever you create a user feedback system, you create a game. And people will game the system.

The typical community designer, when faced with the fact that people will game feedback systems, focuses on incentives. What are the incentives for people to provide feedback in the first place, and how is that feedback used within the system? What incentives can you give in order to get better quality feedback? How do you "reward" people with "social capital" or "whuffie"? Can you create a feedback loop that shows hot items rising to the top, to encourage people to "vote"? These approaches have their merits, but I think that this is the wrong way to look at the problem, and just creates more trouble down the road.

As my teammate Nishant observed during our discussions, you don't need to bribe people to get them to express approval or disapproval of one another. People love to judge one another, even if it comes at a high personal cost. This is one of the most enduring and unique aspects of human nature. The real challenge for a community designer is to align the rating system with this definitive human characteristic, and to avoid any incentives which distort people's inborn desire to provide feedback.

The best book I have found on this topic is "Comeuppance: Costly Signaling, Altruistic Punishment, and Other Biological Components of Fiction", by William Flesch on Harvard University Press. It masquerades as a book about evolutionary biology and literature, but it's really about community design. The author starts by enumerating a set of extremely powerful and innate urges that motivate all humans:

People love to reward those who do good, even at high personal cost. This is called "strong reciprocation"
People love to punish those who do bad, even at high personal cost. This is called "altruistic punishment" (altruistic, because it is not done out of individual self-interest)
The reward and punishment needs to be observed and understood by others. It cannot happen in a vacuum.
This impulse extends through multiple levels. We watch how people punish and reward one another, and are motivated to respond. We are motivated to reward the "altruistic punishers" and "strong reciprocators", even at high personal cost. And we are motivated to punish those who do not reciprocate or punish as they should.
Over a lifetime, we form opinions about people based on a *history* of how they have responded to such situations. Reputation is a narrative that we hold regarding someone's history of strong reciprocity and altruistic punishment.

These facts about human nature are self-evident, and therefore don't really need an explanation, since they are true. However, the author uses evolutionary biology to provide one explanation for why this is true.

In species where the creatures "choose" or "select" their mates, sexual selection is often driven by something called "costly signaling". A costly signal is an evolutionary characteristic that ironically works *against* the creature's self-interest, and makes him less likely to survive. The classic example is the peacock's feather display, which makes him more vulnerable to predators and diseases, but is irresistible to the female. By choosing the peacock with the grandest feathers, the peahen is choosing a mate who is *so* genetically superior that he can survive *despite* the impediment of an impractical pile of tail feathers. Stay with me, because this is where things get really interesting for community design:

Costly signals must be easily observable and quickly identifiable. The peahen needs to be able to judge the peacock's mating potential by watching him.
Costly signals must be very difficult to fake. Otherwise, you end up with mimicry, and everyone wearing the same designer jeans and pheromone-laced perfume. The only way to know that a signal is honest, and not faked, is if that signal is costly.
Costly signals, and the responses to them, are not conscious or calculated. They are closely linked to, and as primal as, the sexual reproduction instinct.

In this framework of evolutionary biology, altruistic punishment and strong reciprocation are the human equivalents of the peacock's feathers. They are driven by primal emotional impulses that often act against our own individual self-interest, are acted out publicly to be observed by potential mates, and are extraordinarily expensive to maintain biologically. The human urge to rate content on message boards is as closely related to our survival instinct as is a peacock's urge to fan his feathers and strut.

So, what does this say about community design? Here's my take:

Make your rating system as natural and visceral as possible. Nobody watches a mugger on the street, and remarks to his friends, "On a scale of 1-5, I rate that mugger a NEGATIVE 10, bro!". Stick with "likes".
Don't put too much emphasis on aggregating, tabulating, or averaging people's feedback. Voting is too abstract and disconnected from the way human nature works. You can quietly mine the community's behavior for your own purposes, but don't put it in people's faces.
Encourage content that is personal and judgeable. When people have a chance to judge another human being, they will. So make sure that they see the face and personality behind the content, and avoid being too passive.
Make sure that the act of rating is public and personal. Ideally, the rating will be attached to the reputation of both the person who wrote the content, and the person who did the rating. You should be able to look at a person's profile and see who he rewarded (and punished). You should be able to look at an author's profile and see who rewarded them or punished them.
Don't worry if it takes some effort. People often think of "likes" as being superior simply because people get instant gratification. I even wrote a whitepaper arguing this point back in 2000. But I think this is probably wrong. In fact, you could probably add a CAPTCHA or similar "expensive" step to your rating system and get better engagement. Costly signals are supposed to be costly, and people are already highly motivated to judge one another. It's not as if you're trying to entice them to do something unnatural, so don't worry if they need to work for it.

So, what do you think? Do you prefer "likes", a 5-star rating, or something entirely different? You can reply in the comments section here, or let me know via twitter.

Benefits of Card Sorting

Tim Aidlin — Mon, 01 Jun 2009 20:24:33 GMT

A few of us on the MIX Online team are busy at work collaborating with other teams to host the PDC09 in Los Angeles this November. Part of that is creating the PDC09 website. We're working with Worktank, and recently began the process of working out the information architecture of the site, in addition to the creative aesthetic. Recently, there were about 6 of us in one of the more smelly of the conference rooms here in building 24 on the Microsoft campus. Between Worktank and Microsoft employees, we had project managers, marketing managers, Directors, and a few designers ... a diverse group with interests vested in some very different issues. Some of us were focused primarily on driving awareness and registration, while others were focused on delivering a live-streaming event to remote viewers around the world. Still others were focusing on the technology to be used to support the decisions we were making, and others helping to guide the process of deciding the content structure of this potentially robust and content-rich site.

During the initial exercise in working out the I.A. for the PDC09 site, we used the process of "card sorting." It had been a while since I had gone through that exercise, and remembered how very useful it can be. For the un-initiated, the wikipedia definition states:

Card sorting is a simple technique in usability design where a group of subject experts or "users", however inexperienced with design, are guided to generate a category tree or folksonomy. It is a useful approach for designing workflows, menu structure, or web site navigation paths. Card sorting has a characteristically low-tech approach. The concepts are first identified and written onto simple index cards or Post-it notes. The user group then arranges these to represent the groups or structures they are familiar with.

In particular, I found this exercise useful in abstracting the structure of the PDC09 site. By looking at cards and sorting them by priority rather than looking at a screen and "envisioning navigation," we were able to really discover what content was important, what the hierarchy of that importance was, and make decisions on the navigational system and content structure in a much more "data-driven" manner. By abstracting what we *feel* from what we *think,* our decisions make much more logical sense.

Card sorting from boxesandarrows.com

Card-sorting also was particularly useful in providing a common language between the design professionals and the other stake-holders. By taking the pixels off the screen we provided something tangible that people could actually move around to help express their thoughts and opinions. Also, by making it easier for people to communicate, the process of coming to conclusions and making decisions was much more direct. Everyone likes shorter meetings that get stuff done, right?

Finally, the exercise helped us define our core audience. In the case of the PDC09 planning, we really established concretely the two audiences we had to consider: the event-attendee and the remote-viewer. Due to the fact that the cards were so easily manipulated, we were able to think through multiple scenarios on-the-fly and better understand how the different audiences would approach the architecture of the site. For instance, something like travel and location information might be very important for the event-attendee, but to the person viewing sessions from home or work, that information is about worthless. How do we ensure that the information is easily findable, but unobtrusive? Where does it make the most sense to put this information? Under registration, or under About The Conference, for example?

By having a system for all the stake-holders to be able to quickly run through scenarios, more easily think through the problem in a common language, and better express their opinions, the exercise of card sorting made a lot of sense. Now, really, it doesn't necessarily make sense to go through the whole process for every site. However, for complex sites, or those sites with many stake-holders trying to ensure success, card sorting can be a very useful tool. There's a great article by Donna Spencer that goes into more detail on the process and some of the benefits and drawbacks to the nuanced methods.

So, have *you* ever used card sorting to work out the structure of a site, develop navigation, or solve another sort of problem? What's been your experience? Did you find the process useful or just another pointless exercise that kept you from just gettin' to work? Tell us your story by commenting below, and be sure to follow us on Twitter at @mixonline.

On Deployment: ClickOnce & The Client Profile Configuration Designer

Karsten Januszewski — Fri, 29 May 2009 17:43:12 GMT

I recently engineered the deployment of two client applications, Glimmer and The Archivist. Both are WPF applications that required the .NET Framework 3.5, which is not installed by default on Windows XP or Windows Vista. (It is on Windows 7 – rad! – yet another feather in the cap for Windows 7, which I am using as my dev machine quite happily, BTW.) So, I needed deployment strategies for getting not only my application on the machines but also the .NET Framework 3.5. I took different approaches for each application, which I will discuss below.

For The Archivist, I used ClickOnce. I did everything through the Visual Studio publish features, which work great -- gotta love wizards. I’ve always been a big fan of ClickOnce. I used it for Flotzam and also for many of the other prototypes I’ve written. My favorite feature of ClickOnce is the auto-update feature. The application always phones home when the user starts it to make sure it has the latest version and, if they don’t, prompts the user to upgrade. This makes it trivial to push out new features -- and the rare bug fix :).

The one thing I did above and beyond what Visual Studio generates is to roll my own HTML page instead of the publish.htm that the wizard generates. When the user clicks the Install Now link, I fire off a javascript which I took from the Windows SDK and slightly modified. The script looks at the USER AGENT string to detect if the user has the .NET Framework or not. If they don’t, I send them off to a setup.exe which will do the installation. If they do, I send them to the .application file. If you are interested in this script, you can see it if you view source on The Archivist homepage.

For Glimmer, I couldn’t use ClickOnce because of Glimmer’s plug-in model. (Here’s a good discussion of ClickOnce vs. MSI if you are interested.) So, for Glimmer, I used Visual Studio to create an .MSI and then used the new Client Profile Configuration Designer to create a setup program that installed both .NET 3.5 and Glimmer in one fell swoop. This is a great tool that made it easy to create a slick looking set-up program with a good user experience. They’ve got a bunch of good documentation up on WindowsClient.net as well as a video that walks through using the tool. If you are doing any deployment of WPF applications and you can’t use ClickOnce, I’d highly recommend using this tool. And the folks who built it are very responsive as far as feedback and help.

If you installed either Glimmer or The Archivist, I’d be curious about how the experience was, especially if you didn’t have .NET 3.5 on your machine.

Have You Ever Felt Burned Out?

Nishant Kothary — Tue, 26 May 2009 23:15:53 GMT

I logged into Facebook this morning to find a new issue of A List Apart through their Facebook app. A guy by the name of Scott Boms wrote one of the articles in the issue; it's about how we, as an industry, are very prone to stress-related burn outs. It's appropriately titled Burnout, and I highly recommend you read it. He pretty much had me at the opening paragraph -

Web professionals are often expected to be "always on" - always working, absorbing information, and honing new skills. Unless our work and personal lives are carefully balanced, however, the physical and mental effects of an "always on" life can be debilitating.

Scott articulates the "what" and "how" of a burnout pointing to some established research. And, as we've come to expect from A List Apart publications, the article also offers up some great remedies for preventing burnouts. As someone who's been through a couple of burnouts, I can tell you from experience that his remedies are spot-on. Peek into the discussion area for the article and you'll find some more practical remedies. The article alludes to a type of burnout that’s caused by your employer/workplace. In other words, burnouts caused by working in a dysfunctional environment; these are very difficult because you don't have much control over how they manifest. However, I suspect that a good number of burnouts in this industry are completely self-induced, especially for folks who are lucky enough to find themselves doing something they love to do in their free time (guilty as charged). While most, if not all, remedies mentioned in the article would still go a long way in fighting symptoms of a self-induced burnout, in my experience they'll never truly fix the source of the issue (i.e. your own personality) and consequently, you'll be prone to relapses.

If you think that your personality is bringing on a burnout, then what you really need to be working on is reprogramming your personality. Here are a few tips that you can try in addition to those provided in Scott’s article:

Acknowledge the Issue
OK, so Scott talks about this, but I want to stress on it. The source of self-induced burnouts is your own addictive personality, so you need to fix yourself. If you find yourself pulling your mobile device out of your pocket every couple of minutes to refresh your inbox or to glance at the twitter stream, you have issues. You're addicted, and addictions generally have negative consequences. The most sustainable way I've found to fix personality issues around susceptibility to addictions is to truly acknowledge that you're addicted and that you want to do something about it. Once you've truly acknowledged the issue, the other remedies have the potential of permanently fixing self-induced burnouts.
Work 9 to 5
Scott talks about how it’s becoming impossible to do the 9 to 5 thing these days, but I tend to agree with one of the comments that succumbing to that attitude is one of the root causes of burnouts. The good news is that if you're suffering or on path to a self-induced burnout, then putting a 9 to 5 boundary in place is completely your call. You have no excuses to not enforce it. By putting the boundary in place, you're going to force yourself to make time for yourself, your friends, family and hobbies. At first you may not do anything with this "free time", and that's OK.
Be Consistent
Don’t cheat. Beating burnout is like going to rehab (OK, never been to one, but from what I hear, it sounds a lot like it) – you need to cut off your supply, cold turkey, and then consistently work within the framework of your remedies till you're reprogrammed. It will happen, slowly, but surely. Just do yourself a favor and don't cheat yourself. Not even once.

Having said all this, there is a silver lining here best captured by a Def Leppard lyric, "It's better to burn out, than fade away." So, what's your take? Have you ever had a burnout? Why? How’d you get out of it? Got some tips for us?

Exploring Social Media Types

Hans Hugli — Thu, 21 May 2009 20:16:55 GMT

This post relates to Joshua Allen’s piece: How Do You Get the Latest News? somewhat, but I’m going to examine Social Media from a slightly different perspective. I’ve begun work on an application for one of the upcoming MIX online projects. Since I’ve been working on it, and being a n00b to social media, I’ve been contemplating which social media services provide the most useful insight into what is going through the consciousness of the web. I’m going to list off, what I perceive, are some of the more common and useful social media services; certainly not a comprehensive list, but if you feel I’ve made a glaring omission, please speak up!

FriendFeed has done a nice job of listing some of the more popular social media services and now is able to track 57 distinct services for it’s members. It aggregates that information into a single unified feed and is conveniently published via a REST API. If you’re not familiar with FriendFeed you can check out the Social Timeline infographic to see what I’m talking about; type in "scobleizer" if you don’t have any FriendFeed friends yet. I find FriendFeed useful to sift through large amounts of information about particular subject and it is useful since it creates relationships between it’s users and their social media outlets, as well as users friends. FriendFeed requires its users to proactively sign up, and cannot search content of users that haven’t signed up for the service. If only we could get everyone to sign up…

It looks as though to really find out what’s going on in the world, FriendFeed alone cannot solve it, and this means that we need to listen on multiple channels. One way to listen globally is using Google Alerts. It sends emails when an item of relevance is found; i.e. anytime it finds a new hit with your name or a search phrase, it sends mail, but this is only so useful, since this cannot be managed or aggregated today.

I see social media applications and services having at least two fundamental criteria to be considered useful. 1. That it have a sufficiently large enough user base and 2. that the service exposes its data via an API of some kind. Regardless of service, if it has a small user base, it can be considered a skewed or non-centered crowd. Also, if it does not expose an API to access it, it really diminishes it’s value since the service becomes a silo or island of information and is not useful to third party developers trying to fit all the pieces together into a coherent picture.

Another important dimension in the social media spectrum is information size; Twitter is obviously on the small end of it. Twitter falls into the class of a "status" service, and as we all know Twitter is great way to find out what is happening in the world right now. Since Twitter has such a huge following, boasting 14m memberships, it is rife with information, and there are many client’s that make it easy to search or follow users tweets. Some tweets remain valid forever, but generally speaking they tend to get stale fairly quick. Incidentally Karsten and Tim have just put together the Archivist, which is a Twitter archiving and activity analysis tool that is very useful for those that need historic Twitter data.

FaceBook Connect, also a status service, is also on this same end of the info-size spectrum. Next there are the "bookmarking" services also at the small end of size spectrum; Delicious being one of these has a large user base and an API. Stumbleupon, seems to differentiate by showing bookmarks of people with similar interests, but does not appear to have an API at this time. rendering it less useful. Both Delicious and Digg employ the "wisdom of crowds" to differentiate themselves, as brought to my attention by Derek Powazek at An Event Apart, by floating interesting and relevant information to the top of their lists. Digg a very popular "news" service also has an API. The nice thing about the “wisdom of crowds” is that it can gauge how important people think things are as they become more popular. Once again the number of people that contribute to services is very important and make for higher quality information.

Blogs are a wonderful resource of small to medium sized information that have a mid to longer-term life expectancy, but as Joshua hints, watching blog feeds is a time-consuming process, since you need to grok all the content before you can decide its relevance. Search engines can find the relevance, again using the "wisdom of the crowds" approach to cull less useful information.

Then there are the "photo” sharing media sites that contain medium to large amounts of information. Flickr and Photobucket both are popular and have API’s to access, and at the huge end of the information size spectrum is the "video" media with: YouTube and Vimeo. Both expose API’s, and both are ways to get out a large amounts of information, to large audiences quickly, in a sometimes viral way.

In typical fashion, I like to ask: What’s next? What’s next in the world of Social Media? What wonders are on the horizon? What new way will we be able to examine information that gives us insight into the present, and possibly brief glimpses into the future. Is the next step aggregation of social media on a large scale, with searching techniques to help us find what we need to learn, or will we see the pendulum swinging the other direction to more verticals such as BottleTalk or LinkedIn social networking sites that center around a particular topic or meme.

What are other dimensions of social media that matter to you? Write a comment and tell us what you think. Stay in touch with us through Twitter.

I’ve linked all the services mentioned above, down here, to minimize clutter: FriendFeed, Google Alerts, Twitter, FaceBook, Delicious, Stumbleupon, Digg, Flickr, Photobucket, YouTube, Vimeo, BottleTalk, LinkedIn

How Do You Get the Latest News?

Joshua Allen — Mon, 18 May 2009 17:09:32 GMT

Do you still use an RSS reader to keep up with the latest interesting information, or have you switched to using Twitter? Steve Gillmor, writing at TechCrunch, lit a fire last week by declaring that RSS is dead.

I haven’t been in Google Reader for months. Google Reader is the dominant RSS reader. I’ve done the math: Twitter 365 Google Reader 0. All my RSS feeds are in Google Reader. I don’t go there any more. Since all my feeds are in Google Reader and I don’t go there, I don’t use RSS anymore.

Steve goes on to argue that RSS is becoming increasingly less useful as a personal tool for keeping up with interesting news, and that Twitter has already won. It's a really good post, and I recommend reading the whole thing.

At first glance, Steve's comments could seem oddly hypocritical, since thousands of people read his TechCrunch posts via RSS, and his posts are even syndicated to Twitter via RSS. But he's really just asking "How do you find out about interesting new stories? How do you keep up? And how has that changed over time?"

With this in mind, I decided to poll the MIX Online team and see what my co-workers had to say.

Karsten - Karsten listed twitter as his primary source for interesting new stories, with Digg coming next. He doesn't use an RSS reader much anymore.
Hans - Interestingly, Hans listed mailing lists as a primary source of news, followed by Digg and Twitter.
Tommy - Twitter came first, but RSS reader was nearly identical. Thomas doesn't see Twitter replacing RSS, seeing them as serving different purposes.
Tim - Like Thomas, Tim placed Twitter first, and RSS (via Outlook) second. Tim explained that he likes RSS for specific topics or blogs, but that Twitter search via TweetDeck is better for broad awareness of new happenings.
Nishant - Twitter, Digg, and RSS reader share equal weight.
Joshua - I've found that I get my best news through FriendFeed (which combines RSS and Twitter), mainly because of the quality of the people I follow. My RSS reader is a close second, and even mailing lists!

From this informal poll, it appears that RSS isn't going away, but Twitter and other "realtime" or "social" tools like FriendFeed are becoming relatively more important. This trend is almost an accident of history, and isn't guaranteed to continue like this indefinitely, but for now it appears to be real. Phil Windley hit the nail on the head when he asked, "Why Didn't PubSub Become Twitter?".

We even see this playing out on MIX Online. Some of our friends subscribe directly to our RSS feed, while others follow the twitter account. How about you? How do you keep up with the latest stories? What kind of trends have you observed at the web sites that you maintain?

The Archivist: Save And Export Twitter Searches Before They Go Away

Karsten Januszewski — Fri, 15 May 2009 17:50:49 GMT

If you have used Twitter search before, you may notice that you can only go back a certain amount of time and/or number of tweets for a given search. In fact, if you read the Twitter search documentation, you'll note that the folks from Twitter say, "We also restrict the size of the search index by placing a date limit on the updates we allow you to search. This limit is currently around a month but is dynamic and subject to shrink as the number of tweets per day continues to grow."

Thus was born The Archivist, a new experiment from the Mix Online lab that Tim Aidlin and I cooked up recently. Our motives for writing the app where to solve a problem that, from my research, hasn’t quite been solved before: How do you archive Twitter searches? I looked on the Twitter Apps Wiki but didn’t see anything that accomplished exactly what I was looking for. So, what can you do but write it yourself?

The Archivist is a Windows application that runs on your local system and allows you to archive tweets for later data-mining and analysis for a given search.

There are two screens. First the main screen, which is a big list of tweets:

The Archivist allows you to start a search and will get as many results as it can on the initial search. If you leave The Archivist open, it will update with the latest results every 10 minutes. You can also close The Archivist and open it later. The Archivist will save the tweets and get all the tweets it can since that search.

Then, there’s a graph that shows number of Tweets a day:

The Archivist will display a chart that shows the number of tweets per day for a given search, so that you can quickly assess traffic for a given search. For more comprehensive data analysis, The Archivist lets you export Tweets to Excel. It also natively saves tweets in an XML format, which could also be parsed for deeper data analysis.

Install The Archivist today! (Requires .NET Framework 3.5 SP1.)

To learn more about The Archivist, read the documentation.

For details about the development of The Archivist, check out this post.

Oh, and follow Mix Online on Twitter!

Should We Kill Wireframing?

Thomas Lewis — Wed, 13 May 2009 22:21:02 GMT

Should designers stop wasting time and budgets with wireframes and go straight to design comps?

A tempest stirred on 37Signal’s blog when they posted an entry called Why we skip Photoshop. It is a good read that turns convention on its head (which those guys are prone to do) but what was interesting is all the discussion that came from both sides as to should designers skip the pixel-perfect design comp step in the web design process and just do it all in HTML.

I took a look at what both sides were advocating. I then put on my lower-middle management hat and begun pontificating: Why stop there? What if we stopped with all the wireframing as well? I thought managers could then drive down design costs and we could get to what the typical manager or client want: What is my site going to really look like?

Ok, if you know me, you know that I have been stringing you along. Should wireframes be a part of the design process? ABSOLUTLEY YES! But, in difficult times of tightened budgets and timelines, I can imagine many a pointed-haired boss or client wondering if they could drive down their costs by getting rid of a step or two in the design process. I think this is wrong and here is why:

Wireframing helps focus the conversation. The last thing you want to have to deal with is “I don’t like that color. Those bullet points, can we make them actually bullets? Hey, we should use that font that I use in my joke e-mails I send around…yeah, Comic Sans!” With full design comps from the start, you are more apt to get feedback that is superficial. With wireframes, you can get them focused on the structure and how content should be prioritized.

Wireframing doesn’t have to be expensive. The cost is not from the tools, you can easily use pencil and paper. It is the time it takes to do the job right. This time used is not as expensive as a change request made after you have design comps and doing the actual work. I find that wireframes help prevent issues that arise later or expose missing items (like the Sign Up or Purchase page).

Wireframes are a great mid-project deliverable for feedback. No manager or client wants to sit down for business requirements gathering and then go into silence mode until the day the site goes live. Most don’t want to wait for the design comps. Wireframes provide a good opportunity to get sign off on the direction as well as get feedback earlier in the project. Around here, wireframes are put up on a big board for all to look at. They not only provide stakeholders to get feedback, but also cross-teams will stumble upon them and might spark something.

I have to admit, I do enjoy looking at wireframes. In fact, I find myself hanging out at I <3 wireframes. Also, Microsoft is getting into the business for Silverlight and WPF applications with its offering of Sketch Flow.

My question to you is this. Which side of the fence are you on? Do you find wireframes valuable or an endeavor that you would rather skip? Have you been asked by a manager or client to skip wireframing? How did you deal with it?

Write a comment and tell us what you think. Subscribe to our Twitter feed if you want to stay in touch with us.

Tweenbots Restore Man’s Sense of Teamwork

Tim Aidlin — Mon, 11 May 2009 16:52:43 GMT

I was forwarded a link recently to www.tweenbots.com, an art/science/social experiment that sends a little “robot” on a mission which requires the help from strangers.

“Over the course of the following months, throughout numerous missions, the Tweenbots were successful in rolling from their start point to their far-away destination assisted only by strangers. Every time the robot got caught under a park bench, ground futilely against a curb, or became trapped in a pothole, some passerby would always rescue it and send it toward its goal. Never once was a Tweenbot lost or damaged. Often, people would ignore the instructions to aim the Tweenbot in the “right” direction, if that direction meant sending the robot into a perilous situation. One man turned the robot back in the direction from which it had just come, saying out loud to the Tweenbot, "You can’t go that way, it’s toward the road.”

I couldn’t help but smile and think of how wonderful it is to see complete strangers collaborate toward a shared goal ... and a goal they really had no idea about before requiring their action.

I also thought about how teams collaborate toward a shared goal. Whether building websites, developing software, or hosting events, it’s the shared effort toward a common goal that breeds success. In the case of Tweenbots, all that was required was a moment to stop and simply decide to help: a little push or a quick hand to guide the Tweenbot in the right direction. So often it’s the little actions that mean the most.

I like to think that the “little things” are sometimes what helps move projects in the right direction, as well: a thoughtful hallway conversation, a few minutes at the whiteboard working out an idea with members of the team, taking time to understand the perspectives and needs of the teammates and what they require to help reach the goal.

Imagine if the people in the park during the experiment had not only helped the Tweenbot on its way to reach its goal, but had communicated with one another about what that goal was, and agreed to help the little guy get there. How much more quickly could he have arrived at his destination? How much less effort would it have been for him and everyone else involved if he had had attention the duration of his trip?

In the context of sites and software, I realize we have a *shared* goal and requires everyone’s help, attention, and communication. The robot can’t get across the park on its own.

What do you find is helpful in working toward a shared goal? What restores your "sense of teamwork"? Write a comment and tell us what you think. Stay in touch with us through Twitter.

Taking a good look at the Web

Hans Hugli — Thu, 07 May 2009 23:06:48 GMT

I just attended the An Event Apart conference this week, May 4^th and 5^th. If anyone has a glimpse into the future of the web, this organization would. It was an eye “re-opening” experience for myself, since I haven’t been involved deeply with the web client, as with server, for the last 10 years in any professional capacity. It was also the first non-Microsoft web conference I’d attended in years, and I was impressed with how web development and design has really blossomed. It was also interesting to see the adoption of advanced capabilities only supported only in RIA applications in the past; such as rounded corners, masking support, and an increasing use of jQuery to create visually and behaviorally rich experiences.

These are some of the messages that I heard.

Web Standards are important, but not adhered to consistently. Even in this day there is impedance between all the browsers.
Context is very important; it really matters what context content is displayed in. Without context content is not as comprehendible.
Web developers prefer to avoid RIA where possible. They introduce accessibility and SEO issues. Tools such as Screenreaders don’t understand RIA.
Content planning is undervalued. It is a second class citizen in web site design and needs to become a first class citizen.
Social networking has some really interesting human problems.
IE6 is a huge burden for web developers since it requires special attention and resources. The consensus is that it will soon be ignored completely.
Browsers (and our browser) need to improve by conforming to standards better and being more proactive in supporting new standards. If not on a ship cycle with update cycles.
Sites should not have a “Launch and leave it” mentality. Full site redesign is destructive. Site redesign should be incremental and frequent.
Web forms, “wizards” and their proper execution are very important.
Some fear that design is becoming a commodity and that designers need to defend their position by showing their real value to the customer. While I do see this as being a potential problem I see it the same as the classic art problem. No one wants to pay for art until they know that they want it.
Designers really don’t care what browser it displays in as long as they display it the way it was designed.
Simplicity is good. Hmmm where have I heard that before? I loved this.

Questions that I want to raise:

What are we doing to address the standards and future standard issues in the browser?
I’ve always had a serious aversion to web forms on sites. They tend to be fragile and show some of the inherent weaknesses of browsers since they can easily lose state in multiple ways; i.e. hitting the back button, or round tripping problems, or buying things twice. My question is: is this just a result of poor site design? Or is it some larger problem with limited browser capabilities? Or a little of both?
What can be done to eliminate the black box of RIA applications?
How can SEO be made more of a science than an art?
How can communication be made better (more concise) in social applications on the web? Emoticons can only convey so much information. There is too much room for misinterpretation, misunderstanding today.
What are some other interesting things that crowd wisdom can be applied to?

Do you have an opinion on the direction of the web? Write a comment and tell us what you think. Stay in touch with us through Twitter.

How to beat the Designer Stereotype

Nishant Kothary — Fri, 01 May 2009 23:34:18 GMT

Rant Alert: I am a fellow-designer who is tired of having to constantly fight the "designer stereotype" (I'll explain this term up ahead). This is a fair warning that I'm about to vent and it's just my opinion (this is the opinions section, after all).

I have a pretty broad definition for "designer". I define it as an individual who thinks and cares about the experience others have when they use a product, and subsequently, focuses on systematically improving that user experience. I will be talking about software and web designers in particular.

I define the "designer stereotype" as the often-true perception that designers are difficult to work with & walk around with a big fat chip on their shoulders.

We're bitter. Want to know why? (I love leading questions).

I shall now bash the rest of you, i.e. you folks who don't really care to improve the user experience for a product. After all, any self-deprecating post must begin with a healthy emotional outburst.

We're bitter because you have abused and marginalized us for a few decades now. Your absolute lack of empathy in accepting user experience and aesthetics as an integral part of the software development process has effectively murdered our designer souls over and over. We've felt and continue to feel abused by your silly and compulsive need to meet artificial deadlines which you achieve by saying, "Yeah, we don't have time to spend on design." You know what sucks about this? Every time you do that, and believe us, you do it a LOT, we have to go along with it fully knowing that we're going to piss off customers. You've heard of customers, right? They are also known as "human beings for whom you're building the very piece of software".

Yes, you make us repeatedly stare into the face of the irony of forgoing experience design – undeniably the most important aspect of a software product – despite the fact that experience design is synonymous with, "Hey, why don't we build something that people would like to use!" Seriously, think about it! To put it into perspective - have you ever found yourself saying, "Man, this phone is so tough to use and I hate it?" Well, it's because some ignoramus like you decided to ship it anyway despite the fact that everyone who played with it during usability tests said it was a piece of crap. You reap what you sow, I guess. Yippekayay.

There, I said it and it feels good. Let the flames begin. Or, read on.

So, this begs the question – if the world is doing such injustice to the wonderfulness (yes, that really is a word) that is a designer, then aren't they the real victims? Good question, and I have a really simple answer. In an ideal world, sure, they are the victims. But last time I checked, this is the real world. The way I see it, the real world is full of awful situations. You either fall in line and work with that reality to incrementally improve it, or throw a hissy fit, stomp your feet and affect nothing other than your already decaying morale.

The thing is, yes, there are loads of people who don't get this whole experience design thing, and why should they? It's this weird, amorphous, touchy-feely, non-deterministic, often subjective thing that we don't really do a good job of describing (we == everyone but Bill Buxton; yes, I'm still in love with the man). But, it is what it is and the first step is to accept the reality that most people don't get it and give up the pent up animosity and destructive arrogance.

So, if you're a designer, let it go. Seriously.

Let. It. GO!

Here – let's hug it out. *HUG*

Better?

OK, now for the silver lining. There are a plethora of folks who *do* get it, so let's stop punishing them and let's start educating the others, shall we? This rant is not entirely gratuitous or futile, for I would like to share a set of practical tips to get you waking up in the morning singing, "I've got to admit it's getting better, a little better all the time." (you can always count on the effing genius of the Beatles lyrics).

Here we go:

Don't assume the worst about people
When you walk into a room assuming that everyone in there doesn't get it, you're doomed. You'd be surprised at how often I've seen designers (and non-designers) do that. It's the classic self-fulfilling prophecy. They just assume that the person across from them at the table doesn't care about doing the right thing for the customer and could never possibly grasp the self-declared advanced world of design thinking. If you find yourself feeling this way, you are suffering from deep bitterness and I suggest you take up drinking to drown it. I'm kidding, of course. Really, what you need to do is consciously change your default behavior to assuming the best about people. Do whatever you need to do to make this change; different things work for different people. The point is – if you seek failure and disappointment, you will find it.
Assume everyone is ignorant
Notice, I didn't say "stupid", but "ignorant". A common phenomenon shared by our bitter breed is to assume that everyone around you undestands the subtleties of your thought process despite the fact that you've never vocalized most of it. We think differently and things that are ridiculously obvious to us are not at all obvious to others. The practice of good design pivots on the critical act of communication. As a designer, you have to communicate constantly without making assumptions about what's obvious and what's not. But don't do it blindly. Watch, listen, perceive and communicate appropriately. If you're a good designer, the first three are innate sensory qualities you are likely gifted with.
Think in parts, not absolutes
We're a binary lot. It's all or nothing, good or bad, black or white. And, we tend to hold that way of thinking up as a badge of honor. "We don't conform. We don't compromise. Only the best for us." Ask yourself, has that worked for you? Be honest. The other way to affect change (and all credit for teaching me this goes to my wife) is to begin somewhere and etch away at it. Become a part of the solution. Learn to see the value in incremental improvement. That doesn't mean you forget the big picture and the end goal; it's always great to aspire to something big. Just don't trivialize and/or pass up on the opportunity of making small amends. Every little thing helps.
Don't listen to Ayn Rand
The Fountainhead was a book I read in my early teens and for someone growing up in India who was getting pretty disillusioned by the rampant contradictions of that culture, the book was a savior. It was hope! But it also set the stage for the designer stereotype I was going to fall prey to as an adult. That powerful piece of propaganda is best captured by the operating principle of the hero of the book (an architect, by profession), "I don't intend to build in order to have clients. I intend to have clients in order to build." Sounds sexy, but it's wrong. You're designing for clients. Period.
Know when to play and when to quit
I truly believe that one bad apple spoils the barrel. I've experienced this personally through different employers and even here at Microsoft. If you're on a new project, you have to give it your all and the above four points come in very handy in doing that. But despite that, if you find yourself feeling disgruntled and upset quite a bit, you need to step back and evaluate why you're feeling that way; it's often because of the people involved, and it's not just that they don't get it, but it's because they are very focused on some hidden agenda (promotion plans, power struggle, etc.) You can choose to confront them, or manipulate the situation to move it in your favor. Or, you can say to yourself, "This is not worth my heartbreak." Just know that trying to change their personality is usually beyond the scope of the project. Either play the game or quit. Just don't let yourself get bitter.

In closing, I offer you some reading that inspired this blog post. It is powerful and so true. Read it now and then come back and tell us what you think. If you want to stay in touch with us, follow us on twitter.

The author is a rehabilitated designer who happily coexists amongst non-designers and loves it. He beat a strong case of designer stereotype caused in no small part by a set of bad apples at previous jobs. Every now and then he feels the urge to succumb to residual bitterness, but fights it vehemently because he truly believes it is not the right way to change things.

The Rise Of jQuery

Yehuda Katz — Tue, 28 Apr 2009 17:53:34 GMT

One of the seminal works about JavaScript was DOM Scripting by Jeremy Keith. That book, which earned instant classic status, first opened the eyes of the web community to the fact that JavaScript programmers do most of their work with the browser's DOM. jQuery became popular because it capitalized on that same idea. Instead of spending a lot of energy trying to convert JavaScript into Python or Ruby, jQuery provides the best possible abstraction on top of the DOM.

In developing this DOM abstraction, John Resig, the creator of jQuery, decided to stick with the existing, ubiquitous API for interacting with the DOM: CSS selectors. Millions of designers already know how to use CSS. Before jQuery, JavaScript developers crawled the DOM with nightmarish, error-prone code while their designer brethren could simply select some page elements and apply styles. jQuery brings the accessibility of CSS targeting to JavaScript. If a developer or even a designer knows how to apply style, they can easily apply JavaScript behavior as well using jQuery.

With CSS, making all paragraphs with the class important turn the color red is as simple as `p.important { color: red }`. jQuery leverages that same technique to apply behavior to elements. Select some page elements. Add behavior. For instance, say you wanted to bold those same elements once they are clicked. With jQuery, you would do:

    $("p.important").click(function() {
      $(this).css("font-weight", "bold");
    });

The conceptual similarity with CSS makes it easy to both leverage existing skills as well as make DOM scripting accessible to a whole new audience. Several surveys show that a majority of designers who use JavaScript program using jQuery. jQuery has taken hold of the Ruby on Rails community, even though Rails comes with built-in support for the Prototype library. That's because getting started with jQuery is as simple as learning a few elements of JavaScript syntax, and you're off to the races.

jQuery also supports a powerful technique called chaining, which makes it easy to apply multiple behaviors to a collection of elements at once, using powerful, straight-forward syntax. Let's imagine that we wanted to take external links, apply a rel attribute and add a class at the same time. We would write the following code:

    $("a.external")
      .attr("external", "true")
      .addClass("external");

We could continue chaining as many behaviors as we like, mimicking the convenience and ease of use of CSS. And this is just the beginning. Because of the simple yet elegant architecture of jQuery, it's trivial to add new behaviors that can be applied to group of elements. Imagine if you could add new rendering properties to CSS. With jQuery, it's so easy that many jQuery users are creating reusable behaviors (sometimes called "plugins") in the first day that they use jQuery. That's because it's as simple as:

    $.fn.makeExternal = function() {
      return $(this)
        .attr("external", "true")
        .addClass("external")
    }
    $("a.external").makeExternal();

Since writing plugins is so easy, jQuery has a veritable cornucopia of plugins; the power of jQuery is that plugins all work the same way. Select some elements using a CSS selector. Apply some behavior. Because it's always the same, jQuery is easy to use. The jQuery core itself and most jQuery plugins follow the guessable API principle, making it easy to remember how to use various functions.

For instance, to get an attribute from part of the html, say the href of a link, you'd do something like:

  $("a").attr("href");

And to set the same attribute, you'd do:

  $("a").attr("href", "http://example.com")

To get and set CSS styles, the syntax is identical. To get the color from an element, you’d do:

  $("a").css("color")

And to set it, you simply do:

  $("a").css("color", "red")

Moving forward, jQuery has significantly normalized the way developers and designers talk about the DOM. This makes it possible to build abstractions on top of it like jQuery UI and the Glimmer GUI tool. In fact, jQuery's extensible nature is what makes it possible for Glimmer to easily support its own plugins and, one hopes, robust community around those plugins.

What ASP.NET Developers Should Know About jQuery

Dave Ward — Tue, 28 Apr 2009 17:53:17 GMT

It’s hard to believe that JavaScript is already well over a decade old. Often relegated to marginal tasks in its early years, JavaScript has grown to become a pillar of modern web development. With the current popularity of DHTML and AJAX, it can be difficult to find a site that doesn’t use JavaScript anymore. One of the driving forces behind JavaScript’s newfound popularity is a proliferation of JavaScript frameworks, such as jQuery.

Why?

Though JavaScript itself is a great programming language, the document object model (DOM) can be a web developer’s worst nightmare. The DOM is a method through which browsers expose an interface allowing JavaScript code to manipulate elements, handle events, and perform other tasks related to a document within the browser. While almost every browser implements an ECMA standard version of JavaScript, their DOM implementations are inconsistent and quirky at best. In fact, if you’ve had bad experiences with client-side programming in the past, it’s likely that the DOM was the true source of your frustrations, not JavaScript itself. This is exactly the pain point which jQuery addresses.

jQuery abstracts the DOM away, allowing you to focus on behavior instead of implementation. It provides a simplified, reliable interface to the DOM that works consistently across all major browsers. Instead of wasting time and effort supporting the idiosyncrasies of these browsers, you can write jQuery code that works the same across them all.

Why jQuery? What’s in it for me?

CSS3 selectors – In jQuery, nearly everything begins with a selector that defines a set of one or more DOM elements. By implementing a CSS3 compliant selector engine, jQuery provides tremendous flexibility in this area. Selectors may contain any combination of ID, CSS class, and/or an expanded set of pseudo selectors (e.g. :first, :selected, :input).
DOM manipulation – One of the most common client-side tasks is making changes or additions to a rendered HTML document. Whether updating a snippet of text or adding entire HTML structures, jQuery provides a robust set of utility functions that are up to the challenge. Combined with the versatile selector engine, complex manipulations are possible with only a few lines of jQuery code.
Animation – The core jQuery library contains a few commonly used animations, such as fades and slides, and it also provides for specifying custom animations. Beyond that, jQuery UI offers animated transitions between CSS classes and a wide variety of easings.
AJAX communication – No JavaScript framework would be complete without a way to make asynchronous requests, and jQuery is no exception. jQuery provides AJAX communication through several methods which allow you to choose an appropriate balance between control and simplicity.
Plugins – jQuery’s straightforward extensibility model has led to a thriving plugin ecosystem. As of this writing, there are almost 2,500 third-party plugins in the repository. Everything from simple utility functions to entire client-side templating solutions are available as jQuery plugins. If you can imagine a feature, it’s likely that a plugin already exists to assist you in implementing it.
Cross-browser compatibility – As previously mentioned, one of jQuery’s key strengths is that all of its features work consistently across every major browser. Any jQuery code that you write will produce the same results in Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+, Opera 9+, and Chrome.
Officially supported by Microsoft – For many Microsoft developers, this official blessing is the clincher. Not only will Microsoft begin including jQuery with Visual Studio, but it is part of the default ASP.NET MVC project template. What’s more, Microsoft Product Support Services has already begun offering support for jQuery.

Coming from ASP.NET, what should I know?

If you’re coming from an ASP.NET development background, some of jQuery’s idioms may seem foreign at first. As with any framework, it’s important to learn the conventions and use them to your advantage. Going against the grain only wastes your time and effort.
In that spirit, these are a few specific tips that I hope will help you flatten the learning curve a bit.

Use selectors. Think in sets.
In the ASP.NET world, it’s rare to select sets of controls through queries. Instead, we’re accustomed to referencing a single control by its unique ID. Of course this is possible in jQuery too, but its selector engine is far more sophisticated.

Using selectors to identify a set of one or more elements is cleaner and more expressive than the iterative machinations you may be used to in ASP.NET server-side code. Before parsing out an ID or iterating over a group of elements in search of certain ones, be sure that the task isn’t more easily accomplished through a jQuery selector.
Use CSS classes for more than just styling.
Another technique that is counterintuitive at first is the use of CSS classes as flags. Coupled with jQuery’s selector engine, “flag” classes are surprisingly powerful.

A good object lesson comes from one of my recent contracts, where I was hired to add client-side interactivity to an online card game. One of the requirements was that the card images should have OnClick handlers applied at particular times, but only to those cards which were face down.

The .NET developer in me immediately considered maintaining the state of all the cards in some sort of client-side collection. Then, I could have iterated over that array to set up the appropriate OnClick handlers when necessary. That would have worked, but it would have been messy, prone to breakage, and generally difficult to maintain.

Instead, I realized that CSS classes as flags would allow me to implement a more elegant solution. Within the code that “flipped” the cards face up, I used addClass to add a “flipped” class to the card images. Then, a simple $(“.card:not(.flipped)”) selected the set of cards which were face down. Using jQuery’s click(fn) on that set of elements allowed me to implement the entire feature in just a few lines of code. Perhaps more importantly, that code was far easier to read and understand than the alternative would have been.
Understand unobtrusive JavaScript.
In the ASP.NET world, we use a lot of what’s sometimes termed obtrusive JavaScript. This means that client-side event handlers are defined as attributes on elements. For example, several ASP.NET WebControls render an OnClick=”javascript:__doPostBack()”attribute as part of their markup. This is considered obtrusive JavaScript.

When ASP.NET was initially being developed, this inline JavaScript was the norm. However, as browsers began providing more sophisticated faculties for imperatively adding event handlers, this declarative technique quickly lost favor with client-side developers. As a consequence, the preferred approach has shifted toward what’s called unobtrusive JavaScript.

Unobtrusive JavaScript is now considered a best practice when wiring up client-side event handlers. This is primarily because it facilitates separation of concerns between behavioral JavaScript and structural HTML markup. Unobtrusive JavaScript also helps you to write cleaner, more semantic markup, which improves accessibility and often has SEO benefits.
Use the console to learn interactively.
Coming from the save-compile-reload paradigm of statically typed server-side development, it’s natural to approach client-side development in a similar fashion. While you certainly can write client-side code that way, it’s akin to working blindfolded when you consider the alternatives.

Since JavaScript is usually interpreted by a browser, the browser is one of the best debugging environments available. In particular, a JavaScript “console” is terrific for interactively interrogating the DOM, testing jQuery selectors against actual markup, and refining JavaScript code in real-time.

My preferred browser-based tool is the Firebug addon to Firefox. I cannot praise this Firebug highly enough. It has revolutionized how I approach client-side development, both of JavaScript and of CSS. If you prefer Internet Explorer, IE8’s updated developer tools are also very capable in this department.
Whatever your browser of choice, I urge you to give these utilities a try when debugging client-side functionality. Once you become proficient with one of these tools, you’ll be amazed that you ever developed client-side code without it.
Get the VSDOC.
Even though browser-based tools are great for debugging, an ASP.NET developer’s primary editor is still going to be Visual Studio. When writing jQuery code in Visual Studio, having proper Intellisense can make a tremendous difference in productivity. The discoverability that Intellisense provides is especially beneficial when you’re unfamiliar with jQuery’s API.

As part of the official support for jQuery, Microsoft provides a documentation file to provide jQuery Intellisense inside Visual Studio 2008. This is provided through what’s called a vsdoc file, and is available on the jQuery download page (via the “Documentation: Visual Studio” links).
Jeff King has assembled an excellent FAQ to help you get Visual Studio 2008’s JavaScript Intellisense working: http://blogs.msdn.com/webdevtools/archive/2008/11/18/jscript-intellisense-faq.aspx

Conclusion

By now, it’s probably no secret that I’m a proponent of jQuery and of Microsoft’s decision to officially support it. Hopefully, some of the benefits outlined in this article have made it clear why. After you’ve spent some hands-on time with the framework, I believe that you’ll begin to share my enthusiasm for it.

A common story I hear from ASP.NET developers is that they gave client-side development a fair chance several years ago, found writing cross-browser DOM code to be incredibly tedious, and have avoided it ever since. If you’ve had that sort of bad experience with client-side programming in the past, there’s never been a better time to give it another try. Between improved tooling and JavaScript frameworks such as jQuery, most of the old frustrations have been completely eliminated.

Case in point, the Glimmer application that the MIX team has just released is a great companion to your exploration of jQuery. As far as I know, a task-oriented jQuery GUI is something that has not previously existed. Kudos to the MIX team for bringing us this innovative new tool.

Glimmer

Karsten Januszewski — Tue, 28 Apr 2009 17:52:38 GMT

Want to use jQuery to enhance the experience of your site?
Don’t want to write or cannibalize a bunch of code?

With Glimmer, easily create interactive experiences like rotating photo-galleries/mastheads,drop-down navigation, hover effects, or custom animations.

Get started!

Watch the video, download Glimmer, check out the live samples below.

Glimmer allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS.

Glimmer jQuery Design Wizards

Image-Sequencer

Rotating image banners, or any kind of image sequencing is a snap with our Image-Sequencer Wizard.

Whether it be for advertising, mastheads for your website, or, perhaps, an image gallery for your photos, we can help. Just tell us which photos, and a little information on how you’d like them to act, and Glimmer does the rest.

Customized Tooltips

Making beautiful tooltips is easy!

Customized tooltips with images or stylized text can enhance the experience for your users.

Check out Glimmer on Vistimix.com today!

"Freestyle" Animation

Want to go crazy?

jQuery's support for animations is amazing. Glimmer makes it easy to create standards-based, custom animations that can work directly with your existing HTML and CSS!

Get it for free: Download Glimmer

Samples

Download all samples

Glimmer: a jQuery Interactive Design Tool

Karsten Januszewski — Mon, 27 Apr 2009 22:14:00 GMT

The Genesis of Glimmer

Like many software projects, Glimmer was born during a conversation. Tim Aidlin and I were having dinner together. We'd just recently finished up Oomph: A Microformats Toolkit and we were reflecting on our experiences with that project and what we'd learned.

In building Oomph, we used jQuery extensively, which was a new experience for both of us. The ability to so easily manipulate the DOM on the fly, slinging CSS around at will, was a revelation in terms of what we could do with the standards-based web as a designer and developer. We had a pretty good workflow going, with Tim drafting up HTML and CSS while I realized his vision programmatically through jQuery. In some ways it was akin to the workflow we had with WPF. (See The New Iteration, Tim's post on workflow and this Channel9 interview for more on Tim and my own thoughts on the topic of developer/designer workflow.)

While we had a good workflow, it wasn’t perfect because, if Tim wanted to make a change to the look or feel, he would have to either (1) modify the JavaScript himself or (2) have me make the change. Like many designers, Tim is comfortable in visual tools like PhotoShop and Blend, and is good at writing HTML and CSS, but is not excited about writing lots of JavaScript code. He can write code and adapt example code when necessary, but doesn’t want coding to be his primary job.

This is when we had the following realization: what if there were a tool for designers to create amazing web experiences in HTML, CSS and JavaScript without having to write code? Thus was born Glimmer: a jQuery Interactive Design Tool, a new prototype from the Mix Online Labs which makes jQuery accessible through a visual tool.

Here’s a screenshot of the Glimmer Welcome Page:

Want the quick-and-dirty on Glimmer? Watch the video:

Or read on to find out more about the goals and vision of Glimmer.

The Goals of Glimmer

The objective for Glimmer is pretty simple: to enable the power of jQuery within a tool. If jQuery is the “write less, do more” JavaScript library, then Glimmer is the “write none, do more” jQuery design tool.

Glimmer has three core audiences: power users, designers and developers.

First, Glimmer is optimized for the power user or web author who wants to use step-by-step wizards to create common web experiences like image sequences, animating dropdown menus and tooltips. For these scenarios, Glimmer makes it super simple, generating HTML, CSS and jQuery and packaging it all up, ready to be slapped on a server.

Here’s a screenshot of Glimmer’s Image-Sequence Wizard:

Second, Glimmer is targeted at the designer who is fluent in HTML and CSS. For this person, who has an understanding of how HTML and CSS are used to build web pages, Glimmer provides a way to create web animations and experiences entirely through a tool. Any HTML file can be opened in Glimmer and then the elements inside that HTML file can be visually selected and manipulated, creating effects based on events that happen on the web page like load, mouseover, mouseout, submit and more. These effects might include opacity fades, position movement, scaling of items and manipulation of the HTML, both through appending/removing HTML and through modifying the page's CSS on the fly. With these effects, web designers can add interactivity to their web pages without writing code. There is also the ability to run timers and to chain actions sequentially. Using these two techniques, a kind of simple key frames can be established. Consider the web comic at the top of the lab page that Tim created with Glimmer. He built this by chaining together a series of animations. It is a great example of what a creative designer can build with the tool.

Third, Glimmer may be of interest to jQuery developers, both beginners and experts. For people just learning jQuery, Glimmer can function as a teaching tool, a WYSIWYG editor that generates code which can be inspected, analyzed and then potentially tweaked or modified. Using a tool in such a way is an excellent path to learning. I think about tools like Microsoft Expression Blend, which helped me to learn XAML, or Microsoft Expression Web, which helped me to learn CSS. For jQuery experts, Glimmer can help bootstrap a project, allowing for rapid development by generating boilerplate code that may then be tweaked. It is worth noting that because the tool generates code, it may not be as optimized as what an experienced jQuery developer might write.

Here’s a screenshot of Custom Mode in Glimmer, which is how designers and developers can use Glimmer to create custom scripts:

The Future of Glimmer

As we built Glimmer, we realized we'd taken on a pretty ambitious project. We knew we couldn’t cover every scenario. As such, from the start, we designed it for extensibility and plug-ins. jQuery itself was inspirational in this regard, given how vibrant the community is around building plug-ins for jQuery. We wanted to do something similar for Glimmer.

There are two main points of extensibility for Glimmer. First are the wizards. Anyone can write a wizard that plugs into Glimmer. For example, someone could write an image gallery wizard which would generate HTML, CSS and jQuery based on a series of prompts. Second, anyone can write a Glimmer effect. Currently, Glimmer ships with 8 effects, which include things like opacity animation, x position animation, add CSS class, etc. But this only scratches the surface in terms of other effects that could be written. For example, someone could write an effect that uses a feature from a jQuery plug-in.

It is worth noting that Glimmer was entirely architected to separate the Glimmer UI from the underlying algorithms and architecture that handle all the jQuery code generation, JavaScript serialization and JavaScript deserialization. What this means is that it is entirely conceivable someone could take the Glimmer library (GlimmerLib.dll) and create a whole different UI, perhaps a alternate UI in WPF or one in Silverlight or ASP.NET. We choose to use WPF because we wanted the tool to have access to the local file system as well as work offline. In our experience, web designers and developers build their sites locally first, which is why we built Glimmer as a desktop application. (And we love WPF.)

With this release of Glimmer, we are excited to share what we've built. We look forward to your feedback about Glimmer. Download it today!

Sushi Anyone? Learnings that might be applied to web site user experience

Hans Hugli — Thu, 23 Apr 2009 03:18:26 GMT

Northern Exposure was a show that I enjoyed watching while it was on the air, though silly at times, it viewed the world’s complexity through the eyes of a simple town of people in Alaska. Sometimes it arrived at some very interesting and thought provoking conclusions. Similarly, in my former life I was a professional chef. And I tend to apply what I learned there, to my current career. It’s had some successful results.

I began working as a Sushi chef over 20 years ago when Sushi was still considered a fad. I worked at one of the most popular Sushi bars in Seattle in that period for 10 years. It was a very different occupation than software in many ways, but surprisingly much of what I learned is applicable to software and web site user experience.

Here’s what I consider some of the more important things. I’ll allow you to extrapolate how this can apply to software and website user experience.

Earn your customer’s trust. Trust is not default or implicit. The first time a customer sits in front of you, show respect and be attentive to their needs. Be humble. If a customer does not trust you, all is lost. Epic fail. A customer will come back to you if they feel they are treated right.
Know your customer. What do they enjoy? Remember it. It matters. Always remember the special things a customer likes down to the minute details. For example I used to make custom handrolls for a famous musician that kept them coming back time and time again.
Presentation is first. Taste is second. Think of it as first impressions are most important. I believe that taste and texture are also paramount, but if it looks unappetizing, your customer won’t even consider putting it in their mouth, and that’s a fail.
Be an expert. Know your fish. Be at the ready to answer the most esoteric questions about your product, because sooner or later the question will be ask.
Keep your knife sharp. Be prepared. Be prepared for the rush. Preparation cannot be underestimated. It can make or break the success of a restaurant. There is a phenomenal amount of preparation involved in a sushi bar. Who would have thought. “It’s just raw fish slapped on rice, right?” some people said jokingly. Have contingency plans. Make sure you can handle the volume.
Beginners should not be given Uni (sea urchin) on their first visit. Give them more advanced items when they are ready. Don’t force things upon them, but keep trying to push the boundaries.
Keep the area neat and clean. Don’t clutter it up with irrelevant things. Some people don’t care, but those that do will not sit down in front of you.
Maintain a high level of quality. Don’t give customers product that is not up to standards. This is a quick way to lose the clientele that matter. Take care in every aspect of the process.
Always greet the customers that come in, thank them when they leave, and most importantly always respond to customers praise and queries.
Change the menu on a regular basis. Keep things lively. Try new things. Experiment. Innovate. Test new things on a small audience, and if successful put it on the menu.
Creativity is highly valued. Adding that really cool looking garnish to the dish is not gratuitous. It shows the customer that you took the time, and that you care.
The customer is always right. Cliché yes, but it holds true. Give the customer the best service you can. Always think of the customer. Always be friendly.
Lastly, have fun. Don’t do it because you feel you have to or need to. If you don’t enjoy it you might consider another occupation.

Do you have former occupation wisdom that can be applied to software and web site user experience?. Write a comment and tell us what you think. Stay in touch with us through Twitter.

A Belated Happy 5th Birthday To Channel 9

Karsten Januszewski — Mon, 20 Apr 2009 17:40:34 GMT

You know when you forget to wish someone a happy birthday and aren’t sure if you should still bring it up when you remember later? Well, that’s the boat I’m in, but I’m going to swallow my pride and do it anyway: Happy Birthday, Channel 9. (If you aren’t familiar with Channel 9, read about it here.)

It’s interesting watching the video with Anders Heljsberg and his comment that we now take Channel 9 for granted, but in its early days it was somewhat controversial and out-of-the-box for Microsoft. I think back to my perception of Microsoft before joining the company and before Channel 9, and it really did feel like a faceless company. Things have changed dramatically on that front. Between the various bloggers at Microsoft as well as all of the videos and conversations on Channel 9, the company is hardly faceless any more. The whole origin of the name Channel 9 – the channel on an airplane in which you can listen to the conversations happening in air traffic control – speaks well to its goal of providing a window (no pun intended) into what’s happening inside the company. And it was really Channel 9 that helped jump start that for Microsoft.

I want to give a particular shout out to the work of Charles on Channel 9. The guy is intrepid. He produces so many amazing interviews about things happening at Microsoft that would otherwise go completely under the radar. It’s not like they always come to him either: he’s out digging up interesting technical things that are happening, like a good journalist. And, if you get to know his interview style, he turns out to be a great journalist, asking the right questions, sometimes the hard questions, but also always letting the interviewee have space to respond. If you look at the Going Deep show he’s done, you’ll find simply an amazing array of truly “deep” technical interviews with people that know their stuff. And, he’s been doing it for 5 years. Nice work, Charles!

Go Channel 9!

Happiness is a State of Mind

Nishant Kothary — Fri, 17 Apr 2009 19:50:49 GMT

I'm writing this on my flight from Dallas to Orlando where I'll be speaking at and attending CRE8. I'll be handing out some A Website Named Desire posters in my session. If you're attending the conference, drop by, say hello and grab a poster.

Last night my wife brought our laptop to bed with her. Somehow, we ended up flipping through pictures of our dog, Yoshi. We are nuts when it comes to taking pictures of our animals. We have thousands of photos of the cats and Yoshi. Anyhow, so there we are, flipping through pictures, laughing at all the moments we caught him on camera being a goofball when we hit the "Neutered" album.

Like any good dog owners, we took Yoshi to the vet a few months ago to get him neutered. I dropped by the vet's office after work to pick him up; they had me wait in the waiting area while they went in to grab him. A few minutes later, Yoshi emerged from the back with the vet's assistant looking like this.

I about died laughing despite the evident tragedy of the situation. He was totally awkward with the cone around his head and bumped into everything on his way from the back doorway to me – the door-frame, the reception desk, a planter sitting next to the desk, the ground (because he tilted his head) and eventually, into my leg. The cone, if you haven't figured it out by now, is meant to protect the dog from nursing its surgical wound by licking it.

Now, what I found interesting was that Yoshi didn't complain for a minute about this whole episode. He figured it was just a part of life and couldn't be bothered enough to dwell on the inconveniences it caused in his day-to-day life. He was just happy to be home, to be reunited with his parents and his sisters and to finally be chewing on his beloved bone again. And boy, did he show it through all his bump-waggity panting and awkward play bows.

To put it into perspective - my puppy woke up one morning, found himself all alone in a strange place that smelled like dogs and rubbing alcohol, had his body altered in one of the worst ways possible, and returned home with an absolutely inconvenient contraption attached to his head that, to him, was there to stay forever. Despite that, he was happy as a button when we got him back. No complaints, no whining, nothing.

What is the point of my telling you this? Well, nothing in particular, really. I don't know about you, but life in this connected, virtual, software-driven world can be pretty isolating and overwhelming at times and I like having some memories like this in reserve to bail me out whenever I start feeling down. They help put things into perspective. I'm wondering how others cope with the daily stresses of life. How do you put things into perspective when you're feeling down about something?

Write a comment and tell us what you think. Stay in touch with us through Twitter.

Facebook Love, Twitter Hate

Thomas Lewis — Wed, 15 Apr 2009 15:30:12 GMT

A couple weeks ago I took a vacation that was desperately needed. It was like any vacation that I have taken before. But I did do something different this time around; I cut myself off from the grid for the most part.

It was hard at first because I had just worked on a conference where Twitter use is rampant and I enjoy engaging with folks on Facebook and Twitter (I also use other social networks like Plurk, but not as much as Facebook and Twitter). Although after two days, I didn’t find myself on my phone texting “I just ate at Monkey Joe’s, you gotta get the Triple-Monkey Burger, FTW! #monkey #hamburger”. I think my wife was actually happier that I wasn’t sharing every aspect of our vacation in real-time.

What was interesting was when I got back and logged into Facebook and Twitter. I really picked up on a vibe that I had not really noticed before. Facebook activity was primarily positive while Twitter tended to be more negative. Facebook had much more positive items like “I love…” and “I like x too…” vs. Twitter’s “They left the pickles off the sandwich, EPIC FAIL!” Many of the folks I follow on Facebook are on Twitter as well. In some cases, I saw where the same person (I won’t call out their names) sort of had different personalities depending on which they were using. I became curious as to why this was the case and came up with some theories.

CAVEAT: My so-called research is not based on a controlled study using the scientific method. It is just based on about an hour of research, comparisons and talking with friends in the real world. That is why this post is under Opinions, not Research.

Theory One: Facebook activities tend towards the positive. Much of the news feed is status updates, but it includes photos and pages. Photos tend to be family-related and comments are generally positive. Folks can “Become A Fan” instead of a “Become A Hater”. Most of the pages out there are for supporting favorite TV shows, causes, etc.

Theory Two: Twitter is in the early adopter phase and attracts techies. This is changing as more people are signing up for Twitter accounts and getting more mentions and stories in traditional media. But with the majority being early adopters from the tech world and I have more of the techie crowd in my networks, I find the techie audience to be more critical (in good and bad ways). Since they tend to have the latest gadgets, it has become much easier to take a frustration and put it into 140 characters within seconds.

Theory Three: Twitter is more impersonal. Facebook users I have spoken to have relatives and family members as Friends which probably keeps the snark in-check. Also, who would ever comment on someone’s child trying to ride their bike for the first time with an “EPIC FAIL!”? Twitter activity tends to focus on the impersonal (events, politics, companies, etc.) and it is much easier to throw stones at entities vs. actual people.

So why do you think Facebook seems to be a kinder place than Twitter? What is your theory? Write a comment and tell us what you think. Subscribe to our Twitter feed if you want to stay in touch with us.

Opera's Web Standards Curriculum: Progress or Ossification?

Joshua Allen — Tue, 14 Apr 2009 04:32:55 GMT

The Internet has always been a sort of a class project, patched together via "loose consensus and running code", with new knowledge being created and shared tribally. At first, we shared knowledge via USENET newsgroups and loosely-maintained FAQs, and eventually Brendan Kehoe had the brilliant idea to write a text file for beginners called "Zen and the art of the Internet", which could be downloaded via FTP. Many people first got their feet wet from this document, but it wasn't long before Gopher and NCSA Mosaic came along, changing things yet again.

The ever-changing nature of the web is both a strength and a weakness. It's nice to know that you are never more than a couple of years out of date, and that you can catch up quickly. Did you know that it used to be a best practice to use tables for layout in HTML? You don't need to know that, since you can safely ignore old and outmoded advice. On the other hand, it's difficult to find a single authoritative source of education about Web Development, and a large chunk of the education out there is old and no longer relevant. You find yourself following a wide variety of community sites to keep up; not much different from the days of USENET.

In this environment, Opera asked a number of experts in the web standards community to create a full education program for "Web Standards Curriculum". The result is a comprehensive program which can be used in educational institutions to give students a foundation in the full range of skills necessary for standard-oriented web developers. They even cover topics like wireframing.

At first glance, this is a really unique and useful resource for the web. But on second thought, it raises some questions. Are "web standards" really that mature? Won't everything change again in a couple of years, leaving this site as another outmoded and confusing site among many? And does it promote a single company's political agenda?

I've read through the WSC carefully, and often share links with people who want to learn about the right way to build web pages. And there are many areas of web development practice which are mature enough to be part of a stable curriculum. I'm convinced that WSC is a really good thing for the web, and comes at the right time. Opera as a company isn't known for being shy about blasting other browser makers, but the WSC content is remarkably apolitical, as you would expect from good educational material. And the breadth of collaboration from other companies is a good sign. So, we give the WSC an enthusiastic endorsement!

So, what do you think? What are the sites that you follow to stay informed about professional web standards practices? Let us know in the comments, and don't forget to follow mixonline on twitter to be notified of future news and projects of the MIX Online team!

TreeMaps

Hans Hugli — Thu, 09 Apr 2009 20:29:18 GMT

In working on Descry we wanted to have one of the samples show a TreeMap infographic that displayed some data in an interesting way. Since the elections were occurring right at the time of the Descry launch, Nishant suggested that we show inaugural data in our TreeMap. This TreeMap shows the incidence of occurrence of particular words or phrases grouped in the TreeMap visualization.

When we originally wrote the TreeMap code, I had ported the TreeMap control from a Windows Presentation Foundation sample in the WPF Bag o’ tricks that was a single tiered implementation of a Squarified TreeMap. What is a Squarified TreeMap? Historically TreeMaps tended to sort items ascending by their children’s weights; i.e. items are listed in decreasing order of size, but this leads to the problem of children becoming increasingly thin vertically or horizontally as ever more children are added to a TreeMap, and makes it difficult to get a sense of relative size and also is not very esthetically pleasing. This article written by Jonathan Hodgson explains the problem very clearly and graphically, and it also points to the original research that was done to dramatically improve the effectiveness of the TreeMap to communicate information. I found it to be very interesting, and I wanted to be sure to pass it along.

Though our inaugural sample shows data in a single tier, the TreeMap implementation supports the nesting n-tiers of data; i.e. where TreeMaps contain other TreeMaps, this enables display of tiered or nested data such as a hard drive directory or any kind of data that has a hierarchal tree signature.

Tim Heuer just recently pointed out some very timely financial information that is well suited for a TreeMap control. He was referring to Department of the Treasury funded transactions of the Capital Purchase Program (CPP). The government site shows a U.S. map that displays the sum total of transactions per state on a mouse over and a list of the transactions per state when you click on a particular state.

I need to step back a moment and say that the purpose of a visualization is to answer a question. In the CPP case the question that the author most likely ask was: What is the sum of transactions for a given state? The map infographic answers that question well, but suppose we wanted to ask: Which state is getting most of the money? The map infographic does not answer this well since you would need to literally mouse over every single state to find the largest dollar amount.

One of the ways to answer our new question is to use a TreeMap control since it can give a sense of how large the transactions are for a given state relative to one another. To make this possible the data needs to be grouped by state, and then by institution. The above government site provided a link to the XML source that was used to generate their graphic, so I thought I’d try to quickly put this data into a TreeMap infographic.

I find that getting data into a format that a particular type of visualization such as a TreeMap can consume, is typically the most time consuming part of creating a visualization or infographic. There are two routes, in my mind. Write the visualization control in a smart and generic way so that it can consume many types of data sources, or alternately write it so that it will only accept one type of data source (such as a specific XML format) and put the burden of munging that data into that specific format, on the user. Which one is more useful depends on what arena you come from; for a developer doing XML transforms is not too uncommon, but for someone less technical, a generic control would be more useful. It seems with flexibility comes complexity.

For this case I did the later; I reformatted the XML to allow the TreeMap control to consume the CPP data. The infographic is posted, click on the image to see it.

View the sample, and download the source for this sample here available via the Descry project on CodePlex.

What are your thoughts about creating reusable infographics? What have you found to be effective? Let us know in a comment or you can always contact me, or Subscribe to our twitter feed if you'd like to stay in touch with us.

What We Can All Learn From Bill Buxton

Nishant Kothary — Wed, 08 Apr 2009 22:24:45 GMT

Someone asked me the other day if I'm finally able to take a deep breath now that MIX09 is behind us. My response was, "Well, I'm not sure I can call it a deep breath, but yeah, I get to breathe now." Things are still pretty crazy (good crazy), but I have a few minutes to spare right now, so I figured I'd quickly write up some thoughts that have been simmering for a few weeks now. If the title didn't give it away already, it has to do with MIX09. Specifically, my experience working with Bill Buxton.

I was a part of the keynotes team this year and one of my responsibilities was to help us land the Bill Buxton opening keynote (alongside another great guy from my team, Jamey T). A few months ago, Mike Swanson and I went to Building 99 to chat with Bill to see if he was interested in being the front man for the conference. I'd scheduled a room in Building 99 and when we got there, much to our horror, we found out that it didn't exist. So, we frantically searched for Buxton and almost gave up when we spotted him walk by (clearly, he was searching for us, too). I yelled out because I recognized him from pictures, and he walked up to us and exclaimed, "I'm so sorry to have kept you guys waiting. I just couldn't find the room! I really apologize." First impression: Buxton was down to earth. Ridiculously down to earth for being, well, Bill Buxton.

Be Humble

Humility, among other things, is key to helping you recognize opportunities and getting the most out of them. If you pretend to be humble, people can generally see through that and it's pointless because it doesn't really help you in the long run. I could probably write up fifty anecdotes about how Bill embodies humility from my personal interaction with him but I'll spare you. Suffice to say, Bill is the most humble guy of that caliber that I've ever had the opportunity of interacting with. I wonder if it has anything to do with his being Canadian; seriously, I've yet to meet an arrogant Canadian.

Be Open

Humility is not enough. You could be humble, but you could also be closed off to learning new things and consequently, improving and growing. But, Bill was anything but closed off to the world. He frequently bounced ideas off me. Early on, I thought it was just a charade to keep "the dude on the keynotes team" happy, but I soon realized that he was seriously seeking feedback. And, I wasn't the only one in his feedback chain; he reached out to folks all over the company of all designations, and as a result, his keynote was a wonderful stew of a breadth of ideas. Like any good designer, he distilled it with his own special ingredients.

Trust your Instincts

Seems like the older we get, the more we're rewarded for discarding any notion of instinct and experience in favor of data. Unfortunately, McNamara's Fallacy is rampant in the workplace and my hunch is that we make decisions off questionable data analysis more than any of us would ever like to admit. Bill has an amazing knack for balancing a very data-driven approach by tapping into his breadth of experiences and his instincts. For instance, one of the key decisions he made early on was to not overly rehearse the keynote address – as you can imagine, this was very scary for many of the folks involved, but he truly believed that rehearsing a keynote that was meant to inspire an audience in rough times would simply take away from it. Sure enough, he was right.

Take Risks

This loosely ties to the previous point I made, but deserves its own spot. Risks, much like subjective thinking, seem to have developed a bad rap especially in the corporate world since it affects shareholders, and so on. Unfortunately, I think it's because most people equate risks to recklessness, and that's a tragedy. A calculated, well measured risk can make a world of a difference in the outcome when executed properly. Heck, you could argue that progress is nothing more than payoff on calculated risk-taking. We took some very calculated risks on Bill's keynote; one of them being the very theme of the keynote: Return on Experience. Arguing that now is the time for furthering the practice of user experience and good design – which, as Bill eloquently covered, is still a pretty foreign concept in today's world – could be seen as a ridiculous argument to be making, especially amidst the current economic crisis. Bill drew from the industrial design revolution of the 20's to strengthen his point, and the risk definitely paid off. It inspired like no data could have inspired.

"I'm not a businessman, I'm a business, man."

That's a JayZ lyric that I used in my MIX09 presentation (A Website Named Desire – 53m 40s) and find myself repeating over and over. The lyric could be misconstrued as arrogance, but I really interpret it as: always look at the big picture, and stop focusing on that narrow little area that only affects you. Bill was pegged as the token "designer" for MIX09, but that didn't stop him from delivering on the big picture, i.e. Microsoft's strategy for the Web. He delivered a keynote that communicated that instead of just focusing on UX (granted, UX is a big part of the solution he pitched). He understood that his role at MIX09 was to land that message and he didn't let any hidden agendas sabotage that. You can apply big-picture thinking to anything – design, engineering, marriage, relationships, business, sports, you name it – and it always makes the end product much better.

There's much more I'd love to write about my experience working with Bill, but I'll save that for a sequel. If you haven't had a chance to watch his keynote address, I highly recommend it. Here's a link - http://videos.visitmix.com/MIX09/KEY01. Tell us what you think about it and about Bill, too. Would you like him to come back next year?

Write a comment and tell us what you think. Stay in touch with us through Twitter.

A Fresh Sliced Flickr Badge by Cindy Li

Joshua Allen — Thu, 02 Apr 2009 23:41:51 GMT

Do you want the Flickr badge on your web site to light up on IE8? Check out this article and sample created by Cindy Li, showing how she converted her Flickr badge to support IE8's "Web Slices" feature. Read on to learn more about how it was done.

The Web is one big collection of hacks, and the prevalence of Javascript-based "badges" to personalize blogs and profile pages is a prime example. JavaScript-based badges are essentially a hack (in the good way) that allows you to integrate content from other sites without having to write complicated back-end code, and are a nice fit with the way that web designers work. The first widespread example was probably moreover.com about 10 years ago, but now you can find "badges" for practically anything -- from Facebook and Twitter to Flickr.

We're especially pleased to see people adhering to Web standards when implementing JavaScript badges. For example, Veerle Pieters modified the Flickr-provided photos badge to conform to Web standards, and her modified Flickr badge has been used far and wide by people who care about good markup.

When we designed the "Web Slices" feature for IE8, we tried to incorporate this same utilitarian spirit of JavaScript badges, as well as a respect for Web standards. Web Slices allow users to "slice" off a portion of your web page and pin it to the toolbar area, so that they can see that slice of the page even when they are not visiting your site. Think of things like weather, traffic, stock quotes, photos, or social network status updates.

Web Slices have seen good adoption, with slices from companies like eBay, Digg, ESPN, and StumbleUpon available at launch. Mozilla contributor @glazou even ported the basic Web Slice functionality to Firefox as an add-on. But we designed the feature to be usable by any markup-centric web designer or developer; not just for big web sites or coders like Daniel Glazman.

So, how did we do? We asked Cindy Li, a well-known standards-based web designer, to take a look at Web slices and see if the Web slice creation experience lives up to the hype. Cindy decided to convert Veerle's Flickr badge to a Web Slice. You can read her full experiences here, and get the code to use on your own blog. The short summary:

Creating a Web slice based on pure HTML and CSS was pretty easy.
Using the JavaScript badge added some complexity and work. You will definitely want to consult Cindy's excellent writeup if you are doing something similar.
The design required to support the JavaScript badge does not work with the Firefox extension, since it uses functionality that the Firefox extension doesn't yet support.

Overall, it was an interesting experience, and we thank Cindy for taking on the challenge. And it's great to have a version of the Flickr badge that supports Web Slices!

So, have you tried building any Web Slices yet? What has your experience been? Easy? Difficult? We would love to hear you feedback. (And don't forget to follow us on Twitter for more updates, news, and open-source projects).

Zeno 4803

Tim Aidlin — Wed, 01 Apr 2009 22:18:14 GMT

As the keynote started, there were five of us spread out around a table in a conference room on the fourth floor of the Venetian Hotel Conference center. I had Tweetdeck up, and was watching what the attendees were thinking. Jim Lin of Vertigo sat across from me, busy working on a fix to the Twitter feed on the homepage of http://live.visitmix.com (it’s since been retired from the homepage, but here’s a screenshot of what it looked like during the conference.)

We had also been using Twitter earlier in the show to help power Flotzam on the big screens directly before the keynote addresses on days one and two.

I worked on this project with Karsten Januszewski, who also wrote a good Opinion post recently revolving around his experience with Twitter.

The immediacy of feedback with technologies such as Twitter are amazing. By searching for keywords, or “hashtags” (ie., #mix09, #mixonline) and coupled with software such as Tweetdeck, which aggregates searches, I was able to get a view exactly of what the audience, both at the event and online, is thinking.

This is both good and bad: 1) it’s good because you can immediately react to problems and address users concerns. And 2) see number one. Not only could *I* see where people were having difficulties with the site, but *everyone* could see where people were having trouble with the site, which meant that Jim and I had to, well, fix the site *now.*

Now, the reality is that nothing was broken and everything went basically according to plan. Yes, getting the on-demand session videos online took the vendor a little longer than we had anticipated. Yes vendors did have to make some last-minute adjustments to the Session Browser and Twitter client on the homepage. In all, though, the total experience rocked: we had live streaming video on the homepage, a live, *unedited* Twitter feed that anyone could access by hashtagging their Tweet with #mix09. We wanted to be open at the risk of being taken advantage of. My faith in humanity still stands. Everyone was respectful. Thanks ;-)

The feedback through the MIX09 event was invaluable. We continue to welcome your suggestions and thoughts on how to make the experience as fluid and friendly as possible. Make sure to follow MIX Online on Twitter at @MIXOnline, the MIX09 conference at @mix09 and me, personally, at @Systim

Write a comment and tell us what you think. Subscribe to our twitter feed if you want to stay in touch with us.

::: systim out :::

Twitter: A Brave New World in the Digital Panopticon

Karsten Januszewski — Mon, 30 Mar 2009 18:17:30 GMT

Having just returned from SxSW Interactive and Mix09, Twitter was pervasive. Some observations:

On several occasions, I would meet somebody and, rather than exchanging business cards, I would be asked on the spot for my Twitter ID and the person would immediately start following me via their cellphone.
When I did actually get a business card, it often contained the person’s Twitter ID right on the business card.
I was contacted via Direct Message (DM) through Twitter as often as I was through email.
I constantly saw Twitter clients and/or the Twitter webpage open on people’s laptops during the show.
I finally “got” Twitter replies. There is the obvious thing that you can’t DM someone if they aren’t following you. But more interestingly, Twitter replies allow for a kind of public conversation, in the sense that I might want my reply to someone to be in public so that other people can see it, find it, etc. For example, we released Flotzam and somebody twittered about a bug they found in it. By replying to him to explain a workaround and also tagging the tweet Flotzam, somebody else who might be searching for problems around Flotzam would see our conversation. Interesting.
Tagging tweets is a simple way to create an asynchronous chat room. For example, we did a jQuery meet-up at Mix and during the meet-up, we were showing one another cool links and whatnot. The way we decided to share out both our contact information and all the links was to come up with a simple hash tag (#mix09jquery). We could then search for that hash tag (http://search.twitter.com/search?q=mix09jquery) and see all the links we shared as well as keep track of one another.
The immediacy of http://search.twitter.com is amazing. I don’t think we understand its implications fully just yet. But I now have multiple RSS feeds I subscribe to based on Twitter searches. Also, if you are interested in doing some programming around the Twitter search API, check out this blog post.
The Wikipedia entry on Twitter is pretty darned fascinating. Recommended reading.
I got hip to a new Twitter client, Blu, that is pretty cool. Very user friendly and also flexes WPF’s muscles nicely. Worth checking out.

So, what’s it all mean? Not really sure. But Twitter isn’t going away, that’s for sure.

Gaming is required

Hans Hugli — Thu, 26 Mar 2009 04:34:44 GMT

Last year I was forwarded a 3 year study done by the Digital Youth Project published by the University of Berkeley that supported a long time opinion of mine, that gaming, texting and socializing online could actually be beneficial for people and most importantly our youth.

The irony is that the studies' findings countered general consensus on the topic. It’s always very fascinating to me, when it is found after deep examination, that findings contradict what the majority of people had assumed.

Experimenting in a real world physical environment helps children to learn about that environment. For example, kids that play with water in the sink are generally going to understand the concept of conservation of volume much more quickly than someone that has never had the opportunity. Taken to its extreme, the military now endorses using “games” as a means of training its soldiers; not to mention that flight simulators train our pilots. If a simulated environment is close enough to reality, it can be close to indistinguishable from reality.

To support my belief that new media is beneficial: My daughter has become an avid fan of Second Life, drawn to it for the social networking aspect. I’ve not truly experienced it firsthand, but I have been privy to the secondhand experience in more detail than I care to know. As for the benefits: I can attest that it’s been a forcing function for my daughter to learn about concepts and computers in many ways. To cite some examples: She’s learned to type very fast. In interacting with her peers she has increased her vocabulary substantially, and prides herself in that. She’s learned to hold deep conversations and stand up for herself. Working in this environment has compelled her to learn new tools such as 2D packages like Gimp and Photoshop and 3D packages like 3D Studio MAX and Maya. It’s motivated her to learn how to research to find the best solution for a problem, and to network with peers to assist her in finding that solution. She’s learned to understand the concept of a working economy and learned the value of buying/selling, trading and bartering. The list goes on.

I myself have always been more interested in applications that simulate physics and reality, from simple web apps to games that require complex physics such as PGR4 or Forza II. These kinds of apps can be fun and persuasive, and if properly executed, can simultaneously teach fundamental concepts. One simple and popular example that’s been around for years has recently gained media attention: LineRider. LineRider is fun, and yet demonstrates concepts of gravity, kinetics and momentum.

Writing apps like these are generally not for the light hearted and usually take a fair amount of math and physics knowledge. There are physics libraries that exist that can take away some of the burden of writing such an app. Here’s the "Physics Helper" Silverlight library you can experiment with, with samples. Here is the Farseer Silverlight physics engine that the Physics Helper is dependent on.

Here are a few examples of some simple apps that I've found fun, yet educational: A Motor Physics sample, an example of a soft body physics sample, a Digital Logic Simulator, and here’s a fun visualization that applies physics. Here how the visualization was put together.

As with everything there is always a potential danger in software written to emulate reality; if key concepts are missing, it will create a false reality, such as a game that simply chooses to ignore important concepts like gravity, or lack of accountability for actions such as paying for something.

What’s your take on new media? Do you agree with the findings of the Living and Learning New Media study? What are you personal experiences? Do you know of some interesting game or physics examples? Make a comment below or tweet me!

So Long, Farewell, Auf Wiedersehen...

Joshua Allen — Tue, 24 Mar 2009 04:58:52 GMT

And so we say "Goodbye" to another excellent MIX conference. MIX09 is finished, and MIX10 is announced for next year, but we will continue publishing cool new open source experiments and articles here at MIX Online. We'll be bringing you code-name "Glimmer" soon, and a super top-secret project shortly after. Come back to visitmix.com regularly, or subscribe to our twitter feed to always get the latest.

All of the session and keynote recordings are now available online. We are especially happy to be able to bring you three sessions about projects that have been featured here on MIX Online in the past couple of months:

A Website Named Desire (visit the site)
Oomph: A Microformats Toolkit (see the labs page)
Descry: Interactive Infographics (see the labs page)

In addition to the session and keynote videos, we worked hard to bring you in-depth video interviews that provide more context to go with the partners and announcements you saw in the keynotes:

Bill Buxton Conversation with Gary Hustwit, creator of "Objectified" and "Helvetica". Absolutely fascinating!
Bill Buxton discusses "Return on Experience"
Expression Web SuperPreview. Preview your web pages in a variety of browsers and pixel-compare to your comps.
Netflix is making more money with Silverlight
Radio Station KEXP created a hot new seamless online/offline experience for video and music.
Bondi's Digital Archive of past Rolling Stone and Playboy magazine issues.
Dean Hachamovitch discusses the complex tradeoffs in creating the world's most popular web browser
Deborah Adler delivered the inspiration in the Day 2 keynote.
OneRiot's Sexy Web Slice, Visual Search, and Accelerator featured in the IE8 keynote
SynapticMash is an interesting startup focused on educational institutions
Eduify is an online service for students, and a partner at MIX09

MIX09 Live Blog #4: Changing Behavior by Design (Deborah Adler)

Tim Sneath — Thu, 19 Mar 2009 16:38:01 GMT

Introducing Deborah, Bill Buxton says, “she doesn’t come from our culture. To her, a developer is someone who turns your photos into prints!” Deborah Adler was behind the redesign of Target’s ClearRx drug prescription packaging, which has had a big impact in avoiding drug prescription misusage.

0939 When you wipe away the high-tech jargon, we’re all in the business of creating an experience for a customer. When you make it a comfortable or enjoyable one, your job is done!

0940 In redesigning the Target packaging, I started with my grandmother. She accidentally took her husband’s prescription. When I looked into it, I could see why – they both were prescribed the same drug at different strengths, and since their names were similar, there was very little to notice different about the two packages.

60% of Americans don’t take their medications correctly. The number of prescriptions filled in the US each years equals more than 10 per person. With 300 million citizens, that represents 3 billion drug prescriptions. We spend a huge amount of money dealing with the issues of incorrect drug usage, and the costs are measured in lives.

0944 Deborah is highlighting some of the design issues that plague drug packaging – poorly printed text with bad iconography, large quantities of small print text with poor formatting and long line length, complex text (“do not take with nitrates” is only meaningful if you know what a nitrate is).

0946 There’s no hierarchy of information – how do you know what is relevant and what is just manufacturing information? In redesigning the packaging, the goal was to combine information architecture with intuition and previous knowledge of cognitive schemas (knowledge of what the most important pieces of information are). I used color coding so that no two people in the same household have the same color bottle. I wanted people at a glance to know who it was for, what the drug was, and when to take it. I even included a magnifying lens in the back of the bottle so that people who couldn’t read small type had a way to look at it.

0951 We’re now looking at chemicals that change color over time, so that when a drug expires, a big cross appears over the label.

0952 When I completed my thesis, I went to Target to see whether they would adopt it. Target has a “design for all” philosophy, and they took the idea under their wings and refined it into the ClearRx system, which is now standard for all Target prescriptions.

0957 Lots of real-world challenges that we had to address in productizing this: for example, there are 23 variations that had to be addressed due to state law differences. We had to retool the production system too, for example with duplex printing. When Richard Carmona, the former US Surgeon General reviewed this, he said, “the new design is a simple yet important step in improving the health literacy of all Americans.” New York Magazine first broke the story about the ClearRx system – it was great to hear the story presented both from the designer’s perspective and the end-users’ perspective.

1005 Let me give you the life-long lessons I learned from this project. What separates you from your competitors isn’t design or development, it’s truly thinking about the person who will use your design or development and figuring out how it can solve their needs. Once you start thinking about your customers’ needs, it becomes a habit. When you start from this perspective, you’re no longer just a designer, you’re a user experience designer, and I salute you for this!

And we’re done! Don’t forget to check out the other sessions at http://live.visitmix.com, including Giorgio Sardo’s “lap around IE8”. I’ll be continuing to live blog through the conference, so keep an eye on http://visitmix.com/Opinions and http://blogs.msdn.com/tims for more!

MIX09 Live Blog #3: Internet Explorer 8 (Dean Hachamovitch)

Tim Sneath — Thu, 19 Mar 2009 15:46:07 GMT

0906 Groundhog day! Bill Buxton is back on stage introducing the two keynote presenters. Today is the day we launch Internet Explorer 8!

Download Internet Explorer 8 here!

0912 Dean Hachamovitch is on stage. Last year at MIX, we made eight announcements about IE8 and we heard feedback that there was too much to focus on. So today, we’re just focusing on three categories: the people who build the web, the people who use the web, and the people who attack the people who use the web. We’ll show the progress we’ve made on interoperability and standards, but we’ll also show you how we built a great browser for the people who just want to browse. The challenge today isn’t just writing a browser, it’s writing a browser that works. Looking at competition, nightly build by nightly build, is interesting to a small number of folk – most of whom are in the room! To build IE8, we took feedback from millions of people.

Today, we’re excited to release the final build of Internet Explorer 8 to the web. It’s now available for download from microsoft.com/ie8. It’s available in 25 languages, across Windows Vista, XP and Server in 32-bit and 64-bit versions. We’re releasing it here because we’re excited about what you can build with it as developers and designers.

0915 We used real-world data to build IE8 – hundreds of millions of users, 200+ data points with the products, millions of user sessions, hundreds of hours of usability labs, and dozens of in-home studies. Never underestimate how many people click “submit error report” and the power of that data!

80% of navigations are back to where the user has been already. That’s why when you go to the address bar or the search box, you’ll see data from previous navigations.

0917 In the search box, you’ll see “quick pick”. 70% of users have more than one search provider installed, and we wanted to make it easier for users to access them. Restoring tabs that have been closed is really easy. Another feature that will help users navigate is color-coding and grouping for tabs.

0919 We discovered that users don’t care about why a browser crashes when it fails, they care about getting back quickly to where they were and minimizing downtime. In IE8, we now have tab crash isolation – when one tab of the browser fails, it doesn’t bring down the entire browser.

0920 Showing a short version of the performance testing video (download the full version here). The speed of a browser is dependent on more than just a scripting engine – when you look across the entire stack (DOM, HTML rendering, script, etc.), IE8 is faster than other browsers on many real-world sites.

IE blocks over a million phishing attacks a month. It also has a huge impact on protecting against malware – our data shows that one in forty users running IE8 have been protected from malware each week. An independent study shows that IE8 protects against twice as many malware attacks as any other browser.

IE8 has click-jacking protection, per user ActiveX, cross-browser scripting attack prevention and many other security enhancements that will make end-users’ online lives safer.

0925 We have an amazingly broad set of CSS 2.1 test cases (over 7,000), and we’ve submitted them to the W3C. For thousands of tests, all three browsers do the “right” thing. Showing a few example tests from the test suite where Chrome or Firefox fail to meet the specification and IE passes, along with their impact on real-world sites. Standards compliance is really hard. Many standards can’t even be completely met at this point in time, because they’re not final. We focused on the test suite and delivering as complete an implementation as possible so that we can help you build sites that work across multiple browsers.

0929 Different ways your site can more fully help people use the web as part of their daily lives: in IE8, we’re introducing web slices, accelerators and visual search to make it possible to get quick access to real-time information while you’re browsing. For example, OneRiot built a webslice that is driving 18% more traffic to their site than would otherwise be the case. It’s easy to create a webslice – just a few extra tags.

0931 One interesting piece of information from our instrumentation shows that a very common flow for users is to open one tab, copy some information and paste it into a new tab. Accelerators helps smooth this workflow – you can select a piece of information and quickly do something with it – blog, tweet or email it, map it, etc.

0934 There are over 1,200 accelerators, web slices and visual search providers out there already today, including Digg, ESPN, OneRiot, Amazon, Sina, TaoBao, and Yahoo.

0935 The release of IE8 isn’t the end, it’s just the beginning. It’s easy to underestimate this opportunity. Ten years ago, we shipped IE5. Wikipedia credits IE5 with introducing AJAX to the world, even though nobody was talking about AJAX at the time. The next step is up to you. What developers do with IE8 makes all the difference.

And with that, Dean is done!

For the next live blog - “Changing Behavior by Design”, click here…

Extending Your Brand to the Desktop with Windows 7

Tim Sneath — Thu, 19 Mar 2009 00:13:27 GMT

What is Windows 7 doing at a web conference like MIX09? I thought I’d pop along to the above titled session, in which Yochay Kiriaty, an irrepressible evangelist on my team, presented the case for a desktop application in an increasingly web-orientated world.

He talked about how local desktop applications remain just as relevant as ever in the world of the web. For example, even though Twitter is often portrayed as the doyen of the Web 2.0 world, there are over 560 applications that use the Twitter API, spreading across client and mobile devices. Similarly, many other web properties such as Netflix, New York Times, eBay and Windows Live, have great desktop experiences that add value to the core experience.

Yochay demonstrated a number of potential entry points in Windows 7 for a website that might want to supplement their browser-based offering with a “sticky” branded desktop experience.

Gadgets. In Windows 7, gadgets go beyond the sidebar: they can be hosted anywhere on the desktop. This makes it easier for gadgets to size a little larger than the default setting in Windows Vista, allowing for a richer data visualization and/or more information to be presented.

Jump Lists. Windows 7 allows taskbar-resident applications to easily promote a series of tasks. For example, Windows Live Messenger uses this facility to make it easy to quickly set up a chat or web camera conversation without having to navigate through the full application interface.

Search Connectors. Windows 7 enables you to integrate search of a site like Flickr directly into the shell itself, using a standards-based model for search integration called OpenSearch. An application like Word that uses the standard file dialogs in Windows can then insert images without ever needing to go to the website directly. Long Zheng has a good example for download along with screenshots of this approach.

IE8 Visual Search. Continuing on the same theme, it turns out (!) that the visual search feature built into IE8 uses the same OpenSearch-based model for providing search results. With just a single line addition, any IE8 visual search can automatically support the Search Connector model. If you’re interested in more information, Sébastien Zimmermann has a good blog post on the topic.

It’s clear that there’s increasing convergence between the web and the desktop. Beyond the search features above, the inclusion of multi-touch and gesture support in Silverlight 3 demonstrates how the lines are blurring. It’s going to get easier and easier to build applications that run great on the web but do even more when they can take advantage of the full power of Windows. It’s an exciting time!

What’s New in Silverlight 3?

Tim Sneath — Wed, 18 Mar 2009 19:58:06 GMT

I thought I’d pop along to Joe Stegman’s packed MIX09 session as a way to quickly distil some more detailed information on the new features in Silverlight 3 – it’s easier to plagiarize someone’s session than to do a write-up from scratch!

Video/Audio. As mentioned in the keynote, Silverlight 3 supports the H.264 video format in addition to VC-1; this is an emerging industry standard that is used by YouTube, and has hardware decoders available on many devices. It also supports the AAC audio format; both this and H.264 are implemented within the MP4 container format (i.e. .MP4 and .M4A files).

GPU Acceleration. This is an opt-in feature that is available within the Silverlight 3 runtime, both in-browser and out-of-browser. Within the Silverlight object tag in HTML, you simply add a parameter EnableGPUAcceleration, set to true, to enable final surface draw GPU acceleration. You then add the CacheMode property on the element itself.

3D Support. Silverlight 3 includes perspective 3D, which gives you much of the benefit of 3D without the “productivity penalty” of having to write it from scratch. Within a parent element, you use a Projection attached property. For example:

<Border.Projection>
<PlaneProjection x:Name=”p3” RotationY=”-30” />
</Border.Projection>

Animation Easing. There’s now a series of easing functions.

Custom Dialogs. We now have SaveFileDialog support in Silverlight 3. For security reasons (because Silverlight runs in the sandbox), we don’t return a path to the developer. Instead, you can open a file from the result. For example:

mySaveFileDialog.Show();
if (mySaveFileDialog == true)
return mySaveFileDialog.OpenFile();

Effects. Effects (introduced in Silverlight 3) provide a low-level way to impact visual behavior (rather than functional behavior). We provide drop shadow and blur effects out of the box, but you can also create your own. Custom effects are implemented as HLSL shaders – these can be compiled into byte code using a DirectX SDK utility, which Silverlight 3 then consumes. Shaders allow developers to modify each pixel on a UI element before the pixel is rendered.

Pixel and Media APIs. You can now read/write pixels from a bitmap. There are two ways this functionality is exposed: either as an in-memory bitmap or by saving a visual to a bitmap. Also supported are raw audio/video APIs that enable dynamic sound generation, custom video codecs or indeed alpha video channels.

Local Messaging. One common challenge is messaging across multiple Silverlight plug-ins. In Silverlight 3, we now support “named pipes”-style messaging across not just objects on the same page, but even multiple Silverlight instances across multiple browsers. Joe demonstrated Silverlight chess playing between an instance running on Chrome and an instance running in Firefox.

Out of Browser. This is enabled on a per-application basis, using a manifest (the standard Silverlight 3 template includes the appropriate section: you just need to uncomment it). A user can start a Silverlight out-of-browser “application” either by right-clicking on the Silverlight content, or by clicking on a custom button within the application itself.

Tooling. The Silverlight 3 tools will introduce a new compression algorithm that will reduce the size of XAP files by 10-30%.

Bondi Uses Silverlight for Online Magazine Archives

Joshua Allen — Wed, 18 Mar 2009 17:35:12 GMT

Bondi Discusses their use of Silverlight to create online archives of publications like Rolling Stone and Playboy.

MIX09 Live Blog #2: Advancing User Experiences (Scott Guthrie)

Tim Sneath — Wed, 18 Mar 2009 16:33:34 GMT

Scott Guthrie is on stage!

0931 Bill Buxton talked about why user-centered design is so important; now we’re going to talk about the “how”. We’re going to be talking about three key categories today: web, media and RIA. One of the things we’re trying to do is to provide a single platform – the .NET Framework – that can be used to build applications for each different location and reuse code and development tools across each place.

Let’s start by talking about front-end development. Tomorrow, Dean Hachamovitch will be talking about how to build great IE applications. Today I’m going to talk about the work we’re doing with the tooling to support that. The web platform is a powerful set of tools and technologies optimized for building and hosting next-generation web applications. We’re also increasingly integrating with other existing solutions out there in the open source space like jQuery and PHP, and making sure they run well on the Microsoft stack.

Let’s start by looking at the work we’re doing with Expression Web 3. Expression Web 3 includes a set of new features, supporting standards-based web authoring, multi-language targeting, secure FTP support, CSS diagnostics and SuperPreview, which solves the common problem web developers face of ensuring that a web application works consistently across a broad set of platforms.

SuperPreview will be built into Expression Web, but today we’re also releasing it to the web in beta form as a standalone tool today.

0938 Now let’s talk about server-side development. Over the last year, we’ve been iterating on a new model for ASP.NET MVC as an alternative to the existing Web Forms model. One benefit is that you get full control over your HTML markup; it also supports SEO-friendly URL routing and test-driven development workflow. It’s also easily extensible, and it’s great to see how the broader community is taking advantage of this.

Today, we’re releasing ASP.NET 1.0 MVC to the web, available for download immediately.

0940 During the conference, we’ll also be talking about the next release of ASP.NET 4. This provides lots of improvements: to Web Forms, to controls, more granular view state, and data binding. In the Visual Studio 2010 timeframe, we’ll also ship a second version of MVC, along with updated libraries for AJAX that include jQuery; you’ll also see us shipping a middle-tier cache codenamed “Velocity”. We’re also advancing Visual Studio 2010, including code-focused improvements, better JavaScript / AJAX scripting support (including jQuery, Prototype and Dojo), SharePoint and publishing and deployment improvements including support for multiple profiles.

In addition to the work we’re doing to ASP.NET on the programming side, we’re also doing a lot of work on our core web server. Last year, we shipped IIS 7 – a major update. One of the big innovations was infrastructural work to support extensions. Today we’re shipping eight new IIS extensions, providing a ton of new functionality including URL rewriting, a new FTP stack that supports secure FTP, WebDAV, an application routing engine that supports forward proxy, and bit rate throttling.

0944 One of the common themes you’re going to see throughout this event is a lot of new capabilities that you can take advantage of. But one thing we often hear from customers is that it’s hard to find all these different technologies. So today we’re shipping a new 2.0 update to our Web Platform Installer tool, which provides a unified list of all the components in the web platform stack – those shipped in-box and those shipped separately; you can optionally also choose development or design tools to install at the same time and have it all installed in a very easy way. The Web Platform Installer is a 1MB tool that can save you hours of time.

In addition to enabling you to download our own technologies, we’re also integrating support for a Windows Web Application Gallery – a portfolio of tested ASP.NET and PHP applications like DotNetNuke, DasBlog, Graffiti, Drupal, WordPress, phpBB that you can quickly install on your machine to get up and running.

You can download the Web Platform Installer 2.0 Beta immediately online.

0951 Another release this week is Commerce Server 2009 – there are sessions here where you can learn more.

0952 Microsoft is also making a huge investment in our cloud computing platform; at the PDC08 in October last year, we launched a preview of our Azure Services Platform. We’ve seen a lot of user-generated demand for new features; today, we’re announcing a number of new capabilities that will be available this week.

For the underlying Windows Azure platform, we’re adding FastCGI / PHP support, along with the ability to run full trust .NET applications; SQL Data Services goes relational, allowing you to use the full ADO.NET stack, LINQ to SQL, and so on inside a cloud offering; lastly, the .NET Services Platform expands to support more web standards. We’re on track for commercial release later this year.

0954 We’re also highlighting Microsoft BizSpark, a marketing program designed to provide software entrepreneurs and startups access to the software they need to build their business for free for three years.

0956 Jeff Atwood and Joel Spolsky are on-stage showing off stackoverflow.com, a startup built by developers for developers on Microsoft technology.

1002 Let’s change gears and talk about Silverlight. Silverlight 1.0 launched just eighteen months ago, and we shipped our second release last October. We’ve already had over 350m installs, we have over 300,000+ developers and designers, 200+ partners in 30 countries, over 200+ Microsoft products and websites that are using Silverlight; this week we’re shipping two more sites: a Silverlight-based web client for the Microsoft Worldwide Telescope application, and a Virtual Earth Silverlight Map Control Interactive SDK that makes it easy to add mapping to your app.

There are tens of thousands of Silverlight sites already out there! Let’s talk about how one customer, Netflix, is using Silverlight.

1004 Kevin McEntee, VP of Web Engineering for Netflix is on-stage.

One year ago, Netflix began looking at Silverlight primarily as a way to get media streamed to Macintosh computers. When we dug in further, we also wanted to broaden support for Firefox. Then we discovered we could produce a better solution for all platforms by eradicating platform-specific code, enabling us as a business to concentrate on producing the best possible experience for all of our customers.

Installers are evil! roughly 20% of our customers who had the appropriate system requirements wouldn’t make it through the process. A lot of the complexity came from the content protection issues. Now Netflix is out of the installer business – there’s just a one-time install that is supported by Microsoft that includes content protection and all the other media elements we need, allowing us to focus on our core business of helping our customers find and watch great movies.

Why is Silverlight uniquely suited for delivering these kinds of experiences? We’ve found that Silverlight is a great platform for developing video players. We want our customers to be able to start watching the video fast and then step up to a higher bit rate as soon as possible, all using a generic HTTP-serving infrastructure. But if we step up the bit rate too quickly, we get stuck in a rebuffering experience.

We’re learning by doing and enhancing our player on a regular basis. We’re using Silverlight to deliver better players transparently to our customers every two weeks without having to take them through a new install. Since we launched our player last November, we’ve halved the rebuffer rate. With our old video player, we were afraid to touch it because we knew it would be a painful experience to our customers – we’d therefore only update it every year. With Silverlight, we’re constantly enhancing!

The media stream source API gives us access at the right point in the pipeline to be able to really push the player. After we’ve done the innovation on Silverlight, we’re also able to take these same experiences and drive them into device-based players like Xbox and Roku.

In Silverlight 3, we’re looking forward to taking advantage of some new features from Microsoft, in particular GPU support for scaling and stretching video, expanding the range of processors and price points for running video playback, as well as taking advantage of all the other innovations and features that Microsoft have added over the last twelve months. We’re very happy with Silverlight.

1013 Let’s talk more about the Silverlight 3 enhancements we’re making. In Silverlight 3 we now have hardware-based media acceleration. We have new codec support (H.264, AAC, MPEG-4). We’re adding a new RAW audio/video pipeline API. Now you can write your own codecs in Silverlight using C#, VB or any other .NET language and add them into the pipeline. We’ve also added improved logging for media analytics, so as you watch the video you can monetize it with ads or track it for improving the experience.

We’re also announcing a series of enhancements for IIS Media Services: smooth (adaptive) streaming for on-demand content, which allows automatic cycling between different bitrates depending on machine and network availability, delivering a smooth experience for both H.264 and VC-1. Today we’re also announcing beta support for live smooth streaming, delivering the same experience even when content isn’t prerecorded. We’re integrating with CDNs like Akamai for edge caching, web playlists, bit-rate throttling and advanced media logging.

1018 Scott is now showing a short Expression Encoder demo. Expression Encoder 3 has built-in support for these Silverlight 3 enhancements; beyond support for H.264 and AAC as well as smooth streaming, notable additions include a new smooth streaming preview player that allows you to simulate transient network conditions, along with the ability to do screen capture. With live streaming, I can even pause the recording and seek back, just like using a Tivo.

1021 Last summer, NBC hosted the largest sporting event ever held on the web, and they chose Silverlight to do this. Perkins Miller, SVP/GM Digital Media at NBC Sports is on-stage to talk about the background. A cacophony of statistics: 1.3 billion page views, 52.1 unique visitors, 75.5 million videos watched, 9.9 million hours of video consumed, 27 minutes of viewing per session, 5,000 unique clips viewed per day during the final week, 35 million mobile views, 130,000 peak streams, 3.4 petabytes of video delivered.

The next Olympics are the Winter Olympics, in Vancouver, Canada. We’re announcing today a renewal of our partnership with Microsoft for this. This is the ultimate product – fully HD, adaptive smooth streaming delivered at 720p. You’re going to get the DVR experience Scott demonstrated earlier – pause, rewind, super slow motion, high resolution frame capture, metadata overlays, live video alerts and real-time feeds of the latest and most popular clips.

1027 Let’s switch gears and talk about RIA experiences. In Silverlight 3, we’re introducing a collection of new graphical features for eye-popping experiences: GPU acceleration and hardware compositing (on both PC and Mac), perspective 3D support, bitmap and pixel APIs, HLSL-based pixel shader effects (with out of the box support for blur or drop shadow as well as your own custom effects), and plenty of DeepZoom improvements (hardware-accelerated, larger collections of images). Use this power for good and not evil!

We’re also adding features to improve application development support. Deep linking is a popular request, for ease of navigation and search engine optimization. In Silverlight 3 we’re introducing a page navigation framework that will enable you to hyperlink or bookmark directly into a page of the application. We’ve also done a lot of work to improve the text quality, added multi-touch and gesture support on Windows 7. On the controls side, we’ve added over 100 controls along with support for caching, so you can use more controls without slowing down application initialization.

1034 David Anthony from Bondi Digital Publishing is on-stage, along with Scott Stanfield from Vertigo. Bondi has always felt like offline publishing would move to the Internet at some point, but we never felt that the user experience was suitably comparable with the printed edition.

Scott: our “competition” is the paper magazine! Showing a beta of a new digital archive of Rolling Stone magazine. This enables you to view and page through articles online just as easily as with a physical magazine. You can zoom in or out using DeepZoom technology, hyperlink through from one page to another, and search for information. Note that the content is highlighted thanks to the bitmap APIs in Silverlight 3; you can also flip the search out of the way using perspective 3D. On a multi-touch machine, you can even use standard gestures like “pinch to zoom”.

The Rolling Stone application will be made available later this summer at http://www.covertocover.com/ (note that this URL also includes links to their Playboy digital archive, which launches today also – use caution if you’re clicking the link at work…!)

1041 One challenge we have to face as designers and developers is: how do we build one of these things, from requirements gathering to final delivery. Bill talked in the first keynote about the challenges here and some of the ways that we could make it better in the future; in Silverlight 3 and Expression 3 we’re trying to make that future better together.

Today we’re introducing Expression Blend 3. Blend 3 introduces a new feature called SketchFlow, which makes it easier for designers to start iterating on the flow of the application along the lines of Bill Buxton’s talk earlier today. It also adds support for importing image assets from Adobe Photoshop and Adobe Illustrator, behaviors (allowing you to add interactivity to objects without writing code), the ability to “design with data”, source code control, along with XAML, C# and VB code intellisense in the editor.

Jon Harris (from the Expression team) is showing a comprehensive demo of SketchFlow – this technology is definitely one you’ll want to see in video form.

1059 One of the things that John highlighted in that demo is how easy it is to import Photoshop or Illustrator files into our workflow. We know how important it is to integrate with existing platforms; in October, we announced Eclipse PC support; today we’re announcing the same for Mac.

Download the Mac Eclipse support for Silverlight here.

1101 (Looks like we’re running about ten minutes behind schedule at this point – still some cool stuff to show!) Let’s talk a little about data. We’ve done a lot of work to continue to evolve the rich data features in Silverlight 2. There are data binding improvements, including element-to-element binding, validation error templates, multi-tier REST data support (.NET RIA Services, previously codenamed “Alexandria”) which solves the age-old problem of how you push the changes back from client to server. And then, to make it easier to retrieve data across the network, we’ve added support for binary XML as well as server push notification.

1107 A quick customer reference: SAP wanted to enable their customers to take advantage of a rich set of controls and the advanced graphics capabilities. As a result, SAP has partnered with Microsoft to further enrich the user experience for SAP’s well-established Web Dynpro UI technology with the powerful capabilities of Silverlight. The combination of Web Dynpro and Silverlight will deliver a rich user experience for business applications with minimized development costs. These capabilities are planned for coming release of SAP NetWeaver.

1108 An announcement you’ve all been waiting for: we’re also doing a lot of work in Silverlight 3 to enable “out of browser” experiences on both Windows and the Mac. This enables a bunch of new scenarios: extending media experiences that are pervasive, companion applications for your website, and lightweight “data snacking” applications like gadgets and widgets. In Silverlight 3, we’ve made it very easy for end-users to go ahead and install these kinds of applications. We don’t need to show a scary security dialog because we’re running in the same context as the browser; it’s safely sandboxed.

It includes auto-update support: you can simply copy over the file on your remote server and Silverlight 3 will automatically detect an update has occurred; the next time a user is online they’ll get the application transparently updated. We’re also adding offline-aware capabilities; you can handle an event in your application that enables you to detect whether the machine is connected or not and produce a differentiated experience accordingly.

1112 Tom Mara, Executive Director of KEXP is on-stage showing their new Silverlight 3 radio player. KEXP’s mission is to get a wide and deep array of music into people’s lives: everything from indy rock to jazz and blues, all melded together. KEXP started in 1972 as a 10W station, and has grown incrementally since then, both within Seattle and beyond. In fact, a full third of the listening audience these days is outside of the state of Washington (just seven years ago, only 2-3% of listeners were remote).

This is what the new KEXP player is going to look like.

You’ll see that we’ve got the live stream metadata, listener comments that are connecting with the DJ live. I can come in and add a comment. Even if the network connection goes, I can continue to use the player on the bus to watch other videos that I’ve saved – Silverlight 3 provides support for detecting offline scenarios.

1119 So you’ve seen a lot of amazing features: media, graphics, multi-touch, data binding, networking, application model.

People will be wondering how big this is now that it’s got all these new features. We spent a lot of time tuning new and old features and improving the compression, and the new download package is actually 50K smaller than the old release – it’s now even faster to install with a ton of new features to take advantage of!

Silverlight 3 Beta is available for download starting today. We’re really looking forward to seeing what you build with it!

1123 Don’t forget the exclusive online chat at http://live.visitmix.com. Post your questions on twitter with the #askthegu tag.

And we’re done!

MIX09 Live Blog #1: Experience Design (Bill Buxton)

Tim Sneath — Wed, 18 Mar 2009 16:12:15 GMT

We’re here – 9am Las Vegas time, and live blogging the MIX day 1 keynotes!

0902 Bill Buxton is on stage.

0904 Despite the economic downturn, it’s a great time for design!

Industrial design in 1929 was in exactly the same place as experience design is now. Think about it – what a stupid time to launch a business: the middle of the Great Depression! This was the moment when Henry Dreyfuss designed the classic phone. Raymond Lowey designed the Studebaker Avanti and the Coca Cola logo in 1929. Walter Dorwin Teague started in 1926; his principal customer was Kodak. They wanted to grow the market; he helped them expand their brand by producing a version in multiple colors in silk-lined boxes, these sold at double the price. What idiot would start up a design company in the middle of the depression? Yet every one of these companies is still going right now – and the lessons learned are still valuable today.

Industrial designers talk about objects; but it’s the experience of interacting with the product that is the true result of the design, not the object itself. I spent some time working with Trek – the guys who designed Lance Armstrong’s bike. But there are multiple ways to render it – as a basic image of product, or in a different stance that shows the essence of mountain biking. It’s not about the bike – you can’t tell what model it is, it’s the excitement, the energy. This is what we design – what our tools do.

0912 The question is, how do we do it by design, not by accident?

Here’s an example – an HTC Dash mobile phone. It’s easy to draw the phone itself; what about the phone interface? Now clearly, the interface is as important as the hardware, but it’s much harder to draw. That should worry you, because design is about rapid iterations so you get to the right version. What about the experience of using the phone? Here’s the challenge – if you can’t sketch it in a few seconds, how can you capture its essence? We need the same speed and versatility of designing experience, otherwise we’d better start rethinking the structure of the design process. And it’s not just about the phone – the same is true whether you’re designing websites, applications, or anything else that requires interaction.

0915 So how do we do it? When I think about design, I think you need to come up with multiples. You’re not allowed to have made a decision as a designer, your role is to ask the right questions that get us to the right answer. Designers don’t come up with solutions, they come up with provocative choices. The challenge is how to combine the goal with the budget, personnel and resource issues required to get to this point. If we have the right tools or techniques, we can be just as efficient as our industrial and graphical design colleagues.

Again, how? Well, certainly don’t write code, as a start, sketch. I don’t care how good you are at Blend or Photoshop, you can do the first iteration faster with a post-it note than on a computer.

How do you sketch time? Experience is a temporal phenomenon. To show the flow, we use a state transition diagram.

0919 You need to have as much detail in the transitions as in the states, otherwise you’re going to get it wrong. A guy called Ron Bird from the UK (http://www.2birds.org) has done some interesting work in this space, showing how each screenshot is connected in the state transition diagram. This is where the reality comes in – the state transition diagram is a good indicator of the complexity. My dream is that some day we’ll have a tool that will provide a way to combine the sketches with the state and enable rapid iteration between those.

0922 People think that design is a creative process. In fact, design is the most negative discipline you could come up with. You start with a million ideas and come up with just one! The biggest part of creativity is throwing away stuff without upsetting folk (and most of what you throw away is yours!) These things are far too important to take seriously; we need to change from sketching to prototyping; from ideation to valuation. We need a really important variation in the suite of tools we use.

0923 What about Microsoft? When I joined three years ago, thee was only one person in the technical leadership with a design background. Now there are about ten. There is significant growth in senior ranks joining from other companies, but others promoted from within. Growth isn’t just at a senior level. In less than two years, we’ve grown UX headcount almost 1.5 times. This is almost twice the rate that we are hiring technologists. We now have about 800 designers and user researchers. Two of the young UX designers who joined Microsoft recently created the Arc Mouse, for instance – a great example of design-led innovation.

Another example is the Zune – to go from a standing start to the Zune 2 in just nine months was a remarkable feat. It’s not about the device, it’s about the software and the whole ecosystem.

0927 We’re looking for a unified way to develop these interaction experiences, regardless of the target platform: that’s how we get the return. The Roman Senator Seneca once said, “luck is what happens when preparation meets opportunity”. What Scott Guthrie is going to do is to show you how we can help you in the preparation so that you can get the optimal experience.

And we’re done! Next up – Scott Guthrie. We’ve got quite a keynote for you!

MIX09 Keynote and Partner Highlights

Joshua Allen — Wed, 18 Mar 2009 15:47:23 GMT

The Day 2 Keynote with Deborah Adler and Dean Hachamovitch is streaming live now! You can watch the keynote full-screen in the player below, or go straight to http://live.visitmix.com.

As the keynote progresses, we'll be posting in-depth video interviews and demos from the keynote partners right here, so come back to this page often!

And don't forget to follow mixonline to be notified of new updates to the highlight and partner videos!

Here are the highlights from the Day 2 Keynote:

Dean Hachamovitch interview. Dean discusses in-depth the trade-offs that are faced when we update a product used by hundreds of millions of people.
OneRiot use of IE8. OneRiot discusses Web Slices, Accelerators, and Visual Search.
Deborah Adler. Tommy Lee interviews Deborah Adler about her inspiration in creating ClearRX

The Day 1 Keynote is available for on-demand viewing now at http://live.visitmix.com

Here are videos covering topics from the Day 1 keynote in more detail:

Bill Buxton: Return on Experience. Did you know that the the entire field of industrial design was started at the beginning of the Great Depression, and the companies who focused on design were the companies that survived and thrived to today?
Expression Web SuperPreview. Edit your markup and compare against Firefox, IE6, 7, and 8, Safari, and your comps!
Netflix Business Value of Silverlight Netflix discusses the way that Silverlight has enabled them to grow profits and customer retention.
Bondi and Silverlight. Bondi discusses their use of Silverlight to create online archives of publications like Rolling Stone and Playboy.
KEXP and Silverlight. KEXP talks about their experiences with Silverlight
Scott Guthrie on Silverlight 3

Arrivals at MIX09

Tim Sneath — Tue, 17 Mar 2009 18:46:36 GMT

A technical conference in Las Vegas on St Patrick’s Day is a bizarre blend of visuals. At 7am, where else could you find under-dressed women with huge shamrock earrings, morose single men nursing a beer and a dwindling stack of betting chips, and a sea of suited businessmen on their way to some other shindig in the bowels of the huge convention center here?

As I write this, the pre-conference sessions are underway, and it’s a time of conversions: from developer to designer, from Flash/Flex to Silverlight, and from “meaningless” (?!) web development to the semantic web.

A couple of choice quotes:

“If you ask me certain questions, I may have to give you a nod and wink and say, ‘ask me again after tomorrow.’”
“Creative directors always want ponies, but if you live on a second-floor apartment, you can’t have one.”

Meanwhile the keynote rehearsals are well underway here on the fifth floor. It’s always interesting to watch how things come together over the last twenty-four hours: seeing the final polish applied to demos that a week ago looked a little shaky, discovering which presenters are the most comfortable on-stage, and occasionally cutting demos that are too long or edgy. Sometimes it’s even a point of closure for product messaging discussions, as two different teams hear how each other are positioning their technologies.

So far things are going pretty smoothly in rehearsals:. a pretty relaxed atmosphere, lots of cool Silverlight 3 demos and a number of surprises are waiting in the wings. For many of my Microsoft colleagues, the keynote is the culmination of many months of hard work, and also means a sudden switch from radio silence to shouting from the rooftops about what they’ve been working on.

Tune in here tomorrow at 9am Pacific (GMT-7) for the first keynote, won’t you? We’ll be providing a full run-down of all the announcements in the form of a live-blog, with a little analysis of what this means for you as a developer or designer. We’ll also have coverage of selected breakout sessions and other news from the event. See you then!

MIX09 Live Blog

Tim Sneath — Mon, 16 Mar 2009 05:12:02 GMT

Tim Sneath is Live-Blogging MIX09! Check out his posts regularly to get the play-by-play of the keynotes, vibe in the hallways, selected sessions and other highlights of MIX09!

From SXSW to MIX09: Phizzpop Design Challenge Finale and More

Joshua Allen — Thu, 12 Mar 2009 18:20:59 GMT

This year as last year, MIX09 and SXSW Interactive conferences are back-to-back. Since they are so close in proximity and time, many people will be attending both conferences again this year, including a fair number of people from our team. If you will be at SXSW, you should check out these 3 panels:

Microformats: A Quiet Revolution. Moderated by Tantek, and featuring our own Karsten Januszewski, this panel explores some of the themes introduced in John Allsopp's piece about the future of microformats.
Browser Wars III: The Platform Wins. Featuring Chris Wilson from the IE team against two guys from Mozilla, a guy from Google, and a very nice guy from Opera. I wonder why nobody from Safari showed up? This one should be fun.
Entrepreneurship in the Belly of the Beast. Featuring our own Chris Bernard, the word "beast" symbolizes somthing that is very powerful but irrational.

The big event at SXSW, though, is Monday night at 7:45PM CDT, when 5 top design agencies from around the country face off to see who is the best. All 5 winners from the regional PhizzPop design challenges have been working feverishly to implement the best design for a sustainable living campaign in Austin. The designs will all be shown on the big screen with presentations by the agencies, and a team of judges from the industry will pick the winner.

We will be streaming the Design Challenge Finale live, here on visitmix.com, Monday night. If you're not going to be at SXSW, bookmark this page and watch the agencies show off their designs. You can also find videos of the five winning entries, the full challenge statement, and other information.

Do Quotes Inspire You?

Nishant Kothary — Tue, 10 Mar 2009 21:36:01 GMT

I'll be the first to plead guilty to having used quotes by famous (on occasion by anonymous) individuals in presentations to make a point. In my case, it's because they inspire me. Good quotes have the ability to cut through crap and get to the root of something. They say what you often think or know through intuition but are unable to communicate with crispness.

I've been working with Bill Buxton lately assisting him with his opening the keynote address at MIX09. As you can imagine, someone like Bill drops sound bites very naturally. To him it's just how he thinks and talks. I suggest you watch the recent video where @anyware & @ritzy interview Bill for their countdown to MIX09 show, and you'll know what I mean.

At the 10m30s mark, he says something that really resonates with me because I've found myself repeating something similar since we started working on Descry (and even now, post-launch):

If you try to get everything right, that's the surest path to failure

But, the quote I've been repeating over and over is not something Bill verbalized. Rather, it's something I found on his site - billbuxton.com:

Ultimately, we are deluding ourselves if we think that the products that we design are the "things" that we sell, rather than the individual, social and cultural experience that they engender, and the value and impact that they have. Design that ignores this is not worthy of the name.

It's probably the most holistic and brutally real definition of design that I've come across recently.

So, what are the quotes that inspire you?

Write a comment and tell us what you think. Subscribe to our twitter feed if you want to stay in touch with us.

5 Ways to Get Inspired

Thomas Lewis — Fri, 06 Mar 2009 01:21:51 GMT

It is inevitable that you will find yourself stuck in a rut. How can you go about getting yourself unstuck? Whether you are a designer, developer or manager, you find yourself doing the same things over and over again or worse, you find yourself staring at a blank screen and unable to get started. I will give you 5 ideas that I use to get myself inspired and motivated.

Look outside your industry.

It is too easy to find yourself with your RSS feeds, Favorites, Friends full of items that are basically a reflection of you day job. Force yourself to look beyond the borders of your own specialty. For example, I like to look at Trends in Japan. It is not even close to what I do on a daily basis, but it does make me look at things from a different perspective culturally as well as getting new ideas. You can also look outside your industry for inspiration such as The Dieline which provides vivid graphics of packaging from tea bags to wines. Companies spend a lot of time and resources on their packaging. You can take advantage of that research and see how they bring the design together via brand, typography, color, etc.

Read other people’s code.

I wish I could take credit for this, but this idea came from Scott Hanselman. He takes time to read other people’s publicly-available code. I think this is a great way to recharge your battery because you see how others have approached a problem differently than you may have. I would even recommend looking at code that is written in a different programming language. If you are a PHP developer, why not take a look at Ruby on Rails examples? This will also help alleviate the "One Perfect Way" problem that programmers find themselves in (this could be another post all its own!).

Check out Conferences.

I find that conferences can be inspiring. You not only learn new things, but you meet other people who are passionate about what they do and it is contagious. I recently attended a 2-day conference and took away many new ideas that I would probably not have thought of if I was just sitting in my office answering yet more e-mail. A conference typically allows you to get away and clear your brain of your task list and set it free. I know that in this time of economic challenges that you may not be able to attend some of the big conferences out there. I would suggest for you a local Barcamp. These are great opportunities to meet people in your local area. They tend to be free and their agenda tends to be created by the attendees themselves. Of course, I am a little biased for our own sister conference, MIX.

Work on a personal moonlight project.

As a manager, you would think I would be against personal moonlight projects. Not at all! In fact, I encourage them. A moonlight project tends to be a personal project that you are passionate about. It may even stretch your skills as you try out a new technology you are not familiar with. There is usually not a deadline and you have plenty of time to explore which is a luxury these days. The only suggestion I would make is that if you have a significant other in your life, you check with them first!

Spend more time in the shower.

Ask yourself, how many times have you been stuck on a problem and spent all night in your office and still couldn’t figure it out? The next morning you are in the shower and then all the sudden, BAM! You figure it out before you can wash the shampoo out of your hair. The reason is that there are fewer distractions, you are fresh from sleep and you are not stressed. It doesn’t have to happen in the shower, it could be the drive to work, a coffee shop or a bench outside your office.

What ways do you use to jumpstart your inspiration?

Write a comment and tell us what you think. Subscribe to our twitter feed if you want to stay in touch with us.

Capturing the Ineffable

Tim Aidlin — Tue, 03 Mar 2009 22:29:53 GMT

I got in touch with a friend recently, kinda randomly. He's an incredible motion-graphics designer, and I've always admired his skills. He recently wowed me with not only a beautiful short-reel, but some User Interface work he'd been doing for mobile devices. I was surprised: our worlds were converging in a way I hadn't anticipated. He works in Maya, Lightwave 3D, and AfterEffects. Not really software geared toward traditional "graphic designers" or "UX Professionals." I had always been able to see a natural progression for a designer to go from building static web comps, to a designer who codes a bit for the web, then maybe starts feeling comfortable with some backend stuff, and then moves to working in WPF and Silverlight. And once you got into working with WPF and Silverlight, your world of interaction-design opened up – anything was possible. While this was my path, most of those that I generally have worked with came from one side or the other: development or design.

But my friend had approached the same goal as my trajectory leads me, but from a different tangent. Coming from the world of 3-d and motion-graphics, I can see a whole different way of thinking about a user-interface. The way he approaches the problem is significantly different in one particular way: the z-axis.

Having come from the world of print, originally, and then developing those skills to the web, I had been ingrained in grids of many sorts, but always 2-d grids. Yes, one could always simulate 3-dimensional space, and to a large degree that's still true – we're still only simulating 3-d, but in a very different way. In many ways, what I mean by "the z-axis” is even more than the 3-dimensionality that we're now able to reliably replicate, but it's also the speed at which we can move through new spaces, the fidelity of the environment, the gravity of the objects with which we interact. We're able to harness the ineffable in ways we had only seen in movies and books.

The iPhone, Microsoft Surface, and new touch-screen computers, for instance, are changing the way we interact with screens. The devices themselves are responsive enough, and deliver enough visual resolution to allow next-to limitless possibilities. Always-on Internet connectivity allows us access to the world's databases at once, and new software technologies allow us to use that data in unimaginable ways: Photosynth, Surface and Windows Live Maps mashups, and even games, … endless of variety of ways to connect with others, express yourself, and create new, meaningful experiences.

I recently ran across Flower, a game for the Playstation3 that really seemed to bring this point home. It's a simple game – only from what I've been able to glean from the video (full disclosure: I own an Xbox) – where you are petals in the wind, flying through grasses, over mountains, on the surface of water. It's a dream I've had since a little kid.

Or how about Princess Leia's holographic message to Obi Wan Kenobi. Did it really appear that much different than the super-cool holographic monster in Tokyo?

So, I guess the summary of what I'm saying is this: I'm excited. I'm excited to be living in the 21st Century. True, no flying cars yet, but we're getting there. And, as designers, developers, and creators of software, and sites, we're at a real stage of potential genesis of immersive, new types of experiences. And what truly excites me is the potential for the crossover between art and science … just see the game above, for an example.

So, thanks Michael. I appreciate the inspiration …

What's been inspiring you, recently? Be sure to let us know by leaving a comment, or following us on Twitter @mixonline

Future of Web Apps 2009

Karsten Januszewski — Mon, 02 Mar 2009 20:00:01 GMT

I recently had the good fortune of attending the Future of Web Apps 2009 Miami conference. This was my first Carsonified event and I was very impressed. The caliber of the roster of speakers was incredible. They were all "presenters" in the best sense of the word. No one read from their decks.In fact, most of them couldn't read from their decks if they wanted to, as their decks tended to be images with a couple words as opposed to a set of bullet points. They all knew their audience and knew how to deliver their content.

Not only were the speakers great, but their content was germane.The agenda was quite diverse and managed to appeal to developer, designers and marketing people all at once, which is no easy task.

Ryan Carson acted as host/MC through the entirety.He was trustworthy, and competent and likeable.It was interesting because,later, during a talk on Brand 2.0 by Alex Hunter from Virgin, there was a discussion of the value of tying a face to a brand – aka Sir Richard Branson and Virgin – and he called out Ryan Carson himself of a great example of tying person (Ryan) to brand (Carsonified). Funny, because we are trying to do that with Mix Online, giving a face and voice to the members of the team. Although do I lose points because my gravatar isn’t a photo?But if you really need to see my mug, it is out there.

The venue itself was gorgeous, in a performance hall with box seats, etc. Check it out:

(photo by seanosh – he’s got a bunch of great shots from the event)

There was wireless in the venue and there was constant twittering. Go to http://search.twitter.com/search?q=fowa to see.Amazing how Twitter and conferences are now almost impossible to separate. Hey – I got this in 2007 – here’s the proof if you don’t believe me. Speaking Twitter at conferences, Hans, Tim and I have a new version of Flotzam cooking for MIX09 right now that's gonna be rad.

I got a lot out of all the speakers. (BTW, Obie Fernandez has a great write up of notes.) I even got a chance to speak myself and did a 20 minute lunch session on jQuery and tooling for designers -- more about soon!

Two points really jumped out at me that were emphasized by multiple speakers:

Randomization Kills Productivity. We as developers and designers need to be able to get “in the zone” to get anything done.Like 4 hour stretches of intense focus. Random meetings, interruptions, ambient noise all prevent that.We must protect our time!Say no to meetings; say no to distraction.
Design Matters. Okay, I’m preaching to the choir here, but still, it was great that this message was hammered again and again by speaker after speaker. UI and design matter. Making things beautiful matters. Focusing on experience matters.And this isn’t just for the sake of aesthetics; it makes business sense.

Overall, a great conference.

Next up for me on the conference train: first, SxSW Interactive. I'll be on a panel about Microformats there with Tantek Celik, Leah Culver (Six Apart Ltd), Glenn Jones (Madgex) and Jeremy Keith (Clearleft Ltd).Then, MIX09, of course! If you're going to be at either one and want to meet up, give me a shout.

Write a comment and tell us what you think. Subscribe to our twitter feed if you want to stay in touch with us.

Piecing "My" Puzzle Together

Hans Hugli — Thu, 26 Feb 2009 23:02:01 GMT

Many years ago, I dreamt of what computer networking could bring to the world and how it would be fantastic if we had unlimited access to all the published works and information in the world. At that time it was still necessary to access Bulletin Board Services through dialup, and the internet was difficult to access, even for computer literate. I had to shelve my dream since there were so many fundamental problems that needed to be solved before something like this could be realized.

There have been so many phenomenal advances since that time. A single example that stood out in my mind was Amazon.com. Amazon was a giant step in opening the door to enlightenment for the masses. It was an instant hit, and remains the most popular way to order books online to this day, and the have a rich API for accessing its information and services.

You can imagine my excitement when I first set my eyes on Wikipedia. I find myself using Wikipedia extensively as a resource for discovering information, and augmenting applications that I write with Wikipedia content. Incidentally all Wikipedia content is now available as XML, see wikimedia.

Even though Amazon, Wikipedia and a plethora of other such data sources exist, the dream of getting to any and all information has not yet been realized and data is trapped in silos. Why? In my mind the internet was invented for sharing information, but there has always been the push-pull relationship of free content vs. pay content. The fear naturally was that that providing information with no immediate reimbursement would be the demise of online businesses. Gradually we are seeing business models emerging that allow for businesses to provide information freely without fear of the kinds of financial ruin we saw in the dot.com bust. The walls blocking access to data are slowly, but steadily coming down.

With the advent of more and more data coming online, it's becoming easier and easier to create rich applications that consume information from disparate sources; that enable creating relationships between the various data sources, and in so doing, allowing creation of applications that are greater than the sum of the parts. Imagine: a forensic expert that needs to find a perpetrator by accessing information from an array of sources to piece together a story. To get an accurate picture of what happened really takes data from many, many sources.

I wrote a Pocket PC application many years ago that took Terraserver map image data and overlaid it with road route information, much like online mapping apps do today. At the request of an airplane pilot, I took it one step further by overlaying doppler radar data, to show weather conditions in a particular area. The pilot had had a specific need in mind that did not yet exist in an application. The point here is that a developer can never predict all the needs that application users will have. To make an application even more useful, apps need to be written with extensibility in mind.

My vision is to have typical applications be able to easily overlay and augment themselves with data previously unknown to the application. Where the application would expose extensibility mechanisms to allow for a host of user-driven interactions. This would enable users to discover things on their own in new and never before seen ways. A simple example of something like this is to allow third-party developers to add functionality to a right click menu. I'm thinking, would it not be interesting for the end-user to pick and choose individual items that can be added to a right click menu?

Trying to make disparate sources of data to work together inevitably leads to the homogenous data problem; it always needs to be massaged to integrate with other information, and generally requires manipulation through code. This makes it cumbersome to accomplish tasks in a timely manner for the developer. Incidentally Dapper is a very cool tool that allows parsing unstructured data from websites.

There needs to exist standards and interfaces for representing and sharing data in a uniform manner, though without complexity. Microformats are a good example (see Oomph) of a simple and clever way of sharing information within an existing framework (HTML/CSS). Today, though, sharing structured and unstructured information is largely an uncharted frontier, and to my knowledge there aren't many accepted standards for accomplishing this today. There is a growing need for data exchange. If you feel strongly about any particular standards that address this need, please comment.

In closing, PopFly is a simple example that enables composing information from a user perspective. PopFly is capable of treating data sources as building blocks that take input and have outputs that can be linked together in a "visual" manner through a designer. I argue that it is the beginnings of a much bigger idea: putting together data in new and unforeseen ways.

Every Flashback has a Silver Lining

Nishant Kothary — Tue, 24 Feb 2009 20:26:12 GMT

We recently moved to a new building on campus that doesn't have its own cafeteria. As blasphemous as that is, we've learned to deal with the situation and have gotten into a cadence of walking to a neighboring cafeteria with a teammate for lunch. Lunch conversations – what a concept!

Joshua and I went to lunch last week and ended up talking about the web development experience, specifically, how far it's come in a decade, yet how much it's remained the same. The last couple of decades we've been using text editors to write markup and scripts. And today, despite the advent of IDEs with all sorts of bells and whistles, we're still using simple text editors to write markup and scripts. A recent poll by Smashing Magazine revealed NotePad++ to be the top web developer code editor (with 23% of the market share), and Vim and TextMate coming in second sporting 11% each. Most of us revert back to good ol' handwritten markup and scripting and generally, productivity features such as code completion and coloring are sufficient to make us happy. But hold that thought for a minute, and let's change the topic to Flash.

Yes, Flash.

Flash 5 introduced ActionScript 1.0 - true scripting, procedural programming, and for the brave of heart, object-orientation through the prototype chain. There were a few of interesting things that I remember about that period:

Flash broke away from being just a designer thing. It was predominantly an animation tool before AS 1.0 but with a decent scripting language in place, developers entered the Flash scene.
A unique community was born: one made up of developers, designers and everyone in between.

In hindsight, the steady trickle of developers entering the Flash world upon the introduction of AS 1.0 wasn't a surprise. Here was a time where your only other build-once-run-everywhere option aside from HTML/CSS was basically Java. And, if you wanted to build a powerful GUI using Java, you either started from scratch or extended Swing. While it was powerful, you needed to be a Computer Scientist to do the simplest of things. Compared to that, Flash and AS 1.0 were approachable - extremely approachable, actually. The birth of a community around AS 1.0, too, was a natural phenomenon. After all, the web is the biggest democracy and historically, the most approachable technologies have garnered a strong following (sure, some campaigning, i.e. bundling a plug-in into the operating system, never hurts adoption).

Despite its ubiquity and popularity amongst creative developers, Flash got its share of beatings once it went mainstream. Among the notable gripes – flash content wasn't search-engine friendly, flash sites broke established browser metaphors (back/forward button, etc.), accessibility issues and my personal favorite (I paraphrase, of course) – Dear Flash, you've now armed the world of web monkeys with guns, and I hate you for that. Signed, Irate User Who Just Clicked "Skip Intro." Some of you may remember the issues published in a flaming summary destined for immortality by Jakob Nielsen in his Alertbox article: Flash: 99% Bad.

Looking at the complaints across the board, the source of the issue in my mind has always been at an architectural level. The Flash movie (i.e. the compiled swf that you embedded into the page) was effectively a black box that sat smugly on the page and it put up quite a fight if you tried to get it to talk to the rest of the page and vice versa. Here was this awesome thing sitting in the middle of the web page, but it just didn't care to be a first-class citizen of it. Admittedly, I'd place some of the blame on the browser plug-in model that doesn't have any requirement for how the plug-in integrates with the page DOM. Not to mention, Flash was never meant to be a something that extended the capabilities of the HTML DOM or even integrated with it; it was a way to embed animations in a web page. But, still.

This little architectural nuance has had far-reaching and deep implications on the workflow for us - the creators and keepers of the Web. If you are setting out to build a site that has a few instances of Flash on a page, you have to piece together interactions and UI in the Flash IDE, compile to a .swf file, embed the .swf in a web page and repeat; looks pretty neat and clean on the surface, but anyone who's lived it knows otherwise. It breaks the typical workflow where you may simply create more code files in your text editor, or embed some scripts inline. And getting that .swf to pretend like its just another HTML tag is generally beyond the scope of most projects. This has resulted in the development of the RIA trend that has become commonplace today – most RIAs are either clumsily hosted apps within an HTML page or they take over the entire page without rhyme or reason. Granted, there are many cases where this makes sense, but a vast majority of the cases you come across are simply gratuitous. More so, instead of improving the experience for a user, they hijack established design patterns in the name of "rich" experiences.

This is not a Flash-bashing marathon (in the spirit of full disclosure, I'm a former Flash junkie and author), and to set the record straight, Macromedia and Adobe have addressed many of the concerns Mr. Nielsen complained about a few years ago. In fact, the stuff I've written above is hardly unique to Flash; Silverlight shares most of its characteristics from a development experience perspective. For instance, you need Visual Studio to make the magic happen, it's all compiled down to a .xap that you have to embed, and so on. Silverlight requires you to leave the comfort of you text editor just as Flash does.

But from an architectural perspective, Silverlight is natively friendlier within the context of the browser DOM. If you look at Silverlight 1.0, you don't have to stretch your imagination much to see where the line becomes blurry between HTML, CSS, Silverlight and JavaScript. Just "view source", and follow the path from CreateSilverlight() and you'll get it. The UI is built using a plain-text, declarative markup language – XAML – which is transparent to the browser DOM. The programming model lets you manipulate this XAML using JavaScript – you can invoke FindName() to return a reference to any element of the UI declared in XAML as you would do on an HTML DOM element using getElementById(). Effectively, in its debut form, Silverlight was a way to truly enhance a web page – a compiled Canvas on steroids, if you will.

Interestingly, Silverlight retired the v1 programming model and developer experience in favor of the round-trip, write-compile-embed-repeat workflow. If you buy that one of the key uses of a rich element on a page is to enhance the overall experience of the page, then the programming model we currently use to develop Silverlight (and Flash) applications is counter-intuitive. Period. It doesn't promote thinking about Silverlight (or Flash) as first-class elements of the page. Not to mention, the overhead for building these little islands of extended functionality is substantial and too tedious for most of us to bother ourselves with.

Let's face it, for better or for worse, HTML/CSS form the backbone of the Web. History has repeatedly shown that any web technology that attempts to muscle its way into the browser without paying nice with HTML and CSS eventually finds itself deprecated or pushed into a niche. Maybe we'll be proven wrong one day, but I don't see any serious contenders for the top spot occupied by the democratically elected HTML+CSS duo right now. I've alluded to why approachability is one factor that determines the success of a web technology, but compatibility with HTML and CSS is equally important. And you don't have to look very far for evidence - take the examples of jQuery and PHP, two broadly adopted technologies that are built on the premise of enhancing the most familiar programming model for web developers.

Are we going about it backwards? Is our collective vision for the web developer experience as it relates to RIAs myopic because of the precedent Java set back in the day? It's not like we haven't been wrong before on such a grand scale. I'm looking at you, WYSIWYG.

Write a comment and tell us what you think. Subscribe to our twitter feed if you want to stay in touch with us.

Articles, Opinions & Lab - MIX Online

In Defense of CSS Grid Frameworks

Creating A Tree Map Data Visualization Out of 200,000 Tweets About Iran

Designing a Twitter Tree-Map

Designing the pdc09 Experience

Welcome to the Webtop: Wiki-OS

Join us at Web Design World 2009 in Seattle

Sex, Evolution, and User Ratings

Benefits of Card Sorting

On Deployment: ClickOnce & The Client Profile Configuration Designer

Have You Ever Felt Burned Out?

Exploring Social Media Types

How Do You Get the Latest News?

The Archivist: Save And Export Twitter Searches Before They Go Away

Should We Kill Wireframing?

Tweenbots Restore Man’s Sense of Teamwork

Taking a good look at the Web

How to beat the Designer Stereotype

Don't assume the worst about people

Assume everyone is ignorant

Think in parts, not absolutes

Don't listen to Ayn Rand

Know when to play and when to quit

The Rise Of jQuery

What ASP.NET Developers Should Know About jQuery

Why jQuery? What’s in it for me?

Coming from ASP.NET, what should I know?

Conclusion

Glimmer

Glimmer jQuery Design Wizards

Samples

Related Articles

Glimmer: a jQuery Interactive Design Tool

The Genesis of Glimmer

The Goals of Glimmer

The Future of Glimmer

Sushi Anyone? Learnings that might be applied to web site user experience

A Belated Happy 5th Birthday To Channel 9

Happiness is a State of Mind

Facebook Love, Twitter Hate

Opera's Web Standards Curriculum: Progress or Ossification?

TreeMaps

What We Can All Learn From Bill Buxton

Be Humble

Be Open

Trust your Instincts

Take Risks

"I'm not a businessman, I'm a business, man."

A Fresh Sliced Flickr Badge by Cindy Li

Zeno 4803

Twitter: A Brave New World in the Digital Panopticon

Gaming is required

So Long, Farewell, Auf Wiedersehen...

MIX09 Live Blog #4: Changing Behavior by Design (Deborah Adler)

MIX09 Live Blog #3: Internet Explorer 8 (Dean Hachamovitch)

Extending Your Brand to the Desktop with Windows 7

What’s New in Silverlight 3?

Bondi Uses Silverlight for Online Magazine Archives

MIX09 Live Blog #2: Advancing User Experiences (Scott Guthrie)

MIX09 Live Blog #1: Experience Design (Bill Buxton)

MIX09 Keynote and Partner Highlights

Arrivals at MIX09

MIX09 Live Blog

From SXSW to MIX09: Phizzpop Design Challenge Finale and More

Do Quotes Inspire You?

5 Ways to Get Inspired

Look outside your industry.

Read other people’s code.

Check out Conferences.

Work on a personal moonlight project.

Spend more time in the shower.

Capturing the Ineffable

Future of Web Apps 2009

Piecing "My" Puzzle Together

Every Flashback has a Silver Lining