Agile Web Design

Agile & AccessibleWeb Communications

Kristofer Layon & Colin McFaddenUniversity of Minnesota

1

Welcome to our session about agile and accessible web communications.

I’m going to begin this session by talking about broad principles for communicating on the web using best practices and current options, and also briefly highlight several tools and platforms for communicating and collaborating on the web.

Colin will then focus in more closely on user-generated content, and give you some more specific information about the media that he specializes in: audio and video.

2

I direct a team of five designers and developers here at the University, and we currently maintain almost 50 web sites. We also design about 5 or more new sites a year, so we are constantly adding to this total.

The only way that we can work at this scale, and keep adding to what we do, is by being agile. This means responding quickly to our internal clients, their users, and to other factors that require us to make changes along the way in the design and development process.

3

As we continue to learn how to be more agile, we also want to meet one of our primary design goals: being accessible. We feel that there is no point in creating and publishing content that people can’t access. When we do this, we are simply wasting our time and the University’s resources.

• Easy to build

• Easy to access

• Easy to use

• Easy to understand

• Easy to change

Or…easy

4

Translating agile and accessible design means these simple observations.

5

Ask yourself why the iPhone has so quickly become so popular? It has stripped away the complex menu systems of other phones, and delivers a more pleasant and efficient way of interacting with data and other people.

6

Or consider Google search, one of the most simple web interfaces out there. Goes to show that flashy features is not where it’s at: simplicity, reliability, and results are where it’s at.

7

So what I’m encouraging you to do is to think about your web communications goals in terms of other agile processes. For example, what would it be like to make your web communications strategy and processes as easy as making a pizza?

8

Or like event planning, such as planning a wedding?

Why pizza or an event?

• Both are iterative and usually do not take a long time

• In both cases, you can make adjustments and learn from your mistakes fairly quickly

• Pizzas and weddings are fun!

9

10

In other words, I’m discouraging you from adopting the approach that successful web communications take extensive planning and forever to build. Not to dismiss the value of planning, but keep it quick. You’re not building the Great Wall of China.

11

…or the Eifel Tower…

12

…or the Empire State Building.

How is this done?

• Your planning phase needs to be quick

• Your building and launch phases do , too

• This allows you to start getting user data more quickly

• Iterate…iterate…iterate!

13

User Data is Your Success Measure

• Measure the success of your web sites with a tool like Google Analytics

• Until you do, consider every decision you make to be a “best guess”

• Analytics will then prove to you which guesses were correct

• But remember that on the web, the right answers can change fairly quickly…

14

CSS-Based Layout

• Using Cascading Style-Sheets (CSS) allow you to separate content from design

• It “sets your content free”, to be accessed in a variety of ways and using different tools

• Accessible to more kinds of devices…

• …more importantly, to more people

15

Other CSS Advantages

• Allows for more rapid re-design as site needs change

• This saves money!

• Using CSS (plus semantic HTML coding) also improves search engine visibility

16

17

There are “out-of-the-box” CSS frameworks out there now that mean you can leverage CSS web standards without being an expert. Blueprint is one of them, and it’s free!

18

The 960 Grid System is another; this one is currently being implemented by the University of Minnesota for its new home page redesign.

Open or closed source?• open is free to obtain, but

can require expertise to install and use ($$)

• open usually improves faster

• you can host open source tools at your own web domain

• very customizable

• closed means you pay for the code and/or hosting

• more out-of-the-box, and usually with a slower development cycle

• hosted solution = service (though you also want customer service!)

• less customizable

19

20

Yahoo is a provider of great user interface tools, that you can either download and install on your own servers or leverage from Yahoo in a hosted environment. Either way, these web tools and navigation methods are no longer requiring long internal development phases for institutions — they’re here for the taking.

21

Or, create your own social network using Ning. Again, no software development necessary (though at an advanced level, there is an API for “advanced tinkering”, if you wish!

22

A Ning site that my group is building as a proof-of-concept for one of our clients. This has only taken a few days!

23

Google OpenSocial is another social web framework, that takes advantage of existing social networks that employ Google’s emerging social standards.

24

Drupal is an open source web content management platform, with a huge international community of users and developers. If you have a team with PHP and database skills, you can leverage this and create almost anything that is highly interactive. Also, a lot of modules being developed all of the time, that extend well beyond the core installation.

25

37signals is a company with several nice web collaboration tools, all hosted and with supportive customer service. So this is a nice tool-by-subscription option, for institutions that don’t want to build their own applications for online collaboration.

26

Don’t forget that iTunes is also a “content platform,” for delivering audio, video, and presentation content online. And even though it is by Apple, it also supports Windows PCs.

More Tools

• Google Groups

• Facebook and MySpace

• Surveymonkey (also for registration)

• YouTube

• Flickr and Picasa

• Plenty of other open source options…

27

Closing Thoughts

• Design at the speed of the web! Iterate quickly and often to respond to changing needs and goals.

• Make initial project planning quick; time is not your ally in planning, but rather after launch.

• Be empathetic with your users and prioritize based on their needs, not on your guess of what they need.

• Marketing can’t solve your design problems, so if you encounter usability issues later, address them — don’t try marketing your way around them.

28