These are my notes from SXSW 2006. Send comments or add your thoughts: lance [at] simpledream [dot] net.
Traditional Design and New Technology
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
- khoi vihn’s dog’s blog: misterpresident.org
AJAX: what do I need to know?
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
- 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.
Things to watch out for
- 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.
- 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.
Bluff your way into DOM Scripting
- Test for methods, not browsers
- Test for required “hooks”
- Keep ‘em separated: objects, etc
- Keep it generic and independent of markup
- 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
See example of Shaun Inman’s scroll and flash effect
Try to find presentation slides for code samples and link to practical tips ??
Starting small with your web business
- 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
- 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
- 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
- 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.
- Staying on task
- Growth (when to hire people?). If you want to grow, it’s critical to go beyond freelancing and transition to management
- Remember the user in all your projects
- Working with family can be tough
- 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…
What’s hot in web applications: product strategy, design, and development
Current theme in web apps is communication/collaboration. Also, productivity is moving to the web: Meebo.
Ideas behind good web apps
- Treat the user experience like a desktop app
- Launch early and feature-light so that users can decide on the development from there
- TEAM: work together, build together
- Don’t raise money until you actually need it
- Take advantage of the community of users; example of volunteers manning the forums for Meebo
- 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
- The app needs to make work easier for people (no downloads, easy upgrades behind the scenes, faster performance than regular desktop apps)
- Social apps: idea is to strengthen relationships
- Innovation: must be an improvement, and fun
- Monetization: think about it early and often
How to reach a larger enterprise customer?
- Remove compatibility issues
- Support formats that are used right
- Make it web-based so it can be used anywhere
- 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?
Web 2.1, Making Web 2.0 Accessible
WCAG – currently on version 2.0.
- Technology independence
- Testable results (e.g. 5:1 luminosity contrast ratio)
- Sites should be accessible and WCAG helps you get there
- 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
emelement 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
Holistic Web Design
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
- 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.
Web standards and search engines
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