An Event Apart: San Francisco [Day 2]
- JEREMY KEITH ON STAGEby Wesley Hodgson at 8/19/2008 3:34:44 PM
- Important: Richard = smallest head, Jeremy = biggest head.by Wesley Hodgson at 8/19/2008 3:35:00 PM
- TOPIC: PATTERNS IN THE PROCESSby Wesley Hodgson at 8/19/2008 3:35:31 PM
- Discovery stage: meeting the client and finding out their needs (etc)
Patterns start even at this stage. Potential clients get to fill out a Client Worksheet before they get a proposal. This works both to get information about the client, as well as to weed out tire-kickers.by Wesley Hodgson at 8/19/2008 3:38:27 PM - Content stage:
Copy writing is an important stage of the interface design. "What's the tone of voice for this website?" Figure out the tone and stick to it!by Wesley Hodgson at 8/19/2008 3:42:52 PM - Good copy example|
Edenbee: friendly copy. 'no spaces please' v. 'only alphanumeric characters/etc'.by Wesley Hodgson at 8/19/2008 3:43:56 PM - Information architecture stage:
Clearleft are a bunch of post-it note fetishists. Easy to use. Easy to mess with.
Then move on to paper sketches.
Then wireframes. Clearleft create their wireframes in html/css/js. No real time spent making the code 'pretty'. CSS Frameworks are incredibly useful for wireframing.by Wesley Hodgson at 8/19/2008 3:50:07 PM - Photo in slideshow: Jeremy Keith as Natalie Portman (from Star Wars Ep 1). Wow. :Dby Wesley Hodgson at 8/19/2008 3:50:37 PM
- Clearleft use Polypage to help them develop their wireframes.by Wesley Hodgson at 8/19/2008 3:51:44 PM
- by Wesley Hodgson at 8/19/2008 3:52:06 PM
- Advantages of html/css/js for wireframing:
Gives client better idea of how a dynamic site/page will work.
Allows for user testing from an early stage. They use Silverback for this.by Wesley Hodgson at 8/19/2008 3:54:08 PM - by Wesley Hodgson at 8/19/2008 3:54:17 PM
- Visual design stage.
Conventions may be used, but there shouldn't really be any PATTERNS in this stage.by Wesley Hodgson at 8/19/2008 3:54:53 PM - "real design" is developed based on wireframe. Wireframe determines HIERARCHY... ie. the importance of stuff.by Wesley Hodgson at 8/19/2008 3:57:19 PM
- Jeremy says he doesn't think the wireframe stage should even deal with the layout in any way. Only for determining the functionality/hierarchy.by Wesley Hodgson at 8/19/2008 3:58:39 PM
- Templating stage.by Wesley Hodgson at 8/19/2008 3:58:47 PM
- html vs xhtml
J doesn't have any real opinion. Whichever.|by Wesley Hodgson at 8/19/2008 4:01:59 PM - liquid vs fixed
J stands up for liquid. fixed is easy. liquid is more appropriate for the web.|by Wesley Hodgson at 8/19/2008 4:02:05 PM - IE6.
How do we deal with it? You need to allow access to the content, but it doesn't have to look identical. Feed a separate ie6 stylesheet using a conditional statement. Do you spend time dealing with it, though? It depends on how important your IE6 users are.
Option: Dean Edwards' IE7 script (for IE6). Put a link to that javascript file inside the conditional statement.|by Wesley Hodgson at 8/19/2008 4:05:08 PM - Common recurring patterns in markup: forms, tables, microformatsby Wesley Hodgson at 8/19/2008 4:11:02 PM
- CSS, in order: reset, basic elements, 'helper' classes (.contact, etc), IDs (#header, #footer, etc), page-specific styles.by Wesley Hodgson at 8/19/2008 4:17:02 PM
- JavaScript:
Progressive disclosure: the user has to do something before they're shown something. eg. click 'log in' and login box appears. Or an expanding FAQ page. Just use a class like .toggler
Form enhancements: The form needs to function *without* the javascript before you make it pretty with js. Eg. a rating selector. Use a select box, but using javascript make it appear as star images that you click.by Wesley Hodgson at 8/19/2008 4:23:11 PM - pattern storage: svn sandbox + a wiki for documentationby Wesley Hodgson at 8/19/2008 4:23:55 PM
- J's done.by Wesley Hodgson at 8/19/2008 4:28:59 PM
- "Patterns are useful, but really we're all flying by the seat of our pants." Patterns are useful, but it isn't as though you can't modify them for specific projects.by Wesley Hodgson at 8/19/2008 4:29:03 PM
- Q&A: how do you deal with passing your project off to a developer wrt maintaining the integrity of your markup/etc? It isn't easy! You just have to live with it sometimes. This is the benefit of having your backend devs in-house.by Wesley Hodgson at 8/19/2008 4:29:09 PM
- Internets pipes were clogged. I'm back.by Wesley Hodgson at 8/19/2008 4:55:37 PM
- ERIC MEYER: talking about debugging.by Wesley Hodgson at 8/19/2008 4:55:49 PM
- Lots of code. Not as many 'sound bites'. Blogging may be light.
edit: I'm clearly a huge nerd as I originally typed 'bytes'.|by Wesley Hodgson at 8/19/2008 4:56:04 PM - img:not([alt]) {border: 5px solid red;}
^^^ interesting.by Wesley Hodgson at 8/19/2008 4:57:05 PM - Eric is detailing a debugging css file. So it has lots of rules with crazy selectors/etc for outlining 'bad stuff'.by Wesley Hodgson at 8/19/2008 4:59:25 PM
- more eg's: table:not([summary]) // table[summary=""] // th[scope="col"]by Wesley Hodgson at 8/19/2008 5:00:23 PM
- hah.. Eric Meyer uses 'octothorp'.by Wesley Hodgson at 8/19/2008 5:01:38 PM
- #by Jonathan Keebler at 8/19/2008 5:13:07 PM
- by Andrew Mager at 8/19/2008 5:16:58 PM
- Eric is hurting my brain. As @zeldman said, Eric "does the research so the rest of us don't have to."by Wesley Hodgson at 8/19/2008 5:34:59 PM
- NEXT UP: DEREK FEATHERSTONEby Wesley Hodgson at 8/19/2008 6:01:09 PM
- TOPIC: Accessibility Beyond Compliance.by Wesley Hodgson at 8/19/2008 6:01:34 PM
- Contrast of print design v. online content, again using the Wired example.by Wesley Hodgson at 8/19/2008 6:08:15 PM
- D compares this to how most experience the web, versus how disabled people experience it.by Wesley Hodgson at 8/19/2008 6:08:48 PM
- Accessibility checklists give you the bare minimum. But that isn't necessarily the best way to assess your site's accessibility.by Wesley Hodgson at 8/19/2008 6:11:31 PM
- Accessibility as a checklist v. Accessibility as USER EXPERIENCE.by Wesley Hodgson at 8/19/2008 6:15:23 PM
- "A small barrier can become a big one for a person with a disability".
eg. double-search forms. 'Simple search' appears first in page-flow of the advanced search page, since it appears in the header.
It's obvious to a sighted person, but immensely confusing to someone using a screenreader.by Wesley Hodgson at 8/19/2008 6:19:28 PM - D talking about using AJAX to *improve* accessibility.
Example using Dopplr. Manage the 'focus' better. When you, say, mute a contact your focus (using TAB-key) resets up to the top of the page. This is a DECISION by the javascript coder. The focus doesn't HAVE to reset to the top of the page w/ AJAX since the page isn't refreshing.by Wesley Hodgson at 8/19/2008 6:24:35 PM - Useability/accessibility example using a 'puffin crossing'
The idea is good (encourages people to look where the traffic is coming from), but has issues in reality. You can't see it once you start crossing the street AND it doesn't follow regular conventions (people expect the signal across the street)by Wesley Hodgson at 8/19/2008 6:30:19 PM
- Who's Blogging
-
Wesley Hodgson
- Translate
- Options
-
Comments
Turn viewer comments off and on.
Turn comments off
- Share
