Designing the Next Generation of Web Apps

Random 18 November 2008 | Comments Off on Designing the Next Generation of Web Apps

An Event Apart 2008, Day 2, 3:45pm – 4:45pm

Read the previous talk in this series, The Arts & Crafts of Web Design – or What Would William Do? by Curt Cloninger, or view An Event Apart’s Table of Contents

Designing the Next Generation of Web Apps

Jeff Veen

  • He’s going through the history of computers, how he liked Pong when he was six, and how it progressed.
  • Jeff left Google about 5 months ago (today is October 14, 2008). 
  • “When I’m feeling dumb, it’s usually not my fault. It’s usually someone not communicating something, [etc.]”
  • Cholera – John Snow used design and the sanitation maps to show that a pump was causing the cholera, not the air. Took the map, drew all the deaths at each address, then used design by taking out everything that wasn’t proving his point.
  • This is visual design oriented, not technical design. That’s why my notes here are sparse.
  • Inspiration comes from all different places. If having difficulty, stop looking for a bit.
  • Use the visual to help make statistics more real – The MegaPenny Project. (screens)
  • Try to find the story in the data, and how to be a good data visualization designer?
    • assign different visual cues to each dimension of the data. Maybe black marks next to each address, bullet points like an Indiana Jones global flight, whathaveyou.
    • Remove everything that isn’t telling the story. Journalists already follow this.
  • Learn to give up control, and that helps you on your way to be a good interactive designer. In can show up in any context, and that’s ok.
    • CSS Zen Garden is a perfect example of giving up design.
    • Jeremy Keith makes it clear that you can choose your style. My content can show up anywhere.
    • An aggregator, so you don’t see any of the design. Relinquish control. 
    • A braille browser. Letting go.
  • Tons of data visualization analysis and examples. No links given out. New York Times Casualties of War. I wish he gave out links.
  • Storytelling -> discovery. Allow them to discover their own stories.
  • A huge percentage of Google’s audience was coming from outside the USA.
  • 1) Start with the user 2) Know yourself, then an option #3, Then understand the user
  • User research is important, but those two are so key. Put research into the context of what you know.
  • “Everything I’ve built has come from the frustration that it didn’t yet exist.” – Matt Mullenweg, founder of WordPress
  • Everywhere you look, inspiration can come from…. (he ends with screenshot of Pong from the beginning)

Skip to An Event Apart’s Table of Contents

The Arts & Crafts of Web Design – or What Would William Do?

Random 13 November 2008 | Comments Off on The Arts & Crafts of Web Design – or What Would William Do?

An Event Apart 2008, Day 2, 3:45pm – 4:45pm

Read the previous talk in this series, The In-House Designer by Cameron Moll, or view An Event Apart’s Table of Contents

The Arts & Crafts of Web Design – or What Would William Do?

Curt Cloninger

  • It’s all about being like this William Morris dude, his ethic.
  • Via Cameron Moll
  • This William dude’s thing was:
    1. Stay true to Nature and Materials
      • What are the material properties of a pixel?
      • We’re dealing with light: light coming off of a screen.
      • Also dealing with code, but mainly, staying true to a pixel.
      • Need not simulate a physical material
      • Typography is our material: 
        • push css-typography (like )
        • Coudal is using letter-spacing to change the kerning of these letters.
        • If you learn one thing from this: Georgia, 40px. That’s all. Beautiful.
        • oversized text = easy to use (vimeo vs. youtube, roov, twitter, 37 signals)
        • Vimeo: It’s like it says, our service will be easy to use, see how easy it is to read this text!
        • ROOV: Just use that space on the text, don’t fill it with a bunch of stuff
        • 37Signals: “Work well”. It shows it is easy to use, gives you that feeling, so warm and fuzzy.
      • Behaviour as material: It should look like it does what it does. When Ajax first came out, it was like “What! No. There needs to be a refresh.” So there needs to be a transitional animation so that it looks like it’s doing what it’s doing. Even though you don’t need to, just give the feeling, it’s our material.
    2. Unite art (design) and hand craft
      • When is “genius design” more appropriate than “user-centered” design? When contemporary visual culture becomes corrupted. When forging a new medium. Read: iPod is genius design. 
    3. Unite the microcosmic and macrocosmic
      • He started to get really interested in typography
      • Started on the paper, the form of the type, etc, and went out wider until lastly, the printed matter on the page
      • Showing detail on buildings
      • If it doesn’t need to be scalable, don’t automate it, make each section slightly different.
    4. value utility. value beauty.
      • Beauty alone is a legitimate reason for something to exist.
      • Now that everyone can make a cookie-cutter site for free, beauty and customization is more important than ever.
      • This is not about taking over the page with ornamentation, but using it for flourish and make it beautiful. Great designers did these ornamental things for a long time, “until these Swiss designers came in and then everything went all” wonky. 
    5. Enjoy work.
      • Everyone is here because we enjoy what we’re doing and it makes us excited.
      • So, ensure that what we’re doing is something that is pleasing to us.
      • If you’re not excited, get excited by delving deeper, or maybe go into something else.
      • Orchestrate things so that you do what you like (like what Cameron’s talk was on).
    6. Redesign the whole world
      • “My hope is to get mumbo jumbo out of the world.” – William Morris, on his deathbed. (As in, to eliminate it)
      • Designers make the world. Design the context around your design.

View the next talk in this series: Designing the Next Generation of Web Apps by Jeff Veen, or skip to An Event Apart’s Table of Contents

The In-House Designer – Cameron Moll

Random 11 November 2008 | Comments Off on The In-House Designer – Cameron Moll

An Event Apart 2008, Day 2, 12:15pm – 1:15pm

Read the previous talk in this series, Implementing Design: Bulletproof A–Z by Dan Cederholm, or view An Event Apart’s Table of Contents

The In-House Designer

Cameron Moll

  • Cameron Moll works for LDS Church and in-house design.
  • He’s excited about having the team be over 30 people and to work with a big team. He had been a freelancer. He can understand how both ways of working go.
  • He’s using “designer” loosely.
  • Designers spend their time 1) doing design (the work), 2) telling people about your design (publicity), and 3) convincing people to let you design (relationships).
  • A key skill for in-house is the ability to influence and draw people in. Your employers are not exactly sold like they are when they are going to go hire an agency.
  • Must build relationships to have the workflow go smoothly. That’s relationships betwen engineers and designers as well.
  • Great designers are also great communicators. Communication (lack thereof) can often be the barrier between greatness and failure. The cake decorating dilemma (Cakewreckers:
  • Discussion with a client, spent most of the time discussion color and aesthetics. 
    • He ended up ending the projects and they never used the design. He presented it as it would look. 
    • He wonders what would’ve happened if he just presented functionality first, and then as those discussions are complete, bring in visual.
    • Later, introduce color, introduce layout, etc.
  • The Design Excellence Program
    • Build up the knowledge and capabilities of the designers working for the organization
      • Annual Design review
      • Weekly design reviews – his designers find it to be the most useful thing that they do.
      • Workshops: Fundamentals of Type, HTML/CSS I, HTML/CSS II, First Principles of visual design, design leadership & Communication
      • Design conferences (like An Event Apart!)
      • – checklist from a blind person about accessibility and things that really concern them, as well as other accessibility things
    • Strengthen long-term relationships with others who may influence the work
      • Internal departments
      • Local colleges and universities – the schools need to be teaching designers this CSS/HTML curriculum as well, as they need to understand both aspects of it.
      • Vendor relationships
    • Establish the culture and environment necessary for good design to flourish
      • is his LDS church’s internal blog.
      • Journal of design
    • Establish a culture so that the design can flourish
  • It’s easy to let the environment around us hamper your work, but this is not necessarily so. Surround yourself with inspiration, including at home, or a place where you go to sit. 
  • Telecommute! “Those of you who aren’t [telecommuting], I recommend you do so.” He does it once a week. There’s an article in this month’s Wired that is promoting telecommuting.
  • Uninspiring workplaces are detrimental only if you allow them to be.
  • “I just got dilberted. Again.” If you are not willing to compromise, know when to get out if you must.
  • If you go to freelancing, make sure you have some sort of residual income. A product that you’re selling, or for him the website, anything like that.

View the next talk in this series: The Arts & Crafts of Web Design – or What Would William Do? by Curt Cloninger, or skip to An Event Apart’s Table of Contents

Implementing Design: Bulletproof A–Z – Dan Cederholm

CSS 6 November 2008 | Comments Off on Implementing Design: Bulletproof A–Z – Dan Cederholm

An Event Apart 2008, Day 2, 11:00am – 12noon

Read the previous talk in this series, Design Lessons in Chess by Rob Weychert, or view An Event Apart’s Table of Contents

Implementing Design: Bulletproof A–Z

Dan Cederholm

  • Craftsmanship: Vermont is craftsmanship by nature. Why? Your impression of Vermont… “I think of a guy with a beard building something, a human behind the design, not a factory.”
  • “When something is well-crafted, it reflects that a human was behind its design.”
  • The browser landscape is changing – it is a time to embrace progressive enhancement (for JS) and progressive enrichment (for CSS).
  • These items will be referencing his demo site,
  • A: Anchor links with meta information (a bulletproof example)
    • Screenshot of popular drinks box from slide (10_populardrinks)
    • a display block and use floats to keep things appropriated 
  • B: Border-radius (progressive enrichment)
    • border-radius is promised with CSS3, yay! (in 2000 years :/)
    • Vendor-specific solutions of the -webkit and -moz options
    • Layer background images and border radius with clip the background image so that it does not exceed past the rounded section, maintaining the rounded corner.
    • Firefox2 not as great support for that clipping of rounded corner, so it’s a little bit of aliasing, but so it goes. It looks ok in FF2 if contrast is low enough.
    • He puts these things in an enriched.css, so has border-radius and the webkit and moz styles in there, and only cool browsers use them.
    • What about uncool browsers?
    • Well, they get square corners. Tough cookies, still workers. That’s ok and that’s good. It degrades wonderfully. It affects the design in minimal ways.
    • Great for prototyping before carving the images out.
  • C: Color transparency with RGBa (progressive enrichment)
    • Hovering over the city makes it semi-transparent with temperature (screenshot)
    • opacity sets the value for the element AND all its children, including the text, blek!
    • background-color: rgba(0,0,0,.7) 0,0,0 is black, and .7 is the opacity, and there is no usage of png or any other deal. ¡Que bueno!
    • Tiled png would reach more browsers, but rgba is great for prototyping before carving out final images.
  • D: Do websites need to look exactly the same in every browser(.com)? No!
  • D: Decision makers who get it.
    • It’s not the end of the world if some browsers don’t get the opacity from rgba and if they have square corners instead of round. IE6 is still perfectly usable.
    • The h1 headings in have little flourishes right after and before the name. uses generated css content to generate the image: PERFECT USE OF CONTENT PROPERTY for :before and :after
    • It’s ok: tiny visual enhancements that do not affect the layout
  • E: Easy-clearing floats (reexamining past methods)
    • This is not what floats were intended for, but this is what we’re dealt so we have to play it
    • Dan likes the clearfix:after clearing method. 
    • Dan tried what I do and made a big giant list of things and not adding the clearfix class (but too unmanageable)
    • So instead he changed it to .group and it doesn’t look as scary as .clearfix
    • Then lists *+html .group: {min-height: 1px} and * html .group{height:1%;}
    • IE8 will supposedly support generated content, wahoo!
  • F: Frameworks
    • He uses Meyer’s reset.css and saved himself 155 times of writing margin:0 padding:0 for
    • Also in his framework he built he includes the IE6 filter png fix (* html #selector{ filter: progid.blahblahblah}) as well the clearfix.
  • G: Gridlasticusness (bulletproof)
    • Dan doesn’t have a design background, so he’s been learning about web design as he’s going.
    • Implemented grids on simplebits
    • Each grid will have em value
    • Em-based layouts force you to ensure ultimate flexibility
    • Em/pixel values make more sense when using the 62.5% method – end up with a base ten emming math reference. 
    • Ems should also be used for margins, borders, etc as well.
    • Avoid setting font-size and width on the same element – gets confusing and you throw off your base. The calculated width is going to be different once you change your font-size.
    • Adjusting font size can throw off your grid too.
    • Set a max-width if using ems on elastic layouts!
    • Think modular – don’t get overwhelmed by so many sections. Partition your sections.
  • H: Horizontal grid. sure. vertical grids? Kind of. 
    • Be realistic about what’s going to happen. Make lines jagged, put different lengths of content there so that it looks realistic and they know what to expect. (Screenshot of “everything is just fine here”)
    • Use groupings so that things are grouped and at least sections have the same tops
  • I: IE8 still refuses to resize text set in pixels (reexamining past methods)
    • Say what?
    • Dan logged a bug, and they closed it right away without even opening or validating it or posting a workaround. 
    • He’s still using ems because of that.
    • Page zoom is there, does this eliminate our issue of font-size? No, because the text size is still there. Dan uses text size quite a bit and his eyesight is decent.
  • J: jQuery. 
    • He’s never talked about Javascript in a talk before, but he’s just that excited about jQuery that he’s bringing it in here.
    • He’s just expressing his love for it.
  • K: Kitty (kitty screenshot)
  • L: .last (bulletproof)
    • Simple way? Just add the last class with jQuery $(“ul.lst li:last”).addClass(“last”);. Sooo, that may not work without JS disabled, but your site will still work and it’s just a presentational thing.
  • M: Must skip a few letters if we’re going to get through this
  • N, O, P, Q, R…
  • S: Shifting backgrounds
  • T: Today’s MacBook release… MacBook Sun(tm), in ten minutes, it’s going to be huge.
  • U: Ur stats.
    • “When can we ___?”
    • “The answer is simple: when your site’s (or sites’ if you have more than one) user logs tell you that you can. Not before then. The user stats from other sites, or from global-aggregation surveys, are worse than useless.” – Eric Meyer
    • If you’ve got all IE6 users, may not want to do border-radius and other stuff
    • Etc, etc. Listen to your user stats. Don’t care what other people do, because you’ve got to look to your audience.

View the next talk in this series: The In-House Designer by Cameron Moll, or skip to An Event Apart’s Table of Contents

Design Lessons in Chess by Rob Weychert

Random 5 November 2008 | Comments Off on Design Lessons in Chess by Rob Weychert

An Event Apart 2008, Day 2, 9:45am – 10:45am

Read the previous talk in this series, Live Code Workshop with Eric Meyer, or view An Event Apart’s Table of Contents

Design Lessons in Chess

Rob Weychert

  • Chess is cool.
  • Rob Weychert really likes chess.
  • Strategy: overarching, long-term plan. Tactics: Short-term, small things to support the strategy and make it happen.
  • Visual design is a tactic.
  • Keep your endgame in mind.
  • Opponent as user: In Chess, you do your move and your opponent’s move, you are moving them to defeat. Limit your user’s options so that they can only do what you want them to do. Make the path to completion obvious
  • Opponent as client: You make a move, say “I have this problem for you to solve” and client responds, on and on until the game ends.
  • Opponent as colleague: You don’t want to play against someone who can’t challenge you, is boring. 
  • Lessons in Chess
    1. Content is king
      • The king needs to be the center of everything you do
      • You may weave this complex strategy with getting the queen, that you don’t even notice that the king is vulnerable and you lose sight of the end goal.
      • Get caught up in various solution, you’ve overshot and you’re missing out that content is king. 
      • A slide from Jeremy Keith: Style/CSS & Behavior(Javascript) = Structure(HTML) = Content ( King!) “Thank you Jeremy!”
    2. Know your history
      • 2 Things to know about Bobby Fischer: 1) Brilliant chess player 2) Real meaniehead. A difficult person.
      • He arrives at the world championship and he makes all these demands: first 7 rows of chairs must be gone, TV cameras must go, etc, etc. Even before the game started, he’s working on his opponent by just being himself.
      • It wasn’t just about the Chess game, it was all a bunch of KGB breathing down their necks and drama in the room and Fischer being a jerk and blah blah blah.
      • So Fischer’s opponent cracked and lost. Awww :/
      • Know what your client likes, look into the history of that information, and go from there.
      • Album cover for his friend making an album in honor of Tesla. Yeah, the electricity guy.
      • Friend loved Tesla’s overcoming the typical views of his work at the time, especially in the face of the “advertising” being done by Edison.
      • Decided to pretend to make it an advertisement that Tesla might make offering his services today.
      • So Weychert looked into the ads of the time period of Tesla, including making sure the typefaces he used were authentic, and built it and designed it from there
    3. Think ahead
      • – Never more than three things. Silly. Not thinking ahead.
      • Jason Santa Maria’s site – beautiful, art, builds, forward-thinking
    4. Don’t get too attached
      • Don’t get too attached to the queen! People will protect the queen even more than the king. No.
    5. Act with purpose
      • A sister lesson to “Content is king”
      • The king is your world. Every move has to be focused on capturing opponent’s king or defending your own.
    6. Obey circumstance – you have to act in line with the things in front of you and adapt if something throws you a curveball.
    7. Principles are your friends, except when they’re not. 
      • “The man who knows how will always have a job. The man who also knows why will always be his boss.” – Ralph Waldo Emerson.
      • We may tend to be too pedantic or not pedantic enough regarding our principles. 
      • “I ran your site through the validator and there were 6 errors and I think you could be doing a more to justify your existence.” – Rob Weychert, imitating lame pedantic people on the web.
    8. The Journey is as important as the goal
      • “What I do is not play, but struggle.” -Alexander Alekhine
      • We go through and we see what doesn’t work and struggle through, and it may never see the light of day. But we struggle through, learn, and progress.
      • What we know it “the stuff we learned in not getting there.”
      • On a comp for a company named Philebrity, he learned “The most important freelance lesson of all: Get half the money up front.”
      • Businessdk – he learned that he really doesn’t want to do a newspaper site. Important lesson! Mountains of failure!
  • If you take away one lesson: love your failures.
  • “I had a client where the site was predominantly in yellow, and they told me that yellow is the favorite color of crazy people” – An apartnik’s comment
  • “Nothing is ever wasted.” That time and energy may not pay off immediately but perhaps down the line.
  • “Yellow is the color of intelligence because it takes the most energy to see it.” – another apartnik

View the next talk in this series: Implementing Design: Bulletproof A–Z by Dan Cederholm, or skip to An Event Apart’s Table of Contents

Live Code Workshop with Eric Meyer

CSS 4 November 2008 | Comments Off on Live Code Workshop with Eric Meyer

An Event Apart 2008, Day 2, 8:30am – 9:30am

Read the previous talk in this series, Special Adobe Session: Web Workflow with the Adobe Creative Suite by Adam Pratt, or view An Event Apart’s Table of Contents

Eric Meyer Live Code Workshop

Eric Meyer

In this talk, Eric will be going through CSS questions and websites previously submitted by An Event Apartniks.

    • Dropdown menus… “Are those coming back and I didn’t hear? Because last time I heard, that wasn’t so good.” – Eric Meyer
    • menus: <li><span><a> – span had a background image, but li had none. Why not just take out the span and put that background image on the li?
    • “Spanitis” 
    • <div id=”menublock”> is wrapping the menu ul – why? Just put menublock on the ul. Not everything needs a container!  Sometimes just the element can contain itself!
  •… macdeek?
    • A lot of px sized text. Tsk tsk tsk. It’s no longer a real issue though, now with the death of IE6 (IE6 is dead woohoo! Also more implementation of position: fixed is another sign of its death ;). “The death of IE6 does not mean that it is dead for you.” – Eric Meyer
    • <p class=”p”> Stop! <p class=”topnews”> I can get, but =”p”? Stop! Inheritance!
    • .mck files: incorporating branding into your file extension. Why not?
    • No background-color included for html, body. Tsk tsk.
    • Everything done in px is asking for trouble. If you’re going to use px, set the body to px, and then use percentages for everything else. Relative font-size is not going away. Set a baseline. Setting px on everything is the same problem as setting font-family on everything. A change is a big headache.
    • li background-image: good for bullet replace, but put the background-image on the a element so that you can have a rollover without having to use JavaScript.
    • overflow: auto magically makes floated elements expand to take up the height of their children. Sometimes have issues with scrollbars being invoked by browser, but magic. Eric hasn’t been able to have anyone explain to him why this works, but it does.
    • A lot of style attributes on the markup. You’re combining style and markup, which we spent the better part of a decade trying to get away from. Try your best to eliminate inline styles.
    • The “Book a Trip” section should really be a table – arguably, it is a data form where your data has yet to be filled in by the user. This begs the question, are all forms tables?
      • Why does Eric use tables over dls or whatever? The semantics are a very subjective thing. He does whatever is most pain-free, so sometimes OL, sometimes DL, sometimes a table.
    • Firebug input a -x-system-font: none; in the CSS, that doesn’t actually exist in their CSS. -x-blah is probably from Firebug and not from the actual CSS.
    • “Using floats for layout is a hack.” – Meyer
    • Use shorthand CSS declarations so that your CSS is smaller, easier to manage, etc. Don’t keep it separated!
    • The form as a lot of divs… 
      • He has a hard time for getting irritated with form markup because of what he was saying to me earlier about it being so subjective and dependent on the developer’s feeling of semantics for that form.
    • If something has an alt text of ” “, then why is it not a background-image? 
    • <img> of a sphere, then <img> of a button text “Donate”, and both were alted to “Donate” “Donate”, annoyance for a screenreader. Just have alt text of sphere be “”, or even better make it the background-image.
    • overflow:auto to have scrolling sections (the look of frames) may be getting more popular in the future! The bad thing with frames is that there are a million files all over the place, not the scrolling thing. 

View the next talk in this series: Design Lessons in Chess by Rob Weychert, or skip to An Event Apart’s Table of Contents

Special Adobe Session: Web Workflow with the Adobe Creative Suite

Web Dev 30 October 2008 | Comments Off on Special Adobe Session: Web Workflow with the Adobe Creative Suite

An Event Apart 2008, Day 1, 6:15pm – 7:15pm

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