The Adventures of Cindy Li
Refresh 2006 Conference: Garrett Dimon, Improving Front-End Architecture
November 16 , 2006
Speaker
Pre-order
Purchase
Button metaphor: Saving ads and at the end of the day that look like the same thing
Time and Money:
remember software entropy and total cost of ownership
maintenance, morale, updates and etc.
We spent X to make this...
the architectural investment to make this you need to recognize..
your long term might be high if you invest a little
Over the lifetime your costs go up and up
Just something to get it out the door
User-Agents (not just browsers)
Watch your user-agent baseline
Supporting the fringe is costly. Make sure it’s worth it.
Accept browser limitations (avoid browser hacks)
Don’t lose hope: Netscape 4, IE 5, IE 6, Firefox & IE 7
Content: the red-headed step child
all the widgets
Let content drive: design, structure, usability
two different audiences
Plan for content dominoes
content will change. Learn to love it.
Markup the technical foundation and structure
Everything effects everything else
Lose the tables
Their time has passed
Treat markup as a craft
CSS, javascript, and accessibility are built on it
Keep it clean (the markup that is)
one place that hasn’t done this is myspace, its bad.
Mike Davidson did something to make it work
He didn’t do that he did it to show the process of what he had to do to maintain it.
Use Microformats:Expose your content with standards
CSS the presentation layer:Be bulletproof, it’s accessible and flexible
Get intimate with specificity:Specificity, inheritance, the cascade
Plan your CSS:use comments, and organize those files
Dom Scripting (aka JavaScript):From a user experience its gotten a bad name from the dark ages/browser wars
Turn it off… its come along way since then
The Renaissance: Progressive enhancement and standards
Be Careful with libraries and frameworks. Its’ a double-edged sword
Dom Scripting Libraries and Frameworks
Separate style from script
No style in your markup. Don’t put it in your scripts.
Show your ID
Be progressive (as in progressive enhancement)
Start with a solid foundation, make it wonderful, exciting
Cameron adams created a progressive page with javascript and larger width
Don’t abuse DOM Scripting
With great power comes great responsibility
AJAX is going to change
your scientists were so preoccupied with whether or not they could....
Respect the traditional model
full page loads…
Use hijax model
Request interception
Plan for Ajax from the beginning. Implement AJAX at the end"–Jeremy Keith
Know yoru response format options.
XML, HTML or JSON?
Accessibility: its essentially free, if we really understand
Be empathetic.
Press 1 if you’d like to....
Press 2 if you’d like to…
That’s what someone is using a screen reader’s experience is like
Some extra knowledge at the right time and right place
Understand accessible markup. Semantics, source order, alt tags, etc.
Semantics, source order, alt tags, etc.
Understanding the problem, a lot more subtle than that, another form of interaction.
Don’t ignore dexterity. Drag and drop, keyboard navigation , etc.
Be “legally” socially repsonsible
UK, Govt, EU? Target lawsuit?
Completely ignored multiple letters and how they are being sued.
It is very easy to do. Bigger audience to do it.
It’s free.
Remember all disabilities.
Low vision, no vision, decreased mobility, decreased dexterity, color-blindness, and more.
Think about content.
Is the content machine-accessible?
We redesigned Plazes, login and uses the combination of location and ip.
Show your friends. How do you communicate this to someone who can’t see?
Our solution is listing/meta data in the markup describes the location. Joe is 4.0miles east. You wouldn’t see it but javascript loads the information. Progressive, clean markup. Exposing the data in the page with some presentational data.
Be careful AJAX
Think Hijax & Progressive Enhancement
Sitepoint.. really interesting insight
Design:not to be confused with decoration
Design is not ornamentation. Design should clarify not distract.
Design with real content. Don’t full yourself. Real content is always different.
Value typography and the grid
Much of design is what you don’t’ see
Value typography and the grid
Much design is what you don’t see
Use the power of typography
Remember print
Design does not end at the screen
Use the right tool for the job
You can drive a car with your feet if you want to...”
just because you can do something doesn’t mean its the best thing
Myspace.. the power of undesign
Redesigned washington mutual.. appropriateness of design
he made a page look like craigslist
there is a trust
Sometimes it is appropriate to not have everything organized
Flash
Use Flash sparingly. Like images or AJAX.
Design, sIFR, DOM Scripting, Accessibility, Flash, Markup
Understanding behavior, not data.
User testing validates. It doesn’t create.
Trust your instincts: OMFG! People can read left to right and top to bottom!
Understanding why they do it
Control your vocabularies.
One word with two meanings?!?!
If i told you that I was interested in Hammer? pic of a hammer/tool. Or MC Hammer?
Know your contest
Bug tracker. Folksonomy or taxonomy?
Subject, Details, tags
Understand the database: trickle down development
Human experience
Be careful when selecting tools.
.Net, Java, PHP, Rails, Packages, etc.
Clean code makes engineers happy.
Save time and money on integration.
Get into deep thought.
Deep into the technology that is.
How is this decision going to rip through.. when it is live?
With Ajax it isn’t the easiest to manipulate.
Reuse the web services. AJAX likes web services too.
Avoid specialization blindness.
Ruthlessly pursue loose coupling: think about relationships and ripples
Don’t reinvent the wheel. Look for simple solutions.
Simplify. Simplify. Simplify.
Refactor. Refactor. Refactor.
The less code you have the less problems that can arise.
Look at MySpace and do the exact opposite.
