| Notes Apart, Day 2 |
| Tuesday, 24 June 2008 | |
|
Note: The latest post is at the top of this page. It's recommended to start from the beginning if you want to see how the day unfolds in chronological order... :) 6:32PM - No cigar. Looks like a crit by Zeldman himself would have to wait till next time... bummer. Anyways, just got on the Megabus (megabus.com), which has wifi. Oh, and did I mention, it's only 18 bucks for 2 seats from NY to Boston and vice versa. Shweet! 5:44PM - Wrapping up the machine. If we get picked as the 6th site, then I'll update. :P 5:40PM - Fifth site... Equifax.com. Zeldman crits: "Woa... enhancements!" referring to the 3 blocks that pop up on rollover. Comments on the "web2.0 glow". Something is at the bottom eating the screen like pac-man. 5:32PM - Fourth site, Shop5.com. Zeldman crits: Terrible copy. The graphics on the right with a lot of text on the left makes the graphics on the right look like ads. Put some introductory copy like that of Flickr. The design expertise is working, but maybe some of the IA and copy needs some work. 5:31PM - It starts pouring outside creating a ton of noise in the auditorium. 5:24PM - Third site, HousingData.org. Zeldman crits: the icon in the upper right looks "lipsticky." "I don't know how you sold this design to Vermont Housing Data." The 3 blocks below are hard to read. Lots of visual hiearchy, which is good. After running the search on data with the dropdown menus, there's a ton of information. The red bars should probably not be used in within the data. 5:16PM - Second site, MarketingPanther.com. Zeldman crits: Spacing before and after the headers do not present a clear hierarchy. Navigation at the top feels a bit crowded. Needs more contrast in typography. The space above the right column looks odd. May not need that much copy. Break it up. Marketing Panther is a weird name. Google ads cheapens the site. Might need to get rid of those in return for increasing the probability of scoring potential clients. 5:03PM - First site pulled, Intuit.com. Zeldman crits: The plus sign looks like it will drop down a whole bunch of navigation elements after clicking on it. Does it have anything to do with religion? The site is friendly, corporate. Under "Help Me Choose", the drop down Ajaxian arrows are "cool". The "+/-" in that same area is repetitive. May not need them. 5:02PM - Someone by the name of Carlin is pulling cards from the bowl. Whoever gets a crit gets an Adobe Creative Suite. 4:52PM - Oh jeebus, a silver bowl containing a whole bunch of cards with sites written on them is sitting on the table. Zeldman will be picking out 6 cards at random to critique for the last leg of this conference. My heart feels like its going to fall out. 4:41PM - Check out The Ghost Map ($5.99 on Amazon, sweet), Edward Tufte's Envisoning Information, Mental Models by Indi Young. 4:39PM - "When you first start off trying to solve a problem, the first solutions you come up with are very complex, and most people stop there. But if you keep going, and live with the problem and peel more layers of the onion off, you can often times arrive at some very elegant and simple solutions."- Steve Jobs ![]() Best Chart Ever by Jeff Veen 4:34PM - Designing with post-its. Transfer what users said out onto post-its and then group that information into an informative visulaization. Look for what's missing and build. The Google way... I guess? 4:21PM - Some examples of interesting data visualization techniques: Digg Stack, Truliasnapshot.com, Gapminder.org (wow, it's built on Joomla!). ![]() Jeff Veen explaining information dissemination 4:01PM - It's interesting to listen to people like Doug Bowman (Google) and Jeff Veen (former Google) speak about making data accessible and easy to navigate when Gmail itself isn't quite easy to scan. This was brought up by Khoi Vinh not too long ago on his blog and was responded by a bunch of people arguing that Gmail is good the way it is. ![]() Nice spacing... unlike Gmail 3:50PM - Jeff Veen takes stage. Former Googlite. He's going to be chit chatting about "Designing the Next Generation of Web Apps." Anyways, going to tend to my Haagen-Dazs vanilla & milk chocolate bar. Mmm... ![]() After 3 cups of coffee 3:27PM - Must try flying Virgin business class. Supposedly, they send limos to pick you up from your house. This and other services justify the amount you shell out for your ticket. ![]() I've noticed that the best speakers always present after lunch ![]() Andy Budd Inspires 3:22PM - Use leaderboards with caution, i.e. the most digg'd stories. These articles tend to remain on the top because they recieve the most attention. 3:19PM - I'm sure some of you fellahs out there have seen this one... urinalfly.com (work-safe). 3:16PM - A great example of good experience: http://edenbee.com/omgwtfbbq. Also check out Moo.com. 3:11PM - Look outside of your industry for good user experiences. Buttons should be designed with the affordance to click. 3:06PM - Silverbackapp.com CSS hotness. The experience of resizing the browser made me even sign up. I'm still waiting for them to get back to me about my account. ![]() An example of great user experience. How do you feel? 2:56PM - Andy goes into personalization. A screenshot of World of Warcraft pops up on the overhead projection. 2:54PM - Apple store is ordered by task and not by departments. Success! Instead of selling CDs in the CD department, Apple has MP3s loaded onto their computers to allow customers to experience the music. 2:49PM - Training in games like Call of Duty is similar to the training on sites like Yahoo!. Both allow users to simulate actions within the actual environment. Have callouts come to the foreground and the rest of the site fade off into the background (using jscript? ajax?)... sort of like the recent trend when you click on an image and it opens up in a new 'window', but within the parent window. 2:46PM - "Taking your iPod out of the box is like undressing your girlfriend for the first time" - Andy. Crowd laughs. 2:41PM - 1st impressions last forever. Web pages take 3 seconds to scan, women scan men in 30 seconds. How can we take positive, real-life experiences and transfer that experience to the web? 2:38PM - Always be mindful about how you are feeling when you use a site. Perhaps set an alarm to go off every ten minutes when using a site and record how you feel at each of those intervals? Hmmm. BTW, must check out http://www.tidesrivieramaya.com/ for the perfect hotel experience according to Andy. 2:30PM - Andy Budd on user experience. 2:06PM - The butterscotch ravioli served during lunch was quite adventurous. There was a story around every chew. As for desserts, that miniature pie thing with the berries on it was quite the awesome. Okay, time to dump some coffee on my arms to get back to body temperature equilibrium. ![]() Bored... pictures around the auditorium ![]() Justin ravaging on emails ![]() I hear trumpets blaring in the background... soon 1:11PM - Kimberly plugs her site for standards and I'm replugging it again. BTW, check out that nice navigation with the short description text (and it's not image-based!): http://www.thecircleofstandards.com/ 12:42PM - Get buy-in on standards so that everyone involved is 'involved'. BTW, laptop makes for good arm warmer when sitting in a room thats hovering in the low 60s. ![]() Kim navigating among a wave of laptops 12:17PM - Kimberly Blessing, the only female speaker. She's also giving out books, wahoo! Topic: Standards in the Enterprise. 11:52AM - PPK is done. Time to submit NBJ to the raffle... gulp. ![]() PPK taking questions 11:47AM - Drag and drop script: http://quirksmode.org/js/dragdrop.html. Keyboard accessible drag and drop script by Mr. PPK. 11:44AM - Use Keydown events, not Keypress. Keypress doesn't jive with IE. Go fig (again). 11:34AM - Always pair the following behaviors together because they are basically the same thing: onmouseover=onfocus=this.over & onmouseout = onblur = this.out. Restriction: the object must be able to gain the keyboard focus. 11:28AM - "Make sure that the content and navigation of the site can be used without Javascript"... der. Note to self: Learn javascript or end up becoming like that one person in the crowd that doesn't know what an iPhone is. 11:17AM - Thinking about submitting Nutrition Business Journal as a site to be critiqued in front of all 400+ attendees. In return for this public display of mental, but productive abuse, you get an Adobe product in return. Yippee. 11:09AM - "This is what JQuery does" - JL 11:07AM - Separation of HTML and Javascript. Advantages: 1) Ease of maintenance 2) The CSS and Javascript layers can be edited simultaneously. ![]() not ppk 11:06AM - He sounds like a robot. C3P0? 11:01AM - PPK [sort of like the trance song I guess?] steps on stage... from the Netherlannnnnnnds. Well anyways, he's going to talk about The Principles of Javascript. ![]() Separation of Designers and Coders 10:36AM - Use Campfire to interact with people not in the office. Use subversion for source control. Allows developers to track changes in PSDs. Ok, Ethan just finished. Check out his personal site at www.unstoppablerobotninja.com. Also check out css discuss list for additional resources on css... der. 10:27AM - target / context = %result. Don't truncate the result. Target = container, and the context = the wrapper of container. Prototype early to help the client visualize. Yay for Fireworks CS3 and fast web prototyping. 10:21AM - Next up, redesigning the W3C site. Email This e-mail address is being protected from spam bots, you need JavaScript enabled to view it if you want to check out the w3 beta site. Goals for redesign: Improve IA, design a textual framework, fluid width layout (like clearleft.com, vivabit.com). Try resizing clearleft.com and watch how the modules on the left shift. Sweet. 10:18AM - Lesson's learned: Make sure developers know where all the elements are. Build this into the time schedule. Make sure designers know about the development phase. 10:17AM - Ryan uses a lot of layers in Photoshop. Very organized and also uses bullets in the names of the each folder/subfolder in the layers menu. 10:09AM - Round 2, Sundance Film Festival Site. Ethan Marcotte vs Ryan Sims. The site uses suckerfish for the dropdown navigation. 10:06AM - Assign a min-height to the div that contains a complex background image in case content is less than expected. Oh, and always make sure developers are into the design. Get them excited. Developer buy-in. Designer buy-in. Gets people thinking about possible solutions. Discuss/mention design to developers way prior to sending design. 10:00AM - Goes into talking about Today Show mockup. Ethan Marcotte = coder... some guy named Greg = designer. What happens to background when the canvas is expanded beyond the initial canvas size? 9:58AM - Want to kill time at work? Youtube "Park War". Also check out Danny Pack's "Simple Truths". This video represents how we should view our mistakes made in past projects. 9:56AM - "Handoff" is a bad term. Shutting the door. Gives a conveyor belt type of feel. We should focus on the steps in between the 4 Ds. 9:55AM - Pretty, http://red5studios.com/ 9:47AM - Ethan Marcotte steps up on stage. He's a senior designer at airbag industries. He's going to be talking about designing comps and code. 4 Ds > Discovery, Design, Development, Deployment. ![]() Ethan Marcotte Setting Up 9:32AM - Dean Edwards' IE7 javascript. 20KB js that makes IE6 behave more like IE7. From the mouth of Justin. 9:29AM - Eric lives on the edge and doesn't use floats. "I like to live on the edge and don't use floats". Instead, he uses positioning... http://meyerweb.com/ 9:23AM - /*tables still need 'cellspacing="0"' */ table { border-collapse: collapse; border-spacing: 0; } 9:20AM - Should try out > :focus{ outline: 2px dotted cyan; } 9:12AM - Debugging form elements is a bitch. Also > *:not{select, option, optgroup, textarea} ... not possible to have more than one element within the negation selector. 9:07AM - <blockquote> should always wrap another element. For example, <blockquote><p>...</p></blockquote>. To detect this: blockquote >* { color: #FF0000; } 9:04AM - It's nice to detect nested DIVs > div div div div div div div div { outline: 1px; dotted #CCC; }. ::points to third party modules:: 8:58AM - Detecting a combination of an image with an alt, but no title > img[alt][title=""]{ border-width: 3px; }. ![]() Eric Meyer Commanding the Giants 8:53AM - What's scope in > th[scope="col"] th[scope="row"]? It has something to do with accessibility issues. Here's what it is... 8:46AM - detecting images without alt text > img[alt=""] { border: 3px dotted red; }. Detecting images with NO alts at all > img:not([alt]){ border: 5px solid red; }. Did you know that outlines != borders? Outlines do not effect the layout. Oh, it's not supported in IE. Go fig. Instead, just use borders when dealing with IE. 8:37AM - some debug.css... the empty selector with "css3" > p:empty, td:empty, th:empty { padding: 0.5em; background: yellow; }. Sample use for this would be on a CMS outputting content. In FF2, if {*:empty}, then the entire <body> is considered empty. 8:33AM - Eric Meyer is back on stage. I have a slight headache from last night... Eric will be talking about debugging and rebooting with CSS. 8:20AM - Doug Bowman says "Oh hey! It's the magazine guys!". I feel cool. Powered by !JoomlaComment 3.12 Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved. |
| Post-Launch Updates < Prev Post | Next Post > Notes Apart, Day 1 |
|---|















