Dear Podcasters:

Please, please, listen to your podcast and adjust the volume level of your (mostly useless and probably too long) lead-in/lead-out music to match the volume level of your voice(s).

Thanks,
Eric

AEA Chicago 2009: My Top 5

Going to An Event Apart Chicago was an unbelievable experience for me. Here’s the top 5 things that I came away with (some new, some reminders, some calls to action), as well as links to all of my session notes.

Top 5 for Me

  1. Lorem ipsum, you are dead to me. No, really. Kristina Halvorson will hunt me down.
    • Using placeholder text centers the design on the visual rather than the content and reduces the content to mere copy–little more than random text (as far as the design is concerned).
  2. Content is king. Also, queen.
    • The content is why people are on the site, not the design (though a bad design can turn them away). Be strategic about content, define a maintenance plan.
    • Central focus on content is also a prerequisite to truly embracing progressive enhancement. If the design is the main thing, of course I’ll want it pixel-perfect. If the content is the main thing, it just needs to look good in each browser (based on each browser’s capabilities).
  3. I don’t need massive resources to focus on UX. I should just do it.
    • UX is a mindset, and is scalable from the smallest orgs to the largest. I can do things like making feedback easy, being responsive, and 
  4. { -webkit-moz-o-properties:awesome; }
    • New CSS3 properties are great and browser support is getting better. As long as I don’t forget the *ahem* other browsers, I can go ahead and use them. 
    • Using new properties with progressive enhancement will the site look better, speed up my development timeline, and remind me what’s important–the content.
  5. Forms suck.
    • To a user, forms are an obstacle, not a tool.
    • Focus on making the form easy to use and creating a quick, easy vertical scan line. Also, I need to stop center-aligning the submit button and make it stand out from the reset button (if I use one).

My Session Notes

  1. A Site Redesign
  2. Thinking Small
  3. Content First
  4. Concept Models: A Tool for Planning Websites
  5. DIY UX: Give Your Users an Upgrade
  6. Walls Come Tumbling Down
  7. JavaScript Will Save Us All
  8. Using CSS3 Today with eCSStender
  9. Building Stuff Fast–And Getting It Approved
  10. Web Form Design in Action
  11. Designing Virtual Realism
  12. Progressive Enrichment With CSS3

    AEA Chicago 2009: Progressive Enrichment With CSS3

    Dan Cederholm finished out An Event Apart Chicago 2009 with a demonstration of some advanced CSS3 techniques.

    earliest example of progressive enhancement: font stack

    8 simple ways to apply advanced CSS2/3

    Do web sites need to be *experienced* the same in every browser?

    1. generated content
      • :before, :after
    2. enriching form elements
      • -border-radius
      • attribute selectors
    3. RGBa
      • great for use on top of textures
      • create contrast
      • makes choosing complementary colors easier: one base, different opacities
    4. drop-shadows
      • use box-shadow with RGBa (awesome!)
      • and text-shadow work with RBGa?
    5. enrichment from interaction
      • transform: scale() (use that for news)
      • -webkit-transition
    6. bulletproof button text
      • negative text-shadow = inset
    7. opacity for simple hover treatments
      • 50% for normal state, full for hover
      • don’t need to export different images for different opacity levels
      • single image, different opacities
      • dim unselected options
      • adding (slight) rotation
    8. fade effects
      • webkit_________

    Put it all together http://dowebsitesneedtobeexperiencedexactlythesameineverybrowser.com.

    Since it’s part of the experience, not the content, it’s OK to experiment.

    Q&A

    -transition goes on normal element, but activated on hover
    So you can’t do different transition for different actions?
    yeah, seems like that’s true
    With RGBa, other browsers will ignore rule?
    yeah, so specify hex, then RGBa
    How to deal with clients when it doesn’t look the same?
    refer back to Andy Clark’s talk – sell less time, less code, fewer assets, etc.
    probably won’t notice it/check it in all browsers
    Why not use jQuery?
    if it’s crucial, might want to use JavaScript
    photoshop comps aren’t going to show interaction?
    I guess this was an argument for using comps, making it easier to sell different experience to client?
    How is it different from blink/frames?
    not really a valid comparison, not markup, subtle
    Aren’t we encouraging evilness of Microsoft by using vendor-specific?
    transitions are only ones that are not part of the CSS3 spec
    “this is cool, so let’s act”
    You use a lot of PNG backgrounds, why not use gradients?
    yeah, old habits, sure, use CSS3 gradients

    AEA Chicago 2009: Designing Virtual Realism

    Session 11 of An Event Apart Chicago 2009 was Dan Rubin‘s discussion of virtual realism and relating web design to product design.

    • Input devices are somewhat divorced from the screen (with exception of touch screens)
    • Make regular UI design more tactile by relating interface design = product design

    Attractive things work better

    • because we *think* it’ll be easier to use, it *is*
    • users feel welcome, stress is relieved

    Find inspiration

    • art: we have a pretty good idea of users’ perspective (illusion of depth)
    • make things realistic – environment more like the context people are used to

    Texture:

    • subconsciously associate physical features/feel with a texture
    • subtle texture/noise
    • creating environment has to benefit the user
    • shoot photos
    • scan items
    • combine/play