Thanks to everyone who took time to enter our Vimeo competition. We had a lot of fun watching the videos and seeing what you thought the Future of Web Design holds. After much deliberation, it was close, we all agreed that Tim Lum is the worthy winner of the free conference pass to next weeks Future of Web Design New York.

We would also like to give a special mention to Adam Soffer for his cool guitar and vocal entry.

Tim – please email keir[at]carsonified.com and I’ll let you know how you can collect your free conference pass. I hope you can make it.

The Video – The Future of Web Design is Creativity

Watch the video directly on Vimeo

Over the last couple of weeks we asked a number of speakers and workshop presenters from the upcoming Future of Web Design New York conference a few questions about their particular area of web design. We covered everything from WordPress, typography, jQuery, content strategy, HTML5, CSS3, Dribble and inspiration. If you missed one or need a recap here are the links:

• Elliot Jay Stocks on WordPress for Designers
• Dan Rubin on Web Typography
• Karl Swedberg on jQuery
• Steve Smith on HTML5 and CSS3
• Dan Cederholm on Bulletproof Web Design, CSS3 and Dribbble
• Mike Kus on 3 Dimensional Web Design
• Kristina Halvorson on Content Strategy for the Web

Kristina Halvorson is the founder and president of Brain Traffic, a nationally-renowned agency specializing in content strategy and writing for websites. She regularly speaks to audiences around the world about how to deliver useful and usable content online. In this interview Kristina discusses her new book “Content Strategy for the Web“, the prevalence of short form content and the three biggest online content mistakes and how to avoid them.

Editor’s Note: Kristina will be taking part in a panel discussion “The Long and Short of It” chaired by Liz Danzico at The Future of Web Design New York on November 16-17 2009. Conference passes are still available, buy your ticket online now.

For those who may not have come across the term, what is “content strategy” and what is its relation to web design?

Content strategy for the Web plans for the creation, delivery, and governance of content online. Basically, its tools and processes help you get your content right the first time – for your business and your users -and keep it awesome over time.

Web design is critically important for shaping users’ perceptions of your brand, products, and services. However, they don’t come to your website for its great design; they come for the content. Design and content have to work together to ensure one is complementing the other… so they’re working together to provide a satisfying, enjoyable experience for your users. Content strategy ensures that dialogue is taking place on an ongoing basis. If you’re not designing for the right content, your user experience suffers. Which means your company does, too.

Your book “Content Strategy for the Web” has recently hit the shelves, what can readers expect from it?

I wrote “Content Strategy for the Web” to spark an industry-wide conversation about the importance of content as a business asset, and how we can work together as practitioners to fix our crappy content. Generally speaking, content is a shared pain point across all web disciplines. It’s late. It’s formatted incorrectly. It’s poorly-written, out of context, not audience-focused, out-of-date, incorrect, inconsistent. I could go on. And on. So, the book is really meant for all web professionals, not just content folks. It articulates the problem, provides an overview of web content strategy as a viable practice, and walks the reader through the phases and processes.

The book is short (200 pages), and it’s written in a really conversational voice. Both choices were on purpose. People see content as super boring, which is why we’ve all made it somebody else’s problem for so long. I wanted to make it fun and easy for people to learn about web content strategy and how they can start applying it immediately to their existing project processes.

Content seems to be getting shorter and shorter. Is blogging dead?

I should note first off that Liz Danzico is moderating a panel about this (that I’m participating in) on Tuesday 17th November  at the “Future of Web Design New York“. So we’ll argue about this onstage. Heh.

On the one hand, yes. Short-form copy seems to be far more prevalent online than long-form copy. People are more and more comfortable throwing out ideas or observations on a one-off basis, rather than beginning (or participating in) conversations rather than trying to be the end-all, be-all source of information and insight to their audiences.

On the other hand, you can’t just consider user-generated content in this context. I make my living from consulting with organizations who are dealing with content about their products and services. Is long-form copy useful in many instances? Yes. Of course. Does it need to be formatted in a way that readers can scan it for the most important messages and information? Absolutely. So don’t confuse “long-form” with “unwieldy, long-ass pages no one wants to read.”

Is blogging dead? Nah. People still have plenty to say, and there’s not enough room on Twitter to say it all. Amazing conversations happen in blog post comments, as well. It’s still an extraordinarily viable medium.

What are the three biggest “web content” mistakes and how can we avoid them?

MISTAKE 1: Many organizations think that, once their content is live, they’re done with it. It’s launched. Finis. No way. You have to consider and plan for your content’s lifecycle: research, strategy, creation, delivery, measurement, maintenance, archival. If you don’t, your content will quickly either a) die on the vine, or b) become so massive and unwieldy that it’s not useful to anyone.

HOW TO AVOID: Before you publish, ask a content strategist to help answer these questions:

• What content do we have now?
• What content have we agreed we need?
• Who’s going to create that content?
• Who’s going to review and approve it?
• How often will it be reviewed and updated?
• When and why will it be changed?

MISTAKE 2: Web professionals also tend to see content as “just copywriting,” which means they don’t allocate nearly enough time for realistically dealing with it. If you’re a web writer, copywriting is only a part of your job. You have to audit source materials – including current web content. Inventory content requirements in both IA and technical documentation. Create your content so it adheres to web writing best practices (readability, structure, voice/tone, and so on). You have to deftly include keywords and craft awesome metadata so people can find your content.

HOW TO AVOID: Engage a content strategist at the beginning of every project so s/he can make an achievable content plan that takes reality into consideration. Reality is always good.

MISTAKE 3: Most web project teams think content is something that’s informed by project strategy… but truly, it can sometimes be the other way around. You can’t just assume your content requirements (as defined early in the process) will just magically be met. There are dozens of factors that have serious impact on content, both externally (competitors, user research, governmental regulations) and internally (resources, skill sets, restrictions and requirements, politics, ever-changing requests). If you don’t consider those factors in your research and analysis phases, they’re going to come back and make your life a living hell. Which everyone can relate to.

HOW TO AVOID: Get a content strategist to take responsibility for that research and analysis. Are you seeing a pattern?

What do you think is the Future of Web Design?

I think we’ll see a return to flashy “enter our site” splash pages, as well as the widespread use of animated .gifs. Oh, and black. Lots and lots of black.

In this video from Stack Overflow Dev Days London, Jon Skeet (Stack Overflow’s most reputed user and Google engineer) and his sidekick “Tony the Pony” deliver a fun and entertaining session titled “Humanity: Epic FAIL”.

In this 30 minute talk Jon looks at how humanity hasn’t made life easy for developers and questions the rationale (or lack of) behind timezones, string manipulation, dates and more.

A full transcript is available complete with slides on Jon’s personal site.

Note: The sound quality at the beginning of the video is not the best but does improve a few minutes in.

You can also view the video directly on Vimeo.

Carsonified has teamed up with Vimeo to offer one lucky web designer a FREE conference pass to next weeks Future of Web Design conference in New York. To enter all you have to do is record a maximum of 30 seconds worth of video explaining what you think “the future of web design” is and then add it to the competition group.

Our favourite entry will win a free conference pass to conference on November 17th in New York City. Check out the Vimeo blog post for full details.

Today we fire five questions at Mike Kus. Mike is the designer at Carsonified and occasionally blogs here on Think Vitamin. He is responsible for the design of this site, Carsonified’s main site, events.carsonified.com as well as the much praised Stack Overflow Dev Days site.

Note: Mike will be presenting at the upcoming Future of Web Design New York conference on November 17. Conference day passes are still available.

At last year’s Future of Web Design New York you talked about the loss of art in design (view the video). Do you think things have changed in the last 12 months?

The main objective of that talk was to open people’s eyes up to the artistic possibilities of web design. Web design is massively driven by trend and it’s easy to fall into that. I feel there’s a “certain way of doing things” in the web design world and it’s nice to break away from that. For me web design is really no different from any other kind of 2D design and once you get your head into that space there are way more artistic and creative possibilities.

As far as “Have things changed in the last twelve months?” There are definitely some really great website designs and designers out there doing cool things but on the whole the web is still very much a web 2.0 world as far as aesthetic design is concerned… that’s not necessarily wrong, I just find it boring.

Where do you find inspiration for your work?

I mainly look for inspiration on the web, books and magazines. I use sites like ffffound.com and imgspark.com as they tend to have less web design on them. I always stop into the book store and check out the books in the design section. What I really like is when inspiration finds you. I’m often out and about when I see something in a shop window or a poster plastered to a wall that will inspire a new site design

What web design trends in 2009 have you embraced and disliked?

It’s not that I dislike trends, I’ve followed loads myself – It’s just that if you follow the latest trends you’ve much less chance of your work standing out from the crowd. Following trends also means that you’re work will probably date more quickly as the trend goes out of fashion. One thing I do think is exciting about trends is the possibility of setting them.

Your upcoming Future of Web Design talk is called “3 Dimensional Thinking for Web Designers”, what do you mean by this?

When you’re designing for the web day in day out it’s easy to get consumed by the web and for your design work to become repetitive. So ”3 Dimensional Thing for Web Designers” is a talk about thinking outside that web space that we all spend so much time in to explore different ways of approaching web design in order to produce original and inspiring work.

What is the future of web design?

I’m hoping that the amazing designers out there that don’t do code – learn it. I think the future of web design needs to blur the boundaries with other 2D design mediums. HTML, CSS, JQuery etc are just tools which can be learnt. It frightens me (in a good way) to think of what would happen to web design if all the ultra talented 2D designers and illustrators who currently don’t use these tools picked them up and started using them. They should, because the web is the best platform for designers in the world!

Today’s entry  in our series of web design 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!