05.03.08

Jamie

Dusted at Web Directions North

Web Directions North 08 wrapped up a few weeks ago and I have finally found time to write up my notes. As with dConstruct 2007, all of the speakers were excellent and although I didn’t get to see all of the presentations, here are my notes on most of them.

Return of the King of Web Standards – Jeffrey Zeldman

Jeffrey Zeldman spoke about the history of standards and how he co-founded the group and movement.

Discussion then moved onto how standards became dormant for a while after browsers became standards compliant and how the XML revolution in 2000 didn’t really happen.

A brief mention of how XHTML 2 is confusing to many and how HTML5 isn’t standards compliant led onto the fact the Microformats have a rosy future. Oh and he thinks that IE Version targeting is a good idea, even though many people disagree.

Changing subject a little, discussion moved onto how to convince businesses that standards are useful. Not surprisingly, the biggest winner is that “semantic markup is SEO made easy”. Businesses were not particularly interested in hearing that without web standards, you:

• waste users time
• waste bandwidth costs
• hide content – a fact highlighted by where the first piece of content appeared on yahoo (it was very far down the page amongst a huge amount of markup)

Real World Accessibility for Real People – Derek Featherstone

Derek gave some great examples of bad accessibility and many tips on how to build accessible applications. One such example was Google Maps controls using voice recognition software. On the maps, the plus symbol isn’t a link or a button which makes it hards for the software. Also, users can’t use the keyboard to tab through the controls because they are in divs rather than form items. In this case they could have used the button element and image replacement to help keyboard users.

In terms of project planning, Derek discussed the “checklist syndrome” and how developers need to use accessibility checklists as a starting point but not to focus on them too much. It is important not to target particular software such as Jaws and just make sure to follow accessible techniques which should make applications usable across different types of software.

Alternative versions are very important and Flickr use these well. Within Flickr you can inline edit the image title but also follow a link further down the page to reach a title editing screen.

Finally, we ended up taking a look at WAI:ARIA which “defines a way to make Web content and Web applications more accessible”. WAI:ARIA will provide developers with attributes, which help identify features, how they relate to each other and their current state. Features include roles to describe widgets, page structure (headings and tables) and properties that define live regions of a page.

Government 2.0: Architecting for Collaboration – Tara Hunt

Picture credit: Tara Hunt

The basis of this talk was about communicating with government and helping to make a difference using internet technologies.

As we know, Web 2.0 is all about openness, collaboration and community with bloggers having an audience and an influence. Using this influence, community and available technology, we can encourage the government to make changes and assist them to do so. As with the other presenters, Tara provided some great examples, the first being that of some Caltrain users taking it upon themselves to improve the Caltrain web site using mashed up data to present a more usable web application, they came up with iamCalTrain.

Tara then moved onto Barcamps and how they are setup by anyone to solve problems by bringing community and government together to improve services. Transitcamp is a great example of this as they engaged the city and came up with many ideas about re-design.

Other Examples of people coming together and communicating with governments are:

• San Diego fire in 07. Communities affected by the fire used Twitter, Flickr and Google maps to help provide information about fire. Many of the images taken by the public were also used by many news outlets.
• Fixmystreet.com is a community web site set-up to deal with many issues such as street lights that need replacing and pot holes that need filling.
• In Canada a Facebook group was created for the ‘Fair Copyright for Canada’. The government were planning to pass certain laws but have held back due to complaints and the popularity of the group.
• The final example is that of the Government of NZ, who created a wiki to keep people involved with government process.

Tara’s has some tips on how to encourage collaboration, which can be found in the presentation slides

Working with Ajax Frameworks – Jonathan Snook

Unlike the other presentations, Jonathan’s was more technical with programming examples that wouldn’t easily translate to this article. Because of this, the write up is a much shorter and in bullet point format.

I had been eagerly anticipating Jonathan’s talk as I feel it is important for Dusted to pin down exactly which Ajax framework we would concentrate on for future application development. We currently use jQuery for most projects but depending on the scale, could well use a combination of the various frameworks.

The presentation was broken down into three parts:

1. ChoicesThere are many frameworks, which can be used to approach different problems. Jonathan listed the popular frameworks with their associated strengths :
   • Prototype is good at dealing with data heavy tasks such as – searching a large tables of data. Doesn’t play too well with others
   • jQuery deals well with heavy DOM work, it is capable of working with many elements, works well with others and has many plugins.
   • ExtJS has many application widgets
   • Scriptaculous handles different animations very well
   • Mootools has the ability to do a little of everything
   • YUI has lots of utilities, widgets and does a lot of everything
   • Dojo (Dijit for interface widgets, Dojox for cutting edge drawing support and comet for charting and offline suppport)
2. Design patters – Jonathan discussed using example code, the different ways that the frameworks handle effects, animations and functionality such as toggle, hide, auto complete, data sources and sliders. Please refer to his slides for further information.
3. Bridging gap – Jonathan detailed how the many frameworks work together to allow web applications to use different features.

Here are the presentation slides

Developing with Adobe AIR and Microsoft Silverlight – Andre Charland and Walter Smith

Andre and Walter showcased some of the capabilities of Air and Silverlight. Below, I will list some of the features:

Adobe Air will basically require the user to install Air and then download a published .air file which will run on their machine. Adobe Air will be able to store data on the users local machine, detect when the machine is offline and automatically update the program when online. It uses SQLite, can call ActionScript from JavaScript and also has the ability run processes in the background. All-in-all a pretty impressive package but I guess my only question is that with the future of mobile devices accessing mobile networks looking so strong, how will this software adapt to a different environment?

Here are the presentation slides

Silverlight originally started as WPF for windows only but quickly morphed to Silverlight for the web in the form of a web browser plug-in. The markup it uses is XAML which is plain text and serializes objects. The hope is that the designer will create the XAML which will make it easier to pass onto developer to integrate the functionality. Microsoft are constantly working on improvements and the next version will have better controls and data binding.

Innovation is Overrated – Indi Young

Indi thinks that “Innovation is overrated”. She discussed how we have “hit the wall” and have become as efficient as possible. Businesses come up with new ideas to get ahead of the competition but they forget what is really important – focusing on people and their problems.

An example that she used was the Prius. User experiences concluded that it is difficult to get the hang of operating the car as the change is too drastic. Change needs to be easily understood by users and this wasn’t achieved with the design. Indi suggested that the best way to look for ideas is by looking for solutions to the problems that people face.

When encouraging innovation it is important to:

• Understand innovation
• Model your customers
• Do not force that ideas, craft the details. It’s a long term process and the change needs to be understandable.

Indi then moved onto details about Mental Models and how to look at users behavior, philosophy, and feelings. Example projects that she used to demonstrate her techniques were:

• A dating website called Engage.com. It was important to figure out the types of interactions people typically encounter when dating, this would help develop interactions on the website.
• A project to attract more students to the California State University (East Bay). During the project planning it was important to model how the potential student thinks when deciding which university is best for them.

Some tasks to keep in mind when discussing innovation and new ideas are:

1. Find a gap to fill
2. Look for scarce or weak support
3. Re-define & augment existing features
4. Look for surprises
5. Combine related behaviours & features
6. Look for emotions

A couple of recommended books were:
The myths of innovation
Mental Models

Here are the presentation slides

The 3 Stages of Dynamic Systems – Boris Mann

Picture credit: Boris Mann

One of the main reasons I was interested in this presentation was that I was hoping to find out which OpenSource CMS had the best all round features but but it wasn’t to be. Instead, Boris went through the decisions that need to made when choosing to integrate a content management system.

Three main discussion points mentioned were:

1. simple content management – client wants to edit their own pages
2. beyond the blog
3. building web apps. Adding functions.

Other points raised were familiar and take some thinking about, they were; budget, upgrades, support, and technical expertise. It is important to note that even though OpenSource is freely available it still takes a large amount of time and expertise to integrate and support such technologies – “OpenSource doesn’t mean free unless time is free”.

Boris then raised a response from the audience when he touched upon WYSIWYG’s such as TinyMCE and Yahoo. Discussion centered around their use and how they are currently lacking but will be improving as they are built on new JavaScript frameworks.

Boris moved onto the importance of version control, having a backup plan, avoiding hacking the core and always patching. Software patching is important as you will need to apply the patch after the CMS has been updated to add back in the new functionality you created. A strong message off the back of this is that you should not trying to build a CMS from scratch!

Among the CMS software mentioned were ExpressionEngine, Drupal, Movable Type, WordPress, Typo3 and Joomla. The usual OpenSource frameworks mentioned were Rails, Django, and Symfony.

Finally, discussion moved onto community managers. It seems that as more companies integrate CMS’s, there is a new trend that requires a different skill set. No longer is a webmaster who updates the website required, the need is now for a community manager to be employed to manage these systems and clients.

Here are the presentation slides

Ajax Security – Douglas Crockford

Douglas suggested that the major security problem lies with the fact that web browser inherently insecure.

He moved on to mention that if an application was insecure, an attacker could cause some serious harm by:

• requesting additional scripts into the page they had gained access to
• making requests on the server without your knowledge
• readng data on the page and on forms sent to the user
• sending data to any server in world from the page, they have accessed

Consequences of such a breach include loss of client trust, legal and criminal ramifications.

The problem is worsening because more applications are creating Mashups which use 3rd party code. This code, in many cases, has too too much access and should not be used in conjunction with any confidential applications. Douglas used the perl.com as an example – they used 3rd party JavaScript advertisements on their site which redirected users to a link farm pushing porn sites.

Although Ajax applications have gained popularity due to web 2.0, these security problems have existed since NN 2.0 and the only way to really solve the problem is to, in Douglas’s opinion, replace JavaScript and the DOM. The main reason for this is that all nodes are linked so if JavaScript accesses just one node, it has access to them all!

Some useful solutions to the security problems are to make sure you validate all input, write clean readable code and use services like JSLINT with Adsafe options, which you can use to input JavaScripts and check for their weaknesses.

Other subjects Douglas touched upon were, XSS attacks, XSRF, using secret cookies (Crumbs) and using JSONRequest for safe data interchange. He also mentioned that Google Gears is looking at VATS which keep JavaScript apart in contained areas so they cannot exploit applications, although these are pretty heavyweight measures to incorporate.

New applications could help with security as Adobe Air, JavaFX and Silverlight could take over from browsers and remove some of the vulnerabilities, the problem with this is that the openness of the web would be lost.

One final image that I cannot get out of my mind is that of the Turducken! Douglas basically used this as an example of many languages (HTTP, URL, CSS, JavaScript, XML, JSON, plaintext, SQL…) being nested inside each other, with each language using different quoting and commenting conventions. This mixture provides a real security worry.

Here are the presentation slides

Where’s Your Web At? – Dave Shea & John Allsopp

Picture credit: Andrew Kumar

Dave and John switched back and forth during this presentation to great effect. They discussed how people for many years have been using traditional web browsers and what the future holds for mobile devices. it was interesting to see how wifi enabled devices are developing and what, as developers, we will need to do to keep up with this changing landscape.

We currently make certain assumptions about the what web broswers, operating systems screen resolutions and input devices (QWERTY, SMS, Virtual Joystick, touch and stylus) that users have. As the number of wifi enabled devices increase, we need to start to consider many other options. Examples used were:

• more applications talking to computer
• more wireless devises with input devices
• game consoles like the Wii and PS3 have browsers
• misc devices (with and without screens) such as fridges, washing machines, watches, thermostats and the Chumby

Today, people are also using the web in different viewing conditions such as coffee shops, and trains and on the run, so their requirements, such as attention and privacy may change.

Difficulties may also be presented in the browsers installed on the many different devices; the Opera mini browser, which runs on Java is available on wide array of devices but the iPhone and Nokia use Webkit as their browser. There is also another browser called Netfront which runs on mobiles and the PS3. Maybe all this will change with the Google Android but you never know!

All of these issues have an impact on how we design our applications. We need to take into account screen size and orientation, such as the layout of our content. We can look to CSS to solve some of the problems as it provides us with media profiles, which allows us to present a certain stylesheet for a certain type of device. An example of how this doesn’t quite work is that the iPhone is a mobile device but uses the media profile of ‘screen’ rather than ‘handheld’. The bottom line is that there is no one solution and we need to research and plan for how we will present our content.

We take for granted the way we use browsers and there are some major difference in the way we use these mobile devices are already fairly apparent: typing is slower, no undo functions, no hover, mouse overs, drag and drop, or rollover tool-tips, no cut and paste, having to switch between numbers and letters. These need to be taken into account when we are designing.

Other issues we need to take into account are that there are scaling problems, some tabbed navigation causes scrolling, breadcrumbs can’t really be seen unless zoomed (which is a breakdown of their primary purpose) transitions may not be so good on smaller devices and forms could be frustrating to fill in and need to be careful with coding and look to pre-fill as many elements as possible. All of these will also affect our design, planning and decision making.

In conclusion, here a few things we should do to help:

1. Keep URL’s short
2. Don’t mix numbers and letters, as it’s tough to switch keyboards
3. Use ECML and label form fields correctly, which will help with auto-fill
4. Use OpenId to ease with the pain of signing
5. Use QR Codes

Here are the presentation slides

The Why and How: UI Case Studies – Daniel Burka

Picture credit: Daniel Burka

Daniel Burka took this opportunity to tell us about his experiences with the re-design of Digg and the design (from scratch) of Pownce. In the case of Digg – Daniel was given one week to re-design the story format. Although a daunting task, he started with the homepage and identified key themes quickly. He looked at the content and what the user was trying to achieve. Digg is all about Digging so he looked at the ‘Digg story’ button using the Firefox download button as inspiration. He removed some of the meta data to make the stories more easily scannable and added emphasis the titles to help the user ‘jump down the page visually’.

It was an interesting talk and has confirmed to me how important user acceptance testing is during the design process. Digg already had a huge user base and any changes to the site were sure to encourage varying opinions from them. The comments section of the site seemed to be the most complicated as there was already a fair amount of functionality that needed to be redesigned and it was sure to ruffle a few feathers.

Along with analysing acceptance feedback Daniel and his team looked at the stats for trends such as more registered users, more visits and more comments made, which also told a story about how well the site was working after the redesign.

The main points I took away from the Pownce discussion were that of iteration and not being scared to make mistakes. They tried out different designs with quick iterations and finally came up with a design they were happy with and that made sense to the user.

Here are the presentation slides

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.