Read the previous talk in this series, Underpants Over My Trousers by Andy Clarke, or view An Event Apart’s Table of Contents

Special Adobe Session: Web Workflow with the Adobe Creative Suite

Adam Pratt Sponsored by Adobe

• CS4 walkthrough
• This project includes >1700 Person Years of development time to “give
  birth to the baby”
• Photoshop
• GPU acceleration
• Real-time canvas rotation! Really, really cool(tm)
• 442MP camera capture. Lightning speed zooming on this massive file. 56.3% zoom and everything still looks great, from new anti-aliasing engine.
• You can clearly see signs that are 1.5miles and 2 miles away. Cool deal.
• New bird’s eye view to zoom in and out quickly. Shortcut key for it.
• Once you zoom over 500%, you can see the pixel display. Yes, each color for each pixel. Cool.
• Content aware scaling – rather than squashing 4 people when you want to squish a 4×6 to a 4×3, it would make people super skinny. But content aware scaling will keep the people normal but you can scale and crop it over… really snazzy.
• Illustrator
• Improved gradients.
• InDesign
• XFL – FLA format provided in XML. So you can take your inDesign document and bring it over to flash. Neato.
• Good for taking your print publications and taking them online. There’s a convert to web catalog type thing option (real name please?) – like “view my ad online” where you turn the pages and look through the catalog with flash. Some people have been doing this already, but either huge jpgs or junk looking text. Soooo this is awesome because then people’s print catalogs that you create can go straight to the web without any work at all.
• Flash
• The bowing tool – create separate but attached elements and the can interact, like sections to a crane’s hinges, and then move the pieces around and they are all attached.
• Motion Tween – with a couple clicks, can create a tween. Easy enough, but then you change your mind, and that’s never fun.
• Implementing tabbed browsing across the suite
• Fireworks
• color pallette is working right in the apps, running flash within their own apps
• Better PSD support
• Export to MXML directly to flex!
• Acrobat
• PDF export – use password to open doc OR if don’t know password, maybe they can see it but no printing, etc.
• a PDF created in CS4, someone can use comment tools in the FREE reader. ONLY because you created it in CS4, though, can they use the comment tools. Usually they would need the pro version.
• Dreamweaver
• Visual notification that files are too large. Allows to recompress the original – recompress the web saved graphic to a lower sized file. That’s pretty cool. You can clean up the slop without having to go back to a designer.
• Live Code/Preview
• Tab support still – new for Dreamweaver
• links under the tabs to the files that it references. Don’t need to hunt and peck like we used to.
• Running webkit inside of Dreamweaver - Safari – on both mac and windows
• Live Code option – the code changes live in the split source view. Annnnd, you can freeze JavaScript, so you can see the change in your code based on the JavaScript. Awesome for troubleshooting.
• Emulation of the Firebug style inheritance display (code and style navigator)
• Multi-touch support for Photoshop – the pinch and rotate. Was this included in CS3? Cool regardless.

View the next talk in this series: Live Code Workshop with Eric Meyer, or skip to An Event Apart’s Table of Contents

Read the previous talk in this series, Design Criteria: Actionable Ideas by Sarah Nelson, or view An Event Apart’s Table of Contents

On-the-Spot Usability Reviews

Robert Hoekman, Jr

• An interaction designer and usability specialist
• Purpose, benefit, usage are the three keys in analysing a site’s usability
• “Clutter isn’t good, texture is.” – Seth Godin
• Giving away copies of “Designing the Obvious”
• http://theideacenter.org
• Yellow on the site needs to go
• Any tips to educate the client to not mess it up?
• If this is supposed to be like a billboard, do that. Don’t unite. 
• People go right past text. They look, skim, and find “trigger words”
• http://asufoundation.org
• The tiny “Give to ASU” link is the whole point of this website. 
• Homepage-news blips should go somewhere else, make them three bullet points and then a take action button
• People skip blocks of text, so make these bullet points
• Then click “Make a gift online” and you start the payment process
• Before you get to the form, answer questions and paragraphs on previous pages. Make sure there is NOTHING on the page that is focused on getting them through the process
• The “Select a college or unit for investing” … dragons be there
• Just get rid of the dropdown menus for people who have come through a link from a specific fund, rather than have them be prepopulated
• Do as much as possible to the workflow to get that information out from that page and off to somewhere else, where then they click “give” and have it filled in from there.
• http://schooldude.com
• Not many complaints. Whatever your webpage is, make your entry points clear.
• No one is going to read the text on the homepage. Treat it like a billboard, just drive them to the current info. Make that the important information. Hilight it, and eliminate information 
• To get feedback on your own site:
• 5 second usability test. Show it to the user for 5 seconds – could be anyone, your mom, whoever. Then ask them to write down everything that they remember from the page. Your page should communicate its main purpose in 5 seconds and they should be able to remember that. Fast, cheap way to get that feedback.
• http://fivesecondtest.com/
• You upload your screenshot, it creates a link, and you email your link to people and they write the 5 bullet points they remember. Cool.

View the next talk in this series: Designing the Details: Web-App UI Design Beyond the Basics by Jason Fried, or skip to An Event Apart’s Table of Contents

Read the previous talk in the series, Understanding Web Design by Jeffrey Zeldman, or skip to the note’s talk Table of Contents

• CSS for accessibility checking
• You can set up safari to use a debug stylesheet
• Example of his personal debug.css
• Hilight the things that you do NOT want, that are not supposed to exist:
• Empty checking
• div:empty, span:empty, td:empty, etc.
• Note, these things are not supported by IE, but who cares because this is a development purposed stylesheet
• Really nice if the CMS isn’t pouring stuff into the HTML like it is supposed to.
• May be generating LIs that are completely empty – never notice them if hiding bullets, but there you go.
• A CMS with a “rich text editor” – see what this evilness has pushed in. Those love to generate empty Ps.
• Markup that shouldn’t be there
• *[style], font, center{ outline:red 5px solid;} – these are invalid/not good practices. Point them out and then manually address them.
• Also *[class=""], *[id=""]. Want to be able to catch these.
• Important to keep your code clean. Take pride in your work, just like in HVAC you want to keep it pretty even though it’s behind a wall, the same here. No one will see it, but have pride.
• Image cleanup
• img[alt=""] – blank attr
• img:not([alt]) – look for absense of alt
• outline – does not affect layout of the page. Not counted in width/height. It is drawn outside the border. Outlines are perfect for diagnostics, for hover in Ajax effects, etc. (Don’t want your layout going like crazy on hover because you’ve added a border to hilight Ajax action)
• Table cleanup
• Your THs should have scopes:
• th[scope="col"], th[scope="row"]
• Links
• a[href]:not([title]) – check for title attribute existence.
• a[href="#"] – “when a href = octathorp(e)… yeah that’s what I said. Because that’s how I roll.”
• Evidence that you’ve been naughty and not cleaned up your JavaScript. You want to have a fallback for your links.
• a[href=""] – CMS or you have forgotten to fill it in.
• What if you can’t develop in Firefox? What if you have to develop in IE7?
• Well fortunately, IE7 does support attribute selectors. But not not()… so you have to simulate.
• IE7 does not support the outline style.
• Give everything a border, and then as things are good, take them away.
• a[href]{border:5px solid red;}, and then a[title]{border: 0}, a[href="#"]{background:lime}, etc.
• Next section, checking for cleanness of code.
• div div div div div blah blah{outline}, because nesting too much can be just as bad as tables. Fix things, and for each subsequent section he increases the intensity of the color outline.
• form:not([action]) – there needs to be a real life action so that if no JS, they can still do something.
• *new thing* inputs cannot be direct children of the form element – it has to be wrapped by a block level element, like (or, specifically) a fieldset.
• Recap of his reset.css
• He admonishes us to personalize the reset.css.
• Make it less a reset.css as a reboot.css. Do the change once, in this document, than resetting and THEN rebooting
• Don’t count on CSS for content generation-
• Don’t use it for quottation marks – go ahead and turn the auto-insert off, but probably shouldn’t use it.
• Don’t use it for legislature and legal code and whatnot – could lead to lawsuits later. Point 1.2.5 will always be that, don’t use CSS because that can easily change, and it won’t appear in CSS disabled devices.
• NEVER turn off :focus, because you’ve made it insanely impossible for people who navigate by keyboard.
• Why the huge group selector rather than a *?
• Different browsers allow for styling for form elements, others don’t. They often ignore stuff. Browsers very inconsistent in styling form elements. Soooo just ignore.
• It’d be nice to say *[not(form,input,textarea....)].. but not() can only have one element, not a group selector.
• Learned a few things / issues:
• font-size, font-weight, font-style, etc. for fonts: inherit is not supported by IE for windows.
• Plus, issues are caused of inheritance – everything is reset. so you reset the li, but the p, strong, span inside are set to that initial reset to line-height 1. Inheritance has been broken.
• background: transparent also causing issues with td in IE.
• IE will not apply the TR background to its children – it will just apply the reset background:transparent. Silliness. You’ll have to say td, th background specific. This explains why the issues with background table colors in IE. Set the TD.
• If you use a CSS framework, it should be one that you built.

Read the next talk in the series: Storytelling by Design by Jason Santa Maria, or skip to the note’s talk Table of Contents

An Event Apart Day 1, 8:30-9:30 am:

• Real.com
• Issue: links don’t look like links, headings look like links
• Issue: pro marketing want ppl to not find free player, but other half want ppl to find it to crush competition. result: a site that does not match the user’s needs.
• consumersearch.com
• Feels like a phishing/spam site.
• A turn off – no warm feeling, no welcoming, no brand message, no welcome copy.
• Site assumes ppl know what the site is about – mistake! Ppl come via Google.
• Bad – drill in, the ads are in a spot, so your eye skips it, and then next page the navigation is there. Their eye is skipping, getting confused, they’ll want to leave if the learning curve is too long
• “It’s rough out there for a web designer.”
• Account executive pressures company to create ad campaign that appeals to seven ppl on the board. “When will we appeal to the consumer?” AE:”Never” WHAT?! That’s how it goes. Try to have empathy for the user, but sometimes roadblocks make it hard.
• Survey Analysis
• Is education relevant?
• If you make more money, you’re more likely to say that what you did in school has no bearing on what you do. Weird logic, but true.
• Perhaps because salary increases as you get older, ppl are older and haven’t been able to study web 20 years ago. “Can study candlemaking, but not web design” haha.
• We don’t agree on our own titles.
• “Other” had 15.7% of response.
• Most were developers.
• Old institutions have normal titles, startups make up weird super-specific titles.
• Want to describe what you do rather than what niche you fit into
• Who owns the website?
• What department owns up to it? Very few “Web Department”s
• Not a lot of dough
• Women who feel there is prejudice against them had big jobs and big salaries. Converse for low jobs and low salaries
• Cycle through more sites, laugh and criticize the silliness. webby awards pages
• coca-cola.com
• Splash screen, with then a decision location page, and then a survey prompt for a survey.
• Zeldman thus closed the browser window right away, doesn’t deserve another click. irritation. give them a reason to stay, or wow them immediately, but don’t shove stuff down their throat without giving something back of value.
• adobe spinning monkey
• If as a user I don’t understand what you’re trying to do, I can’t learn anything from your web design
• Emailed the webby awards to find out why these won
• “If the he web” rofl. Rest of message, they were totally grasping at straws. Screenshot the slide later. Hehe.
• All ppl know about web design is “Facebook” “Twitter” “Microsoft is buying Yahoo” these are not real. They are transient, like banks buying banks and economic downfall and blah blah blah.
• Shows the generic blogger template, used by The Leukemia Letters. THAT is iconic landmark design, where everyone who uses it, it feels like it matches their content and it presents it well, enhancing the content.
• “Who’s heard a guitar solo?”…. the “guitar solo” approach to design and dev.
• Young designers do the guitar solo. But…
• “Good design is invisible.”
• Reflections, glow, etc, that’s a current trend, that’s not a new idea. You’re being copy-cat.
• “Good web design is about the character of the content…” – like that blogger template from The Leukemia Letters – bring out the content.
• Tips
1. Start with the user / your passion
• Just like with music. you write your own songs, but there’s a chance that someone will discover you. Passion.
• Or, if you’re just a cover band, no one will listen to you and you’ll eventually have to go get a real job. No passion, no matter how much you love the music you’re covering, you’re not creating/innovative.
• Let your design be new/innovative. You may not have success immediately, but it comes.
2. Know yourself and your limitations
• Never take a job just because you need a job, unless you’re ABSOLUTELY desperate.
3. Zeldman banters with the client before signing them on. Sometimes the client doesn’t like that, and they lose the job, but that’s okay because they wouldn’t have had a good working relationship.
4. Sell ideas, not pixels
• In discussion, never describes what it looks like, but sell the idea behind it.
• Sell an approach.
5. “I don’t know” is okay.
• Find a client where “I don’t know” is ok. It is ok to say “I don’t know, we’ll think about it I’ll come back later.”
• When you work with a client that is wrong, they think you’re not doing your job. If it’s not an ok answer, you may have the wrong project.
6. Build trust
7. Bring out the big guns
• It’s ok to bring in consultants, publications, etc. “We’re doing this because it’s advised by this expert.”
• They never are going to read that documentation, but that’s the magic. They say, “OH! Ok.” And they are now reassure and trusting you.
8. Create a paper trail
• You can show the steps of where you are
9. Something here…
10. Say no to working on spec
• don’t work for free!
• No showing ppl design before getting paid
11. Say no to rush jobs
• They’ve had meetings and have delayed
• They’ll never come up with enough money to make up for how it’s going over because of their lateness.
12. End with the user / your passion

Read the next talk in the series: Debug/Reboot by Eric Meyer

Monday

• Understanding Web Design – Jeffrey Zeldman
• Debug/Reboot – Eric Meyer
• Storytelling by Design – Jason Santa Maria
• Design Criteria: Actionable Ideas – Sarah Nelson
• On-the-Spot Usability Reviews – Robert Hoekman, Jr
• Designing the Details: Web-App UI Design Beyond the Basics – Jason Fried
• Underpants Over My Trousers – Andy Clarke
• Special Adobe Session: Web Workflow with the Adobe Creative Suite – Adam Pratt

Tuesday

• Eric Meyer Live Code Workshop – Eric Meyer
• Design Lessons in Chess – Rob Weychert
• Implementing Design: Bulletproof A–Z – Dan Cederholm
• The In-House Designer – Cameron Moll
• The Arts & Crafts of Web Design — or What Would William Do? – Curt Cloninger
• Designing the Next Generation of Web Apps – Jeff Veen
• A Panel Apart – Eric Meyer, Jeffrey Zeldman & Special Guests

Tune in next year for new notes on a new conference.

The testimonials page would bring grown developers to blush; Authentic Jobs proves insanely effective at filling niche jobs with qualified personnel.

And yes, microformats present.

No direct link, so scroll down a bit on the widgets page until you reach the download. Clicking download button transfers you to PayPal page, but this is only to encourage donations; RegexWidget is available through LGPL license and is free.

• Eric Meyer: Secrets of the CSS Jedi
• Jeffrey Zeldman: Writing the User Interface
• Jason Santa Maria: Design Your Way Out of a Paper Bag
• Lou Rosenfeld: Search Analytics for Fun and Profit
• Liz Danzico: The Seven Lies of Information Architecture
• Dan Cedarholm: Interface Design Juggling

Okay, so going to Go > Go To Folder from the finder to access the hidden /etc folder can get pretty redundant. Fortunately, there is a widget that allows editing of your /etc/hosts file with quite a number fewer keystrokes. It does require usage of your admin password, but you can easily delete the password after performing your business.

Download HostsWidget. It is freeware.

I am yet to uncover a decent Safari Web Dev toolbar. A simple option, however, is the Debug menu. The Debug menu features User Agent spoofing, JavaScript console (not quite as good as Firefox’s), and a view of the DOM tree, among other things.

To enable the Debug menu, first launch OS X’s Terminal. Then type the following:
defaults write com.apple.Safari IncludeDebugMenu 1

To disable the Debug menu, simply replace the 1 with a zero:
defaults write com.apple.Safari IncludeDebugMenu 0

Relaunch Safari and view your new Debug menu, next to the Help menu. Read a short bit of the JavaScript Console at Apple’s Safari Dev page.

Have you found useful Safari development tools? Leave a comment and let me know.