This article contains 6 images. You will find them at the very end of the article.

This article contains 3563 words.

Web Directions North

That's a Wrap!

Thank you all for attending and being a part of WDN 2008, another fantastic year! Podcasts and presentation slides will be coming soon, but you can view what we have available so far. Don’t forget to subscribe to our RSS feed to stay updated as new material is posted to the site.

Derek Featherstone Real World Accessibility

Brian Fling The Mobile Web Landscape in Canada and Beyond

Tara Hunt Government 2.0: Architecting for Collaboration & The Enterprise & Government in the 2.0 era: what’s next? (workshop)

Boris Mann The 3 Stages of Content Management

Chris Messina The Enterprise & Government in the 2.0 era: what’s next? (workshop)

Brian Oberkirch “Plays Well With Others”: Simple Things to Make The Social Parts of Your Service More Social

• Eric Rodenbeck
• Dave Shea
• Walter Smith
• Jonathan Snook
• Jared Spool

• Gina Trapani
• Matt Webb
• Josh Williams
• Indi Young
• Jeffrey Zeldman

• Cameron Adams
• John Allsopp
• Daniel Burka
• Andre Charland

• Andy Clarke
• Douglas Crockford
• Anil Dash
• Kimberly Elam

Web Directions News

RSS Feed

Ajax Security by Douglas Crockford

• The browser is not a safe programming environment.
• An attacker can load additional, external scripts and make requests of your server.
• An attacker can see everything your users see.
• They can send that information to any server in the world.
• These are not new problems.
• How you encode data can prevent a lot of common/simple issues i.e. convert < to &lt;.
• JavaScript’s global object is the root of all XSS (cross site scripting) attacks.
• The DOM is another source. All nodes are linked to all other nodes on the page and to the network.
• If code is clean and readable, it is less likely to contain insecurities.
• JSLint.com is a tool to define a professional subset of JavaScript that will help identify insecurities.
• Web 2.0:
  • Mashups are a great innovation, but are insecure.
  • Advertising is a mashup.
• Competition to displace the traditional web:
  • Silverlight
  • Adobe AIR
  • JavaFX
• 3-prong strategy to fix the web:
  • Safe JavaScript subsets: by using JSLint and ADsafe.
  • Small browser improvements: event simple improvements can take a long time to distribute.
  • Massive browser improvements.
• We need to replace JavaScript and the DOM with something more secure e.g. a secure subset of JavaScript.
• Be rigorous in your coding practices to help your security measures.

Posted by Jeff on January 31st, 2008 | No Comments »

The Future of Web Interfaces by Cameron Adams

• The debate about resolutions in regards to web interfaces:
  • Not much of a debate anymore because of all the available devices and smaller resolutions related to those devices.
  • We need to be able to deal with all of them.
• Dynamic interfaces is not the same as dynamic content.
• “You can’t make a design that’s perfect for everyone.”
• Flexibility:
  • Font size.
  • Font availability.
  • Page width.
  • JavaScript.
• Dynamic interfaces increase the range of the interface and hopefully provide a better experience for more users.
• We have the technology to easily provide these interfaces to users.
• Approaches:
  • User-driven
  • Developer-driven
• User-driven:
  • Users are constantly looking for more/better ways to consume information.
  • How can we make dynamic interfaces easier to use?
  • Allow users to customize right on the page rather than customize, save, refresh, repeat.
  • Can we transfer the idea of palette-based (desktop) interfaces to the web? e.g. iGoogle
  • The new BBC home page is a great example of customizing content and layout i.e. changing the layout to suit your needs.
  • Beyond HTML:
    • Canvas – available in Safari, Firefox, Opera and Internet Explorer (with a plugin).
    • HTML document with added interactivity such as graphing and interface elements.
    • Yahoo! Pipes is a great example of Canvas use.
  • These interfaces can be created easily using JavaScript and even plain old forms to choose options.
  • The most important thing to remember: separate data, style, and behavior.
• Developer-driven:
  • Change the interface/feedback based on user-interaction.
  • Serving different layouts depending on browser window size.
  • These two are client-side analysis.
  • Server-side analysis – different layout depending on user’s logged-in status, etc.
  • make sure you don’t shock the user, provide options.
• Providing these ideas/options is a lot of work, but will provide a better quality experience for your users.
• Technology is never a barrier for long because it changes so quickly.

Posted by Jeff on January 31st, 2008 | No Comments »

Indi Young on why innovation is overrated

Indi Young, one of the founders of Adaptive Path and a interaction design pioneer since the early days of the web, delivered Thursday’s keynote at the Web Directions North conference. Her talk, “Innovation is Overrated,” explained how many companies talk about innovation as a concept and the term has emerged as a buzzword…but some detractors are pointing out that for all the talk of innovating, sometimes the quest for a bold new idea can get in the way of actually thinking about solutions to problems. Focusing on people and what they need, rather than adding widgets and pointless changes, will do more to drive real change, she said. It’s also important to focus on the long term rather than a quick change or changes, she said.

Modeling customers is another important component of innovation, Young noted. By thinking about how your customers actually behave and aligning your design strategy with that behaviour, you’ll end up with a more useful product. Creating a mental model diagram allows you to point to areas where you can better act on your customer’s needs and then act on them. For instance, Young pointed to a fictional movie distribution company and how various sets of customers will react in different ways to a film, ranging from alpha film geeks lining up days early to get tickets to busy families making time for a night out.

Young advocated for finding a gap to fill, looking for scarce or weak support, and redefining and augmenting existing features. She added that looking for surprises and emotional reactions, as well as rethinking behaviour that doesn’t match features are all solid ways to create innovation without losing focus on the people you want to serve, or forcing change for the sake of change.

Posted by Warren on January 31st, 2008 | No Comments »

Innovation is Overrated by Indi Young

• Key points:
  • Understand innovation
  • Model your customers
  • Spend time with details
• Experts are saying we’ve hit the wall when it comes to innovation and efficiency.
• Extraordinary results can’t be forced.
• Innovation comes about while crafting the details of a solution.
• ”…focus on people and their problems…”
• Any behavior change needs to be understandable.
• The product/solution needs to survive the long term.
• Look for insights:
• Find a gap to fill.
• Look for scarce/weak support.
• Redefine and augment existing features.
• Look for surprises.
• Combine related behaviors.
• Look for user emotions.
• Examine spaces formally crossed out.
• Rethink features that don’t match behavior.

Indi highlighted a number of examples and analytical methods that are discussed in more detail in her upcoming book: “Mental Models: Aligning Design Strategy With Human Behavior”.

Posted by Jeff on January 31st, 2008 | No Comments »

Crowdsourcing a Better GMail by Gina Trapani

• Gina is the leader of the Better GMail software project.
• The “Stone Soup” story is a great paradigm for open source software development.
• The idea for Better GMail started out with using Greasemonkey script to tweak the functionality/design of GMail.
• Stylish – Greasemonkey for CSS styles.
• Great resources:
  • http://userscripts.org
  • http://userstyles.org

• Gina showed us a number of excellent Greasemonkey scripts for GMail.
• Greasemonkey is great, but is too much work for most users.
• It would be great to install these scripts as Firefox extensions.
• User script compiler – takes Greasemonkey scripts and turns them into Firefox extensions. Good first step, but not simple enough.
• So she created Better GMail. A compilation of a lot of Greasemonkey scripts for GMail into a Firefox extension. Very easy for users to install.
• Gina became the liaison between Greasemonkey script developers and users.
• Babelzilla – online community of volunteer translators for Firefox extensions. Gina received 20 extensions when she asked the community for help translating Better GMail.
• Better GMail blog post was in the top ten most popular blog posts on the Gawker Media network for 2007.
• Also spun off Better GCal, Better Flickr, etc.
• One hitch in the road: major code changes at GMail were going to break all the existing GMail Greasemonkey scripts, as well as Better GMail.
• GMail decided to provide an API to developers to allow them to create Greasemonkey scripts that didn’t rely on markup (more future-proof) and allowed the developers time to rework their scripts before releasing the GMail changes to the wild.
• First company to really jump on the API was Remember the Milk (online to-do/task lists).
• http://diveintogreasemonkey.org to learn more about Greasemonkey.
• http://ginatrapani.org/workshop/firefox

Posted by Jeff on January 30th, 2008 | No Comments »

Developing with Adobe AIR and Microsoft Silverlight

Andre Charland, the CEO of Vancouver-based Nitobi, was on hand at Web Directions 08 to give attendees a crash course in Adobe AIR development. AIR, put simply, lets web developers build desktop apps. Essentially AIR allows web development to be taken offline, and removes the restrictions that a browser interface imposes on developers. It features file I/O, native windowing and menuing, and can also tell if a user is online or offline. AIR also allows HTML content in Flash, can make calls to Actionscript right from Javascrpt, as well as closely integrating with PDF documents.

Air is a run-time, not a plugin, and is available now for Windows and the Macintosh, with Linux support coming soon. The program is free, as is the SDK.

Walter Smith of Jackson Fish Market gave an overview of Silverlight, Microsoft’s Flash challenger.

Silverlight’s origins are in the Windows Presentation Framework, but unlike WPF, Silverlight is small, works on Windows and the Mac, and is a browser plugin. WPF is part of the .NET framework and doesn’t integrate well with web technologies.

But what Silverlight does take from the WPF is an object model, markup in XAML and a runtime model. Version 2. will have controls, layout managers, data binding, support for dynamic languages, and the option of using the .NET framework. Silverlight also allows media streaming and naturally has Windows media support right out of the box.

Posted by Warren on January 30th, 2008 | No Comments »

Brian Oberkirch explains how to make social components more social

Brian Oberkirch, the social media, web development and marketing consultant, delivered a talk at Web Directions North today about making sure social applications “play well with others.”

Oberkirch stressed that the “small pieces, loosely joined” model is the best way to approach social applications. Open, modular design (both hallmarks of UNIX development) and doing one task extraordinarily well is what it takes to create a great web app. Many apps try to o everything and fail to do anything well.

Oberkirch also pointed to social networking fatigue as a looming problem, and that while alpha geeks are the first to adopt digital identities online, they need to look at the design of social networking tools and make them much more portable, hackable, and distributed. Instead of endlessly filling in the same data in numerous sites, users should be able to manage their online identity, their friend lists and their preferences in a more streamlined manner.

He said the technology, in applications like OpenID, oAuth already widely available now, while the Creative Commons movement helps to propogate ideas of openness and sharing.

But in order for everyday users to adopt these technologies, they shouldn’t even have to know what technologies are underpinning a more social experience, he said. He pointed to foamee, a “who do I owe a beer” app that assumes you already use Twitter and adapts your account to that site. Open sites that allow exchange of these APIs allow for simplifying logins and pooling of data. Another app he pointed to was Dopplr, which uses your Gmail or Flickr info in order to populate a friends list that informs you when they’re in your home town. Plaxo is also designed to consolidate a user’s identity over numerous site sin order to make their online identity easier to manage.

But Oberkirch said no-one knows what the killer app is for portable social networking, at least not yet. He charged developers to work on reusing identity, making profiles portable, creating ways to import contact lists, but also to keep privacy concerns in mind.

Posted by Warren on January 30th, 2008 | No Comments »

What Makes a Design Seem Intuitive with Jared Spool

• Synopsis:
  • How people think about/use design.
  • What does “intuitive” mean?

• Avis Rental website:
  • Uses asterisks to indicate optional fields.
  • Their explanation was that the majority of the form fields on their website were required, so they inverted the common convention of using asterisks to indicate required fields.
  • When did the asterisk inherit the meaning of required?

• “Designs can’t be intuitive” – grammatically incorrect. People intuit what to do with the design. However, he uses designs are “intuitive” as a shortcut.
• When is a design not intuitive?
  • When the user can’t figure out what to do.
  • If it takes too long for the user to accomplish a task, or to figure out what to do to accomplish the task.

• Intuitive is personal – it depends on the user’s previous experiences and what they already know.
• Design is evolutionary:
  • Designers build the technology.
  • Then add features.
  • Then reduce complexity to increase usability and lower the current knowledge requirement of users.

• Instant messenger setup wizard comparison:
  • External help (taking users to another website, etc.) vs. inline/contextual help.
  • Mr. Spool goes into detail about levels of user knowledge – current knowledge and target knowledge.

• When is a design intuitive? When current knowledge = target knowledge or when the knowledge gap is so small it is negligible.
• Real life testing examples are the only way to find out if a design is intuitive.
• Techniques for creating intuitive designs:
  • Field studies.
  • Usability studies.
  • Personas.
  • Patterns.

Posted by Jeff on January 30th, 2008 | No Comments »

Working with Ajax Frameworks by Jonathan Snook

• Frameworks provide ready-made solutions.
• Often force a specific style of code e.g. the jQuery object.
• 3 Layers to Javascript/Ajax:
  • Core – working with the DOM (the actual document).
  • Application conveniences – manipulating/processing data.
  • Widgets – design/interaction/code

• Popular frameworks:
  • jQuery
  • Dojo
  • ExtJS
  • YUI
  • Mootools
  • Scriptaculous
  • Prototype

• Snooks favorite framework? It all depends on what you’re trying to accomplish. Each framework has its own strengths.
• Prototype:
  • Very object oriented approach.
  • Excellent for working with large amounts of data.
  • May have issues working with other libraries because it adds methods to the native prototypes.

• jQuery:
  • Everything begins with the $ function (the jQuery object).
  • Lots of plugins available and very easy to develop your own, custom plugins.
  • Works really well with other libraries as all functionality is contained within the jQuery object.

• ExtJS:
  • Great for application widgets.
  • Very flexible library.

• Scriptaculous:
  • Heavy on effects.
  • Requires prototype.

• Mootools:
  • A little bit of everything.
  • Object oriented approach.
  • Similar code conventions to Prototype.

• YUI:
  • Yahoo global object – self contained, will play well with others.
  • DOM Collection – for traversing the document.
  • Event Utility – event handling.
  • Tons of available utilities and application widgets.
  • CSS:
    • Reset
    • Base
    • Fonts
    • Grids

• Dojo:
  • Core – DOM utility
  • Dijit – application widgets
  • DojoX – cutting edge techniques: drawing, offline support, etc.
• Jonathan also covered some common techniques e.g. show/hide/toggle, autocomplete, sliders using some of the popular libraries.

Posted by Jeff on January 30th, 2008 | 1 Comment »

Tara Hunt on government in the Web 2.0 era

Tara Hunt, the powerhouse behind Citizen Agency, gave a talk at Web Directions North today on how the very different worlds of Web 2.0 and government can collaborate and co-exist.

Hunt highlighted openness, collaboration and community as the core tenets of Web 2.0, as well as the concept of trust. None of these concepts have traditionally been at the forefront of government. Neither has the very public way in which today’s digital generation lives unabashedly online, or the “work in progress/public beta” approach to blogs and web development that encourages collaboration and innovation in real time.

Hunt said Government 2.0 is about actually working with the public, and not being afraid of open betas. But most importantly, she said government 2.0 is about trusting your citizens as partners.

Hunt highlighted the work of two designers who tackled the hideous Caltrain site and remixed it into iamcaltrain, a web 2.0 site that is much easier to use and isn’t eye-scarringly ugly. The only response from Caltrain was to tell the developers to not use their logo. By contrast, the Toronto Transit Commission collaborated with organizers to create TransitCamp, a Barcamp-like unconference designed to brainstorm making public transit better both on and offline. Transitcamps are now happening in cities across the world, and, at least in the case of the TTC, with interest from a government agency.

Hunt also pointed to bloggers coordinating help during crises like the recent San Diego fires, as well as the phenomenon of photos flooding Flickr during natural disasters. While the media made it look like San Diego was doomed, ordinary citizens were coordinating rescue efforts and getting both good and bad news out to the public. Hunt highlighted other efforts at public citzenship such as Fixmystreet and Chicagocrime.org. In effect, average citizens are working around the limitations and slowness of current government and lobbying, advocating and in some ways replacing government services using Web 2.0 technologies.

There have been some inklings of progress. The US Library of Congress has placed their collection of photographs on Flickr, allowing everyone to tag, identify and use these photos for their own creative ends. But it remains to be seen if government will embrace the open nature of the web or stay mired in bureaucracy and secrecy.

Posted by Warren on January 30th, 2008 | No Comments »

« Previous Entries

Next Entries »