Here follow my notes from An Even Apart - an incredible conference for people who make web sites:
Sites to look up:
lightroom.com
37signals.com
subtraction.com
istockphoto.com
websidestory.com
mediatemple.com
swfir.com
bulletproofajax.com
developer.yahoo.com/ypatterns
dean.edwards.name
Books to read:
Thinking in Type – Ellen Lipton
Making & Breaking the Grid – Timothy Samara
Agile Web Development with Rails – Dave Thomas
Beautiful Evidence – Edward Tufte
Communicating Design – Dan Brown
Secrets of the CSS Jedi
Eric Meyer
Default browser styles
To change the defaults in your web browser, find html.css in your computer, and change it.
*{border:1px solid #000} – applies a style to every element in the page.
If you apply display:block to this selector, it will even show your styles (CSS) & title J
- or you can reference rendering of your styles by using the style selector:
style {display:block}
It is good to apply universal styles thus so that you can override browser defaults:
* {margin:0; padding:0; line-height:15px; font-size:10px}
You then need to override them for form elements, headings, paragraphs, etc.
1em is a good distance to have between paragraphs.
There is a parent element of html: it has no name. It takes on the styles of its child / descendant. For instance, if you give html a background color of blue, it will have it. If there is no background color on html, it will take on the body’s.
Crazy stuff with tables
They can be pulled from their default relationships, and be positioned independently.
Use caption, thead, tbody & tfoot to make tables more legible to the browser:
And also this code:
It gives information to screen readers.
Design
Jason Santa-Maria
How to Design
Have inspirational material in your environment:
Print material, decorations, sheet music, daguerrotypes, typography, stuff from different cultures.
Design using grids on a page. A common technique is 12 columns subdividing a page.
When trying to draw the eye, use colors, size, and remember that people look more on the left side. (They expect ads on the right.) They also start top left.
Use “ ” instead of " for quotes.
His method of design:
sketches to
grey box design (uncolored containers arranged and measured out in a Photoshop comp) to
added colors
When speaking to clients, set yourself up as the authority. Make it clear that you are in charge of the design and you know what you are doing.
How it is
Tim Bray
Web 2.0
Blog to people, let them comment.
Don’t treat them like idiots – be honest.
Blogs are what people treat as the authorities now, many times.
According to Technorati, there’s 78m already.
The new hole in the market is styled blogs: shops and books are styled, unique and elegant – they should be too.
Modern Dev Technologies
PHP is scalable
Rails wins on time to market (it’s quick to work with) & maintainability.
Use Atom – it’s the new RSS protocol: universal standard. There’s a layer on top of the http protocol, the atom protocol.
Blogging will evolve: every application should have “Publish” button: to go straight to a blog, not just “Save” and “Print” buttons.
Accessibility
Shawn Henry
Use an empty alt tag for all spacer gifs.
View your site through a voicing browser: screen readers are expensive and complex. A common screen reader: IBM HomePageReader.
Try navigating the site using a keyboard, no mouse.
Turn off images to see if you have your alt text. Turn off CSS, JS, sound. See if your site makes sense and is navigable.
Markup headings, so that assistive technologies can enable users to skip through them to get through the page.
Toolbars:
Opera enables you to jump through headings;
Firefox allows you to outline headings;
IE has an accessibility toolbar.
Have a “skip links” link, so that people can skip over them in the page.
Markup lists correctly, so that assistive technologies can group them.
Make link text meaningful (inline and in main navigation), so that people can jump to them and through them.
Look at your site using Lynx.
Resize the fonts to check the structure.
Check the language and usability for those with cognitive disabilities.
Use evaluation tools like screen magnifiers to check the pages. Also have real people test.
Find people in support groups and rehab groups. Probably best to have experienced users: they have developed techniques for navigating their way around.
Look at your color contrast.
Her free book, about accessibility:
http://uiaccess.com/justask/
Are You Experienced?
Andy Budd
People learn about things by exploring these days – not so much by reading manuals, not like they used to. They like to have a feeling of a flow, time passing easily.
Make error messages obvious: be aware that they are probably multi-tasking, busy: and could be in various emotional states.
If you are nice, and make it easy: you’ll have it over everyone else by far: you’ll delight them.
Use people’s names and personalize their experience, remember their preferences. They love it, and relate to you.
His design process: wireframe to Flash / html prototype.
Design for users – not according to how your business is organized / feels about it.
Look at people’s root motivations - not that they want a Tupperware: but that they want a Tupperware because they have just been cooking / bought in bulk / took home froma restaurant.
Build personas to know your customer.
Civil Disobedience in Interactive Media
Mike Davidson – invented Flash Image Replacement.
www.mikeindustries.com
Organizations that design major browsers mostly attempt to follow Web Standards.
In reality, though, they realize that they need to follow the needs of the people. Examples: Safari’s use of the “content:editable” attribute and webkit.
There are many web tools developing quickly: and they need more flexible web technologies to enable this. Examples: 37 Signals & Mint, or Mike Davidson’s latest, wedje:
http://www.mikeindustries.com/blog/archive/2007/06/widget-deployment-with-wedje
It costs $50k per company / $5k per person to join the W3C. There’s 60 people, bad focus: and people leaving.
Grid Design
Khoi Vinh
www.subtraction.com
In 1025 x 768, count on about 960 after chrome.
Use a 12 column layout as the basis: it can broken down in many ways. Have 10px margins between them. Have it as 3 then 3 then 3 then 3; or 6 then 3 then 3: you get the picture.
When listing and the list items have borders, leave more space at the bottom – the eye naturally drops the text a little.
Evolving an Interface
Shaun Inman
www.shauninman.com
You can define constants server side in CSS, and call them within your property-value sets:
http://www.shauninman.com/archive/2005/08/20/css_ssc_quickie
This needs to be used in conjunction with PHP or another server side technology. It makes your CSS more flexible.
Shaun Inman made Mint & ShortStat. In Mint, you click on an upside-down tab, and “drawer” drops a huge div down with multiple stat options. Nice UI.
He put a JavaScript in there that determines how wide the page is, and then stretches the divs to fill it, and drops them lower if they don’t fit.
Hijax is a hybrid of AJAX - see:
http://bulletproofajax.com/
The Yahoo! Developer Library has a great list of web defaults (placing widgets like Login areas, for instance):
http://developer.yahoo.com/ypatterns/
CSS in an IE7 World
Meyer
Between Oct 06 and Jan 07, there were 100m downloads of IE7.
25% of visitors use IE7.
Check this out for great cross-browser solutions, and making IE6 play nice:
http://dean.edwards.name/ - wow!
It can have issues with AJAX, though.
To target just IE7, use: * + html {blah blah}
To target just IE6, use: *html {blah blah}
Selling Design
Zeldman
http://mosquito.happycog.com/ - example of showing a client how useful & easy to moderate a chat area / community group can be.
General advice about choosing & working with clients.
Next Generation of Web Apps
Jeffrey Veen – works on Google analytics site.
http://www.veen.com/apart07.pdf
Match user’s wants into patterns: and map your UI to the patterns.
Make it intuitive to get stuff.
