I was lucky enough to have my company pay for myself and my two colleagues, Brad and Adrian, to go to An Event Apart Chicago. Like my An Event Apart Boston Summary, I thought I would create a similar post. This is going to end up being a really long post, so I would recommend reading it in pieces or skimming. I am going to split it up into two pages so that the page does not get even more ridiculously long. So be sure to go on to the next page after reading the first one.

Understanding Web Design – Jeffrey Zeldman

Zeldman is such an amazing speaker and web evangelist. He first begins by asking the question “What does a web designer need most?” CSS? PHP? Ruby on Rails? Nope. Empathy (ok, he joked that we need Advil too).

He described this more by showing a screenshot of the old RealPlayer site and labeling everything that looked like a link. The truth was, not that many of them were actually links. The web designer for RealPlayer has to respond to two different internal strategies: help a user find the free player and sell the free player. Those two strategies are basically competing and fight against each other. As Zeldman says, “It’s rough out there for a web designer”.

The key to good design is that the user needs to be able to use the website with a short learning curve. Like Steve Krug says, “Don’t make me think”. He uses another site, Consumer Search, as an example. Take a look at the site. Doesn’t it look like a phishing website? We have no clue what this site actually does.

College? What for?

Another hard part of being a web designer is the lack of good education programs for the field. Just because someone can learn how to use Photoshop, it does not mean they are a designer. “Teaching Excel is not the same as teaching business”.

After reviewing all of the data from the 2007 Web Design Survey, Zeldman wonders if education is even relevant. 47% of people surveyed said that what they studied in college was unrelated to what they do today. I can’t remember how I responded, but very little of what I learned in college do I use today. They also determined that as income increases, relevance decreases. This actually makes sense since the more money you make, the longer you have been out of college. Technology changes. Fast.

No Respect

Think about when you meet someone who says they are an architect or surgeon, you are usually pretty impressed with the person. But think about when people meet web designers, they think that they just play on the internet. No respect.

But did we bring this onto ourselves? There is no standardization of titles, no standardization of departmental organization, and not that much money in the web field.

In Search of Excellence

Another problem with the perception of the web, I that non-web people don’t understand it. All they here in the news is how important Facebook’s redesign is, how MySpace is adding music to profiles, how much money some startup got, and other crap like that. Is that really what’s important?

So fine, maybe they so all these sites that claim they have won awards. Take the Coca Cola site. Really? Award winning? Some kind of rainbow exploding from a bottle? Go ahead and disable JavaScript and try to visit the site. Yeah, you can’t get past the first page. Award winning (note the sarcasm).

Web Design is Different

The web is different than print design. Comparing illustration to web sites it just wrong. People spend time on normal web sites usually: their bank, insurance, news, etc. sites. Nobody spends time on the Coca Cola website.

“Good design is invisible. Good web design is about the character of the content, not the character of the designer.” Nobody comes to your site to see your “awesome” stock photo. They come for the words.

12 Tips to Empathetic Web Design

Start with the user / your passion.
Know yourself, know what your limitations are.
Find the right clients (job) – during initial client meetings, shows your true personality. If the clients don’t like it, tell them to take a hike.
Sell ideas, not pixels!
Saying “I don't know” is okay. Just tell them you’ll find out later.
Build trust. Show that you really care about the project, ask questions.
Bring out the big guns, reference articles by experts when necessary, it gives clients reassurance.
Create a paper trail. Always be able to refer back to something.
Never underprice your work.
Say no to SPEC.
Say no to rush jobs. Lack of planning on your part does not constitute an emergency on my part.
End with the user / your passion.

Man, Zeldman is awesome. I’m glad that he’s on our side.

Debug / Reboot – Eric Meyer

This was one of the more technical talks of the conference, and it was a good one. Eric first started by showing a code snippet:

<p><a href=""></a></p> 
<p><img src="" alt="" title="" /></p> 

Yep, perfectly valid. According to a validator. Validators can’t tell you everything. This is why good web development will never be able to be completely done by machines. But validators really are just tools for us to use to make sure we are doing things correcty.

Debug CSS

I had previously read Eric’s article about Diagnostic Styling, but I guess I didn’t really think too much about using it. This could definitely be useful when creating pages, but it is definitely not for production use. It can easily be added as a user stylesheet using the web developer toolbar.

A couple of new CSS things that I learned were the empty and not pseudo selectors. The empty pseudo selector will select elements that do not have any nodes as children, text included. So it could be useful to use on some content management systems that generate a lot of extra empty elements. Here is an example of hiding all empty paragraphs:


p:empty { display: none; }

The not pseudo selector will select elements that are not something. To better explain that, here is an example of giving a border to all images that do not have an alt attribute defined:


img:not([alt]) { border: 2px solid red; }

With debug CSS, there are some times when you style all of a type of element, then override the style for the elements that have what you are looking for. This example should explain it a little better:

th { border: 1px solid red; }
th[scope="col"], th[scope="row"] { border: none; } 

So what is happening here is that you are styling all table header cells with a red border, then table header cells that have a scope attribute will have no border. Which accomplishes the goal of giving all table header cells without a scope attribute of col or row a red border.

The important thing about Eric’s debug CSS is that you should modify it to fit your situation. Eric is just creating this to show an example of what is possible, not to be the only solution. So get creative.

Another point that Eric made when debugging CSS, was to use the outline property instead of a border. Since borders affect the layout of elements, they can sometimes change the layout of the page. But outlines do not affect the layout, which I didn’t realize until now.

Reboot CSS (not reset)

Eric then went on to talk about his infamous reset stylesheet. The main point of this part of Eric’s discussion was that you should not just drop in his reset stylesheet if there is an more effective way to accomplish the same thing.

For example, don’t set the ol and ul list-style equal to none if you are just going to redefine it later to have a list-style. Instead, turn the reset into a baseline. Modify the reset stylesheet to suit your project, don’t use his reset stylesheet without modifying anything. Don’t reset then re-style, reboot instead.

Eric reinforced this point by saying he did not like the use of CSS frameworks. He thinks everyone should create their own “framework”. He said that once you get into someone else’s framework and try to modify their code, you have to change the way that you think about coding and try to think like the person who created the framework. He also thinks that they end up being bloated.

His reset CSS has evolved over time after just thinking about the concept more. For example, he changed it so that it does not use font: inherit because of lack of support in IE. He also stopped using generated content to add quotes to the quote and blockquote elements. He compared relying on a browser to generate content to relying on a browser to have JavaScript enabled. There are still some browsers that do not support generated content, and if the quotes are important enough, they should be in the actual content.

Storytelling by Design – Jason Santa Maria

Jason has been one of my favorite designers for a while now. With his recently redesigned site, he has reaffirmed how great of a designer he is.

As a child we are taught to look for the meaning from images in stories, this is called graphic resonance. Images are used to reinforce the story. Remember the saying, a picture can tell a thousands words?. Yeah, that’s what he was talking about.

Designers need to consider themselves as the narrator. The first example that Jason gave was of Charles Joseph Minard’s Map of Napoleon’s March. This information could have easily been represented as a bar graph, but Charles’ map has much more impact. Seeing how Napoleon’s troops dwindle in size really help us to visualize the magnitude of what happened.

The second example Jason gave was the article in Wired magazine, The Sleazy Life and Nasty Death of Russia’s Spam King. He showed the spread from the actual printed magazine, and they really captured the feeling of the article. But then he showed how the article was translated onto the web, and it was quite boring. “Basically, we’ve distilled the stories down to just content”.

We all know that content is king, but that doesn’t mean we can’t enhance the content and tell a story with images. As David Carson said, “Design can’t not communicate”.

Jason’s own site is an incredible example of telling a story with each blog entry. Jason is basically “art directing” each article on its own.

Why Are We Plagued By Sameness?

There is so much of the web today that is so similar. Logos look the same. Sites all have similar layouts. Web designers complain that they are restricted by the browser, but is that really the reason why everything is similar? There are plenty of sites that really break from the mold: No One Belongs Here More Than You, A Brief Message, Fray, and Jason’s site just to name a few.

Armin Vit recently inquired Landmark Web Sites, Where Art Thou? Well, a simple reason is because the web really is young. Now is when we are going to start seeing landmark websites. There are still advancements to be made, and still new stuff to figure out. There isn’t only one way to present information. Jason realized that when designing, you always start from a blank slate, whether it’s a piece of paper or a blank Photoshop canvas.

The Nature of the Medium

Jason then went on to describe four common principles of the web:

The metaphorical page
Ubiquity & WYSIWYG
Collections of pages
Layout

The metaphorical page

If we take a look back in history, the canvas that designers has changed drastically, from stone, to paper, to digital canvases. But still, it is all starting from a blank slate. The web is the one place that is basically infinite. It’s fluid. Most of the web runs on a single fixed dimension: width. It’s not like we are given a 8′x10′ book cover to design. The web really has no finite value.

Jason gave the example of Ladislav Sutnar, who created the two page spread. Ladislav probably could not fit everything on one page, so he decided to break the convention and spread it across two pages. “If you have new problems, look for new solutions”.

Ubiquity & WYSIWYG

Another reason why the web is so different is because we have no idea what kind of device people will be looking at websites on. With a printed newspaper, there is only one way to look at it. With advancing technology, people can visit websites online, on an iPhone, screen-reader, and more. When people click something on a website, things can happen. The web is an experience.

Collections of pages

With a book, you can flip to the last page and see what you have ahead of you. With websites, there is no real way to grasp the depth. Take a look at Harper’s Magazine’s Archive. Sure, you can grasp that there are 158 years and 12 months per year, but there are tons of articles per month. You cannot ever grasp how large the site is without clicking into every article. By the time you finished with that, there would probably be new articles.

Layout

Most people have probably heard of the golden ratio and the rule of thirds. But again, since the web can be viewed on so many different devices, they do not always apply. “Design ideals rely on predictable dimensions” But on the web, we can’t predict what dimension that will be.

Conclusion

As Jason summed it up, he said that “Design for the web has been chiefly driven forward by the technology rather than the message. The form of design should be driven by the story.” So the question is: how do you stand out from all the other crap online?

Design Criteria: Actionable Ideas – Sarah Nelson

I had never heard of Sarah Nelson before, and I was a little worried because she was presenting right before lunch. It ended up being a great presentation, and she had me captivated the entire time.

What are Design Criteria?

Design Criteria are a set of 5-7 short, memorable strategic directives your team can use to focus design activities, and unlike project goals, success metrics brand statements, universal design principles or mission statements, design criteria emphasize specific rules your team will follow when tackling the problem at hand.

Instead of looking at design criteria as a constraint, we should look at them as freedom. They help us generate ideas, evaluate ideas, make decisions, and move forward. Here are a few examples of familiar constraints that Sarah gave:

Budget
Time
People
Information
Media
Resources

Sarah also gave an example of some constraining tools:

Mission Statements
Brand Guidelines
Personas/Demographics
Design Principles/Best Practices

These tools are used to help designers to focus their designs. If design constraints are defined well at the beginning of a project, it makes creating the actual design much easier.

I’m sure everyone has heard of the term “think outside the box” well Sarah said that before you can think outside the box, you have to know and define the box. The problem is, we don’t work alone, so we cannot define the box ourselves. Once we all understand the box, we can use that as a platform to generate ideas and figure out which ideas are the most actionable.

The Creative Process

The creative process is comprised of divergence and convergence approaches, which each have a very distinct way of thinking.

Divergence

You use a divergent approach when you are trying to discover new things. This is the process where there is no wrong answer, and you are really just in discovery mode. This is comprised of research activities. The next step is to determine what is actionable and find the “solution”.

Convergence

This is when you are seeking a conclusion. You are examining the actionable ideas and solving the problem. The point of design is to solve a problem.

I found Sarah’s talk to be very interesting. As I have never been formally trained in graphic design, it is important for me to understand the process.

On-the-Spot Usability Reviews – Robert Hoekman, Jr.

Instead of having a formal presentation, Robert took websites suggested from the crowd and did a usability review.

The 3 most important things when determining the usability of a site is the purpose, benefit, and usage. Before creating a site, we must determine what a person would want to find.

When using large branding images on a site they should be considered billboards on a highway. Do they convey the message when driven by at 60 mph? To help this, less and more concise text is preferable. Do the images help to tell the story of the content?

When you have a form with many steps, there should be some sort of progress meter to let the user know what they are up against. If you can avoid them, select menus on forms are generally bad for usability. Out of sight, out of mind.

When creating calls to actions, people generally do better when they think about doing instead of structure. So when things are organized by task, instead of object, users succeed more.

5 Second Usability Test

This is a similar idea to the billboard example. It is a quick and easy way to determine the usability of a page. Robert suggests the following steps:

Take a page and show it to someone for 5 seconds
Take it away and ask them to write down everything they remember about the page
One of the things they write down should be the most important thing that you want them to do

If the user does not list the most important thing you are trying to convey on the page, then you are in trouble and should re-evaluate the page. An easy way to do this is to use the website Five Second Test.

Robert created a test and had everyone take the test. One interesting thing about it was that he twittered the link. Twitter is such a simple tool, and it was perfect for this situation.

Designing the Details: Web-App UI Design Beyond the Basics – Jason Fried

The basis of Jason’s talk was the idea of craftsmanship. He started with the comparison of an Ikea desk to a desk made by a craftsman. Sure, the Ikea desk is perfectly usable, but it feels a little cheap. The desk made by the craftsman is sturdy and solid. So if we just add a little bit of craftsmanship to our design, we can vastly improve them.

Weak, Normal, Strong

On the web, there is normal text, and emphasized (strong) text, but there is no de-emphasized element. So how do we de-emphasize? Using design of course.

For example, instead of making everything emphasized, de-emphasize something by giving it a lighter color. Most people focus on the normal and emphasized text, but not enough focus on the weak. Jason then went through some of the 37 Signals applications to show us examples.

Think About the Flow, Anticipate the Next Action

Jason discussed how the functionality of iPrioritize and Ta-da List were very similar, but Ta-da List thinks about what the user wants to do next. Ta-da list takes less clicks and streamlines the process of using the application.

You should consider the before, during, and next actions of the application flow. If a user goes to a page with a form on it, focus the first form field so they don’t have to click anywhere. You should always focus the user’s attention on the next thing you think they want to do.

The Details

It’s amazing how much little details can make a difference. Designers should consider words as important as pixels. Copywriting is an integral part of interface design. For example, if you are doing a search for contacts, and only 1 contact is returned, say that 1 contact was found. if 10 were found, say that 10 contact were found. Just one simple letter. All it takes is a little bit of extra coding.

Write in your applications like you talk. For example, use the phrase, “who can see this person” instead of “permissions”. Always be clear over clever. Instead of “advanced search”, use “search by city, state, country, zip, phone, or email”. Think about how you would say something in real conversation, make it more human-like. Label the button “Save This Item” instead of “Save Item”.

When developing an application, you definitely do not want to spent too much time at the beginning on these small details. The flow and functionality should be established, then work on the fine details. Jason said at 37 Signals they use sharpies instead of pencils when sketching at the beginning of the process.

When you have to explain something, like instructions for a form, use 3 sentences. The sentences should be structured as follows:

Explain what is going to happen
Give an example
Provide a suggestion/recommendation

Timing is everything. If you have a drop down menu, allow for a mistake when hovering. If the hover off of it for a second, then hover back over it, don’t make the menu disappear.

Have a photographic memory. If someone is entering a lot of items in a row, remember the settings from the last time they entered it. It is most likely that they will want to have the same preferences checked.

Give the user feedback on that just happened. Gracefully fade something out instead of quickly hiding it. Give a slight flash of yellow before fading back to white. Give the user an update in words so that they know what happened.

Not everything needs to be equally obvious. There are two different users: regular users and power users. You do not need to make advanced tasks obvious for everyone. As long as regular users can accomplish the same task through a different path, it’s not a problem. For example, not many people know that in Backpack, you can drag items to the sidebar to create a new page.

There is a lot of planning you can do for an application, but you never know if a product is going to be any good until you actually use it. So like the popular saying: eat your own dogfood.

Underpants Over My Trousers – Andy Clarke

I had never heard Andy talk, but I loved his book Transcending CSS. His talk was a little contradictory to what most of the “experts” say, but I thought it was great. His talk was centered around the thought that we can gain inspiration for designing from comic books.

Every time you pick up a new comic book, you have to learn how to read it. Taking the inverse of Steve Krug’s “Don’t Make Me Think” mentality, Andy suggests that we should engage the user and make them think. Obviously he is not suggesting that we make things hard to understand; he just thinks that we can create much more interesting and compelling layouts.

Andy recommends that you stick to a grid, and be uniform, but then break out to enforce a specific, dramatic message. What goes on between the panels is just as important as what happens in them. Comics make the user be creative and fill in the story between the panels. He recommended reading Scot McCloud’s Understanding Comic Books to understand a lot of techniques that are used in comic books.

Not everyone visits your website be going to the homepage first. Just as not everyone starts reading a comic from the beginning of the series. Make all of your pages unique. Don’t get stuck in a template.

Andy’s talk was definitely more inspirational than anything. It was quite interesting to see the examples of comics and examining the way that they flow from panel to panel.

Special Adobe Session: Web Workflow with the Adobe Creative Suite – Adam Pratt

This was a different kind of session, more like a sponsor session, but it was interesting to see some of the new stuff in Creative Suite 4. Adam popped open the different applications and gave us a quick overview of the new stuff.

First off, Adam said that Flash is on 98% of devices (not just computers, phones as well). Probably on of the most anticipated features in Photoshop is the content aware scaling. Basically, you can cram more parts of the photo into a smaller area without squishing or stretching it. I also noticed that Photoshop added the tabbed interface that a lot of the other Adobe applications already had.

Flash can run natively in all CS4 application. So that means you can run things like Adobe Kuler in Photoshop to get color scheme ideas.

You can also get real time screen sharing with up to 2 people . As long as one person has CS4, the others just need flash and an internet connection. You can give control to the others that do not have CS4. You can see everything on the computer, not just CS4 applications.

You can drop a PSD in Dreamweaver, and when the PSD changes, you can update the image in Dreamweaver with just the click of a button. When you open a file in Dreamweaver, it also pulls in all CSS and JS that are being called on the page. In it’s live code mode, it is now running Webkit. You can freeze JavaScript, and use the code navigation to see where the styles come from.

Now if CS4 weren’t so damn expensive, that’d be great.

Continue to Page 2 »

Eric Meyer Live Code Workshop

Eric gave attendees the opportunity to submit CSS problems they were having, and he would go through and help them fix it. I didn’t have any unresolved issues, so I just enjoyed listening to what Eric had to say. Nothing groundbreaking, but there are a few points that I took away.

One thing that I guess I don’t really think about is setting a background color on the body element if the design calls for white. If a browser changed their default background color, then the design could drastically change.

There has been some talk recently about using absolute font sizes since a lot of the newer browsers have full page zoom functionality. I have actually decided the switch to use absolute font sizes and to “soft serve” relative sizes to IE6. Eric suggested to use an absolute font size as the base size and then relative sizes from there on out. I’m not sure if I agree with that though, because you may not want all font sizes to be affected by changing the base size.

There are a couple of ways to contain floats: float the container or assign the container a property of overflow with a value of hidden or auto. Using the overflow property feels a little bit like a hack, but it gets the job done. I’m not really clear on why this actually contains the float, and I wonder if browsers will break this functionality at any point.

Surprising as it may be, Eric even advocated using a table for laying out a form. Although, I really do prefer using an ordered list for laying out forms.

Someone even asked if Eric knew a way to remove the yellow background on form fields that the Google Toolbar automatically adds to fields it knows how to fill in. He came to the conclusion that you could probably remove it with JavaScript, but it could destroy any focus background color that a user could have setup. Also, if the user has the Google Toolbar installed, then that probably means they may use the ability to automatically fill in the forms.

Design Lessons in Chess – Rob Weychert

Who would have thought that you could learn design lessons from learning chess? Well Rob Weychert did of course, and he shared his lessons with us. First, he started with a couple of basic correlations between chess and web design.

Chronology

Chess involves playing the beginning, middle, and end game. Web design has a similar chronology: information architecture, visual design, and the site build out. Just as you need to research your opponent before playing them, you need to do research to begin any project.

Opponents

In chess, you are only playing one opponent, but when working on a website, you are typically facing three opponents: the users, the client, and your colleagues. You want to limit the users’s options on the web site and help them focus on the task at hand. With the client, you want to work together with them to reach the goal of the web site. It is important to surround yourself with colleagues that will challenge you. Collaborating and challenging each other is the best way to grow in this industry.

The Lessons

Rob then went on to describe the 8 lessons that he learned from playing chess.

1. Content is King

We have all heard it before, but sometimes it is easy to lose sight of this. In chess, the game is decided on the king. It is easy to get so focused on the king that you forget about the rest of the pieces. Sometimes we are so wrapped up in AJAX, jQuery, Photoshop, etc that we forget that the foundation of a website is its content. Yes, the other stuff is important, but the content is what needs to be served. So use your design to enhance the content.

2. Know Your Story

Rob gave us the example of project that needed to be like a newspaper from a specific time period. So what did Rob do? He researched the project by looking at old newspaper ads. Then to top it off, he used a typeface that really existed in the era.

3. Think Ahead

The web is constantly changing, and there are many ways for users to receive the content. It is not like a static medium like newspapers or books. You must plan for content to change and grow.

4. Don’t Get too Attached

While you think you may have come up with a great idea, keep looking, the changes are that you will probably come up with a better idea.

5. Act with Purpose

Famous chess player Siegbert Tarrasch said “One badly-placed piece makes your whole position bad”. What Rob took from this was that we should be able to justify every one of the decisions we make. He broke down his slide design and gave reasoning behind every single one of his decisions.

6. Obey Circumstance

Don’t put the solution before the problem and rely on your old bag of tricks. Each problem should come with its own solution.

7. Principles are Your Friends. Except When They’re Not

Principles are great to provide a foundation for a project. The best place to be is in the middle ground: you want to understand the principles, but understand with experience how to break them. Ralph Waldo Emerson said “The man who knows how will always have a job. The man who also knows why will always be his boss.”

8. The Journey is as Important as the Goal

In order to succeed, you need to have failures. You should learn something from every project, whether you fail or succeed. With this knowledge, you should be able to use a process of elimination to become successful.

Implementing Design: Bulletproof A-Z – Dan Cederholm

Derek Powazek was actually scheduled to talk, but he was unable to attend so Dan Cederholm stepped in. I enjoyed Dan’s talk last year at An Event Apart, and he definitely did not disappoint this year.

Dan’s entire talk focused around the idea of craftsmanship in implementation. He wanted to take a look at ideas for bulletproofness, progressive enrichment (basically really cool stuff that doesn’t work in IE), and reexamining past methods.

To show these ideas, Dan created a website called Iced or Hot, and decided to come up with something for every letter of the alphabet.

a: Anchor Links with Meta Information

On the right hand side of Iced or Hot, there is a list of popular drinks. Dan decided to include the number of drinks within the anchor tag. Instead of absolutely positioning the number of drinks within the anchor and risk overlap with a really long drink name, Dan just floated the number of drinks to avoid collision.

b: Border-Radius

While CSS3 is still not officially implemented in all browsers, there are some browsers that are offering vendor specific properties (-webkit-border-radius, -moz-border-radius) to achieve CSS3 properties. So if you want to add rounded corners to something, and do not want to deal with slicing all those images, then just use border-radius. It degrades fine, and most of the time, rounded corners are kind of like an added bonus. This could also be useful when prototyping, before slicing the real images (if the corners are necessary in all browsers). Dan used these properties in a few places on Iced or Hot.

c: Color Transparency with RGBa

Browsers are starting to implement the opacity property (or a vendor specific version), but the problem with opacity is that it is applied to all of the element’s children. When you apply RGBa to an element, it will not affect its children. The one downside to RGBa is that it does not look like you can use hex values anymore, which are probably the more commonly used and easier to remember values. You would apply a .7 transparent black background like so: background-color: rgba(0,0,0,.7). Again, this might be something that is great for prototyping, but then in implementation, you would use PNGs.

d: Do Websites Need to Look Exactly the Same in Every Browser

NO!. It’s great to work with decision makers who get it. These tiny visual enhancements that do not affect layout should not be necessary in every browser.

e: Easy-Clearing Floats

Dan has been using the clearfix method of clearing, but has decided that naming the class clearfix might not be the best idea. Instead, he names the class group. While the clearfix method is just one of many methods for clearing floats, it looks like it will work in IE8 because it will support generated content.

f: Frameworks

Dan writes his own. Instead of using some bloated framework that someone else has written, Dan has created his own “framework” that he uses from project to project.

g: Gridlasticnus (grid layout using ems)

We all know that grids should be used to help structure your designs, but you can use an em-based layout to ensure ultimate flexibility. Dan then gave a couple of tips when creating an em-based layout:

Set a max-width on the outermost container (max-width: 100%;)
Try to avoid setting font-size and width on same element
Think from the outside in

h: Horizontal Grid? Sure. Vertical Grid? Sort of.

When designers design comps, they typically design columns to be equal and blocks of text to be the same height as an image. In reality, the actual content will not be the same. So in order to have the appearance of a vertical grid, use classed groups for the columns so that the tops of the columns can align.

i: IE8, Still Refuses to Resize Text Set in Pixels

WTF? Yes, IE does have the page zoom functionality, but if someone goes in and changes the text size, it will not scale absolute units. So do we stick with relative units? I am going to use absolute units and soft serve relative units to IE.

j: jQuery

It has a familiar CSS-like syntax and is really powerful. jQuery is my language of choice as well.

k: Kitty

Dan realized that trying to come up with 26 items was really hard. So he decided to show a picture of his cat.

l: .last

On the Iced or Hot popular drinks list, Dan has a bottom border, margin, and padding on each list item. On the last list item, he did not want any of them. So he created a class of last which zeroed out all of those properties. He then used jQuery to add a class of last to the last-child of the list. This is such an elegant solution until we get full CSS3 support.

m: Must Skip a Few Letters if We’re Going to Get Through This

In order to save time, Dan skipped m-r.

s: Shifting Backgrounds (Parallax Backgrounds for the Lazy)

Silverback made the parallax background popular, and it’s pretty simple to do. Basically all you need to do is to position the background with a negative percentage. The header of Iced or Hot uses a subtle parallax background.

t: A Testimonial for Reset.css

Dan found out that on the mtv.com redesign, he used margin: 0 and padding: 0 a total of 155 times. if he would have just used a reset at the beginning, he would have saved himself a lot of those instances.

u: Your Stats

You may be asked when you can drop support for a certain browser. The answer should be found by looking at your statistics. Global statistics might be very different from your own, so you have to consider those with a grain of salt.

The In-House Designer – Cameron Moll

Cameron Moll decided to share the lessons that he has learned working as an in-house designer.

Lesson One – “Let’s take that offline.”

I&rsquom sure you’ve heard the phrase “Let’s take that offline”? Well, who knew that so much of a designer’s time should be spent not designing. Khoi Vinh broke down how he thought he should successfully spend his time when he was “doing design”, and he concluded that he should spend 20% of his time doing the actual work, 40% working on the publicity of the design, and 40% creating relationships.

Lesson Learned: Create relationships that will engender trust and confidence in your work as a designer. Remember, it’s 40% of your job.

Lesson Two – “Let’s take a 5-minute bio break.”

Cameron gave an example of communicating with his IT department, and he was asking for an email alias to be created. The IT department emailed him and asked what he would like it to be called. Cameron then responded with “is dl-mobile available?” The IT department then asked the person who created the aliases to create an alias for the following address: dl-mobile-available@.

Cameron recommended reading The Anatomy of Peace to understand how to deal with conflicts.

Lesson Learned: Great communication skills create the shortest distance between an initial idea and a successful user experience. Besides, itâ€™s another 40% of your job.

Lesson Three – “Who owns that action item?”

Cameron showed us this quote from Paola Antonelli: “Ideas are a dollar a pound. Greatness is in picking which ones you want to make happen”. He decided to modify it a little: “Ideas are a dollar a pound. Wisdom is in picking which ones you want to make happen. Greatness is in making them happen”.

You should not fall into the trap of thinking that you cannot make a difference in your organization.

Lesson Learned: Smallify the organization. Develop & foster relationships with change makers, not just decision makers.

Lesson Four – “Let’s not try to boil the ocean.”

You should always present things low fidelity. People get too distracted by small things that only the designer should worry about, like color, typography, etc.

Lesson Learned: Bring people along in your thinking. Paint the big picture, and then avoid the “illusion of agreement” by prototyping early and often. Remove fidelity when it isn’t necessary for agreement.

Lesson Five – “Do we have the bandwidth?”

You should always try and build on your knowledge and capabilities. Cameron recommends having an annual and weekly design review. They hold in-house workshops and have a budget for conferences. You should always be looking to improve yourself.

You want to establish influential relationships with as many people as possible: internal departments, local colleges & universities, vendors, etc.

At Cameron’s company, the designers have a blog.

Lesson Learned: Establish the culture and environment necessary for good design to flourish.

Lesson Six – “We’re determined to leverage our synergy with this new initiative.”

Create an inspirational culture and environment. The surroundings in the office should help to inspire yourself and others. Work from home sometime. Change your surroundings.

Lesson Learned: Uninspiring workplaces are a detriment to creativity only if you allow them to be. Find inspiration everywhere.

Lesson Seven – “I just got dilberted. Again.”

Lesson Learned: Know when to exit. It’s as simple as that.

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

I didn’t know Curt by name, but apparently I read one of his books. Curt did his presentation a little differently than everyone else, he actually wrote his presentation in HTML and linked to images when necessary. Curt based his presentation on William Morris, who helped to spearhead the English arts and crafts movement.

1. Stay True to Nature and Materials

Remember people, this is the web. There is no need to simulate physical material (wood, metal, etc) on the screen. Typography should be seen as a material. Push CSS typography. There are a lot of text properties that are rarely used. Behavior should be seen as a material. It should look like it does what it does. Interstitial animation should help to tell the story of progressing through the site.

2. Unite Art (Design) and Hand Craft

Everything that you touch should be great. If you have to slice someone else’s design, do it ingeniously. Push the limits of possibility.

3. Unite the Microcosmic and Macrocosmic

If it doesn’t need to be scalable, don’t automate it. Make each section of a website different and unique.

4. Value Utility. Value Beauty.

“Have nothing in your house that you do not know to be useful or believe to be beautiful.” Anyone can build a cookie cutter site with templates; the added value is beauty and customization. Add small ornamentation to the site and show your real craftsmanship.

5. Enjoy Work

Outsource or mechanize the un-pleasurable, but try and do as much of the entire process yourself at least once. This will help you when you are trying to find someone to do that job for you.

6. Redesign the Whole World

If current goods and tools are unsatisfactory, make your own.

“Life doesn't simply happen to us; we produce it…”

–Bruce Mau

Designing the Next Generation of Web Apps – Jeffrey Veen

The future of the web is very bright. There are web applications released every day. All of the web applications revolve around entering and digesting data. The future of the web is going to be creating these tools that will enable users to participate and interact with the data. As designers, we need to design the data so that it will be easy to digest and interact with. Then, you should use filters to clarify the data. Like many of the other presenters said, it’s easy to lose track of the fact that design is just communication.

So where do we get our sources of inspiration? History, the current state of things, who users are, etc. Jeff gave the example of John Snow, who was a physician in Britain researching a cholera outbreak. John used a map to illustrate that the source was actually a water pump and not airborne like everyone else thought.

Inspiration should come from everywhere. Jeff got the inspiration for the Google Analytics graph from watching Raiders of the Lost Ark. Visuals are most impacful than numbers.

Statistics can feel abstract and anesthetizing, making it difficult to connect with and make meaning.

–Chris Jordan

The designer’s job is to find a story in the data and to remove everything that isn’t telling the story. The difference between print and interactive designers is that interactive designers have to give up some control to their users. People can resize their text; they can change their screen size; they have much more control then someone reading the newspaper.

Jeff made three specific points about design:

storytelling is enabling users to discover
visual cues allow for interactivity
instead of editing, allow for filtering

Jeff also recommended some books:

The Ghost Map
Edward Tufte’s books
Visualizing Data
Mental Models

A Panel Apart

The last session was really just an opportunity for people to ask questions to Jeffrey Zeldman, Eric Meyer, Cameron Moll, and Jeffrey Veen. It was certainly interesting to hear what they had to say about the current state of web design.

Conclusion

I absolutely loved the conference. I always feel inspired when I come back to work. I would certainly recommend the Event Apart conferences to anyone.