Today’s entry  in our series of web deisgn interviews is Dan Cederholm. Dan is a recognized expert in the field of standards-based web design and has worked with Google, MTV, AIGA, ESPN, Blogger, Fast Company, Inc.com, and many more. He’s a renowned speaker and author and blogs about web design related topics at SimpleBits.

Editor’s Note: Dan will be hosting a full day workshop with Ethan Marcotte on “Handcrafted Bulletproof CSS” in London, UK on November 23rd, buy your ticket online now. He will also be speaking about “Progressive Enrichment” at The Future of Web Design New York on November 17. Conference day passes are still available.

You have recently published a new book? Having purchased your first two (and learnt a lot) what can I expect from the third part of the trilogy?

Yes indeed, Handcrafted CSS was published this past August. In some ways, it’s a continuation of the previous book, Bulletproof Web Design and dives right into examples that revolve around a fictional case study for a coffee company website. Ethan Marcotte contributed an absolute gem of a chapter on fluid grids as well.

There are really 3 areas of focus in this short little book: continuing the “bulletproof design” mentality (that is, accounting for varying amounts and sizes of content, planning for worst-case scenarios). Also the concept of “progressive enrichment”, which is a fancy way of talking about what advanced CSS and CSS3 properties we can use _today_, while keeping in mind browsers that don’t yet support those properties. And also the book touches on “reevaluating past methods and best practices”.

With the browser landscape changing rapidly, and with new and evolving standards being implementing by those browsers, it’s a great time to reevaluate old habits, to see if there’s an easier way to handle things with the shiny new techniques.

The timing seemed fitting to write another book, with all of this fun new stuff to play with it’s important to sort it all out, see what’s actually usable today in some circumstances.

“Progressive enrichment”, “Graceful degradation”, “Progressive enhancement” – what’s the difference?

All three are similar ways of talking about the same concepts. “Graceful degradation” is the older term, with the idea being build and/or design for the future, while later providing fallbacks for legacy systems. “Progressive enhancement” was coined by Stephen Champeon in 2003, and builds on that idea while flipping it around: build a basic system anyone can use, then “enhance” that base with bells & whistles that only modern browsers can understand.

I’ve been using a variation on Stephen’s term, “progressive _enrichment_” to specifically talk about advanced CSS and CSS3 that we can use today to boost the user experience.

It’s kind of like enriched pasta, with extra nutrients added. It’s still pasta, and take away that enrichment and you probably wouldn’t know what you’re missing. And that’s the important part: utilizing this bleeding edge stuff while keeping in mind that designs may not look or be experienced the same in every browser. And that’s OK.

Your talk a lot about the concept of “Bulletproof Web Design”. What are the three quickest wins to ensuring a “bulletproof” site?

I have a knack for inventing unnecessary terms and phrases, don’t I? :)

Here are 3 ways to help bulletproof a design. All are simple things to keep in mind while building websites:

1. Use the text sizing controls in the browser to test a site’s integrity. Do design elements break apart? Can that block of text handle 3 paragraphs instead of 1? We’re not only testing the site for low-vision users, but we’re getting an instant barometer on just how flexible your design is. A design that can bend to the rigors of editing, content shuffling, internationalization, etc. is going to be a more robust system.
2. Turn images off. Check your design with images turned off to see if things are still readable. Slow loading images, or folks with slow modem or cellphone connections will still be able to read your site. Specify background color equivalents to any background images you’re using.
3. Check your design with stylesheets off. Is the raw markup style understandable? Can you get a sense of the hierarchy of the page? I call it the 10-second usability test. Not a true measure – but one that’s quick and easy to add to your workflow. Ensuring the page is organized and readable in the absence of CSS will help (in sometimes small ways) the accessibility of the site in other devices and assistive software. Pay attention to markup and you’ll get these benefits for free.

The word on the street is that you are working on a new site/app called “Dribbble”. Can you tell us more about it?

Yeah! I’m building Dribbble with my friend, Rich Thornett (http://thornett.com). Essentially, it’s a community for sharing small (400×300 max) screenshots of your work. By giving creative folks a forum to hang out and talk about design and process and getting a sneak peek at something before it’s live or bouncing ideas off your peers.

We’ve had about 50 people in a private beta over the last several months and the results have been fascinating. Getting to look over the shoulder of your friends and colleagues to see (and comment on) in-progress work has been extremely valuable – and we think it’ll be even more fun when things are opened up a bit more.

We’ll be giving more invites out soon, in small batches to keep tabs on scaling, listening to feedback and making changes. We’re not in a hurry, and are more concerned about maintaining the amazing quality of the “shots” that have been dribbbled in the beta thus far. Much more on this in the coming months!

What is the Future of Web Design?

The future of web design is content. It’s what’ll drive design and user experience going forward. We can’t predict, but can attempt to predict, what people will be consuming, what people will be creating, or talking about or interested in in the future – but I’ll bet whatever it is will be the catalyst for design.

So much of web design thus far has been about recreating familiar concepts for the screen. What’ll be really exciting is seeing ideas that embrace the web as its own unique medium. And that’s where you’ll see the most progressive web design.

More specifically, the future of web design is about being able to use tools that make our jobs easier. Freeing us up to worry about more important things. Progressive enrichment/enhancement is an important part of that for the modern web builder.

I have recently been working on a little out of hours PHP project called “Dummy“. The code is almost complete, apart from the obligatory prettifying of indents and comments, which means it’s time to turn my attention to the online documentation.

As part of the “How to Use” page I need to show small PHP code examples. I also want them to look very readable and be easy to copy and paste. Hand cranking each code snippet using <span>’s, spaces and CSS clearly isn’t the way to go, there has to be an easy way.

Server Side Options

Having used Pygments (a Python syntax highlighter) I had a quick look for PHP server side solutions and found two native PHP functions that could work.

1. highlight_string();
2. highlight_file();

Both produce HTML representations of the PHP code passed to them. However if you need to display JavaScript, HTML or CSS the output will be plain black text, albeit spaced and indented in the way that it was passed to the function. You will also need to deal with escaping certain characters in certain situations and a distinct separation between your HTML template and your code examples.

Client Side Options

My preferred approach would be to include the code examples in the HTML templates and use CSS to make them readable. After a quick Google search I came across SyntaxHighlighter by Alex Gorbatchev. It’s a JavaScript and CSS solution thats’s fully featured, easy to implement and degrades nicely.

Here’s an example of a PHP code snippet using SyntaxHighlighter

It works by including a few JavaScript and CSS files in your HTML template. You can customise the CSS or use one of the seven themes provided.

In order to apply highlighting to a section of HTML it’s recommended to wrap your example in <pre> tags to preserve the formatting. The final stage is to apply a pre-defined relevant CSS class to the <pre> tag.

For example if we wanted our example to be highlighted as PHP we would add class=”brush: php;” to the <pre> tag. To turn it into a JavaScript example we would add class=”brush: jscript;”.

I have set up an example page which shows HTML, CSS, JavaScript, PHP and XML highlighting in action. View the source to see how easy it is to implement.

There’s support for a huge list of languages including:

• ActionScript3
• Bash/shell
• C#
• C++
• CSS
• Delphi
• Diff
• Groovy
• JavaScript
• Java
• JavaFX
• Perl
• PHP
• Plain Text
• PowerShell
• Python
• Ruby
• Scala
• SQL
• Visual Basic
• XML

SyntaxHighlighter also provides a nice pop up tool-tip (look at the right hand side of a code example when hovering over it) enabling you to view the code in a blank page, copy it to the clipboard or print it.

There are undoubtedly other solutions out there, if you have a preferred one that works for you please link it up in the comments.

Next up in our series of web deisgn interviews is Steve Smith from Ordered List. Steve is a recognised authority on front-end development, interface design and is also the co-founder of Sidebar Creative. As an author, public speaker, and University of Notre Dame professor, he is passionate about sharing his knowledge with others.

Editor’s Note: Steve will be hosting a workshop on “How to build a HTML5/CSS3 Website Today” at The Future of Web Design New York on November 16-17 2009. You can buy your ticket online now.

What’s all the fuss about HTML5 and CSS3?

For me, the big deal is that the specifications are at least moving in the direction of how we have been using the web for the past five years or more, e.g. video, audio and user generated content. Developers have started to fall into habits (some good, some bad), and so the specs are trying to make those habits easier and more standardized. The structural tags, web forms, and advanced CSS are all letting us do the same things we’ve been doing for years, just in an easier, more standardized way.

Should designers start using HTML5 and CSS3 today?

If it feels right, and it’s right for your audience, absolutely. In my mind, we’re well past the point of having to make everything look the same for everybody on every platform, so progressive enhancement is key. In fact, we’re to the point where if we try and play equally to the lowest common denominator, we’re actually limiting the experience for those who use more modern technology. And that’s just not cool.

In your Future of Web Design New York workshop you will be delving deep into HTML5 and CSS3. What can attendees expect to go away with at the end of the session?

Ideally, what parts of these specs they can start using right now, and what they can look forward to in the coming months/years. There will be practical examples of some of the more powerful parts of HTML5 and CSS3 both, as well as looking into things that are only beginning to be supported.

I understand from Dan Rubin that “Harmony”, your CMS project, is nearing completion. Can you tell us a bit more about it and how it is different from other solutions?

Ha, word gets around, doesn’t it? Harmony is meant to be a way for developers to work with web writers and maintainers in a simple, but powerfully flexible way. We’re trying to walk a fine line between the easy content-creation of systems like WordPress, but with flexibility like that of Expression Engine. We’re not going to try and be all things to all people, but we’re really happy with how it’s turning out, and can’t wait to let people know more about it. For those interested, they will be able to find out more at http://harmonyapp.com.

What’s the “Future of Web Design”?

Gradients. Lots and lots of gradients. Seriously, though, I think it’s taking the aspects of design, interface, and simplicity that we’re learning and spreading it to other industries. I see openings all over the market for small, niche web apps that meet real needs to people in specific markets other than our own. I see us web developers and designers digging into other careers and applying our knowledge of design to solve problems in new, creative ways through web technology. And that’s exciting.

You might’ve heard the news that Twitter Lists are alive and kicking. If you don’t know what they are, here’s a brief explanation:

Any Twitter user can create a list of people on Twitter, which can be followed with one click. For example, all the people on the Carsonified Team can be found at twitter.com/carsonified/team.

We’re with Robert Scoble on this one: We LOVE this idea (see his great write-up here). It’s going to make Twitter even more valuable because you’ll be able to easily find and follow the type of people you’re interested in.

Here are five Twitter Lists we think you’ll find useful:

1. Top Web Developers
2. Most Influential in Tech
3. Top Web Designers
4. Tech News
5. Carsonified’s Recommended

If you know of any really great lists, please add them to the comments!

Next up in our series of short interviews is Karl Swedberg. Karl is the principal author at Learning jQuery and regularly presents and blogs about JavaScript and jQuery.

Editor’s Note: Karl will be hosting a workshop on “jQuery for Designers” at The Future of Web Design New York on November 16-17 2009. You can buy your ticket online now.

For designers that might not of heard of it, what is JQuery?

jQuery is a tool to help designers and developers add interactive elements to their web pages. At the risk of oversimplifying, jQuery’s core feature is a set of commands that enable you to (a) find, or create, elements on a page and (b) do something with them. It’s JavaScript that lets designers and developers avoid the hassles of JavaScript. And since it’s JavaScript, it can do all sorts of stuff without forcing a page refresh.

In your opinion why is JQuery relevant to designers?

JavaScript in general adds another dimension to design, and jQuery makes that other dimension easier to achieve. For designers who are familiar with CSS, writing simple jQuery scripts will feel quite familiar. For designers with Flash experience, jQuery provides a standards-based, non-proprietary, open-source alternative for creating some of the same kinds of effects and interactions as is often done with Flash.

For those considering your workshop at The Future of Web Deisgn New York, what kind of things will you be covering?

I’ll give a quick overview of the jQuery library, and then we’ll look at some practical ways to progressively enhance web sites for better user experiences. I’ll show some techniques for using jQuery to fill in the gaps where CSS, or at least some browsers’ handling of CSS, falls short. We’ll discuss how to put animations to good use and how to avoid their abuse. And we’ll examine a few cool plugins and see how to take advantage of their power and flexibility.

There are a number of really useful plugins available for JQuery. What are the must haves for every designer?

It depends on the needs of the site and often the demands of the client as well. One that I find myself using quite a bit is the Cycle Plugin by Mike Alsup. At its most basic, it’s a slideshow widget that shows images one at a time with a nice transition effect between them. But the plugin is incredibly powerful and gives you the ability to do all sorts of things not just with images but with written content too. It’s particularly nice where a lot of information needs to fit in a small space.

I’ve also begun using the jQuery UI plugin suite quite a bit lately. It makes creating rich user interaction such as drag and drop really easy. Its components are great, too; I’ve used the dialog, tabs, and datepicker in a number of projects.

What do you think is the Future of Web Design?

You mean other than a really cool conference, right? I’m afraid I’d end up looking like an idiot if I tried to predict the future of any technology. In some ways I suppose the future is going to look all too familiar until we can get rid of the albatross of certain legacy browsers. Still, it’s exciting to see what’s going on right now with the newer, better browsers, and I’m hopeful that some of the cutting edge stuff will take root and see more widespread adoption.

The Webkit team is doing amazing things with CSS animations and tapping into hardware graphics to make stunning visual effects. Firefox, Safari, and Chrome have been leapfrogging each other with better and better JavaScript engines — and JavaScript libraries have been tapping into the increased power and performance. We’re seeing more and more use of HTML5 elements such as canvas, audio, and video. Typography on the web is poised to get a whole lot better as progress is being made with font embedding, both on the technical side and the legal side. One thing I can be sure of is that the future of web design is going to surprise me.

Next up in our series of web design focused interviews is Dan Rubin, you’ll frequently find him waxing educational about a cappella jazz and barbershop harmony, interface design, usability, web standards, typography, and graphic design in general.

Editor’s Note: Dan will be hosting a workshop on “Web Typography” at The Future of Web Design New York on November 16-17 2009. Buy your ticket online now.

Why do you think that Web typography is a current hot topic?

Especially among designers, having more control over type on the web has *always* been a hot topic — though usually in the form of complaints about the lack of support in browsers and CSS. The current interest is primarily due to recent solutions for expanding the list of fonts designers can use without resorting to bitmaps (using images of text to replace HTML text via CSS) or Flash (e.g. sIFR), such as Typekit, Cufón, and @font-face, as well as the heightened interest of foundries, font designers and browser developers to establish a common format for web fonts.

There’s an emerging set of rival technologies that @font-face web fonts. Do you think we will see a “winner” or will the foundries look towards a standard?

The foundries already seem to be leaning toward the .webfont proposal — also written as WebOTF or WOFF (Web Open Font Format) depending on where you’ve read about it — and Mozilla is already implementing support in a near-future version of Firefox. Rumor has it that Microsoft may even support it, and I’m sure Apple won’t be too far behind with Safari/Webkit if that’s the case (if not beating Microsoft to the punch).

CSS support via @font-face should require no changes to the current syntax, and solutions that provide their own font selection (such as Typekit) shouldn’t be affected, or may even be able to take advantage of the new format to improve their fledgling services.

If someone is realigning their site what are the three key typographic ideas they should bear in mind?

In no particular order:

• Limit your usage to two fonts (three at the absolute most) to help viewers focus on the words, not how many different fonts are saying them.
• If you need to show emphasis or convey hierarchy, make as few changes as needed to create contrast (e.g. style, color or size: not all three)
• Understand that type is often the primary content of your site *and* the main navigational elements: treat it with the utmost respect and give it the attention it deserves.

Can you give a couple of examples of sites that use web typography really well and how?

In this context, “web typography” simply means “type on the web” rather than a specific technology or method to use that type. So much can be done (and has) with the existing capabilities of browsers and CSS that we can see good examples of type being used online in any number of places:

• http://ilovetypography.com/
• http://nicewebtype.com/fonts/bello-and-proxima-nova/
• http://stuffandnonsense.co.uk/
• http://www.markboulton.co.uk/

What do you think is the Future of Web Design?

We will have reached the next evolution of the web when we no longer sign into specific sites and apps, but instead simply sign into the web as a whole, and use applications that freely exchange data and work more as a team than separate players.

As practitioners, we can help reach that point by viewing ourselves not as designers or developers, but as product designers: our products are virtual, but the interactions we are supporting are helping shape the world around us — we must take our jobs as seriously as the design teams who create cars, ambulances, airplanes, medical instruments and the tools that run governments.

In the first in a series of short form interviews we ask renowned web designers and front end developers a few questions about their areas of interest as well as their opinion on the future of web design. First up is Elliot Jay Stocks, web designer, author and globe trotting speaker.

Editor’s Note: Elliot will be speaking and hosting a workshop on “WordPress Theme Development for Designers” at The Future of Web Design New York on November 16-17 2009. Buy your ticket now.

You’re a renowned for being a designer more than a developer. In your opinion how easy is it for non developers to get into the code aspects of WordPress?

Pretty easy, I’d say. There’s certainly a learning curve, but it’s not a particularly steep one. I remember taking a while to get my head round exactly how the way themes work (and that’s something I’ll attempt to explain clearly during my Future of Web Design New York workshop, because I think the basics can still be a stumbling block) but there was definitely a point where it all just clicked into place.

I’m turned off by any heavy back-end code because it’s just not where my passions lie, but there’s a surprisingly small amount of code that you have to touch to get WordPress working the way you want it to. Most of the time it’s a case of copying and pasting snippets of PHP. As long as you have a basic understanding of how or why things work the way they do, you can get by.

The ecosystem around WordPress is pretty large. What are some of the key plugins that designers should consider using on their sites?

Most of the plugins I use aren’t particularly sexy but they’re super-useful; it’s the ones that do the small things that are important in my opinion. An example would be “Top Level Categories“, which removes the ‘category’ path from your URLs. Again, not particularly fancy-sounding, but absolutely essential if you’re using WordPress more as a CMS rather than just a regular blogging engine.

Similarly the “Duplicate Posts” plugin is great for… well… duplicating posts! WordPress has no in-built way of doing this, which is a real pain if you have a lot of posts and pages that contain similar content (not so much the main text but things like multiple custom fields, for instance). Plugins that add this kind of extra functionality to the core are my favourites.

Your talk at The Future of Web Design New York is called “Stop Worrying and get on with it”. Without giving too much away, what do you mean by this?

Very loosely it’s about progressive enhancement and how designers are so fearful of new techniques or breaking the mould. It’s a call to action about embracing the fact that the web is in a state of constant flux.

What are some of the more modern techniques you are employing in your site designs at the moment?

Now that Firefox has support for @font-face, I’m able to use that a lot more. There are several CSS3 techniques creeping into my daily work, and it’s great that more and more users are able to see these enhancements. Again, it’s not necessarily the obvious stuff like border-radius and box-shadow; it’s things like the improved implementation of nth-child selectors and the like.

I’m such a loser.

What do you think is the Future of Web Design?

The future will be written by the designers who stop worrying about the constraints we work within and get on with building a better, more beautiful web!  :)

In this talk at The Future of Web Apps London, Simon gave clever insight into where cloud hosting and computing is headed, and what it means for your web app. He also talks about ‘Private Clouds’ and interoperability between cloud computing solutions.

Based on Twitter feedback, it was one of the most entertaining and interesting talks of the day, so we think you’ll enjoy it :)

You’ll learn …

1. What ‘Private Clouds’ are and how they’ll affect your web app
2. How standards in cloud computing will change the way your app is setup
3. Future developments in Cloud hosting and computing that you should be aware of

Editor’s Note: You won’t want to miss Twitter, Mozilla, Mint.com, Reddit, Alex Payne, Fred Wilson, Gary Vaynerchuk, John Resig, Molly Holzschlag, Steve Huffman and Tara Hunt at The Future of Web Apps Miami.

“Doh! %&^%&^%&!”

Another forehead-smack-worthy curse-laden moment: I’ve filled out a lengthy online form and hit the submit button only to find myself staring back at an empty form peppered with red errors. Has this happened to you? Of course it has.

While considering how much I really need to complete this form, I start making notes on how I’d design it to be a better experience. Seriously, how many date formats am I going to have to try before I get this sucker right? Do I need to phone a friend?

The lack of strong error messaging is a regular issue I encounter as both a user and UX designer. As the bearer of bad news to users, error messaging can be the element that determines whether your app gets a “Sale” or “FAIL.”

Editor’s Note: We’ll be covering UX tips and strategies at The Future of Web Design NYC on Nov 16th – 17th.

1. Error messaging is customer support

Error messaging is a critical component of customer support. Customer support teams are experts at talking to and coaching users towards conversion and success.

While QA hustles to break it down, customer support can work side-by-side to craft sensible messaging around those scenarios. The result? More sales, fewer customer calls and complaints.

Some mistakes (e.g. date formats, passwords, emails, forgotten fields) are both predictable and recurring mistakes that cannot be prevented by better design. Design the outcome to encourage the user to engage with the app’s voice, correct her mistakes, and move onwards.

2. No one ever died of humility

While it can be tempting to assume that the user is at fault when an error is made, it’s also possible that the process wasn’t clear enough in the first place.

Error messaging should be concise, friendly, and knowledgeable, but also employ humility, empathy, and apology. I personally love Firefox’s “well this is embarrassing” statement. I tend to crash my OS frequently, and it’s not FF’s fault, yet every time FF makes the assumption that I’m not at fault.

3. Bake with cookies!

Among the most unforgiving experiences occurs when a user fills out a form and having all her data it wiped out for having forgotten or mis-typed field. If you’re not a banking institution you don’t have the luxury of abusing your user by dumping her data.

Save as much information as is possible and safe for your user (e.g. re-fill everything possible with exceptions for passwords, TOS, etc.), and then clearly mark the areas your users need to correct. Saving user data will reduce user annoyance and the chances that she’ll abandon the process.

4. Don’t cheap out

Don’t cheap out on design when it comes to error messaging. Users who hit error messages are helping your team learn how to optimize your product.

Do use this as an opportunity to build a relationship and engage with humor. You can soften the feeling with typeface and words that don’t alarm, humiliate, or annoy.

Do use resourceful and helpful iconography to reduce the amount of words.

5. Error messages are not features

As great as your app’s error messages may be, they aren’t supposed to become legacy features.

Assign a team member to study the error logs. Learn what happens when your users make mistakes and constantly optimize.

• What fields were incorrectly filled out?
• What did the users put in those fields or forget to put in those fields?
• How many sessions do your users log?
• What’s the abandonment rate?

Error messaging can be the simple tweak that influences your bottom line (conversion), so it’s worth ongoing evaluation and investment.

6. Everyone loves the funny guy

It’s easy to hide behind a great sense of humor, but it’s also easy to distract your user. Use low-key and relative humor like icanhazcheeseburger.com that doesn’t overshadow the error messaging itself.

7. Choose helpful over cute

Error messaging should be more helpful than cute. CushyCMS’s “Wharrgarbl” was only amusing and forgivable the first time I saw it, by the third time I was annoyed and still couldn’t figure out what the source of the problem was.

8. Go behind the browser

If you are low on resources or without customer support, integrate your error messaging within the user’s browser. This will force the user to stop and read what she’s doing incorrectly. Oddly, I’ve seen users mutter and blame the browser versus themselves or the app.

9. Don’t play hide-and-seek

Bring your user directly the area where the problem is. Meetup.com has fantastic messaging, but unfortunately during the sales process, they bring the user back to the top of the page, when the error is well below the fold. This causes the user to pause and think versus correcting and moving forward.

10. Don’t design single-size error messaging

One size error messaging is a bad idea. If a user has failed to put a size or choose a color of a purchase she wants to make on zappos.com, the error message should point out that specific issue versus being popped into the “Item Out of Stock” skin used elsewhere across the site (@zappos – please fix!).

Error messaging occurs when a user makes a mistake (dumb user) and it’s an element of your app’s design that can keep the party going or literally result in a lost sale.

If there were one thing I’d like you to take away from this article it would be that you go back to your team and talk about and revise your error messaging, and then let me know what the results are. My prediction is that writing hero-worthy error messages will result in improvement and lift across your sign-up, sales, and data gathering processes.

In this talk at The Future of Web Apps London, Aza Raskin talks about the future of browsers. He discusses …

1. YOU-Centric browsing
2. How browsers will manage your identity
3. Browsers with native natural language processing
4. Built-in payments in browsers

By the way, hope you can join us at …