Archive for September, 2010

You can’t escape it. Everyone’s talking about HTML5. it’s perhaps the most hyped technology since people started putting rounded corners on everything and using unnecessary gradients. In fact, a lot of what people call HTML5 is actually just old-fashioned DHTML or AJAX. Mixed in with all the information is a lot of misinformation, so here, JavaScript expert Remy Sharp and Opera’s Bruce Lawson look at some of the myths and sort the truth from the common misconceptions.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

First, Some Facts

Once upon a time, there was a lovely language called HTML, which was so simple that writing websites with it was very easy. So, everyone did, and the Web transformed from a linked collection of physics papers to what we know and love today.

Most pages didn’t conform to the simple rules of the language (because their authors were rightly concerned more with the message than the medium), so every browser had to be forgiving with bad code and do its best to work out what its author wanted to display.

In 1999, the W3C decided to discontinue work on HTML and move the world toward XHTML. This was all good, until a few people noticed that the work to upgrade the language to XHTML2 had very little to do with the real Web. Being XML, the spec required a browser to stop rendering if it encountered an error. And because the W3C was writing a new language that was better than simple old HTML, it deprecated elements such as <img> and <a>.

A group of developers at Opera and Mozilla disagreed with this approach and presented a paper to the W3C in 2004 arguing that, “We consider Web Applications to be an important area that has not been adequately served by existing technologies… There is a rising threat of single-vendor solutions addressing this problem before jointly-developed specifications.”

The paper suggested seven design principles:

1. Backwards compatibility, and a clear migration path.
2. Well-defined error handling, like CSS (i.e. ignore unknown stuff and move on), compared to XML’s “draconian” error handling.
3. Users should not be exposed to authoring errors.
4. Practical use: every feature that goes into the Web-applications specifications must be justified by a practical use case. The reverse is not necessarily true: every use case does not necessarily warrant a new feature.
5. Scripting is here to stay (but should be avoided where more convenient declarative mark-up can be used).
6. Avoid device-specific profiling.
7. Make the process open. (The Web has benefited from being developed in the open. Mailing lists, archives and draft specifications should continuously be visible to the public.)

The paper was rejected by the W3C, and so Opera and Mozilla, later joined by Apple, continued a mailing list called Web Hypertext Application Technology Working Group (WHATWG), working on their proof-of-concept specification. The spec extended HTML4 forms, until it grew into a spec called Web Applications 1.0, under the continued editorship of Ian Hickson, who left Opera for Google.

In 2006, the W3C realized its mistake and decided to resurrect HTML, asking WHATWG for its spec to use as the basis of what is now called HTML5.

Those are the historical facts. Now, let’s look at some hysterical myths.

The Myths

“I Can’t Use HTML5 Until 2012 (or 2022)”

This is a misconception based on the projected date that HTML5 will reach the stage in the W3C process known as Candidate Recommendation (REC). The WHATWG wiki says this:

For a spec to become a REC today, it requires two 100% complete and fully interoperable implementations, which is proven by each successfully passing literally thousands of test cases (20,000 tests for the whole spec would probably be a conservative estimate). When you consider how long it takes to write that many test cases and how long it takes to implement each feature, you’ll begin to understand why the time frame seems so long.

So, by definition, the spec won’t be finished until you can use all of it, and in two browsers.

Of course, what really matters is the bits of HTML5 that are already supported in the browsers. Any list will be out of date within about a week because the browser makers are innovating so quickly. Also, much of the new functionality can be replicated with JavaScript in browsers that don’t yet have support. The <canvas> property is in all modern browsers and will be in Internet Explorer 9, but it can be faked in old versions of IE with the excanvas library. The <video> and <audio> properties can be faked with Flash in old browsers.

HTML5 is designed to degrade gracefully, so with clever JavaScript and some thought, all content should be available on older browsers.

“My Browser Supports HTML5, but Yours Doesn’t”

There’s a myth that HTML5 is some monolithic, indivisible thing. It’s not. It’s a collection of features, as we’ve seen above. So, in the short term, you cannot say that a browser supports everything in the spec. And when some browser or other does, it won’t matter because we’ll all be much too excited about the next iteration of HTML by then.

What a terrible mess, you’re thinking? But consider that CSS 2.1 is not yet a finished spec, and yet we all use it each and every day. We use CSS3, happily adding border-radius, which will soon be supported everywhere, while other aspects of CSS3 aren’t supported anywhere at all.

Be wary of browser “scoring” websites. They often test for things that have nothing to do with HTML5, such as CSS, SVG and even Web fonts. What matters is what you need to do, what’s supported by the browsers your client’s audience will be using and how much you can fake with JavaScript.

HTML5 Legalizes Tag Soup

HTML5 is a lot more forgiving in its syntax than XHTML: you can write tags in uppercase, lowercase or a mixture of the two. You don’t need to self-close tags such as img, so the following are both legal:

<img src="nice.jpg" />
<img src="nice.jpg">

You don’t need to wrap attributes in quotation marks, so the following are both legal:

<img src="nice.jpg">
<img src=nice.jpg>

You can use uppercase or lowercase (or mix them), so all of these are legal:

<IMG SRC=nice.jpg>
<img src=nice.jpg>
<iMg SrC=nice.jpg>

This isn’t any different from HTML4, but it probably comes as quite a shock if you’re used to XHTML. In reality, if you were serving your pages as a combination of text and HTML, rather than XML (and you probably were, because Internet Explorer 8 and below couldn’t render true XHTML), then it never mattered anyway: the browser never cared about trailing slashes, quoted attributes or case—only the validator did.

So, while the syntax appears to be looser, the actual parsing rules are much tighter. The difference is that there is no more tag soup; the specification describes exactly what to do with invalid mark-up so that all conforming browsers produce the same DOM. If you’ve ever written JavaScript that has to walk the DOM, then you’re aware of the horrors that inconsistent DOMs can bring.

This error correction is no reason to churn out invalid code, though. The DOM that HTML5 creates for you might not be the DOM you want, so ensuring that your HTML5 validates is still essential. With all this new stuff, overlooking a small syntax error that stops your script from working or that makes your CSS unstylish is easy, which is why we have HTML5 validators.

Far from legitimizing tag soup, HTML5 consigns it to history. Souper.

“I Need to Convert My XHTML Website to HTML5”

Is HTML5′s tolerance of looser syntax the death knell for XHTML? After all, the working group to develop XHTML 2 was disbanded, right?

True, the XHTML 2 group was disbanded at the end of 2009; it was working on an unimplemented spec that competed with HTML5, so having two groups was a waste of W3C resources. But XHTML 1 was a finished spec that is widely supported in all browsers and that will continue to work in browsers for as long as needed. Your XHTML websites are therefore safe.

HTML5 Kills XML

Not at all. If you need to use XML rather than HTML, you can use XHTML5, which includes all the wonders of HTML5 but which must be in well-formed XHTML syntax (i.e. quoted attributes, trailing slashes to close some elements, lowercase elements and the like.)

Actually, you can’t use all the wonders of HTML5 in XHTML5: <noscript> won’t work. But you’re not still using that, are you?

HTML5 Will Kill Flash and Plug-Ins

The <canvas> tag allows scripted images and animations that react to the keyboard and that therefore can compete with some simpler uses of Adobe Flash. HTML5 has native capability for playing video and audio.

Just as when CSS Web fonts weren’t widely supported and Flash was used in sIFR to fill the gaps, Flash also saves the day by making HTML5 video backwards-compatible. Because HTML5 is designed to be “fake-able” in older browsers, the mark-up between the video tags is ignored by browsers that understand HTML5 and is rendered by older browsers. Therefore, embedding fall-back video with Flash is possible using the old-school <object> or <embed> tags, as pioneered by Kroc Camen is his article “Video for Everybody!” (see the screenshot below).

But not all of Flash’s use cases are usurped by HTML5. There is no way to do digital rights management in HTML5; browsers such as Opera, Firefox and Chrome allow visitors to save video to their machines with a click of the context menu. If you need to prevent video from being saved, you’ll need to use plug-ins. Capturing input from a user’s microphone or camera is currently only possible with Flash (although a <device> element is being specified for “post-5″ HTML), so if you’re keen to write a Chatroulette killer, HTML5 isn’t for you.

HTML5 Is Bad for Accessibility

A lot of discussion is going on about the accessibility of HTML5. This is good and to be welcomed: with so many changes to the basic language of the Web, ensuring that the Web is accessible to people who cannot see or use a mouse is vital. Also vital is building in the solution, rather than bolting it on as an afterthought: after all, many (most?) authors don’t even add alternate text to images, so out-of-the-box accessibility is much more likely to succeed than relying on people to add it.

This is why it’s great that HTML5 adds native controls for things like sliders (<input type=range>, currently supported in Opera and Webkit browsers) and date pickers (<input type=date>, Opera only)—see Bruce’s HTML5 forms demo)—because previously we had to fake these with JavaScript and images and then add keyboard support and WAI-ARIA roles and attributes.

The <canvas> tag is a different story. It is an Apple invention that was reverse-engineered by other browser makers and then retrospectively specified as part of HTML5, so there is no built-in accessibility. If you’re just using it for eye-candy, that’s fine; think of it as an image, but without any possibility of alternate text (some additions to the spec have been suggested, but nothing is implemented yet). So, ensure that any information you deliver via <canvas> supplements more accessible information elsewhere.

Text in a <canvas> becomes simply pixels, just like text in images, and so is invisible to assistive technology and screen readers. Consider using the W3C graphics technology Scalable Vector Graphics (SVG) instead, especially for things such as dynamic graphs and animating text. SVG is supported in all the major browsers, including IE9 (but not IE8 or below, although the SVGweb library can fake SVG with Flash in older browsers).

The situation with <video> and <audio> is promising. Although not fully specified (and so not yet implemented in any browsers), a new <track> element has been included in the HTML5 spec that allows timed transcripts (or karaoke lyrics or captions for the deaf or subtitles for foreign-language media) to be associated with multimedia. It can be faked in JavaScript. Alternatively (and better for search engines), you could include transcripts directly on the page below the video and use JavaScript to overlay captions, synchronized with the video.

“An HTML5 Guru Will Hold My Hand as I Do It the First Time”

If only this were true. However, the charming Paul Irish and lovely Divya Manian will be as good as there for you, with their HTML5 Boilerplate, which is a set of files you can use as templates for your projects. Boilerplate brings in the JavaScript you need to style the new elements in IE; pulls in jQuery from the Google Content Distribution Network (CDN), but with fall-back links to your server in case the CDN server is down.

It adds mark-up that is adaptable to iOS, Android and Opera Mobile; and adds a CSS skeleton with a comprehensive reset style sheet. There’s even an .htaccess file that serves your HTML5 video with the right MIME types. You won’t need all of it, and you’re encouraged to delete the stuff that’s unnecessary to your project to avoid bloat.

Further Resources

HTML5 is a massive topic. Here are a few hand-picked links. Disclosure: the authors have their fingers in some of these pies.

• W3C Specification: HTML5 (Edition for Web Authors)
  Just the stuff for those who write websites (as opposed to those who write browsers).
• HTML5 Demos and Examples
  Demos of the HTML5 APIs that are implemented in browsers.
• HTML5 Doctor
  Short, focused articles, “helping you implement HTML5 today.”
• html5-shims
  Scripts that fake HTML5 functionality in older browsers.

About the Authors

Remy and Bruce are two developers who have been playing with HTML5 since Christmas 2008: experimenting, participating in the mailing list and generally trying to help shape the language as well as learn it.

Bruce evangelizes Open Web Standards for Opera. Remy is a developer, speaker, blogger and contributing author for jQuery Cookbook (O’Reilly). He runs his own Brighton-based development company called Left Logic, coding and writing about JavaScript, jQuery, HTML5, CSS, PHP, Perl and anything else he can get his hands on. Together, they are the authors of Introducing HTML5, the first full-length book on HTML5 (New Riders, July 2010).

(al)

© Bruce Lawson, Remy Sharp for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: html5

Some time ago I started a mobile app design review section on our company’s website. The idea behind this “Crit Board” was simple: if mobile developers want to create apps that people want to buy, they’ll need help with design and usability. But most of the time they can’t afford it. On our Crit Board, developers can send us their mobile apps (iPhone apps, Android apps, Blackberry apps) along with questions and problems, and we (free of charge) will pick apart key usability issues, illustrate our design recommendations and post our findings.

The only condition to get free criticism from us is that you agree for it to be made public, which is why I am able to share several case studies with Smashing’s readers right now. It’s hard to imagine something more relevant: these are real problems facing real developers. I hope these problems and the proposed solutions will benefit others who have similar issues and will be generally relevant to those working in the field.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is Professional Web Design, 242 pages for just $9,90.]

1. Foobi

“Alex,

I am the lead designer and developer of Foobi. Foobi was designed to track your diet in a different way; instead of tracking calories and tapping on many drilled-down lists, it works by simply tracking servings per food group and providing an overview of your food intake balance.

Although I have tried really hard not to over-design it by tracing Apple’s footsteps while building custom UI control elements, I would love to hear from you about this subject.

— Remy”

Your app is beautiful indeed. And it is also usable and easy, exactly as you describe it: if user knows how to flick, he is already an expert. An expert in what, though?

As stated in the iTunes description, the purpose of this app is to “track and balance your diet.” I understand the two main user goals as follows:

1. To record what food they consume,
2. To make sure they stay on the right path with their nutrition, and to have a clear guide to balancing their diet if they veer off that path.

Your app does a good job of fulfilling the first goal: users can easily record what they eat just by selecting the right food group and adding the amount of “servings” consumed.

But what about the second more important goal of tracking progress and adjusting one’s diet? Does the app help customers achieve this goal? Not very well. There is room for big improvement.

There are two main problems with this part of the app.

Summary Information Is Hidden

To access the summary chart, you have to flip the iPhone to the side and view it in landscape mode. But this feature is not communicated through the app’s design, so a user will discover it only by accident. When we talk about fulfilling a major user goal, it is important never to rely on accidents to communicate functionality.

Summary Information Is Not Well Designed

Additionally, the summary is not informative enough.

The summary chart doesn’t offer too much to the viewer. Here are the main problems:

• It’s not clear what the different colors mean, and there is no legend to help.
• The scale is not flexible. You can view the information only by week, which does not allow users to easily see their big-picture eating habits. (Tip: consider incorporating the pinch gesture to allow users to scale in and out.)
• Tracking consumption of a particular food group is not possible with this chart but would be valuable to users.

Information design is a vast topic. There are a million ways to address the problems that I’ve highlighted and to increase the visibility of useful information for your audience. I recommend reading Edward Tufte’s books, particularly The Visual Display of Qualitative Information.

And here’s an inspiring display of a lot of information. Of course, it’s not tailored to mobile use, but it has a few great ideas:

From Google Finance.

One More Thing

When I purchased and downloaded your app, I didn’t quite understand why it was taking so long to download… until I realized that it had already downloaded. I was fooled by the app icon, which makes it look like it is still downloading:

2. Budget Planner

“Alex, please take a look at my app Budget Planner. I have tried everything, and it keeps going up and down. The major issues that people complain about are intuitiveness and slowness. People don’t understand what the software does. But people who do learn it love it.

— Alex Sabonge”

The basic idea of this app is very good, and the App Store description shows off its functionality well:”Budget Planner tracks your bills, budget, calendar and transactions by displaying your balance in a calendar view, letting you know how much money you will actually have on any particular day. Like a balance forecaster.”

Here’s an overview of how Budget Planner works:

1. Users input their monthly salary info and plug in their fixed monthly expenses (utilities, phone, car payment, etc).

   

2. Using this data, the app allows users to track their cash flow and predict the amount they’ll have in the bank on any given day.

   

Most folks would find this extremely useful. So, why are people complaining about the app? Why does it have an average rating of 2.5 out of 5 stars, and why are sales lower than you had hoped?

Let’s look at the main sources of the problem. For now, we’ll set aside lesser (though important) usability factors, such as not following the iPhone UI guidelines and using the standard controls improperly. Let’s start at the beginning. Humans invented money to buy things, right? Your core audience’s main goal is to know what they can afford and when they can afford it, whether it’s a new pair of shoes, a new car or a solid retirement plan.

People don’t prepare a budget just for fun. They make the effort because they hope it will help them make better purchasing decisions (read: buy more stuff that they like), without their rent check bouncing. Your app is getting there. But several key factors are getting in the way of a great user experience. Let’s take a closer look at the app’s “landing screen,” the calendar, the main element that differentiates this app from other budget apps.

First of all, I think the calendar is a great idea. It’s much better than the categorized lists that many other apps have. The calendar is all about how much money you have or will have in future. A list only shows how much you’ve spent. Knowing that your money is gone doesn’t really help achieve a financial goal (purchasing a shiny new laptop, for example).

Here are some downsides to the calendar view:

I believe there’s a way to visualize information in the current design so that users are able to uncover “invisible” patterns. Uncovering the details and patterns behind their spending habits enables users to get new ideas, make informed decisions and achieve their financial goals (and praise your app in the process). Users will better understand their bad habits and be able to take steps to correct them.

A graph could provide richer possibilities for visualizing financial information. It’s much more flexible and scalable then a calendar. Using a graph for the landing screen could dramatically increase the density of meaningful data, while reducing visual noise. Here are some ideas we came up with; this is merely a draft we put together to illustrate our points and to get your ideas flowing—it is not a proposal for a final design:

Next Steps

People love apps that help them achieve their goals. What if your app allowed users to input and compare different financial scenarios, shown through several overlaid graphs?

This capability could help users think through their options:

• If I put my child through this private school, would I still be able to afford the Beemer I’ve always dreamed of?
• How many hours of overtime would I need to work to be able to afford both?

These are few examples of questions that people ask themselves. If your app can help them get the answers, I think it’ll really catch on, and you’ll soon be driving a shiny new Beemer yourself.

3. Units United

“Unit conversion app, Units United. Yep, yet another one… ;) Can you please review it?

— Meils Dühnforth”

The biggest problem with almost every unit converter I have seen is that they require users to submit their query in a format that the computer (or iPhone in this case) can understand. Most unit converters force people to make double the effort to get what they want.

Consider the following scenario: you’re from the US, and you are recounting yesterday’s baseball game to your Icelandic friend. During their last at bat, the Phillies hit a 456-foot home run. Amazing! You punch the value into your unit converter app, but to get an answer you must translate the query into a format that the application understands:

1. Go to “Categories,”
2. Select meters for the “To” unit,
3. Select feet for the “From” unit,
4. Type in 456 on the number pad,
5. Double-check that you are converting 456 feet into metres and not vice versa.

Are all these steps necessary? You just wanted to know “What is 456 feet in meters?” But you had to ask the question in robo-speak. You had to select options from a list to be understood. Good software speaks your language. Among the innumerable unit converters, only Google does it right, allowing you to ask your question in plain English:

Using speech recognition technology is another good idea. Sometimes your hands aren’t free when you need to convert a unit. Say your Icelandic friend is driving on a US highway and needs to convert the 55 miles-per-hour speed limit into kilometers.

Implementing everything described above, your app might look something like this (this quick draft is meant to illustrate the point and is not a design proposal):

This application is much easier to use because there’s no more robo-talk: it doesn’t force users to browse categories and sub-categories, and it accepts questions in everyday language.

Send Your App For A Free Review!

Mobile developers are always welcome to send me their apps for a free review. Just use this form. Please remember that your content will be featured on our Crit Board, allowing developers, designers and users worldwide to join the conversation. If you prefer to speak privately about your design, please feel free to contact us directly.

(al)
Tweet

© Alex Komarov for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: app, Design, iphone, mobile, reviews

Studying art and design usually starts with a deep exploration of elements and principles. Among these elements, the most basic ones — line, point and plane — usually figure in a work of art or design. Thus, we can abstract art and design compositions to lines, points and planes when analyzing them. Not only is this abstraction useful for understanding the structure of a composition, but it also offers new sources of layout inspiration and experimentation.

The Framework Of Sources For Typographic Layout

According to Wucius Wong in his book Principles of Form and Design (page 42), point, line and plane can be considered conceptual design elements because, although they are not always explicit or visible, they seem to be present by implication. He explains how an angle, for example, implies the existence of a point and how lines, by marking the contour of an object, imply the presence of a plane.

In most art and design classes, students are asked to analyze the structure of a painting or design in order to better understand principles of organization. These linear studies usually have no relevance to the student outside of the class. But these exercises hold an important lesson, which is about learning to abstract images — and even our surroundings — into linear structures in order to learn about layout organization.

[Offtopic: by the way, did you already get your copy of the Smashing Book?]

Learning To Abstract What We See

Most of us live in a relatively static environment, whether urban or rural. Recognizing that this environment is framed by points, lines and planes will help us abstract the environment. Let’s consider a photo of an urban environment. Below is a photo of a city escape in Chicago:

(Photo courtesy of the Urban Studies Department, Wheaton College, Wheaton, Illinois.)

Here we have a worm’s-eye view of buildings. We can already discern interesting spatial relationships. The white space in and of it self has interesting shapes. These shapes alone give us creative ways to apply copy. Let’s see an example of how this space could be abstracted:

Linear abstraction.

Here, the city escape photo has been abstracted to simple lines. The lines converge at a conceptual point. The lines enclose spaces to create a conceptual plane. Although I did not mark the plane as such, lines that converge at any four points or angles become a plane. Abstracting spaces can, of course, be done in infinite variation. There is no right or wrong. Feel free to experiment!

In looking at the linear abstraction above, we see several lines converge at a certain point, which is towards the right and a bit off center. We can call this a point of hierarchy. Let’s clean up the abstraction and take another look.

Linear abstraction #2.

Now we have a cleaner and clearer version of the first abstraction, perhaps making it a bit easier to start thinking about a possible typographic layout. So, let’s experiment with type placement.

Typographic layout using the linear abstraction as a grid.

As you can imagine, we could do hundreds of variations of this. We can also play with the intersection of some of the lines and points in the layout:

Typographic layout using the linear abstraction as a grid and as visual punctuation.

These simple exercises in layout composition help us see how a photo of an urban landscape holds unexpected inspiration. Now, how do we use this for other applications? What if an article that we need to design does not have interesting or arresting photographs? One way to solve this is to think about the subject matter and find your own sources for inspiration.

Finding Inspiration In Your Surroundings

This is simpler than it sounds. It requires only that you be curious and get your dusty old camera out of the closet. You can find interesting shapes and arrangements in your kitchen drawer. Look out a window and study how its frame interacts with the space, or walk outside to look at the trees and branches. If you’re in the country, invite inspiration from the expansive landscape. Take photos of or sketch the most obvious linear connections you can find. If you’re in the city or suburbs, find the most obvious linear connections there. I find that buildings are an incredible source of inspiration with their strong vertical and horizontal lines.

Other sources of inspiration are people moving, dancing and exercising. Here is an example of how a photo of a dance performance inspired my design of a calendar for the Iowa State Dance Department. I used the dancers’ strong movement to the left as the basis for the calendar’s grid:

Dance calendar for Iowa State University Dance Program, Ames, IA, 2004
(Copyright: Alma Hoffmann)

What About Web Design?

Browser capabilities for manipulating website layouts are still a bit limited, but not for long. On some websites — The Art of the Web, for example — you can find information and sources for experimenting by rotating elements. The Art of the Web recommends downloading the Webkit nightly build for your browser. It explains that, “Webkit is the rendering engine used by Safari. The Webkit nightly build browser, then, is a preview of what’s to come in Safari and other browsers and devices that use the same engine.”

Few websites use text rotation because of spotty browser support. If you know of any, please share them below in the comments. So then, how can we push layouts a bit more on the Web? What kind of sources can we use for inspiration? Two come to mind: architecture and landscapes.

Architecture gives us horizontal and vertical structures and spatial divisions from which we can take cues. We can play around with it in our horizontal and vertical grids on the Web. Services such as 960 Grid System let us download grids and experiment with spacing for Web designs.

Translating landscapes to the Web by using horizontal scrolling accomplishes two things: it puts the user in control of the navigation, and it evokes an expansive panorama. Peter Pearson’s website (screenshot below) takes full advantage of horizontal scrolling. It gives us a sense of landscape through photography and in the navigation itself. A humorous touch can be found in the invitation to the user to “Let’s go that way,” followed by “Gasp” in parentheses below:

Screenshot of Peter Pearson’s website.

A detail of Peter Pearson’s website.

Other websites push the use of landscape by letting users choose the direction to take. Some allow us to zoom out to see where we want to go, much as we do in a natural landscape. See this example of Schematic:

We stand before this website’s navigation much as we stand at a crossroad, choosing our direction. Allowing users to control their path engages them.

Other websites take advantage of the x-index to create a sense of depth and combine it with horizontal scrolling. In this way, the metaphor of landscape is even stronger and perhaps makes more sense, because the natural environment does have depth. The website for Fauborg (below) does both, while also providing a drop-down menu and hand icon for the horizontal scrolling:

Crowley, a small ad agency in New York, does not use horizontal scrolling, but rather selectively magnifies the menu and text to create perspective and depth. The arrangement has a sense of playfulness, and the user is engaged by seeking the little treasures stowed away in the links:

Exploring Web Design With Webkit

The ability to rotate text opens yet more possibilities for layout design on the Web. Browser support is still inconsistent but catching up to newer coding capabilities, such as HTML5, which allows for three-dimensional effects, and Webkit. With Webkit, I attempted to reproduce the layout discussed at the beginning of this article. Here is the original:

Below are screenshots of my experimentation with code and Webkit to reproduce the text rotation. Close, but not quite the same. The angles require just the right coding combination, because one block will inherit the values of the one above it.

Text rotation using Webkit. (Alma Hoffmann © 2010.)

Here is another example in which the title is rotated in the opposite direction of the title in the original layout:

Text rotation #2 using Webkit. (Alma Hoffmann © 2010.)

Conclusion

Abstracting the structures, spaces and people around us into simple line structures gives us infinite layout possibilities that can be applied to print and Web design. As technology keeps advancing and browser support continues to grow, Web design layout will continue to be more experimental and less restricted to horizontal and vertical alignments. As in the print industry, Web technology will continue to grow to accommodate more and more experimental layouts. These possibilities will offer designers more freedom and versatility. However, design essentials — such as learning to analyze composition and to abstract spaces — remain vital to our ability to translate the three-dimensional world in two dimensions, and vice versa.

References

• Jonathan Snook, author and Web designer and developer
• The Art of the Web
• Greg Dizzia, creative director of Daricca Group
• Stage Six Project In Progress Project
• Jeff Waymire, senior software engineer at SoftVu LLC
• Wucius Wong, Principles of Form and Design, Wiley, 1993

(al)

Tweet

© Alma Hoffmann for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

Wherever we turn online, typography jumps out at us — sometimes literally, with the assistance of some clever coding. And now more than ever, we are seeing greater focus on this design element and its varied implementations around the Web. With the growing popularity of font embedding services and @font-face, typography is the talk of the town, but even though it is a regular topic among communities, not all of our typographic efforts are successful. Sometimes we swing for the fences, only to miss or fall short.

This is what brings us together today. We have looked around the Web and checked some of the many typographic choices of website owners — some of which are successful, others not so much. Below is a selection of some elegant and interesting websites. We will critique the typography on them, in order to explore how we can improve the type on our own websites. Look through them to see whether you spot any typographical trespasses that you may have committed yourself.

[By the way, did you know we have a free Email Newsletter? Subscribe now and get fresh short tips and tricks in your inbox!]

Typography Examples

Denise Chandler
When we look at the portfolio of Denise Chandler, right away the typography begins talking. The original hand drawn sans-serif offers a personal, artistic yet professional feel at the same time. Denise focuses on the most important information and presents it in a relatively simple one page layout. The hover effects offer a great element of interactivity to the site for sure, while the large, bold caps type along with the intricate ampersand for the header works well to playfully complement the page.

The only critique really would be in the contact area. A slightly larger font and line-height, along with some extra spacing between the paragraph and the social media links would have made the area feel as open as the rest of the site. Also, it’s a pity that the “Submit”-button in the contact form doesn’t change on click — a nice :hover and :active-effect could make the experience even more pleasant.

Jessica Hische
Using a good type that doesn’t detract from the content is imperative. Jessica does a tremendous job with this, opting for a simple thin sans-serif font. Even in its simplest form, the italic type adds a flourish to the design. Perhaps for readability, though, the designer could have broken from the italics for the description of the featured pieces. Also, the type could stand to be a bit larger, and not only because the headers appear to blur a bit at that size.

MCQ
The portfolio of Mike McQuade has a truly remarkable interactive page change effect that really grabs your attention. The site is set up as a grid with each square changing position and/or size to accommodate the content that opens with each selection. Also, because the layout is fluid, content squares appear on different positions when you resize the window and hence ensure the proper alignment of the content. It is a very clean, minimalist design that uses a unique combination of a thin and quirky serif and a clean and bold sans-serif to complete the tone and attitude of the portfolio.

The classic color scheme, a monochrome black and cream with just a splash of mint green thrown about, give the site a very attractive overall look. Though the contrast between the gray text and the dark gray background could be brought up by making the text just a tad bit lighter for sharper text.

Cooper Type
The large illustrated ampersand on Cooper Type is a perfect mascot for this typography website, and it works well with the big bold header. A bit more space between the illustration and the rest of the content would make it feel less cluttered. Some of the body type is too small to be readable, and a few of the paragraphs could use a wider letter spacing. Larger type or an alternate font would improve this greatly. The navigation looks a bit misaligned as well; it might work better aligned to the right over the main content.

Hype Nation
Hype Nation uses a stylized font in the header which works really well for the funky feeling of the site, as does the bright orange and gray color scheme. And given that they went with such an unusual header font, the follow-up choice of a simple sans-serif for the rest of the site was a wise one. Though the header is certainly complementary to the site feel, it might have benefited from the contrast of the footer rather than the black on orange that they went with.

The footer is beautiful and perhaps working the header to match the footer a bit more would have been very beneficial to the overall look of the site. The ‘Projects’ section is a bit confusing to use: there is no separate, detailed portfolio or project pages which isn’t good for what is essentially a simple portfolio site. Though overall, the page has excellent type spacing and a good use of white space.

Wing Cheng
Wing Cheng is a uniquely styled portfolio that uses hand drawn effects along with a script font on an accordion sketchbook background to bring together the entire presentation. Using the wireframes look to preview each project instead of the finished product is a very interesting choice, and it certainly adds to the uniqueness of the portfolio. The classy serif font used in the sidebar contrasts well to the hand drawn effect of the rest of the site, and plays into the finished designs you receive when you click on the wireframe of a project.

Though the handwritten, cursive font used to describe each of the projects is a little bit hard to read, and it could stand some tweaking. Also, because the whole website feels a bit more like illustration, it’s a bit difficult to see what elements are clickable, partly also because various elements are underlined. This problem is particularly apparent in the footer of the page where a contact form is displayed. Tooltips or striking button-like appearance of some elements could improve the user experience a bit.

Stephen Caver
Stephen Caver’s portfolio is another site where the typographical presentation strongly stands out as soon as you arrive. The layout of the site is truly remarkable: the font size of the main header and position of elements change when you resize the browser window. The big, bold header with a very subtle letterpress effect, as well as the combination of thin and bold type, creates a great look.

However, the main site navigation on the top is far too small, especially for the font used, and as a result, has some readability issues. The same goes for the vast majority of the body text. Also, the large part of the ‘Vitals’ section has some really low contrast to deal with that creates some issues too. The overall layout of the site is really good with a really strong focus on the work which is great for a portfolio, but so much of the site is hard to read which could end up just driving visitors away.

Kaleidoscope
This web app website has an appealing combination of circular script and squared-off sans-serif font. The typographic choices really add versatility to this single-page website, a testament to the imagination of the designer. The type sets off each distinctly styled section, making the page easily scannable. The contrast could stand to be a bit stronger in a few places on the website (e.g. the section “Complete your workflow” and “Details”), to keep things readable and flowing.

Trent Walton
Trent Walton has a minimalist black and white website with heavy typography. Each article on the website has an original design that features a number of typefaces, but always as large blocks of sharp text, thus maintaining consistency. The most recent article is always the landing page for the website, which gives the recent article a prominent position on the site. The “Articles” page has generous white space and solid alignment, although post illustration do appear to be position a bit too far away from the excerpts. The typography carries the page, filling in the white space and fleshing out the design quite nicely.

Barley’s
This bar website combines serif headers with sans-serif body type well, a combination that tends to be used quite often on the Web. The entire home page could use a bit more white space; the elements feel a bit stacked on top of one another. The type and content need room to breathe. The “News & Events” and “Contact” pages are a much better example of how spacing for the whole website could have been handled.

They feel much less compressed, which only makes the other pages feel that much more confined. One can argue if it is necessary to employ the letterpress effect for navigation items, as it does not quite match the rest of the website. A hidden highlight: the food menu page is a pleasure to look at, but it is not clear what the column “Beer pairings” stands for, especially because it’s always empty.

New Deal Festival
Right off the bat, the header on the home page for New Deal Festival really grabs attention. The script, combined with the block-style sans-serif, gives a clean sharp look. For some reason, though, the company changes the header on interior pages, and these headers are squished together and distorted, making the rest of the website feel a bit unfinished and unpolished.

New Deal Festival could have kept the home page header throughout the website. Also, the typography would benefit from a wider letter spacing. And the main content area would look better with more padding between the edge and the type; 40 pixels would probably do it.

Futu
The clean classic look created by the big bold type stands out right away on the Futu website. There is a bit too much animation, distracting you from the text. A better approach might have been to make the header ad either different or static and then just scroll the featured content. Also, the leading on the body type could stand some work. Some of the paragraphs have an uneven rag, which could rub some users the wrong way. As it stands, the website has a bit confusing hierarchy, and the reader could have difficulty figuring out what to focus on.

Design 977
The sans-serif type works really well for this website, which is clean, minimalist and to the point. Only the most important information is presented, and it’s done straightforwardly. At first glance, the letter spacing might seem a bit small, but in this case it complements the overall design. The website has a sharp angular look, and the tightness of the type sets this off. But while the social media link area is original, the constant animation in the corner is distracting. The text on the profile page could use more leading, and so does the contact form.

Robots Are Friends
Here, the texture works quite well behind the bold serif font, although the type could use a wider letter spacing. Sans-serif fonts seem to work wonderfully for these kinds of minimal websites with big bold typography. However, the sudden solid-gray footer feels a bit out of place here, and the black and gray text on the “About” page has a low contrast against the dark blue, making it a bit difficult to read. Also, the font size in the “Design” section on the front page is way too small, and we are not quite sure if the choice of type for the body copy is optimal.

Louise Fili Ltd.
The script and sans-serif type that Louise Fili Ltd. has selected for its website make for a classic and elegant look. The all-caps serif in the sidebar works well visually, but the sidebar would be more scannable if it were not in full-caps (although the full-caps everywhere else on the website do not detract from the design). The “About” page integrates a drop-cap beautifully into the typographical presentation, setting it apart from the other websites we’ve reviewed so far.

The flourishes between menu items really tie in with the logo script in a whimsical way. The main problem with the design is that the text is embedded into images almost throughout the site, making it impossible to copy. Also, on some pages the embedded text appears a bit blurry. Using plain text would be an improvement of this website.

Attack of Design
The font on Sacha Greif’s website blends really well with the retro feel of the rest of the website. And there is plenty of white space, making the content a pleasure to read. The subtle hover effects on headlines and icons make for a pleasant user experience. The headings in the sidebar are a bit difficult to read, though; perhaps a bigger font size or different font altogether would help. The navigation and hover effect for the different categories are clean and original.

Overall, another great example of type spacing: easy on the eyes and legible. The dates on the comments could use some extra padding around them to feel less constricted. Also, the “Read more” links could stand out a bit stronger. The highlight of the site is a beautiful comments design. The hover effect on the logo is a nice touch, too.

Process Type Foundry
Process Type Foundry uses a combination of serif and sans-serif type, which works really well. The clean minimalist design really highlights the big bold typography. The main body type could use higher contrast, and the relatively small light-gray type is not easy on the eyes. Still, the type throughout the website has a very good leading and letter width, making for a pleasant reading experience.

Also, the large bold headings combined with the thin, evenly kerned sub-heading make the website welcoming and engaging. The “About”-page is a beauty of simplicity and clean, sharp design with generous leading and whitespace.

Chipotle
This restaurant website has a grungy handwritten look for its font, which, combined with the other hand-drawn elements, fits well with the brand and the ‘industrial’ design of the restaurants. However, the typography on the website is almost completely embedded in images, to the point that the little bit of HTML type looks out of place because the other fonts are so distinct.

Also, the paragraph text (as seen on Chipotle’s story page) would look much better with a bit more attention paid to leading. As it is, it seems a bit squeezed together. Also, the main drawback of the site is the audio that starts playing automatically on page load. Notice: the footer contains some hidden treasures for typography lovers.

Worry Free Labs
Another fine example of a subtle texture working with the type instead of against it. As has been demonstrated a number of times, script and sans-serif fonts can complement each other well, especially on websites with the kind of retro look of Worry Free Labs. However, the letterpress effect on the type looks rough and unattractive, while the script font does look attractive and playful. If a font does not scale properly, then finding an alternative is better than forcing it into your design.

One site highlight that stands out, even though it is not necessarily type related, is in the portfolio section, the fluid scrolling through their work with the click of the ‘Next’ navigation button is — sorry for the wording — extremely awesome. We don’t really know why the company uses the German greeting “Willkommen” in the header of the page, though. But it is a nice touch for German visitors!

Made By Water
The first thing that jumps out at us from this website was the oversized type for “Running Water,” bold and eye-catching for sure. Spreading “Running” out some and bringing “Water” closer together could improve the introduction of the site. The uneven, almost sketchy, font establishes the website’s character well, and the background works well, too.

The gray and yellow color scheme works well with the font, and the minor yellow highlights stand out… except when you mouse over the header, the yellow is blindingly bright; a darker tone would work better. The contrast of the light-gray link and the subheading color could also use a bit of tweaking.

The Design Cubicle
TDC has a minimalist theme, with a heavy focus on typography. The squared-off sans-serif fonts complement the rest of the design, with their diversity of italic, bold and all-caps. A fine example of well thought out spacing in the body text, making for optimum readability; you can tell a lot of attention was paid to this aspect. Much of the text in the footer feels a bit small; the difference between 11 and 12 pixels may not seem much, but as you can see here, it can make a huge difference in readability. The beautiful drop-down menu in the top navigation is subtle, but looks great and even has nice hover effects.

Dubbed Creative
In the header, the thin red font of “Creative” gets lost next to the bold white of “Dubbed” and could use better balance. At first glance, the user is overloaded with information. An easy fix for this typographical barrage would be to move the description of the website from beside the header to under it. The site has a very promising structure, yet feels way too overwhelming because of the lack of whitespace. There are too many colors, too many icons, too much text, too much buttons. An example of a site where nice typography doesn’t necessarily lead to optimal results.

The Combine 2010
The designers of this website do a good job of establishing visual hierarchy by combining font types. Combining serif, sans-serif and script typefaces is no easy task, no matter how simple they make it look here. All of the calls to action are visible and attractive. The texture in (rather than behind) the heading type sets off the solid background well; this texture is different than most of the other ones we’ve seen.

It is pretty obvious that the designers know their typography. On the “Schedule” page, “2010″ would look better with a bit tighter letter spacing; also, the logos on the Sponsors page present so many different colors and fonts that it looks a bit sloppy.

Edgar Leijs
As soon as you land on Edgar Leijs’ portfolio website, you are met with a bold oversized typographic header. The mouse-over effect in the logo is certainly nice, but the light yellow on white in the “LeIJs” is visually grating. Perhaps the yellow could be replaced by a more muted color, or the white could be softened to more of a gray. The yellow text in the main content area looks really good there, but it is not compatible with the white behind it.

Also, increasing the contrast between the dark-gray background and light-gray text would improve readability. When you hover over a portfolio item, a clever text box pops up that offers details unobtrusively. The screenshots of the works in the portfolio don’t have to be greyed out though, making them clearer and more vibrant (at least on hover) would make them a bit more attractive. Very original, distinctive and interesting design.

Rouse
Rouse employs a letterpress effect for the sub header which looks great on the textured background, really carving out the letters sharply. The combination of the sans-serif headers with the serif body text plays well into the slight retro look of the site. Though the effect that was used on the word ‘Rouse’ looks a bit strange. It is easy to see that it is supposed to be a 3D-effect, however it is pretty poorly rendered. The line length and leading of the body copy are done beautifully.

A couple of negative remarks: the footer could use some extra top padding to balance it out and give the overall design a symmetry, and too much text is embedded in the images, making it impossible to copy and paste.

Related Posts

Below are a few related posts you might want to check out. Also leave your thoughts in the comments section below.

• 20 Fresh High-Quality Free Fonts
  A post from our archive that looks at 20 free top-shelf fonts for your designs.
• 50 Helpful Typography Tools And Resources
  Another post from Smashing’s past that collects useful type tools for your design arsenal.
• 25 New High-Quality Free Fonts
  Another post featuring a collection of 25 fantastic fonts for the community.

(al) (vf)

Tweet

© Fran Melo and Angie Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: designs, showcases, typography

Tri-fold Brochure

Client: ESC Region 12

Mistakes are made every day in the design and development world. It’s nothing to be ashamed of; it happens. In fact, mistakes are one of the most powerful learning tools at our disposal. Our mistakes impart important lessons that we carry with us as we continue to hone our skill set. Own your mistakes. Never shy away from them; they are the milestones in our development.

So often we view mistakes negatively and let them get us down. We believe they indicate failure and that our otherwise perfect record will be forever marred. No one is perfect; we all make mistakes. They indicate failure only if we fail to learn from them.

How often have you stayed late, trying to get something done and did some embarrassing mistake instead? We can learn from our mistakes and mistakes of our colleagues. Image credit

The online design and development community is a wonderful resource in this respect. Not only are members open about their mistakes, they share their experiences as learning opportunities for others — this is helpful for those of us who have not yet suffered through the same bumps in the road.

With this in mind, we turned again to our Twitter followers and Facebook fans to find out about the worst design or programming mistakes they have ever made. Now we share them with you, our readers, so that we can all learn from them and avoid making the same mistakes.

Related Posts

• 9 Common Usability Mistakes in Web Design is a useful post that covers some common mistakes made when designing for the Web.
• Speaking of common mistakes, here is another entry from our archive that lets you in on some problems faced by e-commerce designers: 15 Common Mistakes in E-Commerce Design.

[Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #2 is Successful Freelancing for Web Designers, 260 pages for just $9,90.]

Bait And Switch

The first common mistake we should learn from — and which several of our followers have had to face — is the old bait and switch. It occurs across the spectrum, for the newb and the accomplished professional, because it’s an easy mistake to make as the working hours add up. What is the bait and switch? It happens when you’re working on one version of a website or project and, at some point during the tinkering, you accidentally switch it for the active website or project before it’s ready.

When we’re in a constant back-and-forth workflow, getting mixed up is easy, at which point the bait and switch can happen. And it causes all kinds of chaos and headaches. Awareness and caution are needed to prevent this error from being part of your personal experience. Before you finalize changes or processes, be sure you’re working with the right file and uploading to the correct location. This isn’t a sure-fire prevention plan, but it will certainly improve your chances.

What Our Followers Said

• “I accidentally put a half-finished (with massive broken bits) update of a website over top of the current live one without a back-up.”
• “I sent $10,000 worth of product to a customer while testing an ordering portal.”
• “I deleted an actual repository instead of a working copy. #svn”
• “Worst programming mistake: editing off a live server and then uploading an old version of the website. All files lost!”
• “Sat on the development FTP for half an hour, being mad that the live website wouldn’t update!”
• “Moved the entire directory of websites on a live server into a different folder, then lost it or deleted the in-house CMS”
• “Programming mistake: writing data to the wrong database.”
• “Uploading to the dev website FTP and wondering why the live website wasn’t changing, which sent me around the bend in the process!”

Falling Behind On Back-Ups

Given that back-up-related mistakes usually come to light once you realize you’ve just pulled a bait and switch, we’ll tackle these next. Problems with back-up files are common in the design and development community, and they are openly lamented. For some reason, though, many of us still find ourselves panicked when we realize we have no current back-ups of the project we’re working on. And it usually hits us just after we lose the active version of the project and need it replaced.

We can take steps to save elements of our work and prevent episodes like this from becoming remorseful blog posts. You can be either low-tech or high-tech when you address this potential problem, but you need to do something. It could be as simple as making a list of details to check daily, and backing up data could be the final step. Alternatively, you could pay for an automated back-up service that guarantees completion of the task. There are several options, each with pros and cons, so find one that works for you and implement it post-haste.

What Our Followers Said

• “I moved a dynamic, CMS-contained website across to a new server. Forgot to back up, then deleted templates in the process. D’oh!”
• “Mistake: not backing up a compiled Flash slideshow, replacing it, then realizing the new version was completely broken.”

Measure Once, Cut Twice

The next mistake we’ll cover happens fairly often. For any number of reasons, we end up measuring once and cutting twice, so to speak. The measurements we work with vary greatly from project to project and from Web to print, so we need to be alert to what we are sizing and aiming for. Sometimes it isn’t so much the measurements as it is the content that requires a re-cut.

Often calculations, measurements and the concept phase need more time than expected. Turning off the computer and getting back to the sketch board or a notebook is often very useful to avoid mistakes. Image credit

Chalk it up to being overzealous or getting sloppy in our work as we push toward deadlines. If these are the reasons for our re-cuts, prevention is easy: just avoid those things… which is easier said than done. Still, if we mind our p’s and q’s and double-check everything before submitting it, our chances of embarrassment decrease. Follow the carpenter’s old rule of thumb, “Measure twice, cut once” — it benefits us designers and developers, too.

What Our Followers Said

• “Mistake: having 20,000 cards printed that didn’t fit into a lanyard card holder”
• “Got my colleague’s phone number wrong on her business card… We ordered 2,000.”
• “This isn’t really a programming mistake, but the most embarrassing mistake I’ve made in Web design was buying a domain name that had the client’s name in it — but part of the name was wrong. Good thing domains are cheap!”
• “I managed to drop an ‘m’ off ‘millimeters’ in InDesign. Ended up with an 88-meter-wide business card. Schoolboy!”
• “I think most of us have experienced the horror of hitting ‘Send’ on an e-blast, only to quickly realize it’s wrong.”
• “Mistake: when I post something and then two weeks later or more, I find out something’s wrong with it.”
• “A couple of years back, I made a beginner’s design mistake with print: envelopes and paper didn’t match.”
• “Sent PDF to the printing house for 1000 leaflets. Received them and realized that the phone number was wrong. Then, sent corrected PDF, received leaflets and realized that the wrong PDF was sent. We had 1000 useless leaflets with the right number but with the ‘iStockphoto’ watermark on every (lo-res) picture. Third time it was OK.”
• “I dropped an ‘L’ from the word ‘public’ in a school prospectus (and website). Honest mistake!”

Miscommunicate Expectations

Another problem encountered by designers and developers that you can learn from before encountering it is a breakdown of communication with a client or boss. Many of us let things become unclear or slip by, which makes us unsure whether everyone involved in a project is on the same page. Usually this is caused by a lack of confidence in ourselves or fear that asking for clarification would reflect poorly on us. Whatever the reason, we decide not to revisit the issue and instead proceed with a shaky understanding of what we’re supposed to do.

Every time we communicate with our boss or client, we open ourselves up to the possibility that one or two ideas might get lost in translation. We should be as clear and concise as possible in our discussions so that work stays on track… at least on our end — we can’t control others. If we’re dealing with someone who is unfamiliar with the design and development field, understanding what they’re asking for can be tricky. Take notes, and go over them with clients at the end of meetings so that everyone understands where things stand. Good notes prevent communication blunders.

What Our Followers Said

• “I underestimated the amount of content that two different clients wanted. Not a clear picture from the start.”
• “For my part, I must say, not reading a ticket well enough and spending two days coding something that wasn’t asked for. Over-enthusiastic FTW!”
• Emily B.: “My mistake was telling my current employer than I have some experience in Web design (meaning HTML and some CSS); now it’s part of my job to learn how to code ASP and maintain and redesign our entire e-commerce website. Ugh. I’m a print designer!”
• “I’m in the same situation as Emily. Job description and interview included ‘some Web,’ and now I’m trying to learn PHP and run a full searchable retailer list for my company! Thank God for online tutorials!”

Careless Coding

When it comes to coding, we can easily drop the ball. Coding is an in-depth process, in which many different layers are stacked on top of each other, and one can get lost in it. This is one reason why developers comment in their code: so that they leave trails of breadcrumbs throughout their projects. This is a good habit to form, but sometimes it leads to an embarrassing faux pas or frustrating hours of rebuilding, as revealed by our followers.

With just one misfired keystroke, a project can go from a coder’s dream to a virtual nightmare, with no perceptible way out. As if that’s not enough, our coding comments can bite us in the back end, especially if we’ve thrown some nonsensical, fun or unprofessional bits into the code and forgot to remove them. We need to be mindful as we code and avoid distractions as much as possible to avoid burying mistakes so deep that they reveal themselves only after hours of careful combing. Also, take one last look through your comments to be sure you’re not leaving something that you’d rather others not see.

What Our Followers Said

• “I left some profanity in a client’s HTML once while testing text-indent (off-screen position). Very, very embarrassing.”
• “Accidentally leaving things like ‘Mooooo’ and ‘Baaaaa’ in code that has gone live!”
• “I used to write haiku in my code to mark my place, and I think I forgot a few out there somewhere… not anymore!”
• “I once did (as root) `rm -rf tmp /` instead of `rm -rf tmp/` on a Friday afternoon. Painful weekend.”
• “A typical one: Using = instead of == in an if statement. Always takes quite some time to figure out.”
• “Typed rm -rf .* on the server. @wsttn wasn’t happy when I deleted everything.”
• “Using a body * { text-align: center; } on a log-in form, but accidentally placing it in the default style sheet instead of the specific log-in style sheet. Our largest customer didn’t like it when it went live.”
• “I removed the ID from the ‘Submit payment’ button, and the website failed to take bookings for six hours. Lost £20,000.”
• “Forgot the where clause when testing SQL to a user table. No fun, I tell ya!”

Forgetting The Filler

Sometimes we forget to redact our coding comments and leave in an embarrassing tidbit or two. There are also times when we accidentally leave in filler content. That’s not necessarily a problem unless the client does not recognize it as filler, because then they might not remove it either. Remember that clients, especially the less technically savvy ones, are probably extremely paranoid about deleting anything, so any filler you forget to pull will inevitably be published to the masses.

Again, it comes down to vigilance. We can’t stress enough — on top of all the other stresses in the design and development field — the importance of double- and triple-checking all of these elements before labeling anything as complete. Certainly do this before turning anything over to the client. Making a generic checklist for every project you take on will help you avoid these mistakes. Remind yourself somehow to watch for elements that tend to slip through the cracks.

What Our Followers Said

• “Forgetting to remove nonsense words (used for testing) in an assignment and losing marks. Otherwise, perfect code.”
• “Two words: dummy data. Strictly ‘Lorem Ipsum’ ever since.”
• “One time I left an unkind phrase about a client in the comments, and they found it later on.”

Wrong Tool For The Job

The last mistake we’ll discuss in depth usually occurs early on in our experience in the design and development field: using the wrong tool for the job. It does happen, and more often than we’d like. When you’re unfamiliar with a field, you’ll sometimes use the wrong platform yet believe you’re on solid ground. At some point, you find out that the program, a supposed godsend, is not compatible with your client’s program or the program of others involved in the project.

Wrong tools doesn’t necessarily mean your coding or designing applications, it also can mean a wrong environment or computer setup. On the photo above, the setup looks solid and well-organized. Image credit.

Communication can assist in this area, though not as much as research. Find out from your client exactly where the project is going, and contact them yourself to ensure that files will be delivered in the proper format. You can leave this to the client, but you are responsible for ensuring compatibility, so it’s best not to leave it to someone else. Also, as you transition to new areas, research the tools of the trade to avoid making this mistake.

What Our Followers Said

• “I tried to deliver my very first program for Notts County FC to the printers in MS Publisher. I cringe even now.”
• “The first Photoshop website I ever did was a sliced PSD with all of the content in images… That was back in 1999/2000.”
• “Using Drupal to do ‘quick ’n’ dirty’ websites. They were dirty, but they sure weren’t quick.”
• “Designing a database app: rather than de-normalizing data, adding/removing table columns on the fly. Long time ago!”
• “Hard-coding a navigation across 10 pages instead of using an include. Was new to Web dev at the time.”
• “Depending on an external source for data and, because that crashed, our website crashed. Almost cost me my job.”

More Mistakes To Learn From

Below are several more community-contributed pearls of wisdom that we can learn from. We’d like to thank our dedicated followers who revealed their biggest mistakes so that we could benefit from their toil and trouble.

• “Mistake: severely undercharging for a massive job. My very first freelancing job. Was not worth the time and effort!”
• “There was a time in the ’90s when I thought Papyrus was beautiful. *Hangs head in shame*”
• “I once created an iteration of a logo using Comic Sans, and it was chosen! I’m not proud, but I was young and naive at the time.”
• “Used Comic Sans for something serious.”
• “How about 90,000 alert emails sent to four people over one weekend (myself, a colleague and website owners) = 360,000 emails.”
• “Deleted the shopping cart table from a live website instead of deleting one of the records in the table.”
• “The worst programming mistake I made was to develop an admin area with cookies only (without other security systems).”

Further Reading

Here are a few relevant articles you might want to check out. Definitely worth reading if and when you get the chance.

• 43 Web Design Mistakes You Should Avoid
  An article from Daily Blog Tips that identifies dozens of mistakes that designers make, so you can avoid them.
• The 10 Most Common Mistakes Web Designers Make
  A helpful post from the Smashing Network via our sister website Noupe.
• 10 Mistakes Freelance Graphic Designers Make When Starting Out
  This useful post from WAHM targets beginners.
• The Top 12 SEO Mistakes Designers Make
  Another informative post that teaches by walking you through the mistakes of others.
• Top Mistakes New Designers Make When Learning Graphic Design
  Graphic Design Blogs’ post for beginners to help them steer clear of certain mistakes while learning.

What about you?

What is the worst design or programming mistake you’ve ever made? And if you’d like to participate in other discussions and contribute to articles like this one, follow us on Twitter and like us on Facebook. We are looking forward to your insights!

(al)

© Robert Bowen for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags:

At the end of last year, we published a comprehensive list of web design and development conferences that might be of interest to Smashing Magazine’s diverse readership. Many readers commented and added links to other conferences and events that weren’t listed, some of which were added to the post. Using the contents of that list along with some other sources, we’ve compiled a list of web design and development-related conferences and events that will be taking place in the next six to eight months.

As always, there is no way for us to be able to include every possible event here, but we’ll be glad to update the list if you provide a comment to an upcoming event that you feel would be of interest to graphic designers or web developers.

While the previous roundup was organized by category, this one lists the events in chronological order starting with the earliest. Jump to an appropriate month using the links below:

• September 2010 Events
• October 2010 Events
• November – December 2010 Events
• Early 2011 Events

September 2010 Events

FITC Mobile 2010
FITC Mobile covers all aspects of mobile content development — with presentations, demonstrations, and panel discussions. Covering iPhone/iPad, Android, Flash 10.1, Windows Mobile, HTML5, Unity, Marketing, Usability, and other relevant topics in the mobile world.

When: September 16-18, 2010
Where: Toronto, ON, Canada at the Metro Toronto Convention Centre

An Event Apart D.C.
“From the makers of A List Apart, An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: September 16-18, 2010
Where: Washington, D.C., USA at the Washington Hilton

London Design Festival
“The London Design Festival is a nine-day celebration of design in the world’s creative capital. The Festival is a platform for the widest spectrum of design disciplines, brought together as a unique and accessible programme.”

When: September 18-26, 2010
Where: London, UK at a number of different venues across the city

MOBILE 2.0
“The MOBILE 2.0 Conference is a two-day event focusing on new Mobile Applications and Services, Mobile Ecosystems, and Disruptive Mobile Innovation presented by the Mobile 2.0 Organizing Committee. For Mobile Developers we have designed an entire day for you to hear about the latest developer tools and monetization techniques.”

When: September 20-21, 2010
Where: Silicon Valley, CA, USA at the Grand Hyatt & the Microsoft Silicon Valley Conference Center

Design For Mobile 2010
“Design For Mobile (D4M) is a multi-faceted conference aimed at engaging the mobile community in a shared discussion about the future of mobile and ‘the mobile now.’ This is a conference focused on strategy and tactics for user research, product definition, usability testing, interaction and design. D4M is comprised of both preliminary and advanced workshops that flank three full days of speakers and interactive sessions.”

When: September 20-24, 2010
Where: Evanston, IL, U.S.A at The Hilton Orrington

Web Directions USA
“CSS3, HTML5, Geolocation, mobile web — we’re seeing an explosion of innovation in design and development unlike at almost any other time in the web’s history. To keep you ahead of the curve, Web Directions USA features leading web practitioners, bringing you the freshest technologies, techniques and know-how.”

When: September 21-25, 2010
Where: Atlanta, Georgia, USA at the Loews Atlanta Hotel

National Association of Government Webmasters Conference
“The NAGW National Conference is the premier conference that focuses on local, state and regional government web professionals. Local, regional, state and federal government web professionals join their peers at the conference for two and a half days of education, training and networking in a relaxed professional environment.”

When: September 22-24, 2010
Where: St. Louis, MO, USA at the Millennium Hotel

European Information Architecture Summit
“A summit for anyone concerned with the design of navigation, organization, labeling, and search systems that help people find and manage information more successfully.”

When: September 23-25, 2010
Where: Paris, France at Les Salons de l’Aveyron

Flash on the Beach
“Don’t think that Flash on the Beach is only about Flash. Sure appearing at FOTB in the past we have had the usual suspects — Flash, Flex, AIR, and then some. Open Frameworks, Processing, AJAX, Photoshop, After Effects, Art, Design, Illustration, Animation, Sound and many more. Whether you are a tech-head or a creative, if you are a decision maker or a team manager, if you are in need of a fix of creative inspiration, or want to know the latest how-to’s, Flash on the Beach is where you’ll get it.”

When: September 26-29, 2010
Where: Brighton, UK at the Brighton Dome

BlackBerry® Developer Conference
“The BlackBerry® Developer Conference is a premier showcase for what can be done with BlackBerry apps, attended by thousands of the world’s most enthusiastic developers, BlackBerry experts, and Research In Motion® (RIM®) partners. It’s the place to get technical, code-driven information that can be applied to projects; the place where new tools and technologies can be experienced for the first time; the place for getting your questions answered, or finding the inspiration to go further with mobile applications than you ever imagined possible.”

When: September 27-30, 2010
Where: San Francisco, CA, USA at the Marriot Marquis

The ExpressionEngine and CodeIgniter Conference
“At the ExpressionEngine & CodeIgniter Conference you can meet the experts, be inspired and break new boundaries! This event brings you presentations and workshops from your favorite EE & CI speakers. Both beginners and experienced users will benefit from a variety of topics and sessions: discover how your favourite content management system and PHP framework can bend even further!”

When: September 29 – October 1, 2010
Where: Leiden, The Netherleands at De Stadsgehoorzaal theatre

Forward – Phoenix Design Week 2010
“The beauty of Phoenix Design Week is that it enables us to put Phoenix design on a pedestal. Throughout Design Week, there are many ways this is being executed, but one of the coolest ways we manifest this goal is by giving you options to showcase your own creative prowess.”

When: September 29 – October 3, 2010
Where: Phoenix, AZ, USA at the Phoenix Convention Center plus other locations

IDEA Conference
“IDEA2010 is a design conference tailored for you. This year’s unique mix of traditional presentations with structured activity time assures that you’ll get high-level concepts from big thinkers, and the space to apply them with peers.”

When: September 30 – October 2, 2010
Where: Philadelphia, PA, USA at the Independence Seaport Museum

Additional September 2010 Events

• WebExpo Prague 2010 (Prague, September 23-25)
• Accessiblity Summit (Online, September 30)

October 2010 Events

A Better World by Design Conference
“A Better World by Design is a three-day internationally acclaimed conference in Providence, RI that connects students, professionals, and individuals from a variety of disciplines in order to build a global community of socially conscious and passionate innovators. Presenters share engaging stories, workshops teach creative skills, and discussions reframe perspectives.”

When: October 1-3, 2010
Where: Providence, RI, U.S.A at Brown University & RISD Campuses

Future of Web Apps
“The Future of Web Apps is a conference for web developers and entrepreneurs. You’ll learn about cutting-edge tech and exciting new ideas.”

When: October 4-6, 2010
Where: London, UK at The Brewery

Fronteers
“Founded in 2007, Fronteers is the non-profit trade organization of Dutch front-end developers. Its goals include the professionalisation of our trade, (improved) recognition of the front-end discipline, and improving the position of Dutch front-end developers in their company and the web design/development world in general.”

When: October 5-8, 2010
Where: Amsterdam at Pathé Tuschinski theatre

DesignPhiladelphia
“Through its events and programming, DesignPhiladelphia showcases the role that design has played historically in Philadelphia, and celebrates the city’s contemporary significance as a center for creative advancement. Through the breadth of our events, DesignPhiladelphia unites the creative disciplines – from architecture to interior design, fashion to product design, multi-media to graphic design.”

When: October 7-17, 2010
Where: Philadelphia, PA, USA at various locations

5D|10 The Future of Immersive Design Conference
“5D | The Future of Immersive Design is the visionary, international conference for all designers, practitioners and students working in the fields of narrative media.”

When: October 8-9, 2010
Where: Long Beach, CA, USA at the Carpenter Performing Arts Center

International PHP Conference
“With its mixture of topics the International PHP Conference provides an ideal resource for all professionals and their successful daily routine within the whole PHP spectrum. Insights into current Web 2.0 technologies, Security, Best Practices for tools and components, Enterprise know-how, databases, architectures and more are presented at the International PHP Conference 2009.”

When: October 11-13, 2010
Where: Mainz, Germany at the Rheingoldhalle

Web Directions South
“Featuring leading web practitioners from across the world, bringing you the freshest technologies, techniques and know-how in web design and development, along with numerous networking and social opportunities. If you work on the web, Web Directions South is the industry event of the year.”

When: October 12-16, 2010
Where: Sydney, Australia at the Sydney Convention and Exhi bition Centre

AIGA Gain
“The premier biennial event for business and design leaders. Attendees will learn how industry leaders addressed business challenges through design—and how they reinvented their businesses, their strategies and even themselves. We’ll hear business, design and thought leaders share their innovative approaches to generating greater return on investment, fostering emotional connections and providing positive brand experiences for customers.”

When: October 14-16, 2010
Where: New York City, NY, USA at The Sheraton New York Hotel and Towers

Voices That Matter iPhone Developers Conference
“You’ll acquire skills for mastering iOS development from leading authors and experts during a weekend of strong educational sessions. Our speakers are eager to share their knowledge, answer your questions and address your application needs. You’ll participate in interactive discussions that provide the perfect environment for an unbiased and effective learning experience. This engaging two-day conference features how-to sessions covering the latest, most intriguing news in application development for the iPhone and iPad.”

When: October 16-17, 2010
Where: Philadelphia, PA, USA at The Hub Cira Centre

jQuery Conference
“The annual conference of jQuery users and developers. There will be talks on jQuery, jQuery UI, plugins, complex application development, and more — all from the top jQuery developers. Speakers include John Resig, Paul Irish, Karl Swedberg, Doug Neiner, and more.”

When: October 16-17, 2010
Where: Boston, MA, U.S.A at the Hilton at Boston Logan Airport

Web Design World
“These are interesting times: a combination of technical innovation, audience growth, and crummy economy. As a web designer, you can’t escape any of the three. But you can learn how to keep up with the innovation, take advantage of the growth, and survive the downturn. That’s where we come in. We take our mantra — provide practical, no-fluff, how-to — very seriously. If you’ve joined us before, you know that. If you haven’t, please check us out.”

When: October 18-20, 2010
Where: Las Vegas, NV, USA at Planet Hollywood Resort & Casino

Do-It-Yourself Usability Testing: The Workshop
“The workshop will include: A complete explanation of how I recommend doing testing (Hint: very simple, very fast, and very cheap); Two live usability tests on attendees’ sites, so you can see the whole process in detail; A chance to practice conducting a test on your own site; Advice on how to interpret your findings and decide what changes to make; Plenty of time to answer your questions about testing or any other aspect of usability.”

When: October 20, 2010
Where: Washington, DC, U.S.A

Front-Trends Conference
“This is a gathering for front-end lovers and professionals to discover the current trends and tools to build a professional career out of innovative front-end development.”

When: October 21-22, 2010
Where: Warsaw, Poland at the Centrum konferencyjno – kongresowe

Brooklyn Beta
“Brooklyn Beta is a collaboration between Analog and Fictive Kin. Our goal for the conference is to inspire you to ‘make your own stuff.’ We’d love to see what the Web would be like if all you talented web people started using your magical abilities to bring your own ideas to life. To help, we’ve put together a conference aimed at turning inspiration into action with talented folks from every web field attending. We want to get all the people who can turn an idea into reality in one place and see what happens.”

When: October 21-22, 2010
Where: Brooklyn, NY, USA at the Invisible Dog

ExpressionEngineCamp
“ExpressionEngine Camp is a collaborative all-day workshop about ExpressionEngine on October 22nd. Learn best practices or share tips about creating web sites with EE.”

When: October 22, 2010
Where: Denver, Colorado, Casselman’s Event Venue

Adobe MAX 2010
“MAX 2010 is an amazing opportunity to learn new skills, explore emerging technologies, and connect with thousands of other industry leaders, Adobe products users, and Adobe teams. The conference offers hundreds of informative sessions and hands-on labs for designers, developers, and decision-makers, and there are countless networking opportunities, from organized events to casual conversations in hallways between sessions.”

When: October 23-27, 2010
Where: Los Angeles, CA, USA at the Los Angeles Convention Center & the Nokia Theatre L.A. LIVE

FITC Unconference @ MAX 2010
“FITC brings together thousands of forward-thinking designers, developers, and business decision makers that are shaping the future of our industry. The Unconference is a way for attendees to convene in a casual setting to share ideas as well as host their own discussion groups. This year FITC has once again been chosen as one of the organizations to run one of the Unconference areas.”

When: October 25-27, 2010
Where: Los Angeles, CA, USA at the Los Angeles Convention Center

View Conference 2010
“VIEW Conference is the premiere international event in Italy on Computer Graphics, Interactive Techniques, Digital Cinema, 3D Animation, Gaming and VFX. VIEW 2010 will continue to focus on exploring the increasingly fluid boundary between real and digital worlds. Through lectures, meetings, tributes, exhibits, screenings and demo presentations VIEW will reveal the new digital frontier sweeping from cinema to architecture, from automotive design to advertisement, from medicine to videogames.”

When: October 26-29, 2010
Where: Turin, Italy, at the Conference center Torino Incontra

Web Developers Conference
“The goal of the Web Developers Conference was to get students engaged with the world of the web and what this beautiful industry offers as well as meeting professionals and making important contacts that could lead to placements and even graduate positions.”

When: October 27, 2010
Where: Bristol, U.K at the UWE Exhibition & Conference Centre.

Microsoft PDC10
“The PDC isn’t just about content and sessions — it’s an opportunity for you to get hands-on access to the latest technologies, have your questions answered by the people who conceived and built the technologies and plan the features and architecture to support your business goals. If you’re a developer, architect or technology leader involved in making strategic technology decisions for your company or organization, you can’t afford to miss the PDC.”

When: October 28-29, 2010
Where: Seattle, WA, USA at the Microsoft Campus

Usability Week 2010
“Many conferences offer cavernous exhibit halls, brief seminars on second-hand discoveries, and a sense of anonymity that can be truly alienating. Usability Week takes a different approach. In place of scattered, shallow talks, Usability Week offers up to 6 days of deep learning as international experts lead full-day tutorials on topics such as: Fundamental guidelines for Web usability; Applying information architecture (IA) principles; Writing for the Web; Application design; Integrating social features on mainstream websites; The human mind (how your users think).”

When: Various dates in October and December.
Where: San Francisco, U.S.A; Copenhagen, Denmark; Edinburgh, UK; Las Vegas, USA

Additional October Events

• TYPO3 Conference (Germany, September 30 – October 2)
• Day of DotNetNuke® (Chicago, USA, October 2)
• Paris Web 2010 (France, October 14-16)
• PNW Drupal Summit (Vancouver, Canada, October 2-3)

November – December 2010 Events

An Event Apart San Diego
“From the makers of A List Apart, An Event Apart is an intensely educational two-day conference for passionate practitioners of standards-based web design. If you care about code as well as content, usability as well as design, An Event Apart is the conference you’ve been waiting for.”

When: November 1-2, 2010
Where: San Diego, CA, U.S.A at the Westin Gas Lamp Quarter

How to Web 2010 Conference
“Learn to build better web apps and businesses.”

When: November 3-4, 2010
Where: Bucharest, Romania at Hotel Intercontinental

FITC Edmonton 2010
“Back for its second year, FITC Edmonton promises to be jam-packed with presentations, demonstrations, and panel discussions. With some of the most interesting and engaging presenters from around the world, FITC Edmonton will be two days and nights that will leave you inspired, energized and awed!”

When: November 6-7, 2010
Where: Edmonton, AB, Canada at the Northern Alberta Institute of Technology

edUi Conference
“A learning opportunity for web professionals serving institutions of learning. Through a rare speaker lineup, including top innovators and industry peers, we provide inspiration, tools, and techniques to help web professionals serving colleges, universities, museums, libraries, and other institutions of learning address the challenges they share improving the experience of their users online. edUi 2010 offers something for every member of your web team, with sessions on usability, design, programming, rich media, strategy, social media, and more.”

When: November 8-9, 2010
Where: Charlottesville, VA, USA at the Omni Hotel

User Interface Conference
“UI15 is an intense, inspiring 3-day event, masterfully crafted to bring out the best in today’s UX professionals. We’ve assembled an all-star team of design experts to share their latest techniques in interaction design, content strategy, design thinking, and visual communication.”

When: November 8-10, 2010
Where: Boston, MA, U.S.A at the Renaissance Boston Waterfront Hotel

Build Conference
“The hand-crafted web design conference. Build is a small, yet perfectly formed, boutique design conference where interesting, talented web practitioners from all over the world come to share ideas, techniques and inspiration. Some are on stage; some are in the audience. For the second year running, we’ve created the conference we really want to go to. We think you might like it.”

When: November 8-12, 2010
Where: Belfast, Ireland at Waterfront Studio

RubyConf 2010
“RubyConf is the official International Ruby Conference. Founded in 2001, RubyConf has provided an annual venue for the ever-growing Ruby community to meet face to face to share, collaborate, and socialize.”

When: November 11-13, 2010
Where: New Orleans, LA, USA at the Hilton New Orleans Riverside

Full Frontal JavaScript Conference
“Full Frontal is a conference held in Brighton UK, for the front end developers with JavaScript skills ranging from beginner to advanced. If you’ve dabbled with JavaScript in the past and wanted to learn more about how the language works and what makes it tick, then this conference is for you.”

When: November 12, 2010
Where: Brighton, UK at the historic Duke of York’s Picturehouse

Future of Web Design
“The Future of Web Design is coming back to New York in 2010. The newly revitalised event has evolved into a beautiful three full days of essential web learning. A full day conference followed by 2 solid days of in depth workshops, all taught by the best in the industry.”

When: November 15-17, 2010
Where: New York City, NY, USA at New World Stages

Semantic Web Summit East
“How can you create value that will put you ahead of the competition? The Semantic Web Summit, formerly the Web 3.0 Conference, features innovators across industries examining the potential of the semantic web, and how it can transform the way you do business. This won’t be a day and a half of technical jargon — this event is about improving efficiencies in marketing and information management for a positive bottom line effect.”

When: November 16-17, 2010
Where: Boston, MA, USA at the Hynes Convention Center

Design City Graphic Design Expo
“Stay on top of your industry! Visit Design City and see the latest graphic design tools, services, and products from the world’s largest vendors. You’ll see and test software that you’ve been wanting to try, you’ll meet the people that you talk to on the phone every day, and you’ll be wowed by some of the latest technology created for your profession.”

When: November 20-22, 2010
Where: Toronto, ON, Canada, at the Direct Energy Centre

The Rich Web Experience
“RWX 2010 will cover the hot areas of interest in the web space today: HTML5, CSS3, JavaScript, Ajax Libraries, Semantic Web, iPhone, Android, Flex, GWT, NodeJS, Security, and more. RWX 2010 will feature 6 parallel tracks with over 15 speakers and 60 plus technical sessions/workshops. At RWX 2010 you will interact with industry experts, project leads, authors, and top developers.”

When: November 30 – December 3, 2010
Where: Fort Lauderdale, FL, USA at The Westin Beach Resort

Additional November Events

• WordCamp Netherlands (Netherlands, November 6)
• Design for Conversion (New York City, November 18)
• DevConnections (Las Vegas, USA, November 1-4)
• IndieConf (North Carolina, USA, November 13)
• YUI Conference (California, USA, November 8-10)

Early 2011 Events

New Adventures in Web Design Conference
“This event will be sympathetic to existing and new challenges and opportunities faced by front-end web folks in their day-to-day work and beyond. That said, the content will be beneficial to a broad audience, and a number of attendees and guests represent agencies, organisations, and businesses across varied roles. Ultimately, this event is organised by designers, for designers.”

When: January 20, 2011
Where: Nottingham, UK at the Albert Hall

Interaction Eleven
“The IxDA Interaction conference is the premiere annual event for interaction designers, with content and activities relevant to practitioners, managers, educators, and students. Now in its fourth year, the Interaction conference has hosted leading speakers from consultancies, agencies, corporations, and universities around the world.”

When: February 9-12, 2011
Where: Boulder, Colorado, USA

International Conference on Intelligent User Interfaces
“IUI 2011 is the annual meeting of the intelligent interfaces community and serves as the principal international forum for reporting outstanding research and development on intelligent user interfaces.”

When: February 13-16, 2011
Where: Palo Alto, CA, USA at the Sheraton Palo Alto with workshops at nearby Stanford University

Information Architecture Summit
“The Information Architecture Summit is the premier gathering place for information architects and other user experience professionals. It’s grown from a special interest group’s efforts to define an emerging field, to a rich and expanding community of practice, shaping and informing multiple disciplines. You don’t have to be an information architect or user experience professional to enjoy the Summit. You simply have to love the art and science of structuring information.”

When: March 30 – April 3, 2011
Where: Denver, CO, USA

SXSW Interactive 2011
“SXSW Interactive features five days of presentations from professionals in emerging technology, networking events hosted by industry leaders, and a lineup of special programs showcasing new digital works, video games and innovative ideas the international community has to offer.”

When: March 11-15, 2010
Where: Austin, Texas, USA

Related Links

• Conference Roundup
  Very useful web application inspired by the original roundup here on Smashing Magazine.
• Web Conferences Roundup: Events From Around the Globe

What conferences will you attend?

What conference are you going to attend? Let us know — Smashing Magazine is often attending various conferences and events, and we would love to meet you in person!

© Louis Lazaris for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: