Put Your Worst Foot Forward

Jeffrey Zeldman

This talk centered around working with clients and how to make the experience work better for both parties. A lot of it seems like common sense, but at the same time is easy to forget.

It’s critical to not only know the requirements before beginning, but agree on what each aspect means (“What exactly is a template?”)

You should make sure to set up roles and responsibilities before beginning, including a single point of contact through whom everything can flow.

Be sure to plan for possible changes, and make sure to have escape clauses so either party can back out of the contract while keeping their dignity.

Object Oriented CSS

Nicole Sullivan

Nicole’s believes CSS code is often too fragile, requires expert ability to just get started, and doesn’t promote code reuse. Style sheets just get bigger since people just add onto existing CSS files rather than modifying them.

She has tried to adopt several concepts to help with these problems, naming it Object Oriented CSS, although it’s not really OOP. While much effort has been put into the properties and values used in CSS, she thinks more attention needs to be paid to the selectors to make them more reusable and predictable.

The CSS selectors are a good place to add more structure to the style sheet. Declarations which are location-specific cause surprises when someone comes along later and tries to reuse the declaration in another area of the page. Rules should use as few id tags as possible and be general, then differences can be localized.

She’s an advocate for adding CSS variables, prototypes (a set of values to be used in different declarations), and mixins (to combine small bits of repeating code). The difference between the latter two is subtle and they both add complexity to the CSS syntax, but mixins seem easier for people to pick up.

The CSS3 Experience

Dan Cederholm

Dan was only one of several presenters who think that the user’s experience doesn’t need to be the same in every browser. Pages can be designed to look good on most browsers, but added touches can enhance the experience for users of browsers which support newer features.

CSS3 can be used to enrich sites with interaction. While the branding, usability, accessiblity, and layout are critical to a page’s design, the added feedback and enhanced experience can be made non-critical.

He demonstrated how to use opacity and multiple backgrounds to give a faux-3D effect, while there were fallbacks for older browsers.

CSS3 can be used to enrich forms, especially when using CSS3 selectors to limit the new effects to newer browsers.

Mobile First!

Luke Wroblewski

Traditionally, sites have been created to target desktop systems first, and then either ported to mobile devices or a separate mobile site created. Luke thinks this is backwards, and that a design should first target mobile devices, even if no mobile version is planned. In fact, this is how Google now develops applications.

By targeting mobile devices first, you’re forced to think about multiple screen sizes and resolutions, and you also need to be sure to focus on performance. Those are both good things for desktop systems, too.

Another reason to design for mobile devices is the growth of the market, where smartphone sales are poised to surpass desktop sales this year.

Designing for a smaller screen forces you to know the target audience and decide what information is important to include and what can be removed.

In addition, mobile devices offer a lot of new capabilities which you wouldn’t consider if you were designing just for a desktop. Touch interfaces, location awareness, and the ability to change orientation (portrait/landscape of the device or even the direction the user is facing) are just some of examples.

Learning to Love Humans – Emotional Interface Design

Aarron Walter

People are currently good at developing sites which have function, reliability, and usability, but what’s missing is making pages pleasurable. Aarron likened a usable page to saying “That food was edible,” and thinks that it should be more.

Web sites which have a personality give the user an emotional link, and Aarron considers this Emotional Design. He believes people will be more willing to forgive shortcomings and enjoy the site if you reward them with positive emotion.

Aarron worked on MailChimp, which lets you manage mailing lists. He’s added lots of little touches, such as a chimp which shows up with random sayings, or changes the login screen to be seasonal. Users respond well to these, even to the point of posting screen shots to Flickr.

Anatomy of a Design Decision

Jared Spool

Jared thinks that the different kinds of design differ by how much you use experience and research you do. The least amount of research is Unintentional Design, where designs essentially just happen on their own. 37 Signals does what Jared calls Self Design, where you work on the design to fit what you want, which works when you heavily use the end product yourself. You also need enough other people using the product so you can get a lot of feedback.

Experience-focused is what he calls the most complex design, which encompasses more than just interaction with the web site. One of his examples where experience-focused design would help was when he observed a user making a purchase on a web site and selected the option to pick up the item at a local store. The store had sold the last of that item by the time he arrived, even though he had reserved one. To make matters worse, the user couldn’t get a refund from the store; he had to call the web group for the refund.

One interesting item Jared brought up about usability testing is the number of test subjects is less important than the number of hours of exposure the design team has watching the subjects. In addition, only people who are part of the testing process should be involved with design decisions; his example of a high-level executive coming in and asking for a specific tweak resonated with the audience.

Microsoft: Help Us Kill IE 6

Pete LePage

Most web developers find it difficult to design sites which work well with IE 6, and many are dropping support for it. Microsoft also wants people to move towards the recent version of browsers, security being only one reason.

Because there are several people who either don’t want to upgrade or don’t realize that they should, Microsoft has been trying to do a lot of outreach. They are placing ads targeted to those users which only show up on IE 6 or earlier. The other major group of people still using IE 6 are enterprise users where software can’t be installed by the end user.

Microsoft has been making tools available to developers to help migrate sites to newer versions of IE, including IE 9. The platform preview of IE 9 is now available, and Microsoft is making sure people know that it will be adding support for HTML5 and CSS3. They’re also working on IE 9’s performance, and it looks like it will be at least in the same general performance ballpark as the other browsers, a great improvement over older versions.

Everything Old Is New Again

Eric Meyer

Eric covered some new features of CSS3 which are straightforward, can be implemented today, and should also gracefully degrade on older browsers.

One of the trickiest parts of CSS is getting the box model right, especially if you want to create columns which have the width set to a percentage. If you add padding and borders, those items don’t count towards the width of the column, so you have to guess how much to adjust your widths to make sure they fit. However, CSS3 allows you to use different box models, and one includes the border and padding in the width.

Much of Eric’s presentation was about resolution-dependent layout. By using media queries, you can have different CSS rules apply depending on how wide the window is. For example, if the screen is narrow (such as on a mobile device) you can have unnecessary elements not show up at all. However, if the page gets wider, you can rearrange the layout so the content doesn’t just look like it’s floating in the middle of a blank page.

Eric also discussed rounded corners for borders, transparency, and new CSS3 selectors. He combined the latter with media queries to show how straightforward it is to set up a grid of pictures which changes the number of items per row depending on the browser’s width.

Paranormal Interactivity

Jeremy Keith

Jeremy is another presenter who believes that objects with personality encourage interactivity. For example, most web forms are pretty structured and look like something you’d fill out for the government. However, he played with a sign-up form which was free-form, like Mad Libs; it was set up so you were filling in a paragraph written in the first person. It actually tested very well, and the novelty gave the site personality.

There are many behaviors which used to only be available in Javascript which can now be done in CSS. Jeremy sees this as a good thing, since it’s easier to design with a declarative language such as CSS, rather than a procedural one such as Javascript. He cited HTML5’s many new form elements as an example. While Javascript is still needed to make sure forms are valid, less scripting is needed since the heavy lifting of validation can be done by the browser itself (such as testing if an email field has a valid email address.)

Message and Medium: Better Content By Design

Kristina Halvorson

Kristina discussed content strategy, which means not only text, but other assets such as images and video. It also means error messages, search result pages, and other content which is not normally tracked.

The content strategy should cover its creation, delivery, and governance. It’s easy to have one group create the content and have another group deploy it, but someone also needs to maintain it.

When designing pages, everything should fit with the mission statement, which itself isn’t meant to be published. It should be an internal tool to prioritize content types and choices, be very focused, and set the tone for the whole site.

Once visitors land on a site, a first impression is formed within a second. By ten seconds, they should understand your primary message (the core directive, which should be recognizable and memorable.) Within a couple minutes, they should understand your secondary messages, all of which should support the primary one and provide context for the product, service, etc.

When crafting content, consider designing for the mobile audience. Because of the size constraints, it forces the message to be honed and trimmed as much as possible, which also helps the user understand it.

Hardboiled Web Design

Andy Clarke

The common way to build a web site is to make it work with older browsers first, then add flourishes for the new browsers (such as rounded corners or animations.) Andy believes this stifles design, and that people should think about first building for the latest browsers, then make sure they work with older browsers after that.

Having the design not look the same on different browsers is fine, especially considering that it can’t be guaranteed that sites will look and act exactly the same on browsers with feature parity. Besides, most users don’t look at a site from multiple browsers anyway; their experience will be consistent to them.

In addition, Andy thinks that designers should consider not targeting IE 6 at all. He’s been designing sites which give just plain text on IE 6 for the past couple years without mentioning it to his clients; no one seems to have noticed.

A Dao of Flexibility

Ethan Marcotte

Ethan was another presenter to champion using media queries to make a page flex for different sizes of devices. He went further, saying that while it’s good to use a grid system to design, that grid should be flexible. His examples included scaling images and can be made to also work done for older IE versions.

While he’s advocating designs that are flexible in width, he doesn’t think fixed-width designs are bad. However, with smartphones becoming more popular, it’s becoming important to take different sizes of displays into account. Using a system such as flexible grids can be very useful in designing for the various sizes.

How the Web Works

Jeff Veen

Jeff went over some of the history of how the web and its current standards came around, and he echoed not only what many of the other speakers said, but what’s seen a lot on the web itself: what’s important is rough consensus and running code. In other words, you don’t need to have a fully-defined standard before implementing something. On the contrary, you need to have an implementation that people can try out to find out what works and what doesn’t, which gives you an idea of where to invest resources. As a corollary, the speed of iteration beats the quality of iteration, since the quality will improve over time.

One example of this was Typekit, a service which helps designers use different fonts for their pages. Typekit takes care of the licensing and font hosting, so all that’s needed is a Typekit subscription. They even give you a Javascript snippet which loads the fonts into the browser for you. Many people were excited about Typekit before they even had code; all the interest let them know what features were important to work on first.

Another recurring theme in Jeff’s talk was that browsers are liberal with what they accept, and conservative with what they produce. What he means is even if you have bad markup, the browsers will make best guesses as to the intent of the code and display that accordingly.

This was a half-day seminar about HTML5. The big shift of mindset is that HTML5 isn’t version 5 of HTML, but covers HTML in general. By decoupling features from a version number, new tags can be added following the “rough consensus, running code” paradigm.

The standard says that the priorities should be users, authors, implementors, specifiers, and theoretical purity, in that order. That means HTML5 isn’t trying to fulfill any vision of being a perfect language (which stymied XHTML 2), but should make it easier to be nimble for all parties involved.

The parts of HTML5 which get the most press are the multimedia tags, enabling audio and video to be placed on the page without plug-ins (Flash, Quicktime, or others.) The objects are easily styled with CSS, and there’s a set of functions accessible to Javascript for controlling the object.

HTML5 also has new semantic tags, allowing a page to be grouped by sections, articles, headers, footers, and various combinations. Since browsers know to ignore tags they don’t understand, these new groupings can be used right now (this page uses some.)

Other tags which can be used now are new form controls, such as date/time widgets. Because the default form element is text, browsers will use a text box for any unrecognized form element, which is a good fallback.

One of the most significant shifts is that a Doctype is no longer required. The main reason to have a Doctype is to tell a validator which language it should be validating. Since HTML5 is now non-versioned, the Doctype becomes just a way to make sure browsers use standards mode, not quirks mode.

This half-day seminar was an extension of the CSS3 talks by Dan and others. He described how CSS3 is defined as a set of modules rather than one big standard, which means things can be implemented in stages. He also described how vendors use vendor-specific prefixes (-webkit, -moz, etc.) when they’re testing new features; if the final specs differ from the vendor’s implementation, they can make the change when they implement the final spec. An example of this is border-radius, with -webkit-border-radius and its variants being very close to the final spec while -moz-border-radius ends up being different when specifying a single corner, but all browsers should be consistent with their border-raduis implementations.