OK, you’ve got a great new site and planned out a fail-proof content strategy. You’re going to be posting all sorts of interesting and insightful blog posts and newsletters, and everyone is going to come to read it. Then they are going to hire you to do work. Right? If you build it they will come. Isn’t that the way it works?

Not really…

While we are big proponents of a strong content strategy, simply putting the content out there is not going to drive traffic from far and near to come visit your site. You have to spend the extra time promoting your content as well. Producing the content is the first big step, and it is definitely going to send you in the right direction, but promoting that great content is just as important.

Newsletter Promotion

One great piece of content that is actually a promotion tool as well is an email newsletter. Just to be clear, when I say “email newsletter,” I am referring to long-form content that is well-writen and is distributed via an attractive email that includes a graphic, an abstract of the article, and a link back to the site.

The email should alert subscribers and drive them to your site to read the content, not deliver it all straight to their inbox. If you just deliver the full article, then it just becomes content, not a promotion tool. However, by providing an abstract of the article, then drawing the readers back to your site, you not only are promoting the newsletter content that lives on your site, but it also makes the reader aware of the other content you have to offer.

I would also recommend watching the webinar by Dan Zarrella called “The Science of Email Marketing,” to learn more about the best times to send your newsletters, the best words to use in subject lines, as well as some real data about frequency and the importance of subscriber freshness.

Blog Digest

While on the topic of email marketing, you should also consider putting together a digest email that promotes your short-form content (think: blog posts) by sending out a weekly or bi-monthly (or whatever frequency is appropriate) email that includes a list of recent content with links back to the site.

A digest can serve as a reminder to the user of all the content you are continually publishing. A relative few people utilize RSS readers, as most would prefer to receive the updates right in their inbox, so we suggest giving them this option.

Promotion through social media

I hate to be one to jump on the bandwagon, but the fact of the matter is that social media is one of the best ways to promote your content, if you do it well. You must determine what social media platforms are appropriate for your target audience. Is Facebook the way to go, or are most of your users active in LinkedIn? Or maybe they’re early adaptors and you want to promote on the new Google+.

Odds are, it is a mixture of social media avenues, and a mixture of active and passive promotion. Active promotion refers to you actively posting your website content to your social media pages. Passive refers to enabling sharing options on your site to leverage the social networks of your readers.

What we do to promote our content through social media is not going to work for everyone, and what others do probably won’t work for us. But, I will use Newfangled as an example.

Whenever we send a newsletter or post a new blog post, we promote it by first tweeting about it. Usually Chris Butler will tweet it once it is published, and it will usually get a couple of re-tweets from others in the office.

The other social media avenue we utilize is LinkedIn. We started a group on LinkedIn which is fairly active, and we promote discussion in this group. Because of this small, engaged audience, it makes LinkedIn a good place for us to promote our content as well. Joining active, tightly-focused LinedIn groups can be very beneficial because it enables you to reach a very targeted audience. Some other niche groups I would recommend are the PJA Advertising: This Week in Digital Media group, or the HOW Mind Your Own Business group, just to name a couple.

Use your website

Sometimes the best promotion tool is your own website. A website that is focused on content strategy should have various avenues to promote the all-important content.

For example, we have the ability to publicize newsletters and blog posts in specified areas of our homepage so that they are seen as soon as a user hits the site.

Another way we publicize within the site is our related content sidebar widget. If you look over to the right on this page, you’ll see a sidebar widget at the very top that suggests other related articles that you may enjoy. This is a more passive promotion, but we have noticed that it can be quite affective.

Make it personal

Occasionally taking the time to send a uniquely crafted, regular old email to someone who you think would enjoy reading and benefit from the content can really stand out. Promotion doesn’t always have to be to the masses – it’s OK to promote content at an individual level.

These are just a few examples of how to promote your content. Clearly, there are other ways to promote your content and your brand, but remember, writing the content is only half the work. The other half is getting it into the hands of people who want to read it.

Web design is a multidisciplinary craft. So why do so many of us try and do everything ourselves?

Maybe it’s because we can. Our nature as web designers tells us to build things. We have the capability to handle just about every role in a web design project. If we don’t already have the expertise in a certain skill, then at least we have the self-motivation to teach ourselves and learn on the job. That’s how must of us got to where we are. But is doing it all the right approach?

When you look at the bigger picture, maybe it’s not. For me, my over-arching goals are to build an impressive portfolio of work, land bigger and better clients, and grow my web design business. It’s simply not feasible to achieve these goals by doing everything myself. The only way is to build a web design all-star team to help me do it.

So here are some tips for building a well-rounded team for producing amazing web design work. These are things I’ve come to learn over the years as I transitioned from being a freelancer to owner of a distributed web design agency.


The “one thing” concept

What separates the high-end web design shop from the do-it-all freelancer? It’s the well-rounded quality of every piece in their portfolio. From wireframes to PSDs to code, copywriting, and strategy: Every role is executed by a specialist in that particular craft.

The key is to assign the right person to the right role. So how do you get this right?

I call it the “one thing” concept. The idea is to figure out what your subcontractor’s core competency is, that one skill that they’re a rockstar at. This can be harder than it seems. Most web designers, particularly those who primarily work alone, tend to claim they’re a “jack of all trades”. It’s your job to see past this and reveal that one thing that they’re most experienced with.

One of the first questions I ask potential subcontractors is “Do you consider yourself primarily a designer or a developer?”. Many of us can do both, but 99% of the time, we’re better at one than the other. I want to find out which one it is, and hire them to handle only that part of the project.

Creating a working Website with a team can be a challenge

Determine your own role first

Now hold on a minute. Before you can start outsourcing, you must first determine which role you will personally fill yourself. Start by figuring out your one thing that you’re best at. Maybe it’s front-end HTML/CSS coding.

Perhaps you’re a talented visual designer, capable of producing beautiful PSDs. Or maybe your strength is in the pre-design planning stage, producing wireframes and information architecture diagrams that provide a good road map for production. It should be difficult to choose just one thing.

Keep in mind that since this will become a team effort, your role will likely include project management duties: Finding and hiring teammates, communicating project specs, client communication, etc. Be sure to budget your time accordingly!


Build your network early and often

Many freelancers and web shops are going with the distributed agency model these days. That is, your teammates work remotely from their own offices across the street or across the globe. If this is your direction, then it’s never too early to start building your network of remote workers.

Here are some ways to do that:

  • Build relationships with designers and developers on Twitter.
  • Seek out and follow creators of amazing work on Dribbble.
  • Follow and comment with those you find interesting on Forrst.
  • Post targeted ads on job boards and filter the responses to separate the quality from the noise.
  • Meet designers and developers at local meetups and conferences.
  • See something great on the web and get in touch with the creator.

The last one is my favorite. There are so many amazing things being created on the web every day. In the space in which my company operates, which is WordPress web design, I often come across a really cool plugin, an interesting theme or a well-written article. I’ll immediately reach out to the author to see if they’d be up for brief Skype chat to talk informally about their work and strike up a new relationship.

Later on, when a new project comes in and you’re looking for talent, it’s better to start knocking on the doors of those you already know than to scramble and start looking for someone new at the last minute. Build and nurture your network today and leverage it for your projects tomorrow.


Identifying talent & fit

How do you identify who is worth considering for a spot in your network?

Before you reach out to people, you have to know what you’re looking for. Here are things I value before I speak to someone:

  • A great portfolio, but particularly an informative portfolio. The work should look great, but I want to know exactly what the person’s role was in the project. Case studies are great for this.
  • A well written blog. This shows they’re passionate about their craft, enough to take the extra (often unpaid) time to write about it. This is also a good indication of their written communication skills.
  • Their industry presence. High profile work, published articles, speaking engagements, books. These are all good signs of a talented and dedicated professional. But be careful, these credentials can sometimes be deceptive.

Next, we need to determine if we’re a good fit. You can’t get a full read on these things until you actually work together, but there are some things you can look for in your first few conversations:

  • Professionalism and reliability. Can they reliably schedule and show up for your call/meeting? You’d be surprised how many people fail at this simple act of professionalism.
  • Collaborative fit. Take note of the types of questions they ask (shows they really want to understand and collaborate). See if their “one thing” compliments yours and the others in your network/team.
  • Logistics. Ask about their working hours and availability for meetings and progress updates. I’m generally open to working with anybody, but I prefer a timezone that is within 3 hours from me (North America). Just makes collaboration easier.

Great people do great things… together

When it’s time to take your web design business to the next level, it’s time to start teaming up with great people.

That’s the key to thinking big and doing amazing things in this collaborative industry we call web design.

Hopefully these ideas will help you form the basis for your network, which you can look to when it comes time to assemble a web design all-star team.

Pull the iPhone out of your pocket and look at the home screen. Likely, you’re seeing some well known brands on the web: Facebook, Flickr, and Google to name just a few. You’ll also see companies like Amazon, Target, and Walmart which sell a lot of products via the web.

Like you, these sites and companies know how to build an effective website using the latest and greatest web technologies. The iPhone’s Safari browser also supports HTML5 markup with CSS3 styling and is powered by a fast JavaScript engine. So why is there a proliferation of apps instead of web pages that can do the same thing?

Longtime A List Apart readers may remember the Put Your Content in My Pocket articles I wrote soon after the iPhone launched. Recently, I published a book that explains how to create products for the iPhone App Store. With this article, I’d like to share my experiences with both mobile web and software development to guide your future developments on the iPhone platform.

Apple <3 standards

From Apple’s point of view, iPhone OS and web technologies share equal footing. When you visit their developer site, the Safari Dev Center is prominently displayed. The iPhone gets all the press, but when you click on Safari Dev Center, there’s a ton of great information that explains how to use HTML, CSS, and JavaScript on an iPhone.

When you look back on your first experiences with the iPhone, one app stands above the others: The Safari web browser. Suddenly you were free from a mobile internet full of crappy CSS support or dumbed down presentation-like WAP. The iPhone’s real browser and the fact that it was in your pocket changed how you used the web.

Apple continues to invest heavily in the development of the WebKit browser engine used in Safari on the iPhone, Mac, and Windows. The result is a browser that excels in HTML5 and CSS3 support.

Apple also views HTML5 support as an important part of its marketing message for both consumers and developers.

Because it’s open source, the WebKit rendering engine also powers browsers for many other mobile platforms. If you’re surfing the web with a Blackberry, Android, or Symbian phone, you’ll find that your content looks just as good as it does on the iPhone. The only holdout is Microsoft’s Windows mobile platform which uses a browser based on the IE rendering engine.

With great HTML, CSS, and JavaScript support, developers are doing amazing things with the iPhone. Here are a few notable examples:

Pie Guy by Neven Mrgan

Pie Guy uses HTML5’s offline application cache so that it works correctly when you’re not connected to the internet, as well as CSS animations and transforms for the game’s effects. Neven also keeps track of developments in this area via the HTML5 Watch website.

Showtime by Nial Giacomelli and Benjamin Gordon

Showtime is a simple app that allows you to keep track of when your favorite TV shows are on. It uses a jQuery plugin by David Kaneda that provides many of the controls and effects that you see in standard iPhone applications.

Every Time Zone by Amy Hoy and Thomas Fuchs

Every Time Zone is a very simple, but effective, view of times throughout the world. The slider that lets you pick the time works very well on a touch screen. This web application looks particularly good on an iPad display.

With such great tools available and talented developers that know how to exploit them, the iPhone should be overflowing with web applications, right? Actually, the opposite is true: there are over 100,000 titles on iTunes and only a handful of popular applications have been created with web standards.

Apple has promoted both the App Store and web browser as ways for developers to get their creations into the hands of customers. They even gave the web a year-long head start before beginning to sell apps in the store. Clearly there’s more at play here: what attracts developers to iTunes instead of the web?

Going native

Before looking at the motivations of the move toward iTunes, we need some definitions. Developers have come to categorize the two iPhone development technologies as “native” and “web.” Web apps use HTML, CSS, and JavaScript that loads in Safari. All the examples above are “web apps.”

“Native apps” are created using the Xcode development environment in a language called Objective-C. These are the same tools used to create Apple’s own built-in apps like Mail, iPod, and even Safari itself.

Creating native apps is much different than the process you use to build web apps. Luckily, many of the underlying concepts are the same. Many web developers find that making the switch isn’t that hard:

  • Like JavaScript, the Objective-C language is a descendent of C. In addition to sharing similar syntax, both languages are object oriented. If you’re comfortable with JavaScript, you’ll feel equally at ease with Objective-C.
  • Native and web apps share some familiar design elements. On the web, you’re used to breaking an application’s functionality into pages, creating a series of <div> elements to organize the content on that page, and using XMLHttpRequest to update that content. With Cocoa Touch, “view controllers” are used like pages, “views” provide the building blocks for your content, and NSURLConnection objects act as your link to the internet.
  • Frameworks handle much of the hard work. Just as you rely on jQuery or Prototype when working in JavaScript, you’ll find yourself doing the same thing with Cocoa Touch when you work in Objective-C. Both languages also benefit from a vibrant developer community that is happy to share development tricks and source code.
  • If you’re a Flash developer who’s frustrated because there’s no way to play your creations on the iPhone, you’ll be happy to learn that ActionScript, like its predecessor JavaScript, shares the same lineage with C. The mechanisms for creating animation and other visual effects are different on the iPhone, but the concepts are the same. The recently announced Sparrow framework can help ease this transition, especially if you’re using Flash to develop games. It’s also a great example of the kinds of contributions made by your fellow iPhone developers.

To give you an idea of how similar things are, take a look at this snippet of Javascript code:

 var beAwesome = true; var myString = "chocklock"; if (beAwesome) { myString = myString.toUpperCase(); } 

Now, compare it to the same thing in Objective-C:

 BOOL beAwesome = YES; NSString *myString = @"chocklock"; if (beAwesome) { myString = [myString uppercaseString]; } 

In Objective-C, the variable definitions are different and function calls are replaced with stuff in square brackets. In a larger context, these are minor details. You can still see the logic that to be awesome, you just convert your string to uppercase letters.

One of the goals for my book about iPhone app development was to make this new environment accessible to people coming from other backgrounds. I dedicated an entire chapter of the book to explaining those square brackets in familiar terms.

The motivation

Learning how to use new development tools will take some effort. So why should developers go through this hassle when they could just bank on the web skills they already have?

Some of the motivation is purely selfish: Native applications give the developer more control over the mobile environment. The other incentive is altruistic: a native app is generally easier for the rest of us to use.

  • Speed: JavaScript performance has increased dramatically in the past few years, but as an interpreted language, it will never be as fast as compiled code that runs directly on the processor. In a mobile environment where processors run slower to conserve power, every clock cycle counts.
  • Data Management: Cocoa Touch has several mechanisms that make it easy to store your application’s data. This is important because caching information retrieved from a network can greatly improve a mobile application’s ease of use. The persistent data storage in HTML5 provides simple key/value access or raw database access using SQL. Core Data on the iPhone provides a much more sophisticated system where relationships between your data objects are managed automatically.
  • Animation: One of the hallmarks of both web and native iPhone applications is animation that reinforces a user’s actions. CSS3 provides ways to animate page elements, but much more sophisticated effects are possible when you access the underlying Core Animation framework with native code.
  • Resources: Mobile developers never have enough memory, network speed, or CPU power. These limited resources are much harder to control when they’re being managed by JavaScript or the browser. It’s easier for native applications to detect these situations and adapt the user experience accordingly.
  • Usability: iPhone users feel most comfortable when they’re using the standard controls they’ve become accustomed to in Apple’s built-in apps. HTML abstracts controls like <input> and <textarea> so they can work in many different environments. JavaScript frameworks, like jQTouch mentioned above, do a fantastic job extending these basic control mechanisms, but an iPhone user will still notice that they feel a bit different than platform-native controls.
  • Productivity: From the developer’s point of view, it’s typically easier to build complex user interfaces using Cocoa Touch: The frameworks do much of the heavy lifting and allow you to focus on the problem rather than its implementation. With the limited amount of screen real estate on a mobile device, a simple form on the desktop often turns into multiple views whose state needs to be managed by your application. Apple developed Cocoa Touch specifically to deal with this situation.
  • Integration: An iPhone has many capabilities that are beyond the reach of the web browser. Some simple examples are the user’s contacts, the photo library, voice recording, and device movement. Cocoa Touch frameworks are the only way to access this information.

As the web has matured, its applications have naturally split into two parts: The front end and the back end. Back end services manage the user’s data and are typically powered by racks of powerful servers. The front end of a web app takes this information and presents it in the browser: HTML, CSS, and JavaScript are all about user experience. In most cases, this front end is a fairly thin layer on top of the much larger back end.

With iPhone apps, this thin presentation layer is replaced. The access to REST-based APIs implemented by the back end is exactly the same. Yes, you’re duplicating the efforts of any front end development you’ve already done for the browser, but this extra effort comes with the benefits mentioned above.

In practice

There are as many approaches to development as there are apps in iTunes. Every product and the people who created it are different. That being said, the evolution of a product from the web to the iPhone typically goes something like this:

  1. Design the product. No matter what platform you’re targeting: Be it the web or a smartphone, your first step is always to think about the problem you’re trying to solve. Figure out what your users want before you get anywhere near implementation specifics.
  2. Implement the product using web standards. Use the tools that you’re most familiar with. This way, you also end up with a solution that has the widest reach and can be viewed on any platform with a standards-compliant browser. Think about using CSS and Javascript that optimizes the experience for users on mobile devices (including the iPhone, Android, and BlackBerry).

    As a starting point, check out Put Your Content in my Pocket and Put Your Content in my Pocket, Part II.

    As you implement this product, pay close attention to how the front end user interface communicates with the back end services. Try to use a REST API that third parties and eventually your own more platform-specific solutions can use.

  3. Launch the product. Get your work into the hands of users as soon as possible. As people begin to use your creation, they’ll start giving you feedback. This starts the virtuous cycle of iteration and refinement.
  4. Run into problems. Eventually, you’ll encounter situations that can’t be solved with web standards. Maybe it’s something like feature requests from users who want to upload photos or access their list of contacts. Some users will explicitly ask for an iPhone app because so many of their other favorite sites have customized solutions.

    There can also be internal pressures from your own designers and developers. They’ll find that navigation and data management are more difficult as the scope of the application increases. When you start to feel like you’re reinventing the wheel, sometimes it’s best just to use the wheel that Apple’s already built.

  5. Translate product design into an iPhone app. You’ll find that many of the decisions you made while implementing web pages were done in the name of platform neutrality. As you enter the iPhone’s platform-specific world, you’ll want to re-evaluate some decisions. Layouts and user interaction should be tailored to make them feel at home in a native app.
  6. Launch product on iTunes. After developing the app for the iPhone, you’ll now have an important new way for users to find your content or service. Which leads to the next section…

Takin’ care of business

The other attraction for developers looking at native apps is simple: There are over 100 million customers in iTunes who can buy your app with a single button tap. They can also pay for your content with the same ease. If you’re running a business, there are some distinct advantages to building apps in addition to your website.

Brand marketing

For brand marketers, the App Store is another important channel to get a product or service in front of millions of eyeballs. The big brands mentioned at the beginning of this article continue to have a strong web presence: their iPhone app supplements their position.

Many of these companies look at a native iPhone app as a cheap form of advertising: 30 seconds during primetime can cost upwards of half a million dollars. An iPhone app will cost much less and when a marketer sees their icon appear in iTunes, it’s better than Christmas morning.

Smaller developers can also use the App Store to find new audiences and fine tune the experience for current users. You’ve already done the hard work with your back end, so the effort and expenses to build a new front end are usually minimal.

Media matters

Many websites have found it difficult to charge for access to content. The root of this problem is a lack of a convenient payment mechanism for the end user. There’s also a history of free access to information on the web. As a result, many sites rely on advertising to pay the bills.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, iTunes offers you a simple way to charge users for content. It can be a one-time payment via app purchase, or a recurring payment (such as a subscription) with in-app purchases. In either case, a customer only has to tap on a buy button and enter their password. Apple handles all the payment processing and accounting. You just wait for bank deposits from around the world at the end of each month.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, With the recent release and popularity of the iPad, publishers both large and small are finding it profitable to repurpose content for the iPhone OS. Wired magazine’s recent debut on the App Store generated 24,000 sales in the first 24 hours. At five dollars a copy, it doesn’t take a financial genius to realize that there is some serious consumer demand for innovative content delivered via iTunes.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, If you think about it a little further, it makes complete sense from a customer’s point of view. You’re used to buying music and video from iTunes. Now with iBookstore, you can get mainstream titles delivered electronically. Adding your own content to this mix makes sense for you and your customers.

Proceed with caution

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, Getting your content into the App Store also includes a step that you’re probably not used to in the wilds of the web: Third-party review. Anything you submit to iTunes will be checked and can be rejected at Apple’s discretion. Every app you see in iTunes has gone through this process.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, The iTunes review tends to err on the side of caution: At one point political cartoons were not allowed because they ridiculed a public figure. Apple has since eased that restriction, but there are still limits that you need to be aware of. These conditions, and other nuances of iTunes, are explored further in my book.

If your content contains nudity or any of the other areas that are disallowed, you’ve just wasted your time reading this article. Things aren’t all bad though, because you can still use Safari to circumvent the entire curatorial process.

I’m going to make a bold prediction. Long after you and I are gone, HTML will still be around. Not just in billions of archived pages from our era, but as a living, breathing entity. Too much effort, energy, and investment has gone into developing the web’s tools, protocols, and platforms for it to be abandoned lightly, if indeed at all.

Let’s stop to consider our responsibility. By an accident of history, we are associated with the development of an important tool our civilization will use to communicate for decades to come. So, when we turn our minds, idly or in earnest, to improving HTML, we must understand just how far-reaching the ramifications of today’s decisions may be.

HTML 5, the W3C’s recently redoubled effort to shape the next generation of HTML, has, over the last year or so, taken on considerable momentum. It is an enormous project, covering not simply the structure of HTML, but also parsing models, error-handling models, the DOM, algorithms for resource fetching, media content, 2D drawing, data templating, security models, page loading models, client-side data storage, and more.

There are also revisions to the structure, syntax, and semantics of HTML, some of which Lachlan Hunt covered in “A Preview of HTML 5.”

But for this article, let’s turn solely to the semantics of HTML. It’s something I’ve been interested in for many years, and something which I believe is fundamentally important to the future of HTML.

The BBC recently announced that they would drop the hCalendar microformat from their program listings, due to accessibility and usability concerns with the abbr design pattern. This demonstrates that we have, beyond any doubt, pushed the semantic capability of HTML far past what was ever intended, and indeed, what is reasonably possible with the language. We have simply run out of HTML elements and attributes with which to mark up more richly semantic documents. If we continue to be clever with the existing constructs of HTML, more problems such as this will arise. But HTML suffers from a fundamental defect as a semantic markup language—its semantics are fixed, not extensible.

This is not simply a theoretical problem. Hundreds of thousands of developers use the class and id attributes of HTML to create more richly semantic markup. (They also use them as “hooks” for CSS styling, but that’s another matter.) Almost invariably, those developers use ad hoc vocabularies—that is, values they have made up, rather than values taken from existing schemas. It’s pseudo semantic markup at best.

Many pages around the web use microformats to add more structured semantics than available in HTML’s impoverished set of elements and attributes. In this case, the values used for the class attribute come from agreed-upon vocabularies, sometimes adopted from other standards, such as vCard, sometimes from newly minted vocabularies where no solid pre-existing standard exists (as is the case for hReview).

Extensible semantics

There is a very real problem that needs to be solved here. We need mechanisms in HTML that clearly and unambiguously enable developers to add richer, more meaningful semantics—not pseudo semantics—to their markup. This is perhaps the single most pressing goal for the HTML 5 project.

But it’s not as simple as coming up with a mechanism to create richer semantics in HTML content: there are significant constraints on any solution. Perhaps the biggest one is backward compatibility. The solution can’t break the hundreds of millions of browsing devices in use today, which will continue to be used for years to come. Any solution that isn’t backward compatible won’t be widely adopted by developers for fear of excluding readers. It will quickly wither on the vine.

The solution must be forward compatible as well. Not in the sense that it must work in future browsers—that’s the responsibility of browser developers—but it must be extensible. We can’t expect any single solution we develop right now to solve all imaginable and unimaginable future semantic needs. We can develop a solution that can be extended to help meet future needs as they arise.

These two constraints in tandem, present a huge challenge. But in the context of a language whose major iterations arrive a decade apart, and whose importance as a global platform for communication is paramount, this is a challenge that must be solved.

So, how is HTML 5 addressing this issue? HTML 5 introduces a number of new elements. Some of these are what I’ve termed “structural”—section, nav, aside, header, and footer. The dialog element is a kind of content element, akin to blockquote. There are also a number of data elements, such as meter, which “represents a scalar measurement within a known range, or a fractional value; for example disk usage,” and the time element, which represents a date and/or a time.

While these elements might be useful, and seem to have generated some interest, do they really solve the problem we’ve identified, particularly within the twin constraints of forward and backward compatibility?

Let’s consider each constraint.

Backward compatibility

How do current browsers handle these new elements, such as section? Well, the most recent versions of Safari, Opera, Mozilla, and even IE7 will all render a page as follows.

<h1>Top Level Heading</h1> <section> <h1>Second Level Heading</h1> <p>this is text in a section element</p> <section> <h1>Third Level Heading</h1> </section> </section> 

It looks like an excellent start. But when we try styling, for example, section elements with CSS that looks like this:

section {color: red}

…most of the above-mentioned browsers manage to style the element, but IE7 (and so presumably 6) do not.

So we have a serious backward compatibility issue with 75% of browsers currently in use. Given the half-life of Internet Explorer, we can predict that most users will be using IE6 or IE7 even several years from now.

If HTML 5 introduces these new elements, what is the likelihood they’ll be implemented by the vast majority of developers—given the knowledge that they’re essentially incompatible with the majority of browsers in use?

Unfortunately, if you are looking for alternative solutions to the CSS problem, putting class attributes on your section elements and then trying to style them using the class value won’t work in IE. Perhaps there is some kind of workaround out there, but unless there is, that looks like a deal breaker right there.

Let’s turn to forward compatibility, the second constraint.

Forward compatibility

We’ll start by posing the question: “why are we inventing these new elements?” A reasonable answer would be: “because HTML lacks semantic richness, and by adding these elements, we increase the semantic richness of HTML—that can’t be bad, can it?”

By adding these elements, we are addressing the need for greater semantic capability in HTML, but only within a narrow scope. No matter how many elements we bolt on, we will always think of more semantic goodness to add to HTML. And so, having added as many new elements as we like, we still won’t have solved the problem. We don’t need to add specific terms to the vocabulary of HTML, we need to add a mechanism that allows semantic richness to be added to a document as required. In technical terms, we need to make HTML extensible. HTML 5 proposes no mechanism for extensibility.

HTML 5, therefore, implements a feature that breaks a sizable percentage of current browsers, and doesn’t really allow us to add richer semantics to the language at all.

Several questions remain about the new elements. Where have these new element names come from? How was it decided that there should be a navigation element, and that it should be called “nav”? Why should the same term apply to page-level, site-level, and meta-site-level navigation?

Why not adopt an existing vocabulary, such as Docbook? Its document structure vocabulary is far richer and it’s been developed by publishing experts over many years. This is not an argument in favor of Docbook, specifically: the point is that the extremely important task of providing a mechanism for semantic richness in HTML is being approached in an ad hoc way, paying apparently little attention to best practices in related work going back 30 years or more. (The original work on GML began in the early 1970s.)

Some thoughts on a solution

So, having been critical of current efforts, do I have any practical suggestions on how to solve this problem? Well, I have the start of one.

If adding elements to HTML is out of the question, at least within the parameters of this discussion, attributes are the other logical area of HTML to concentrate on. After all, for nearly a decade, we’ve been using class and id attributes as mechanisms to extend the semantics of HTML. A great many developers are familiar and comfortable with this. The microformats project demonstrated that the existing attributes of HTML are not sufficient, as a generalized mechanism, to extend the semantics of HTML. So, if we are to use attributes to help solve this problem, we need to come up with one or more new attributes. Before we get into the mechanics of how that might work, it’s only fair to subject this suggestion to the same requirements we have for the new elements of HTML 5. Most importantly, is introducing new attributes to HTML backward compatible? And if so, does it provide a workable mechanism for semantic extensibility in HTML?

Let’s invent a new attribute. I’ll call it “structure,” but the particular name isn’t important. We can use it like this:

<div structure="header">

Let’s see how our browsers fare with this.

Of course, all our browsers will style this element with CSS.

div {color: red}

But how about this?

div[structure] {font-weight: bold}

In fact, almost all browsers, including IE7, style the div with an attribute of structure, even if there is no such thing as the structure attribute! Sadly, our luck runs out there, as IE6 does not. But we can use the attribute in HTML and have all existing browsers recognize it. We can even use CSS to style our HTML using the attribute in all modern browsers. And, if we want a workaround for older browsers, we can add a class value to the element for styling. Compare this with the HTML 5 solution, which adds new elements that cannot be styled in Internet Explorer 6 or 7 and you’ll see that this is definitely a more backward-compatible solution.

Extensibility through attributes

Instead of new elements, HTML 5 should adopt a number of new attributes. Each of these attributes would relate to a category or type of semantics. For example, as I’ve detailed in another article, HTML includes structural semantics, rhetorical semantics, role semantics (adopted from XHTML), and other classes or categories of semantics.

These new attributes could then be used much as the class attribute is used: to attach to an element semantics that describe the nature of the element, or to add metadata about the element.

This is not dissimilar to the role attribute of XHTML, but rather than having a single attribute “bucket” for all element semantics, we should identify the different types of semantics for an element, and separate them out.

For example, the XHTML role attribute works like this:

<ul role="navigation sitemap"> <li href="downloads">Downloads</li> <li href="docs">Documentation</li> <li href="news">News</li> </ul>

The values of the role attribute are a space-separated list of words from the default vocabulary, or from a defined vocabulary.

Why not simply adopt the role attribute as-is? Well, there are other kinds of semantics for which the term role doesn’t apply. For example:

<p rhetoric="irony">He’s a fantastic person.</p>

This demonstrates a theoretical type of semantics—“rhetoric,” which could be used to markup the rhetorical nature of a document. This element clearly doesn’t play the role of irony in the document. Rather, the contents of the element are ironic.

Here is another example. It’s increasingly obvious that HTML lacks a way to attach a machine readable version of a humanly readable value, e.g., a date. This is at the heart of the problem the BBC has with the hCalendar microformat that we referred to earlier. While <span role="2009-05-01">May Day next year</span> really doesn’t make sense, something along the lines of <span equivalent="2009-05-01">May Day next year</span> would.

Again, whether we use the specific term “equivalent” or some other term for this kind of semantic attribute is not the issue. What’s important to note is that it’s not as simple as using either the class attribute or the role attribute as a one-size-fits-all bucket to hold semantic information. For a properly extensible solution that provides backward compatibility and sufficient flexibility, a solution along these lines looks worth investigating.

I titled this section “some thoughts on a solution” because a significant amount of work needs to be done to really develop a workable solution. Open questions include the following.

  • How many distinct semantic attributes should there be? Should these categories be extensible, and if so, how?
  • How are vocabularies determined?
  • Do we simply invent the terms we want, in much the same way that developers have been using class values, or should the possible values all be determined by a standardized specification? Or should there be a mechanism for inventing (and hopefully sharing) vocabularies, using some kind of profile?
  • If we have a conflict between two vocabularies, such that two identical terms are defined by two different vocabularies, how is this resolved?
  • Do we need a form of name spacing, or does some other mechanism exist?

Rather than rushing to answer these questions, I’m posing them to highlight the issues that need to be addressed, and to start a dialog. The ramifications and reach of decisions made in HTML 5 are too great for decisions to be made in the absence of at least some input from those highly knowledgeable about linguistics, semantics, semiotics, and related fields.

Hopefully, if nothing else, then it’s clear that simply “making up new elements” isn’t a solution to how to increase the semantic capacity of HTML.

Let’s not rush into these decisions lightly—after all, with climate change we’ve saddled our grandkids with enough trouble as it is. Let’s at least leave them the best possible HTML we can.

Whether or not a project can accommodate new HTML5 and CSS3 features, we still turn to JavaScript to provide users with rich and meaningful experiences, including inline form validation, error handling and live page formatting. The key difference between JavaScript and traditional HTML and CSS is that the former is a programming language. Thus, JavaScript is capable of powerful results and tricky logic but is less friendly to sloppy coding and human error. This latter characteristic leads me to my main advice about using JavaScript on your new website.

Enhance, Enhance

The first rule in applying JavaScript to your website is to test failures. What happens in a browser that has JavaScript disabled? What happens if you make a request to a geo-location API that the user declines? If either of these paths make all or a portion of your website inaccessible or inoperable, then this solution would be unacceptable, and an error- and interruption-free approach would need to be found. Much like how we currently approach CSS3, JavaScript should be used as a tool to enhance the user’s experience, not as a band-aid for quick results. If you rely on it to deliver the experience, then you are setting your website up for failure.

This might make it seem like JavaScript is not worthwhile to the design process, and indeed in some situations it may not be. One of the dangers of using any dynamic or script-based solution is that they can be so much fun to implement. Designers often get caught up in how cool these tools are and get distracted from considering whether everyone would have the same experience.

On the other hand, for adding meaningful functionality to a design, such as those mentioned earlier, JavaScript can have a truly magical effect. One of the more common examples of good JavaScript usage is inline form validation. We have all made an error in a Web form only to find out after having hit the “Submit” button, forcing us to go back and re-enter the information; in many cases, sensitive information such as passwords and credit card numbers needs to be re-entered as well. Alerting users to mistakes in real time makes online forms significantly less frustrating. Of course, we have a lot of tools and libraries out there to help us with this, as well as other great interactive features.

InlineValidation1 in The Neglected Necessities Of Design

Keeping It Tidy

With all of these JavaScript tools at our disposal, going overboard and using as many as we can is easy, especially if we can justify their presence as enhancing the user experience. But keep in mind that with each new JavaScript library, plug-in or solution, we are adding files and lines of code to our pages that users have to download. With each bit of functionality, we have a trade-off with performance.

We can do some things to curb the performance trade-off. The most common way to optimize JavaScript is to concatenate and minify the files. Keeping multiple JavaScripts in a single optimized file reduces the number of calls that the website has to make to the server. For high-traffic solutions and clients who demand peak performance, this simple trick can save a lot of money. Of course, at a certain point, a single JavaScript file becomes too long and therefore a hindrance to the website and a nightmare to maintain.

Beyond optimization, there are techniques we can follow to keep JavaScript from weighing us down. One technique is parallel script loading. Loading your scripts in parallel will reduce blocks on the browser and save loading time, especially in older browsers that load linked resources one at a time. A great resource for this is the Head JS project.

Aside from parallel loading, developers have been taking advantage of selective loading techniques for years. This is often referred to as lazy loading, where you call external JavaScript files only where you need them. This is another resource-saving technique.

Pulling It All Together

Giving your website a clean and concise structure opens the door to myriad opportunities. Search engines will have an easier time indexing your content; screen readers and accessibility devices are less likely to be confused by the structure of your website; users on cellular networks can download your content faster; and designers will be able to expand with the latest and greatest techniques.

Let’s be honest, though. Putting a website together the right way does take more time and money up front. The whole team has to take extra caution and spend more time in the planning stages, making sure that everything is considered with the future in mind. Before a website is implemented and introduced to users, it needs to go through a scrubbing process that might not yield any changes in the front end. Finally, project stakeholders are forced to spend time thinking about scenarios (which may or may not happen) in which the natural order of their website is disrupted.

Many of these reasons have led us to implement less-than-ideal solutions in the past for the sake of meeting deadlines and budgets. But how often have we been forced to go back and fix something that wasn’t done correctly the first time? How much money are companies spending to get rid of bad practices that seemed harmless at the time but have left their websites expensive to update and maintain? Building rock-solid code and taking advantage of the power of modularity enables our websites to grow and saves much more than it costs by negating the need for another redesign just two years later.

It is for all of these reasons that the core necessities of a good website have been neglected for far too long.

When it comes to conservative code, CSS files usually get the short end of the stick. Grabbing all of the presentation and layout information from the HTML and dumping it in the CSS has finally become a standard process for most designers. (If it isn’t yet, make it yours.) While this is the exact purpose of a style sheet, there are plenty of methods by which a designer can make sure that the CSS that loads for every page is, like the HTML, as clean and concise as possible.

CSS as a Process

For many designers, the process of building a style sheet consists of starting with the outer containers of the HTML structure and working their way in, aligning and styling as they go. How many times have you sized and centered your #wrapper element, and then moved onto aligning the logo and primary navigation in the <header>, and then continued your way down the page? This process certainly works, but there is a much better and quicker way to handle CSS. Much as we did with the HTML, we can recycle code and use a modular approach in a way that makes more sense and takes less time.

Instead of designing a style sheet with the HTML in mind, we should carry over our mindset from the rest of the design process, putting the user first. In our new and improved CSS process, let’s start with the most important and prevalent elements of our design. These will almost always be the content. The whole point of delivering clean and semantic code is to ensure that no matter what the screen, device or context of our visitor, they will have access to the fantastic message that our website is trying to convey. For this reason, we’ll start the primary portion of our style sheet with the typography.

01 body, select, input, textarea {
02     font: normal .825em/1.25em Tahoma, Geneva, sans-serif;
03     color: #353838;
04 }
05 h1, h2, h3, h4 {
06   font-family: Georgia, "Times New Roman", Times, serif;
07   color: #202020;
08 }
09 h1, h2 {
10   font-size: 1.875em;
11 }
12 h2 {
13   text-align: center;
14   font-weight: bold;
15   line-height: 1.5em;
16   border-bottom: 4px solid #e5e5e5;
17   -webkit-box-shadow: 0 1px 0 #b2c6e1;
18    -moz-box-shadow: 0 1px 0 #b2c6e1;
19       box-shadow: 0 1px 0 #b2c6e1;
20   margin: 1em 1.25em;
21 }
22 h3, h4 {
23   font-size: 1.25em;
24   margin: .75em;
25 }

When it comes to text, we start with the most global rules and get more specific as we move down the style sheet, a pattern that should be repeated for other portions of the website.

Because typography is usually the most heavily used element on a website, it stands to reason that we should define our core font rules on a high-level element, such as the <body> element. If we want different typographic rules for headlines or certain page elements, we can declare them just after the default settings. If you have trouble figuring out which typographic declarations to add to your high-level selector and which to use as overrides, simply mark them all up and then identify which are the most common. Apply the most common declarations to the high-level element, and build specificity as you go forward.

With the typography set and the HTML structure solid, we have a website that could technically be delivered as a functional product to any device or browser. Anything we do from this point on should be to enhance the user’s experience.

For many designers, enhancing the experience starts with coloring the page. After typography, the color palette is arguably the element that most affects a website, and therefore should be next in the style sheet. I find that a good color palette is ingrained in every level of a design, and that breaking colors out into a separate section of the CSS leads to a lot of extra lines of code and a lot of selectors that are used solely for color but that have twins throughout the style sheet serving other purposes. I am not a fan of branching a single selector into different bits for the sake of lining up declarations. However, neither method is inherently good or bad. Find a system that works best for you, and maintain consistency across the project.

Finally, we get to the structure and layout of the website. With wonderful typography and eye-catching colors sprinkled throughout our website, we can line things up the way they should be and in a way that makes the website easy to read, navigate and interact with. We can continue with the method we adopted for the typography, putting the general rules first and then getting into the details later on. One thing that will hold us back is the lack of a hierarchy in HTML for anything other than typography.

Looking at the elements included in HTML4, the specification was clearly not prepared to support the complex layouts that designers and clients demand today. We had six levels of importance for headlines, but only abstract elements like <div> and <span> for structure, with no way to indicate hierarchy. HTML5 has gotten us closer, but we aren’t there yet. To make up for this, let’s look to the global class structure that we started implementing in our HTML earlier. We used the .contentContainer class to define the areas of our website that will be visual containers for our content. This class gives us the power to style a big portion of our website quickly and allows us to easily add new containers later without having to force them to fit the style of our website using CSS.

1 header, footer, .contentContainer {
2     background: #f1f1f1;
3     -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
4       -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
5         box-shadow: 0 0 15px rgba(0, 0, 0, 0.25);
6     border-radius: 3px;
7 }

Reduce, Reuse, Recycle

Much like with HTML, style sheets can get pretty funky when we get to the point of adding and removing individual declarations in order to get an element to look or behave the way we want. The gracious way in which Web browsers handle CSS rules that they don’t understand or don’t need makes this practice rather common, thus bloating our style sheets. For this reason, go back through the style sheet at the end of the day and remove any rules that no longer serve a purpose. The task is a painstaking one, but as with most such tasks, plenty of tools exist to help us along.

Another task that can save size and space is to group selectors that have the same set of style declarations. From a technical standpoint, it makes sense to create a group of selectors whenever two or more share at least one declaration. I love to take advantage of grouping selectors by using something I call CSS effects. With some of the new CSS3 declarations, I’ve found that I can move the layer styles that I copy and paste in Photoshop right into my style sheets.

1 .mainBox, .secondaryBox, .footerBox {
2     background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
3     background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0)));
4     background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
5     background-image: -o-linear-gradient(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0));
6     background-image: -ms-linear-gradient(rgba(0, 0, 0, 0.3)), to(rgba(0, 0, 0, 0));
7     background-repeat: no-repeat;
8     border: 5px solid rgba(0, 0, 0, 0.2);
9 }

We can apply this declaration stack to any element on our page to achieve a gradient. The use of RGBa allows us to retain the background colors of individual elements and to “outsource” the gradient style to a common selector.

CSSeffects in The Neglected Necessities Of Design

When combined with healthy HTML practices, spending more time on the essential pieces of solid Web design results not only in faster pages and a lighter server load but, more importantly, in a user experience that thrives on any platform regardless of the design method employed. Speaking of user experience, we still need to add one important piece to this puzzle.

You don’t get to 600 million friends without doing something spectacular. Mark Zuckerberg knows this more than anyone. But I wonder: do we have any hope of achieving similar success?

Facebook’s story begins, like most businesses, with a single idea and an ambitious person that executes it. Zuckerberg wasn’t a world-class genius, and Facebook was hardly a revolutionary idea. Yet here we stand: Facebook is one of the most valuable websites on the Internet, Zuckerberg is one of the world’s youngest billionaires, and MySpace… let’s not pick on them.

There wasn’t any magic, fate, or destiny at play here — anyone could’ve been in Zuckerberg’s position. However, just because anyone on this planet has the potential to achieve success, doesn’t mean that anyone else actually will.

There are factors at play: things like leadership, experience, timing, funding, and execution play their roles. But some things will always stand out above the rest, and many of the factors that really make a difference will never be taught at an ordinary business school. So let’s steal a few pages from Mark Zuckerberg’s school of business.

Lesson 1: Be passionate about what you do

If there is any way to create something that hundreds, thousands, or even millions of people will eventually use on a daily basis, you better be sure to create something that you would have passion and dedication in creating.

The aforementioned isn’t exactly a revelation to anyone, but if you are not genuinely interested in what you are creating, why would anyone else be? They wouldn’t. It’s a serious problem for many entrepreneurs of both young and old.

Lately we have seen entrepreneurs creating this businesses that some have little interest in actually investing their heart and soul into. Some of these startups look great on paper, but, in the end, the whole intention is to quickly flip these businesses to a company that has plenty of cash on hand. The investors, founders, and, if they’re lucky, employees get rich and everyone goes out for drinks to celebrate. If this is the measure of success, it is no wonder why we hear so much discussion about a potential tech bubble.

Mark Zuckerberg, however, is one of the most prominent examples in recent history of someone who has the passion. Not only did he care about his project, but he also turned down billions of dollars in order to let his company thrive. Turning away billions of dollars, and the opportunity to never have to work again, can’t be that difficult. Can it?

But the reality is that you, me, everyone needs to be reminded every once in a while that having a dedication and passion for what we do in life is key to happiness.

Lesson 2: Constant evaluation

There are generally two types of people in business: those who prefer to play it by gut instinct and those who analyze every little measurable detail. Both have their pros and cons; having a mix of both couldn’t hurt. Generally a person gravitates towards one or the other.

Mark Zuckerberg is the analyzer.

Zuckerberg always insisted that his employees create powerful analytics dashboards. Their purpose was simple: allow him and fellow employees to gauge the interest in newly released features to coordinate their global domination. While other companies were still figuring out which advertisements could be placed at which spot and generate the most return, Facebook focused on optimizing the performance of the user experience. He wanted to know which features worked and which did not.

Those who can gather enough data to garner an understanding of their users, while also being able to determine which features work and which do not, will ultimately be in a better position to achieve success.

The takeaway: do anything in your power (within reason, of course) to find ways to measure success and failure across the board, but don’t get so caught up in the data that you are unwilling to explore new avenues.

Lesson 3: Be willing to experiment

In Facebook’s infancy, its founder preferred to push out enhancements and never look back. This is, admittedly, easy to do when you have a few thousand users; they expect things to change at a rapid clip. But Facebook was different. People relied on Facebook in more ways than most other websites — it was a service that connected people to each other. At this point, failure is unacceptable.

Still, Zuckerberg preferred the gung ho method of development. He would regularly introduce new features — adding the “Wall,” introducing chat functionality, allowing third-party development, and changing the site’s layout (which I have had numerous complaints about before).

One has to admire the company’s insistence on pushing out features in a world where critical services tend to iterate slowly and safely (think Microsoft Windows). This insured that Facebook was a step ahead of the competition while also appearing innovative amidst growing competition.

Sure, there were those who didn’t appreciate these drastic changes (especially those dealing with privacy settings and layout), but when you have a vision, sometimes it pays to put in the extra effort and take the risk; explore it through to the end.

Lesson 4: Be aware of opportunity

Before Facebook, there was CourseMatch, an application that allowed students at Harvard University to compare their course selections for that semester. With this, Zuckerberg indulged students’ desires to know which classes their friends were joining. He exploited an opportunity.

Facemash was a similar expereince. It was Harvard’s Hot or Not for students. These students were interested in knowing where they stood socially — in some ways, we all do. And Zuckerberg, once again, saw an opportunity to exploit this as well.

Facebook was simply a culmination of all these previous opportunities into a single useful package.

It isn’t magic. But it does require looking at things in a different way — to see things for what they could be, as opposed to only what they have been or currently are. Zuckerberg’s ability to notice these opportunities and execute on them gave him the edge in creating and maintaining products that people believed in.

Opportunity exists everywhere — especially with the Internet, where the ability to reach millions is easier than ever. Perhaps there is so much opportunity out there that, perhaps, we have become ignorant to spot the most obvious of opportunities. But being able to spot opportunity is an invaluable skill.

Lesson 5: Make something useful

Facebook isn’t simply another interesting website to visit every once in a while. It is a tool that millions of people use to connect to each other. People use it for sharing experiences and creating new ones. Most importantly, Facebook does something that no other website has been able to do as efficiently, effectively, and with such impressive scale: it creates a virtual environment to interact with your real friends.

I don’t think it is necessary for me to explain how useful something like this is; the 600 million plus members does that well enough. Yet it is this usefulness that makes the company a success. It is a recurring theme that all successful companies build upon. It is also something that many startups don’t seem to comprehend.

If you want the best business advice out there, here it is: create something useful.

Explaining what makes a product or service useful is simple: it is something that people are using repeatedly and on a regular basis. Make something that you and others could use on a regular basis, and make this thing unique. If you do this, along with everything else mentioned here, you will have an opportunity to create and maintain a successful business.

And who knows? Maybe you will be the one creating the next Facebook killer.

The input form is an essential element of almost any website or application these days. Input is a core method of interaction, and in many cases it represents the hard conversion point between success and failure. With the amount time and effort we put into bringing users to our sign-up and contact forms, it’s surprising that we tend not to spend a proportional amount of time on the forms themselves.

A number of techniques and elements can be used in Web forms to turn them from abject failures into successful conversion points. In this article, we’ll present some interesting examples and useful guidelines for Web form design.

A Dash Of Quirkiness

Part of Web design is about communicating personality and being relatable, because people enjoy dealing with other people. One quality that almost always helps is a bit of quirkiness and fun. A small dose of friendliness and personality will make the input process a bit more enjoyable and human.

Jarad Johnson

Jarad Johnson‘s contact form has a flavor of good ol’ post card. The visual appearance of the form makes it stand out from the usual generic forms found elsewhere. A very nice touch to an often forgotten element of Web designs. By the way, the Postage for the email postal service was already paid. Good to know. Very well done.

11jarad in Useful Ideas And Guidelines For Good Web Form Design

Red Tiki

Red Tiki‘s quirkiness is tied to the company’s brand and identity, but is powerful here nonetheless. From the frame motif to the wooden character peeking out, this form feels fun and approachable. Little colloquial phrases like “This lovely form” and “We’re always keen to lend an ear” are fantastic ways to make the company more relatable. The form is bursting with personality and flare, which helps the user complete the form and click the “Submit” button.

3red in Useful Ideas And Guidelines For Good Web Form Design


Applicom‘s form is a great example of how to be clean and professional without being sterile. Styling the form like a letter — with a stamp, subtle paper texture, striped edge and handwritten addressee name — may seem cliche, but it demonstrates a certain level of personality and care. Language such as the “Do: Be fine, use your real address. Don’t: Be negative, spam” may seem trivial, but it’s important. At the end of the day, it makes users feel like they are dealing with people who aren’t afraid to speak to them. Craftsmanship always indicates care and professionalism. People like that.

5applic in Useful Ideas And Guidelines For Good Web Form Design

Sophie Hardach

Sophie Hardach‘s form is another example of a post card idea implemented in a contact form. The input fields are a bit clearer than one would think, yet the “Submit”-button is a bit more difficult to find. In order to send the message, a stamp in the right upper corner needs to be dragged to the Stamp area of the form. In fact, the form is not only very original, but also accessible. Excellent work.

20sophie in Useful Ideas And Guidelines For Good Web Form Design

Two Paperdolls

Two Paperdolls has probably the busiest contact form of all the forms featured in this article. However, the form fits wonderfully to the overall design of the page which is a “We Are Hiring” page for designers with strong focus on typography. Notice the clean real-time validation for the form: the error indicator is diplayed in the right upper corner of each input field. Too bad that the navigation through form fields doesn’t work properly with “Tab”.

10twopaper in Useful Ideas And Guidelines For Good Web Form Design


Kontain uses a different kind of a date picker for letting users pick the date for the form. The designers have arranged the dates in four rows rather than displaying them all vertically. A nice idea for reducing the horizontal scrolling for the users.

16-1kontain in Useful Ideas And Guidelines For Good Web Form Design


Wopata‘s slider for the timeframe in their contact form is much different from the generic sliders, select-menus and radio buttons. This is a proof that filling in Web forms can be fun.

17wopata in Useful Ideas And Guidelines For Good Web Form Design


The language used on Fi is more friendly than formal. The inviting nature is reinforced by the short colloquialism for each form field that illustrates why the information is being requested. The language of labels should give off a little charm, without being insincere or overbearing. Isn’t everyone more engaged in a conversation if the other person is pleasant and approachable?

2fi in Useful Ideas And Guidelines For Good Web Form Design


egopop has a very simple, perhaps oversimplified contact form which however has a nice touch. The weird character on the right side plays wonderfully together with the other characters on the site and makes the contact form less boring than it would be otherwise. The contact form opens in a lightbox.

6egopop in Useful Ideas And Guidelines For Good Web Form Design

Idyllic Creative

Some forms are boring, while some are beautiful. Idyllic Creative‘s contact form is remarkably simple yet beautiful. Another example of a design agency which integrated a character from their work in their contact form.

8idyl in Useful Ideas And Guidelines For Good Web Form Design

Tinkering Monkey

Tinkering Monkey‘s character on their contact page is another interesting example of how the contact form page can be made a bit less boring. Notice the FAQ area on the right side of the contact form. An excellent idea for helping customers quickly find answers to their questions once they feel lost and can’t find a solution to their problem.

25tinkering in Useful Ideas And Guidelines For Good Web Form Design


Ditio‘s designers have decided to combine their sign up form and a contact form in a hidden sidebar box, very much like it’s often done with the fixed “Give feedback” buttons on the left or right side. Once a trigger button “Inschrijven” is clicked, users can sign-up for their account and even upload a CV. Notice that there is no textarea available for lengthy details.

3ditio in Useful Ideas And Guidelines For Good Web Form Design

Treehouse Editing

Treehouse Editing‘s contact form is another example of a quirky design with a clean and lean layout. When the user navigates to the page, the background changes to a spring theme, which is itself associated with making contact, thus encouraging them to fill out and send off the form. Notice that all that is necessary for initial contact fits into a couple of fields; further information can be collected in subsequent correspondence. Ask yourself whether a minimal layout would do the trick on your website as well.

4treehouse in Useful Ideas And Guidelines For Good Web Form Design

Amazee Labs

Amazee Labs doesn’t have to do much to make its form usable and inviting. The form has only a few quirks, namely the texture, the “Hi there, let’s get in touch!” line, and the “Send It!” button. It may not seem like much, but the casual language, careful color choice and overall texture help Amazee Labs instantly feel like a friendly and easygoing bunch.

6amazi in Useful Ideas And Guidelines For Good Web Form Design

Wing Cheng

The motif of Wing Cheng‘s website is an open sketchbook, with most of the sections designed as sketches and thumbnail drawings. The contact form maintains this personality and coherency by following the motif. The form is simple and appropriate. The thought diagram with the email address adds visual interest. Maintaining the hand-drawn style is what brings out the quirkiness. Imagine how jarring and uninviting this form would be if it was a default HTML field set stuck on top of a beautiful paper texture.

7wing in Useful Ideas And Guidelines For Good Web Form Design

Break It Down

No one likes a humongous unending list, especially a list of elements to fill in or interact with. Just as a giant paragraph of text is daunting to the user, so is a giant block of empty fields. To coax the user to the finish line, the designer should make them feel like they are completing steps, or bite-sized chunks. Take a giant web project: trying to wrap your head around it all at once is almost impossible. But if you break it down into goals, and then stages, and then sets of tasks, it becomes much more manageable. This is what we want in a Web form, especially if you’re asking for a sizeable amount of information. Keep in mind that you can organize a form simply by sectioning off parts of it or by arranging the content into columns.


CollisonLabs‘s contact form might appear to be a bit too complicated at the first glance, but it’s quite straightforward. The left side of the contact page contains alternative contact information as well as a map which is designed with the overall design of the website in mind. On the right side, each input field is clearly represented and highlighted when the user fills out the form. Nice, clean work.

14collision in Useful Ideas And Guidelines For Good Web Form Design

Visual Republic

Visual Republic‘s choice of design for input field labels is similar to the solution by guys over the CollisonLabs. Giving the field label a solid background with an arrow to indicate where the text would need to be typed is a nice technique that could be used more often.

26visualrepublic in Useful Ideas And Guidelines For Good Web Form Design

CSS Tricks

CSS Tricks‘s comment area is a great example of a well-organized, helpful and clean comments area. Notice how the “star” image in the text area fades away as the user types in some text in the form.

22csstricks in Useful Ideas And Guidelines For Good Web Form Design

Barley’s Greenville

Barley’s Greenville‘s form for beer rating is an interesting example of how multiple sections can be combined to make the form intuitive and easy to use. Notice the arrow-like symbol between the first and the second section as well as various shades of the brown color within the form.

23barley in Useful Ideas And Guidelines For Good Web Form Design

Blue Sky Resumes

Blue Sky Resumes uses sections to make its extremely long form much more manageable. Standard headings and horizontal rules are used to divide sections. The designer was also careful to visually distinguish the different sections so that the form doesn’t look like a long list of fields.

 in Useful Ideas And Guidelines For Good Web Form Design

Validate Clearly

Users will not spend extra time making sure they have given you all of the information you need. Many designers believe that form validation detracts from the user experience, but its effects are adverse only when done poorly. When validation is simple and clear, it merely offers alerts and guidance to the user.

Make sure that you clearly mark the problem and tell the user exactly what is wrong. The fastest way to kill the user experience is with generic error alerts that mean nothing to the user. People are more than happy to quickly fix an issue if it is pointed out to them plainly.

Moody International

Moody International provides an excellent example for a contact form that nicely combines different types of contact information in one place. On the left, you’ll find a postal address along with a map, a phone number as well as the company’s email address. The right side is dedicated for more detailed inquiries and consulation requests. The form’s labels disappear once the user has provided their data. Unfortunately, the form doesn’t have an instant real-time validation and uses JavaScript pop-ups to inform the users about their input mistakes. Besides, the map on the left side could be integrated a bit better by using zoom controls as well as search functionality provided by Google Maps.

1moody in Useful Ideas And Guidelines For Good Web Form Design

El Passion

El Passion is another example of a contact form that combines various types of contact information in a very compact and meaningful way. Real-time validation in use. The map on the left side could be zoomable, though.

5elpassion in Useful Ideas And Guidelines For Good Web Form Design

Orlando Advertising

Orlando Advertising‘s form beautifully integrates its branding colors in a clean and attractive Web form. The red borders might be misunderstood and could be used to visually highlight errors in the form, but instead validation errors are displayed once the “Submit” button is clicked.

28soap in Useful Ideas And Guidelines For Good Web Form Design


There are usually two essential elements to effective form validation: identifying the specific problem, and clearly marking how and where to fix it. Reinvigorate uses an alert icon and a loud red outline to indicate the problem, and then it uses the side column to tell the user what’s wrong with the information. Moreover, the user gets a visual indication when the information is corrected. Being clear about the problem and not leaving the user in the dark make for a smooth experience.

Reinvigorate in Useful Ideas And Guidelines For Good Web Form Design


GitHub‘s sign up form is as simple as its overall design, yet its beauty lies not in aesthetics, but in its functionality. When you enter your credit card details, GitHub automatically recognizes the credit card provider and visually highlights it in the form, thus providing instant feedback to the user. A wonderful example of invisible design.

15-1-github1 in Useful Ideas And Guidelines For Good Web Form Design

15-2-github2 in Useful Ideas And Guidelines For Good Web Form Design

Blue Sky Resumes (revisited)

I would like to point out another great part of Blue Sky Resumes‘ form. The error alert is clear and specific. By specifically telling the user that their name is missing, the user is spared confusion and is able to find their bearings quickly. To reinforce this message, the name field is clearly highlighted and marked as required.

 in Useful Ideas And Guidelines For Good Web Form Design


A form is an interactive part of a website or application. In general, people want to interact with elements that feel alive and that follow convention. Many forms have a slight indent, creating a slight 3-D effect, whereas other forms simply show a box outline to delineate form fields. The key to any interaction is expectation and feedback. Make sure your forms react to user input, mainly by specifying the focus and hover states of input elements.

Grooveshark VIP

On Grooveshark, its styling of the focus and active element makes it clear which field is being interacted with. Besides, erors are displayed in a nice, helpful way while error messages are displayed at the top of the “window” using Ajax.

12grooveshark in Useful Ideas And Guidelines For Good Web Form Design

The design helps the user to maintain focus and to breeze through the form. It even makes it kind of fun, because the user wants to see a response when they click on or interact with an element.


Unlocking‘s checkout form is a nice example of how simple design can work very well with appropriate level of responsiveness. The input fields look nice, the hover state is very clear and the hints on the right side are helpful and unobtrusive. The contact form shows a subtle blue background when the user focuses on a field.

The form uses an additional color to highlight fields. As long as the interaction creates a noticeable effect, the form will be more usable.

The highlighting is not as bold as on some other sites featured above, but still effective and interactive and perhaps even more usable.

18unlocking in Useful Ideas And Guidelines For Good Web Form Design

Jason Long

Jason Long‘s form silently sits on the page, doing nothing, unless… well, unless you send it out. Jason uses an animated contact form which flips and changes as the message is being sent. An interesting, memorable tweak that makes the user experience just a tiny bit more interesting.

38-1-black in Useful Ideas And Guidelines For Good Web Form Design

38-2-black in Useful Ideas And Guidelines For Good Web Form Design

38-3-black in Useful Ideas And Guidelines For Good Web Form Design

The Finish Line

An effective Web form should get the user to cross the finish line. It might be a “Submit” button, an order confirmation button or a sign-up button. At the end of the day, the designer wants the user to hit that conversion point and be reasonably happy with their decision.

Make sure that the way of submitting the form is bold and specific. Where possible, use language like “Send email” or “Finish signing up,” so that the user understands exactly what the button will do.


On Squarespace, the designer has gone as far as to label the button “Finish & Create Site” and has also made note of its function just below. This page is especially effective because of the contrast: the layout is completely monochromatic, so making the button green puts more focus on completing the process.

1sqr in Useful Ideas And Guidelines For Good Web Form Design


BLITZ has come up with an interesting solution for their contact form. A content block appears in a lightbox and presents three different types of contact forms: inquiry about business, jus saying “Hi” and CV submission. The forms have a similar appearance but have a different structure. In all cases, the user has a checkbox for email updates at the bottom as well as postal address under the form. One confusing bit is that the form fields get a red border when you type in your data. Some users might confuse it with error notifications.

12blitz in Useful Ideas And Guidelines For Good Web Form Design

Custom Bags HQ

Custom Bags HQ has tried to combine various content blocks within one context. The “Contact” link in the upper navigation leads to a page which contains both the contact form and the “About us” information. In our opinion, “About us” doesn’t really detract from the user experience, but it doesn’t enhance it either. The link doesn’t feel right here, at least at the first glance. Interesting idea: the form contains a checkbox asking users if they are interesting in receiving an email newsletter. A smart handle to keep customers close to you and keep them informed about your updates and news in the future.

7custombag in Useful Ideas And Guidelines For Good Web Form Design

Clear Labels

Any interaction that we encourage must be as non-threatening as possible. After all, we are asking for personal information of the user. They are under no obligation to provide it. The first step to avoiding frustration and confusion is to use plain and simple language. Make it to the point and not flowery.

Foundation Six

Foundation Six‘s labeling is effective because it streamlines the process and simplifies commitment for the user. The company boils each category of information down to one word. The “Submit” button is also clear and straightforward. There is no confusion in the user’s mind. Another strength here is the balance between multiple choice and fill in the blank (which we’ll get to below).

Foundationsix 01 in Useful Ideas And Guidelines For Good Web Form Design


Bärnt&Ärnst‘s designers follow their minimalistic approach to design and provide all contact information such as postal address, phone numbers, email as well as a short form for user’s convenience. Often you really don’t need to require more information than that for the initial email.

2born in Useful Ideas And Guidelines For Good Web Form Design

Zoltan Hosszu

Zoltan Hosszu‘s contact page illustrates how icons can be used effectively to indicate the purpose of input fields. The form itself is very simple and quite unspectacular, but icons as well as some subtle textures make it a bit more distinctive and interesting.

33zoltan in Useful Ideas And Guidelines For Good Web Form Design

Stuck Axiom

The labels in Stuck Axiom‘s “New business” contact form are short and concise. The simple language and clear labeling make the form non-threatening and easy for the user to fill out. Contrasting with the gray of the form fields, the “Submit” button is set off and accented in red, making it clear where to click.

8struck in Useful Ideas And Guidelines For Good Web Form Design

Solid Giant

With clear labeling, not too many check box options and predefined budget ranges, Solid Giant can get back to a potential client with a precise offer. The “Submit” button is clear and straightforward, marking the end of an intuitive path through the form. All elements are described carefully, and there is no room for the user to misinterpret what information to enter where.

9solid in Useful Ideas And Guidelines For Good Web Form Design

Joey Rabbitt

Joey Rabbitt isn’t a fan of lengty emails. The message of the textarea can contain at most 500 characters. However, if the user would like to email Joey directly, he can use an email on the right side of the page. Joey also showcases the networks he is a member of as well as his current location. Notice how beautifully the content is designed by using icons and various colors of grey throughout the page.

4joey in Useful Ideas And Guidelines For Good Web Form Design

Multiple Choice Vs. Fill In The Blank

Selecting items from a list is naturally easier than filling in a blank. A blank sometimes raises more questions than it answers, especially if the labeling is not clear or there are too many empty fields. The user may be confused by the format, the type of information being requested or how exactly to answer a question. In general, a choice is better than a blank, especially with information that could be confusing, such as scope, budget, project type, etc. This is why most order forms do not require you to fill out every piece of information.


Pieoneers uses the fill-in-the-blank format in the left column for generic information, with established conventions for format and type. On the right, more complicated questions are in the form of drop-down boxes, letting you choose between broad options, so that there is no confusion or hesitation.

10pie in Useful Ideas And Guidelines For Good Web Form Design

Information Highwayman

Information Highwayman cleverly combines multiple choice and fill in the blank. The empty fields are for simple bits of information specific to the user: name, email address, comment. These are all non-threatening and could not be formatted as multiple choice. Questions related to services sought and budget tend to be more complicated. Giving user some options here simplifies the process of explaining what you’re asking for.

Information-highwayman in Useful Ideas And Guidelines For Good Web Form Design

When Things Go Wrong: Facio Design

Facio Design‘s contact form is probably the most difficult contact form featured in this article, and rightly so. The choice of typeface and the font size is suboptimal as it is very difficult to read, especially on Windows. The designers have tried to mimic the appearance of a letter, but it doesn’t quite work here. A very simple, basic form would work better here. A nice example of how aesthetics can fail the functionality of the form.

37facio in Useful Ideas And Guidelines For Good Web Form Design


This overview covers a few simple best practices that you can apply to Web forms. Just remember to spend the extra time on your next website; many of these approaches are not hard to implement and will lead to much higher conversion rates, but they are often overlooked. We spend so much time getting people to the door that we forget to make the door as inviting and useful as the path to it.

How to avoid redesign failure

We’ve all seen or heard about the horrors of failed redesigns. Regardless of the size or scale of a site, any redesign is frought with potential perils and pitfalls. Alienating your existing users is probably one of the biggest dangers of any redesign project.

Of course, the larger the site, the greater this danger becomes. But even a small site can suffer from ill-will if they don’t consider their existing visitors when tackling a redesign project.

The following guide should keep you on the right path for creating a revamped and re-imagined site that keeps your users happy.

And if you’ve already found yourself in the midst of a failed redesign, we’ve got help for you, too.

Redesign right

When you decide a redesign is necessary for your website or web app, there are a number of things you need to consider beyond the technical aspects. Remember, your site likely already has regular visitors or regular users, and they’ve come to expect certain things when they visit your site. You need a good reason for changing those things, and you need to take them into account when starting on your redesign and throughout the process.

Communicate with your existing users from the beginning

Unlike a new site design, a site being redesigned likely already has a user base. Involving that user base from the beginning on your redesign can result in a much better user experience in the end. After all, these are the people who are already using your site, who are already familiar with what you have. Sure, some people are resistant to change in any form, but others may be able to offer you some fantastic insight into what’s great as-is and what could use some revamping.

It’s important to take into account the way visitors use your existing site. Just because you wanted them to use the site in a particular way doesn’t mean that’s necessarily the way it’s being used in the real world. Take this into account when you’re redesigning, and don’t break existing user patterns.

Test for both new and existing users

Conventional testing wisdom often says you should only test on new users to get the most accurate results. This is a great strategy if you’re testing something like a sales page. But if you’re redesigning your entire website, you want to get feedback from people who are already using your site. The last thing you want is to launch a redesign and alienate every existing user you have.

Let your existing visitors know that you’re testing out a new site. Consider giving them the option to test the new site if they choose to do so, and then ask for some unobtrusive feedback in the form of a survey or similar mechanism. Then, listen to what they’re saying.

Let users upgrade on their own schedule

This is particularly important with more app-like sites. Letting users switch to the new site version on their own schedule is a great way to prevent complaints. Social media sites are probably the most common sites to do this type of thing (like Twitter did with their new layout). This prevents surprises for your existing users, and lets them make the switch when they have time to get used to the new interface.

It’s important to set a deadline for the switch, though. Make sure you let users know that they can switch any time between now and some future date, and let them know that on that future date everyone will get the new interface. This prevents surprises while also preventing stragglers from requiring you to support the old site indefinitely.

Make it easy for users to offer feedback after the change

There are a ton of tools out there for collecting user feedback. Use them to find out what your visitors like and don’t like as you launch or as you’re testing. Then, make sure you address anything that’s raised by more than a handful of visitors. Remember, for every visitor who voices a concern, there could be dozens who feel the same way who aren’t saying anything.

Make your reasons for redesigning clear

It’s important to let your regular visitors know that you have reasons for redesigning your site. Too many people who aren’t familiar with the technical aspects of running a website think redesigns are purely for aesthetic reasons. Let them know what functionality you aim to add or what user interface improvements you’ll be making before the fact. A blog post addressing your redesign plans can be a great way to open up a dialogue with regular visitors and users.

Offer a tour or tutorial for any major user interface changes

If you’re changing the way parts of your website work, or drastically rearranging elements on the page, it’s a good idea to offer a video or other tutorial or tour of the new design and features. This can help your existing users quickly adapt to the new design, and feel less alienated. It gives the impression that you care about the experience your users are having, and that you want that experience to be as good as it can possibly be.

What if your redesign has already failed?

So you’ve launched your redesigned site already, and now all you’re hearing is complaints from new and old visitors alike. What do you do? Should you just go back to the old site and try again? What if that’s not an option, or you’ve invested thousands of dollars and months of time in the new site? What then?

It’s all about damage control

The first thing you need to do is acknowledge that your redesign hasn’t gone over well with everyone. Let people know that you hear what they’re saying and that you’re considering their concerns. Whether you do this through Twitter, your blog, or some other outlet depends on where you can reach the highest number of your users.

Acknowledge and address complaints

Acknowledge specific complaints if you can. If everyone is complaining about how a certain function is hard to find, then address that. There are a few ways to do that: you can simply post on your blog or send out an email about it with any helpful information or tips, or you can make a change to make it easier on your visitors. If it’s a really big problem, making a change is probably the better solution.

Don’t be afraid to roll back

If there are huge complaints, or if you see that your traffic numbers are going down, don’t be afraid to roll back parts or all of your site to the previous version until fixes can be implemented. If your website’s success is suffering because of a redesign, there’s no sense in sticking to the new design. You’re better off rolling back and acknowledging that your visitors are unhappy (and therefore showing that you place user experience above all else) rather than trying to blindly insist that the new site is better.

Monitor carefully

Whenever you’re launching a new design, it’s important to track your analytics carefully. Set up goals and funnels for various functions on your site, and then make sure the you’re not suddenly losing a lot of visitors at a particular point.

Analytics can help you make proactive changes to your site, anticipating what visitors are getting hung up on. Make sure you have some baseline statistics to refer to and compare.

Also monitor the tone of social media posts about your redesign. If you see a lot of complaints circulating, or even a lot of confusion, be proactive and engage with those people. It’s important to be engaged throughout a redesign so that your users know you’re making changes in an effort to benefit them, and not just for some undefined goal.

Many designers come to me for usability testing consulting services. One of the reasons they reach out is because they assume usability testing must be a complex, scientific process. As a result, they’d prefer to have an outside company conduct their usability tests.

Then I tell them I rarely run usability tests anymore! Why? Well, in my experience the best way to do usability studies is to do it yourself. So I spend a lot of time helping teams do learn how to do it themselves, not doing it for them. By conducting their own quick and dirty usability studies, design teams can get feedback faster, easier, and more affordably than hiring an outside professional.

Usability Testing Is Not a Complicated Process

The first thing I tell designers is that it’s a mistake to think that usability testing has to be complicated. It’s a technique anyone can learn with a little training and a lot of practice. Usability testing isn’t rocket science, but it does need to be integrated into a design team’s overall process in order to work.

I’ve found that the most successful teams learn to conduct their own informal testing whenever they can without waiting for the usability team’s availability. In the most successful projects, the team has a design idea, they quickly sketch it and create a prototype, and then test it as quickly as possible.

When I work with design teams who have never conducted a study, I teach them the basics of usability testing, have them observe me facilitate one or two sessions, and then they try it on their own with my guidance. After a few of these sessions, these usability “newbies” are usually ready to run their own testing sessions.

Usability Professionals Act as the Coaches

So what’s the role of the usability professional? In most mid-to-large-sized corporations, there are too many design projects for one person—sometimes even an entire usability team—to run all of the usability studies the design teams need.

As a result, the usability professional is most successful as a Coach who educates and advises the organization on which projects to focus on, how to plan and run their studies, and how to analyze the results. They can better serve design teams by sharing best practices for conducting usability tests, interviews, field studies, diary studies, and other research techniques.

How Can Design Teams Start Testing On Their Own?

If you’ve never conducted a test, start right away. Try a test next week; it’s not as complicated as it may seem. At its core, a usability test involves putting a person in front of your product and watching what they do. Your goal is not to implement the scientific method as you elaborately lay out a treatise on the usability of your product – just to observe how well users can accomplish their desired tasks with it.

Time and time again I’ve seen immediate results from such an approach. Learning how to run internal usability tests will not only save a company money, but will instill a “design for usability” mentality into your design team and, hopefully, the organization as a whole.

So instead of hiring an outside professional to do usability testing for you, try to find one who will act as your coach and guide instead. In no time you’ll be up and running with a regular testing plan that will benefit you far longer than the immediate project. Your design team will be more self-sufficient as a result.