WebmasterWorld PubCon 2007 Las Vegas Responsible Web Design
Moderator: Heather Lloyd-Martin Speakers: Gregg Banse, President, 7thpixel Ted Ulle, Partner, The MEWS Group Scott Fegette, Technical Product Manager, Adobe Systems, Inc.
<editorial comment>Heather Lloyd-Martin is entirely too energetic and happy for this early in the morning.<editorial comment>
Gregg Banse, "Our Reponsibility to the Client"
Before the Bid - Determine the goal of the client - Determine the client's experience and amount of hand-holding - Be clear about the deliverables - Know the decision process and who has the final say - Be sure you can meet the timeline - Be sure you can meet the timeline - Do you have the ability and experience to do it -- or can you assemble a team - Is the job right for you?
Plan the Job - Get all the pieces out on the table (current project and for the future) - Don't wait for questions to be asked -- answer what isn't asked - Murder the little darlings; don't try to force any of your special little pet items. If it doesn't fit in the project then don't force it. - Offer suggestions and guidance -- fill in the gaps
Plan for the Future - Plan for upkeep and edits - Don't break upgrade paths - Build scalable elements (navigation, databases, scripts) - Choose scalable hosts - Write code in up-to-date formats - Choose open source products with active support forums - Choose commercial products with support staff
Details Matter - Robots.txt, favicon, and .htaccess - Meta Data - Code Structure & Clean Code - Cron, SSL, Backups, Script Security, Spam Prevention - Statistics
Communicate - Keep the client informed - Check in with team members often - Educate the client so they can make informed decisions - Listen to everyone -- including yourself - Be clear
Take Price in Your Work - Periodically review your work - Get feedback from clients - Keep yourself educated - Network with others - Be on the lookout for ways to improve - Share your knowledge
It's Just a Job? Not. - Do what you enjoy. Be honest with yourself and do what you love. If you don't love it, it will show.
Ted Ulle, "Rsponsible Web Design and the Mouseover Menu"
I really only want to lay one little trip on you today. It's a highly opinionated opinion on my part, and it's trendy garbage. HTML hover menus. They've grown like mushrooms after a rainstorm. 95% of the time they're crap, but 5% of the time they're actually useful. So hopefully you'll be able to steer your clients in the right direction.
First of all, a web site is NOT an application. The hover menus are designed to mimic the GUIs for applications. Application users need to (and will) LEARN how to use an application. Website visitors need immediate and intuitive usability. If you're hiding information and making the user poke around, you're doing the user a disservice.
A mouseover menu is akin to having inviting someone over for dinner and then just telling them to help themselves to the fridge. "Figure it out for yourself" is basically what you're telling them.
Visitors cannot see and compare all the options in mouseover menus without hunting around. Further, categories are often constructed using the "company mindset" rather than a user's mindset.
Information Architecture is difficult. It's seldom applied for real, yet it's the most essential work that must be done BEFORE the menu labels are decided. It's a college degree to know how to do this completely.
- Read O'Reilly's book on Information Architecture. - Also see "Information Architecture for the Small Site" thread on WMW (library/HTML forum). - Also see "Putting Information Architecture into Practice" thread on WMW (library/HTML forum).
Search Engine Signals
- 100 or less links per page: Count how many links your fancy multi-level mouseover links are adding up to. You're telling the SEs that EVERYPAGE on your site is about those terms... and clearly they aren't. There is a REASON they give these suggestions.
- Understand Importance Hierarchy
- Check Your Google Sitelinks.
You're better off with an inverted L menu. Your visitors will never get lost. The Search Engines will appreciate it. Think hard about following a trend... is it really a trend or is it just trendy?
Scott Fegette, "Responsible Web Design"
As the years have progressed, our responsibilities have changed radically. Job listings for web designers in 1995 were literally: have an eye for design, access to a text editor and a modem. We made up the rules as we went along.
That same job listing today requires that the candidate know; XHTML, CSS, JavaSCript, Flash, Flex, Java, PHP, Ruby on Rails, SQL... etc.
The Freelancer's Dilemma: - Deadlines vs Web Standards - A new Responsibility Every Day - Is it a Page or an Application? - Clients are still as demanding as ever!
It's a liability to fall behind and a chore to stay ahead.
Responsible Web Design? - Staying current with web standards and best practices - Error-proofing for consistent, predictable behavior - Adopting eddicient workflows to increase productivity - Using technology in a maintainable, degradable way
** Separation of Disciplines
Three major components: 1) XHTML/HTML; Content/Data Layer. 2) CSS; Design Layer. 3)
JavaScript; Behavior Layer.
(X)HTML - Content Layer - Treat IDs and Classes as a guide to your content (semantic HTML) - No 'Bed and Breakfast' markup. (don't use deprecated tags and don't use tags inappropriately and thereby litter your content layer with garbage) - Respecting Document Flow - Microformats: real-world semantics you can use (microformats.org) Firefox 3 will be supporting microformats. Learn it now.
CSS - Design Layer - Name for the styles intent, not it's representation. (If it's for the header, call it "header"; not "BlueBar200px") - Separate stylesheets by function (layout, typography, effects, hacks, etc.) - SSIs to include CSS into doc head. - Use hacks as required, but plan to remove them. - Test heavily. Disable CSS, resize window, scale fonts, etc.
JavaScript - Behavior Layer - Externalize all functions for better efficiency - Attach behaviors unobtrusively to keep markup clean. - Test with scripting off - confirm the baseline experience - The Page vs. Application conundrum
The Next Ten Years - Rich UI functionality keeps increasing - Media and interactivity intertwines with 'classic web' - Mobile and non-PC browsers maturing quickly - Toolsets continue to evolve - Our jobs will get more complex.
