These are my notes from SXSW 2006. Send comments or add your thoughts: lance [at] simpledream [dot] net.

Traditional Design and New Technology

3/11/06 10AM

traditional = print & new = web design

content for this panel is aesthetics and the change from the old to the new

1. How do contstraints of a medium affect the role of design?

• Workflow, browser, and technology issues affect the entire design
• Print: aesthetic qualities are the most important part in that they create an emotional response to the design. ? is this lacking on the web ?
• Brand experience and history of an organization can be conveyed through design. Online, however, sometimes this message can get lost if the content is delivered through RSS or text-only views
• We evaluate sites with how well they do within their technical contraints, not the complete “art” of how they look and feel

2. Art direction: how are you creating experiences differently?

• The web is affecting how much thought is given to new design since you can create faster now. There is less structure and thought going into each product as compared to the print or product world
• Things will get easier as we are less worried about the building of the sites…tools need to get better for this to happen
• Do we sites speak to people the same way that product or print design do?

3. Do design technologies apply online?

• Do the same principles or techniques apply?
• Can you get an emotional response from a web site in the same way as you do from print?
• Principles are similar in a general way but most techniques do not carry over…
• Online there is a smaller need for expression as the emphasis is on communication
• Do non-design elements in the web tend to reject traditional design?

4. How has technology affected traditional design?

• Metaphors from web design are coming back to print
• Traditional design will be more of an art form as time goes on — web-based design will take over the day to day role in design

Links:

• khoi vihn’s dog’s blog: misterpresident.org

AJAX: what do I need to know?

3/11/06 11:30AM

History and overview

• Jesse James Garrett: how did he come up with the term? The main goal was to bring a better level of interactivity into a typical web application
• XMLHttpRequest doesn’t have to be XML, it can be plain text, JavaScript, etc
• Interactive elements are key: progress indicators, etc. What else is missing?
• JSON RPC call-back function

How to get started

• Find a good toolkit. This helps reuse other code and also avoid making the same mistakes (“make new mistakes”). Choose a solid toolkit to ensure a long future with it.
• Learn more about JavaScript and HTTP. “JS is worth learning in a good way.”

Things to watch out for

Dori Smith

1. Accessibility. Non-JS users, what do they get? Js turned off? Older browsers? Make sure code degrades gracefully. Make this a requirement from the beginning and build it into the process instead of trying to work on it at the end.
2. Usability. User expectations: as AJAX comes into public view, people will start to lose some of their familiar functions like back button, bookmarks, and communication checkpoints. Make sure the code works cross-browser and cross-platform. Yahoo’s dev guidelines are a great example of browser and platform support.

Links:

• Slides
• DHTML Universe

Bluff your way into DOM Scripting

3/11/06 3:30PM

1. Test for methods, not browsers
2. Test for required “hooks”
3. Keep ‘em separated: objects, etc
4. Keep it generic and independent of markup

Practical tips

• Replace it with an unordered list in the DOM (see example)
• Email obfuscation: use [at], then replace it with mailto: links
• Improve a printed page with the URLs as footnotes
• Striping tables: add class to every other row
• For creating/updating nodes, load all the info inside a function, then load them into the document all at once. This is faster than writing out each element individually.
• Know your framework: example of prototype’s $ which is equivalent to document.getElementById()

See example of Shaun Inman’s scroll and flash effect

Links:

Try to find presentation slides for code samples and link to practical tips ??

Starting small with your web business

3/11/06 5PM

Exit strategy

• What are you going to do afterwards?
• Long-term strategy and thinking
• Have a goal: when do you want to go?
• Failure isn’t always a bad thing; it’s a learning experience. Evaluate the business and see where you can improve

Financial

• It’s important to keep billing and try to maximize all billable hours
• At Fortymedia, they bill by project b/c they can add all the office/financial/admin hours. These extras are often forgotten when doing hourly estimates

Getting business

• Freelancers word-of-mouth is your brand! It help steer people in your direction
• This brand helps reinforce your public image
• Use your blog for QA and communication
• Work on lots of fun (not always paid) projects
• Be known and understood
• Pick clients carefully; fit your brand and your focus
• Simplify your message by asking colleagues “What do you think I do?” Get honest answers
• Be an expert with a broad skill set
• Be specific about what you do; share your strengths and areas of focus publically

Work/Life balance

• Know when to start and stop. What are you doing for a living? Who/what is it for?
• Respect the relationships in your life::keep your other needs filled
• If you can, separate life and work
• Productivity: Focus, be refreshed, and know when to stop. If you limit your hours, they will be more useful even if they become less numerous.

Challenges

1. Staying on task
2. Growth (when to hire people?). If you want to grow, it’s critical to go beyond freelancing and transition to management
3. Remember the user in all your projects
4. Working with family can be tough
5. Communication with clients: don’t dismiss their ideas

How to say no

• “We’re not a good fit”, “I’m full booked”, quote a high price
• Educate the client so that you can say no while helping them understand the explanation of your refusal
• How to get acceptance on a project? Make sure it’s a trusting relationship in the beginning
• Content is the #1 thing that will hold up your projects. If you don’t have content, the project should not even start…

Links:

Start Small

What’s hot in web applications: product strategy, design, and development

3/12/06 10AM

Current theme in web apps is communication/collaboration. Also, productivity is moving to the web: Meebo.

Ideas behind good web apps

1. Treat the user experience like a desktop app
2. Launch early and feature-light so that users can decide on the development from there
3. TEAM: work together, build together
4. Don’t raise money until you actually need it
5. Take advantage of the community of users; example of volunteers manning the forums for Meebo
6. In order to start something new, you need to be very passionate about it. It should also solve a problem that you have with current apps
7. The app needs to make work easier for people (no downloads, easy upgrades behind the scenes, faster performance than regular desktop apps)
8. Social apps: idea is to strengthen relationships
9. Innovation: must be an improvement, and fun
10. Monetization: think about it early and often

How to reach a larger enterprise customer?

1. Remove compatibility issues
2. Support formats that are used right
3. Make it web-based so it can be used anywhere
4. Find a spot where it will be receptive

Questions: what happens when someone takes your app as the thing to improve on? How to continue breaking boundaries?

Links:

Web 2.1, Making Web 2.0 Accessible

3/12/06 11:30AM

WCAG – currently on version 2.0.

Goals:

1. Technology independence
2. Testable results (e.g. 5:1 luminosity contrast ratio)
3. Sites should be accessible and WCAG helps you get there

Ideas:

• Accessibility doesn’t necessarily mean JavaScript on/off
• Interactive design: make sure you test with actual users; it makes a huge difference to see real people either fail or succeed
• Keep you code simple—back to basics. Test, test, test!
• HTML is the strong foundation for making this accessible
• Accessible Flash? Education is the key. It’s easy to use Flash’s built-in access features
• When using error messages, put them as an em element within the label element. That way when the focus returns to the error message, the screen reader will actually read aloud that updated text
• W3C wants comments on working drafts of WCAG 2.0
• Check out iDictate podcast transcription service

Links:

iDictate.com

Holistic Web Design

3/11/06 5:00PM

Idea: finding the creative balance in multi-disciplinary teams

Focus on the importance of the whole and the interdependence of the parts

The big picture:

• Educate each other
• Involve everyone
• Respect each other
• Compromise, remember the big picture

Tips:

• Beware of 3rd party integration as it’s rigid and doesn’t compromise
• IA: goal oriented page descriptions that are lists of all the intentions & questions that users may have when visiting the site. Also, page description diagrams with priorities listed out for actions and content
• Take feedback: keep the good and drop the bad
• Comment your closing div tags
• Access: look beyond the screen reader
• Push whitespace to the outside of the screen
• Break information into digestable ways of getting things done
  (for df projects – make sure to keep actions and links consistent from module to module)

Great thing: all team members should be able to explain the steps made by all the other team members. This way they show they have educated each other and learned/understood the roles of all the members.

Links:

Plazes

Web standards and search engines

3/13/06 10AM

Idea: how developers and search engine manufacturers can help each other

HTML: how do search engines find our content?

• Be clear about site and it’s pages: what are they and what are they for?
• Be aware of signals of quality and the relevance of the various signals
• Remember that the algorithms are always changing
• Usability, accessibility, and SEO: these 3 practices overlap so much that it makes sense to do them all the time
• Lead by example
• Don’t underestimate link popularity