The work of Chip Kidd spans design, writing and, most recently, rock ’n’ roll. He definitely has the charisma to get ahead in that third field. He is best known for his unconventional book jackets, but he has published two novels of his own: The Learners and The Cheese Monkeys. Uninterested in design trends and fashions, he often draws inspiration from collectibles and memorabilia.

Kidd is now busy creating his masterpiece, a graphic novel born from his lifelong fascination with Batman (he regards himself as Batman’s number-one fan). He has teamed up with comic-book artist Dave Taylor to illustrate the story in an astonishing way, conjuring a Fritz Lang aesthetic with a healthy dose of Kidd’s own sensibility. Batman: Death By Design is set to be released in spring 2012 through DC Comics.

Chip Kidd at the Typo London 2011 conference. (Image: Gerhard Kassner)

Until then, here’s an interview with Chip Kidd, previously unpublished in English, that will get you into the mind of one of design’s most original and charismatic practitioners.

Q: How did you get into the business of jacket design?

Chip Kidd: It happened to be the first job that I was offered. I studied graphic design in Pennsylvania, where I grew up, but I knew that when I graduated I would go to New York. So, I did. I just went to every graphic design place that would see me, but eventually ended up at Random House. And it was an entry-level job, as assistant to the art director. Well, it wasn’t really what I had in mind, but I tried it for a while. It gave me a start, and it’s 24 years in October.

One of Kidd’s most recognizable covers. His artwork was adapted for a $1.9 billion movie series that you might have seen.

Q: How did your persona in the design world emerge?

Kidd: The thing about book covers, I think probably in most parts of the world, is that the designer gets credit on the jacket for what they’ve done. For most graphic designers, that’s not the case, in terms of how it works in print or TV commercials; you don’t see who made something on the piece itself. But in graphic design, you do. What was getting out there was the work itself. Over time that built up, to the point where people started to recognize my name.

Q: Did it take you a long time?

Kidd: It seemed long at the time, but it probably took two or three years, which in retrospect isn’t that long at all.

Q: Was that in the beginning of your career?

Kidd: Well, I started in 1986. I started working right away. I wasn’t doing a lot of designing at first — it was more doing the assistant stuff. But I started actually designing after six months or something like that. It seemed, in retrospect, to happen quickly or right away.

For David Sedaris’ Naked, Kidd designed a wraparound featuring boxer shorts that, when removed, reveals an X-ray of a pelvis.

Q: What about the chain of command? In your talk at Typo Berlin 2009, you joked about issues with editors, editors in chief, authors, marketing people. Do you find that challenging or frustrating? Or do you expect people to just listen to you?

Kidd: I think it’s good that I am being constantly challenged. I think that’s important for doing good work. If people liked everything I did just because I did it, as opposed to whether it was actually good or not, that would be a problem — both for me and for them. What I don’t like, and I don’t know any designer who does, is when you feel that you’ve done the right work and then it gets rejected, for whatever reason. And then you have to go back and redo it, and you think you’ve done it well, and that gets rejected, too.

So that, I think, is a kind of challenge I don’t like, frankly because it doesn’t always seem to be about whether it’s the right design or not — it’s about some sort of political situation within the job; for example, everybody likes it, but the author doesn’t.

Q: So, marketing people and clients often make your life hard. Does it get better as you go on?

Kidd: It doesn’t seem to. [Laughs] On the one hand, yes, it gets better because I’ve gotten a reputation as someone who knows what they’re doing, and so a lot of authors will go along with that. Then you build up trust with an author if you’ve worked on their books for a long time. That part of it is fine. But then there’s this other area where things get rejected by publishers for various reasons that I either understand or don’t. Or I deal with people rejecting me directly, which is very frustrating. That part, for me, hasn’t gotten easier.

Books are very… Each book is in its own way unique. It has its own set of problems, own set of circumstances, and that doesn’t seem to change. So, there will always be an idiosyncratic nature to the work.

Kidd’s own literary debut was a novel set in a design department at a university in the 1950s. He saw the cover as an opportunity to use graphic devices that he wasn’t able to get away with when working on other people’s books.

Q: Speaking of marketing, people will often want books to be, say, red in order to sell more. Browsing your website, I realize you don’t seem to believe the cover sells the book. Do you see the cover as part of the book?

Kidd: It is a part of the book. It’s literally your first impression — it’s the book’s face. Regardless of what kind of book it is, this is the way you’re going to visually preserve it first before you open it. But this doesn’t have much to do with someone buying it. People tell me they buy books for their covers. But it’s not a sales tool in the sense of you’re going to buy it because you like that cover. Really, what the cover should do is get you to open the book and start to read it and investigate it. And at that point, the book is going to sell itself to you, or not.

I very much try to downplay the jacket as a sales tool, because I think that publishers invest too much intellectually in this concept, and they can actually make my work much, much harder than it needs to be. And certainly with the advent of buying books on the Web, you’re not going to buy a book from Amazon because of the way it looks. It’s just not the nature of how that works. The problem arises when you get a bunch of people in a room looking at a jacket and determining the fate of the design based on preconceptions of how the book will sell, about how this design will help the book to sell.

Q: Does this lead to a battle with marketing, whose job it is to sell books?

Kidd: Yes, it can — and I think often needlessly so. You know the idea: men will buy a book with a woman on it.

For his first monograph of book cover designs, Kidd did the unexpected and featured an open book on the cover.

Q: Do you try to solve such problems diplomatically?

Kidd: Diplomacy is always the best way to go, in almost any situation in life I think. But usually, I am working through an art director, who is dealing with the marketing people directly. And then the marketing people will talk to our editor in chief, who will then talk to us. It’s rare that I deal with them directly.

Q: What about typography? What’s your view on modernist book jackets (the kind you see from Switzerland) and typographically rich covers.

Kidd: It’s hard to talk about these things in general. Personally, in terms of my typography, I think it’s pretty conservative and not very adventurous, because I worry about something looking trendy. Most of the books I do are hardcover books that are meant to be kept for a long time. I’m always thinking, what will this look like in a year? What will it look like in five to ten years? And of course, it’s impossible to know, but you have to try and envision that.

Which is not to say everything should be boring and predictable — there are ways to be creative with it. Personally, I’m much more inventive with the imagery than with the typography. An image will be more powerful than the words or the title. Or if you play around, you can create a tension, an interesting puzzle for the reader to solve. And that’s much more about the imagery than the type.

Kidd got a chance to indulge his obsession with Batman, working here with photographer Geoff Spear to showcase a wide range of collectibles celebrating the Caped Crusader.

Q: Do you try to avoid fashions?

Kidd: In a way, yes. Personally, I feel I never know what’s fashionable anyway. I see what people are doing, and sometimes I see typography that I think is really interesting, and I think I wouldn’t be able to do that even if I wanted to. Which isn’t a criticism, just an observation. My skills with type are extremely limited. In terms of fashion, I don’t know what it means from one minute to the next.

Q: How do you manage living in a big city and resisting the fashionable influences around you?

Kidd: I don’t take myself out of it. I just observe what people are doing, and I do something else. I go against it. This is one of the things one of my teachers at school told me: find out what everyone in the class is doing, and then do something completely different. And that has always made perfect sense to me.

Kidd is a master of letting photography do the heavy lifting. While working on a book with Geoff Spear, he discovered an image of a scuffed bird shot with a macro lens. It came in handy when Kidd later designed Haruki Murakami’s novel, The Wind-Up Bird Chronicles.

Q: What’s your favorite form of expression (not necessarily design-related)?

Kidd: I’ve written two novels. Those to me are much more personal than me doing a book cover for somebody else. I don’t see somebody else’s book cover as a very personal form of expression. If it was, I would be taking advantage of the writer, I think unfairly. And it is perceived that way — “Oh, this is your art!” — like somebody else’s book cover is my art. Which technically may be true, but it shouldn’t come out that way. It should come out as me trying to serve their art, as opposed to me trying to serve myself.

Q: Sounds similar to the differences between the artist and the designer.

Kidd: I’ve always seen a strict division between the two. Somebody will ask me what I do, and then say, “Oh, you’re an artist.” And I say, “No, I’m a designer.”

For a novel about parents breeding children in order to maintain a carnival sideshow, Kidd used striking typography with a vibrant orange.

Q: What’s your view on ugliness?

Kidd: The same as my views on beauty. They’re extremely subjective. It’s very hard to say. Something that I find very ugly others find very beautiful, and the opposite. It’s very hard to articulate that.

Q: What’s so fascinating to you about memorabilia, comics and other collectibles?

Kidd: I appreciate them as aesthetic objects. But there’s also a nostalgic value to them — certain things I had as a child that I really enjoyed that I lost or broke. Then you become an adult and try to reclaim that. Now eBay makes that more accessible than ever. But I genuinely do get an aesthetic pleasure out of these objects, which is [expressed through] the Batman collected book that I put together, which has Batman toys from 40 years ago.

Q: So, you’re a collector?

Kidd: Oh, yes.

One of Kidd’s most striking covers, designed for the fourth installment of Osamu Tezuka’s award-winning Buddha series.

Q: What other forms of art you enjoy? I’ve spotted elements of popular art in your work. Do you identify with what was going on in New York City in the ’50s and ’60s?

Kidd: I’m definitely affected by it. But I have very strong opinions about it, in that I think somebody like Roy Liechtenstein basically is a fraud who got everybody to buy into what he was doing. And paintings about comics became far more important to critics than the comics themselves. I’m much more interested in the comics themselves. I couldn’t give a shit about a decontextualized panel that was stylized by this person. But everybody bought into it, amazingly.

Similarly, do I think Warhol was a great artist? Yes. But should he have given half the money to the guy who actually designed the canvases or the Brillo box or any of that other stuff that he totally appropriated? It’s based on something that somebody else made — that person should get credit, too. And they didn’t. I’m very much against that. It’s an abuse of the original designer.

Q: What would you do if the book format dies?

Kidd: I know, that’s an increasingly vital question. I can’t really say. I don’t know. If that’s eventually what happens, I’ll figure it out once I get there. I don’t believe that people want to read books on the screen. I think some people are… I just don’t think it’s going to go the way the music LP and CD went. It doesn’t have that function in the culture. But even eBooks — they have some kind of visual thing for their cover, so who knows? Maybe that’s what I’ll be doing. If I haven’t killed myself by then.

(From Typo Berlin 2009)

A special Thank You to our Typography editor, Alexander Charchar, for making this interview possible.

Proofreaders: (al) (il)

© Spyros Zevelakis for Smashing Magazine, 2012.

Other Web Design Information of Interest

• 10 Best Resources to Enhance your Graphic Design Skills …
• 10 Best Resources to Enhance your Graphic Design Skills …
• The top 25 browser tools for web designers and … – net magazine
• The Smashing Book #3: All Good Things Come In Threes

  

After several grueling days I had finally finished the proposal. I sent it off and waited for a response. Nothing. After a few weeks, I discovered that they were “just looking”. Despite the urgency and aggressive timeline for the RFP (Request For Proposal) plus the fact that we had done business with this organization before, the project was a no-go. My days of effort were wasted. Not entirely, though, because the pain of that loss was enough to drive me to decide that it wouldn’t happen again.

I work at a Web development company and we’ve experimented with proposal writing a lot over the years. We’ve seen the good and the bad, and we have found something better. In this article I will share the pains that we have experienced in the proposal writing process, the solution we adopted, and our process for carrying out that solution. I’ll also give you guidelines to help you know when this solution is and isn’t appropriate.

Proposal Writing Causes Pain

After several years of writing proposals, we began to notice that something wasn’t right. As we considered the problem we noticed varying levels of pain associated with the proposal writing process. We categorized those pains as follows:

• The Rush
  Getting a proposal done was usually about speed. We were racing against the clock and working hard to deliver the proposal as efficiently and as effectively as possible. However, sometimes corners would get cut. We’d reuse bits and pieces from older proposals, checking and double-checking for any references to the previous project. While the adrenaline helped, the rush gets old because you know that, deep down, it’s not your best work. Besides, you don’t even know if you’re going to close the deal, which leads to the next pain.

• The Risk
  Our proposal close ratio with clients that came directly to us was high. We’d work hard on the proposals and more often than not, we’d close the deal. The risk was still there, however, and I can think of several proposals that we had spent a lot of time and effort on for a deal that we didn’t get. Not getting the deal isn’t the problem — the problem is going in and investing time and energy in a thorough proposal without knowing if there is even the likelihood that you’re going to close the deal.
• The Details
  The difference between a project’s success and its failure is in the details. In proposal writing, the details are in the scope. What work is included, what is not, and how tight is the scope? Now, this is where the “rush” and the “risk” play their part. The rush typically causes us to spend less time on details and the “risk” says: “Why spell it all out and do the diligence when you might not even get the project?” A self-fulfilling prophecy, perhaps, but a legitimate concern nonetheless. Selling a project without making the details clear is asking for scope creep, and turns what started out as a great project into a learning experience that can last for years.

Now, writing is an important part of the project and I’m not about to say you shouldn’t write. Having a written document ensures that all parties involved are on the same page and completely clear on exactly what will be delivered and how it will be delivered. What I’m saying, though, is that you should stop writing proposals.

Write Evaluations, Not Proposals — And Charge For Them

A few years back, we decided to try something new. A potential client approached us and rather than preparing another project proposal, we offered the client what we now call a “Project Evaluation.” We charged them a fixed price for which we promised to evaluate the project, in all of our areas of expertise, and give them our recommendations.

They agreed, paid the price, and we set out to deliver. We put a lot of effort into that evaluation. We were in new territory and we wanted to make sure that we delivered it well. So we finished the report and sent it to them. The client liked it, agreed with our recommendations, and started a contract with us to do the work.

That project became a game changer for us, starting an on-going relationship that opened doors into a new market. It was the process of the evaluation itself that brought the new market potential to our attention, and gave us the opportunity to develop this business model. It was a definite win, and one that a project proposal couldn’t have delivered.

What Is A Project Evaluation?

A “Project Evaluation”, as we’ve defined it, is a detailed plan for the work that is to be done on a project, and explains how we do it. We eliminate the guess work, and detail the project out at such a level that the document becomes a living part of the development process, being referred back to and acting as the guide towards the project’s successful completion.

The Benefits Of (Paid) Project Evaluations

As we put our proposal writing past behind us and embraced the evaluation process, we noticed a strong number of benefits. The most prominent of those benefits are the following.

• Qualification

  If a client is unwilling or unable to pay for a project evaluation, it can be an indicator that the project isn’t a match. Now, we may not always charge for evaluations (more on that later). We also recognize a deep responsibility on our part to make sure that we have intelligently and carefully explained the process and value of the evaluation. After all that is done, though, you may run into potential clients who just don’t want to pay what you’re charging, and it’s better to find this out right away then after writing a long proposal.

• Attention to Details

  Having the time available to do the research and carefully prepare the recommendations means that we are able to eliminate surprises. While the end result may be a rather large document, the details are well organized and thorough. Those details are valuable to both the client (in making sure they know exactly what they’re getting) and to the development team (in making sure that they know exactly what they’re delivering).

• No Pricing Surprises

  Figuring out all the details and ironing out a complete scope means that we’re able to give a fixed price, without surprises. This gives the client the assurance up front that the price we gave them is the price they’ll pay. In more than a few cases, the time we’ve spent working out the details has eliminated areas of concern and kept our margins focused on profit, not on covering us “just in case.”

• Testing the Waters

  When a potential client says “Yes” to an evaluation, they are making a relatively small commitment — a first step, if you will. Rather than a proposal that prompts them for the down payment to get started on the complete project, the evaluation process gives us time and opportunity to establish a working relationship. In most cases, the process involves a lot of communication which helps the client learn more about how we work, as we learn more about how they work. All this is able to take place without the pressure of a high-budget development project. And by the end of the evaluation, a relationship is formed that plays a major factor in the decision process to move forward.

• Freedom to Dream

  Occasionally, we spend more time on an evaluation than we had initially expected. But knowing how our time is valued has given us the freedom to explore options and make recommendations that we might not have made otherwise. In our experience, the extra time and energy that the context of a paid evaluation provides for a project has consistently brought added value to the project, and contributed to its ultimate success.

The Evaluation Writing Process

Over the years we have refined (and continue to refine) a process that works well for us. As you consider the process, look for the principles behind each step, and if you decide to bring this into your business, look for ways to adapt this process and make it your own.

#1 — Do the Research

The heart of the evaluation process is the research. If it’s a website redesign project, we read through each and every page on the website. We take notes and thoroughly absorb as much content as possible. Our objective is to get to the heart of the project and gain as much of the organization’s perspective as possible.

If it’s a custom programming project, we try to get inside the project’s concept, challenge it, look for flaws in the logic, research relevant technologies, and work to make recommendations that keep the goals of the project in mind.

We spend time with the client by phone, over Skype, via email, and sometimes even in person. As our research uncovers problems or finds solutions, we run them by the client and gather their feedback.

The research process allows us to go deep, and in our experience it has always paid off, giving us a thorough grasp of the project and providing a foundation to make intelligent, expertise-driven recommendations.

#2 — Offer Recommendations

Each project evaluation is different. Depending on the nature of the project we may make recommendations regarding technology, content organization, marketing strategies, or even business processes. The types of recommendations we make have varied greatly from project to project, and are always driven by the context and goals of the project.

When it comes to areas of uncertainty for the client, we work hard to achieve a balance between an absolute recommendation and other options. If the answer is clear to us, we’ll say so and make a single, authoritative recommendation. However, when an answer is less clear, we give the client options to consider (along with our thoughts) on why or why not an option might be a match.

We share our recommendations with the client throughout the evaluation process, and when the final report is given, there are rarely any surprises.

#3 — Prepare the Scope

After we’ve worked through our recommendations, we put together a technical scope. This is typically the longest part of the document. In the case of a Web design project, we go through each page of the website, explaining details for the corresponding elements of that page. The level of detail will vary based on the importance of a particular page.

The scope document is detailed in such a way that the client could take it in-house, or even to another developer, and be able to implement our recommendations.

As the project commences, the scope document will often be referred to, and can function as a checklist for how the project is progressing.

#4 — Prepare the Timeline & Estimate

With the scope complete, calculating the cost and preparing an estimate becomes a relatively straightforward process. While how one calculates the price may vary, all the information is now available to see the project through from start to finish, identifying the challenges, and determining the amount of resources required to meet the project’s objectives.

Note: Prior to the start of the evaluation process, we nearly always give the potential client a “ball park” estimate. So far, that estimate typically ends up being about ten times the cost of the evaluation.

We take the estimating process very seriously, both in the ball park stage and especially here within the context of an evaluation. Once we set a price down we don’t leave room for “oops!” and “gotchas!”, and that means we are extra careful to calculate as accurately as possible, both for our sake and for the sake of the client.

Now, because of the nature of the evaluation, we are often able to research and explore options above and beyond what the client originally brought to our attention. In the case of a Web application, this might be an added feature or a further enhancement added onto a requested feature. Within the scope of the evaluation we carefully research these extras, and when appropriate, present them as optional “add-ons” within the timeline and estimate.

They are truly optional, and while always recommended by us, we leave the decision up to the client (there’s no use wasting research energy on an add-on you wouldn’t fully recommend). In cases where the budget allows for them, they are nearly always accepted. In cases where a tighter budget is involved, the add-ons are typically set aside for future consideration.

When Evaluations Are Appropriate

A project evaluation functions like the blueprints for a new office building. Imagine that I own a successful construction company, and I have a number of world-class office construction projects to my credit. A new client comes to me after seeing some of my work and tells me “I want a building just like that!”. Assuming, of course, that I own the rights to the building, I can say “Sure!” and tell them how much it will cost. Why? The blueprints have already been drawn.

Now, there will be variable factors, such as where they choose to have the building built, and any customizations they may request matter. But in most cases no new blueprints will be needed, and I can proceed with construction without charging them for the plans.

Suppose another client comes to me after seeing one of my buildings and asks me to build an entirely new design for them. A new design calls for new blueprints all of their own, and these must be developed before the project begins. Can you imagine a large-scale construction project without any blueprints?

Web development is the same way. In our experience, evaluations are appropriate when a client comes to us and asks us to take on a project outside of our existing set of “blueprints”. Examples where we’ve found a project evaluation necessary include:

• A redesign of an existing website.
• Developing a new Web application.
• Bringing new technology into an existing project.

Without an evaluation you’re either left to go ahead and do the research on your own (with the weight of the rush, and the risk on your shoulders) or you’re stuck making as educated a guess as possible for the scope of the project. This dangerous guessing in a situation where an evaluation is appropriate can leave you with an estimate that is too high (which can mean losing the project) or even worse, an estimate that is too low.

When Evaluations Are Not Appropriate

When a project is familiar, and doesn’t require an evaluation (or fits within the scope of an existing type of evaluation), we give an informal, direct estimate along with a scope of the work. Small to mid-sized Web design projects typically fall into this category. While the content and design are new, the process isn’t. The key here is the experience and confidence in your abilities (and the abilities of your team) that the work will get done within budget to the expected delight of all parties involved.

Conclusion

Project evaluations up until now haven’t been given much attention. I would suggest it is a simple concept that has been overlooked and passed by amidst the rush of a booming Web development industry. I invite you to implement the process, experience the benefits, and stop the pain of proposal writing.

I thank you, dear reader, for your time in considering this concept. And I thank you in advance for your feedback.

(jvb) (il)

© Jonathan Wold for Smashing Magazine, 2012.

Other Web Design Information of Interest

• Learn WordPress For Free With These 10 Great Resources – blog*spot
• Upcoming Web Design And Development Conferences For 2012 …
• How To Recruit A UX Designer | Neil Kearney Design
• The Smashing Book #3: All Good Things Come In Threes Web …

  

The Web has entered an era of user-centricity. If businesses are to attract new customers and retain existing ones, they must create websites and apps that deliver intuitive and tailored experiences. Whether you run an online retailer or a not-for-profit community website, the user experience is mission critical.

As a consequence, we have seen a real surge in the need for talented user experience (UX) designers who can help turn vision into reality. How do you attract, recruit and retain UX talent in your business?

(Image credit: openwourceway)

If you are anything like us, you’ll be keen to learn from leaders and innovators in our industry, which is why we’ve assembled some luminaries from the UX community to share their insight and experience especially with the Smashing Magazine community.

We’d like to say a big thank you to the experts who made this guide possible. They all have a unique perspective on UX, and their work intersects with it in very different ways.

• Kara Pernice, Nielsen Norman Group
• Peter Merholz, Adaptive Path
• Martin Belam, The Guardian
• Stu Collett and Odette Colyer, Super User Studio and UX Jobs Board
• Tom Wood, Foolproof
• Justin Cooke (@justincooke), Fortune Cookie and chair of BIMA

We asked each of our experts 10 questions. Their perspectives give you a 360° view of how they tackle UX recruitment in their organizations. Jump to the section that grabs your attention, or read through the complete guide for all of their insights.

The Questions

1. How did you learn to hire?
2. Do you hire with your head or your heart?
3. In a sentence, what makes for a great UX designer?
4. How do you advertise UX positions in your company?
5. What one question do you ask every candidate?
6. Do you have a particular method of assessing candidates?
7. Do you hire based on years of experience or achievements and portfolio?
8. How do you retain talent?
9. What kind of culture do you try to create?
10. What skills would you like to see in more UX designers?

1. How Did You Learn To Hire?

Very few people would say they’ve “learned” how to hire, because this would imply that they’ve stopped learning, and of course we all continue to learn every day.

Many of the experts I spoke with continually develop and hone their hiring skills, but their advice hinges on three principles.

Find a Role Model

Tom Wood of Foolproof: “My role model is David Ogilvy. He had a really clear and public view about the qualities he looked for in the people he hired. His quote, ‘If we each hire people smaller than us, we will become a company of dwarfs, but if we each hire those larger than ourselves, we will become a company of giants,’ is a call for everyone in a position to make a point to step up and challenge themselves through the quality of people they hire.”

Martin Belam of The Guardian: “I’ve been on a lot of interview panels through the years and picked up techniques from people such as Mags Hanley, Lorna Leddon and Karen Loasby.”

Learn From the Experiences and Mistakes of Others

Justin Cooke of Fortune Cookie: “Like everything we do at Fortune Cookie, we have never stopped trying to improve our recruitment process. This was achieved by learning from mistakes, through experience and from others particularly asking recruitment agencies and candidates for feedback on how we could be better.”

Find Your Feet

Ultimately, you need to blaze your own hiring trail and go with your instinct. As Kara Pernice of the Nielsen Norman Group emphasizes, “Asking advice from other people who have successfully hired behooves you, but there is nothing like experience.”

Peter Merholz of Adaptive Path says, “I rely a lot on intuition, which has proven mostly successful.”

2. Do You Hire With Your Head Or Your Heart?

Logic and instinct both have their place in the hiring process, and the decision will nearly always be made partly with your head and partly with your heart.

You will likely use your head to determine whether the candidate has the requisite skills, experience and attributes. And then to a certain extent you need to follow your heart and your instinct in deciding whether a candidate is a good fit for your culture.

The experts I spoke with validated this idea, explaining that they initially look at hiring from a rational point of view.

Justin Cooke: “At the first stage we look for the rational, but the ultimate decision has to be based on an emotional connection.”

Peter Merholz sums this up perfectly: “I would say the head is the initial barrier — if I can’t rationalize the hiring decision, then it won’t go anywhere. But after the head makes a decision, the heart plays a part, particularly in thinking about ‘softer’ matters, like personality and cultural fit.”

Stu and Odette: “It’s a balance of finding a person with the right attitude and personality, twinned with skills needed to do the actual job.”

Kara Pernice: “Both, but you have to know you can deal well with each other. And I usually get that feeling from my gut rather than my brain.”

Ultimately, the final decision comes from your head because, as Tom Wood explains, “If you make a mistake with hiring in a small or medium-sized business, you can cause real problems for yourself.”

3. In A Sentence, What Makes For A Great UX Designer?

If you don’t know what you are looking for, you will never know when you’ve found it. Nowhere is this philosophy truer than with hiring.

A real appreciation not only of what makes a superb UX designer but of what kind of person you are looking for is essential if you are to recruit successfully.

What makes a great UX designer is, of course, a matter of opinion, but there is a consensus that a UX designer must, in the words of Martin Belam, “make good stuff and make stuff good.” They must have an ability to interpret and empathize with the user, to simplify the process and to execute a design solution.

Peter Merholz: “An ability to take an empathetic view of the user, and to interpret that into a systematic design solution.”

Justin Cooke: “Someone who can make the complex simple, beautiful and ever so slightly fun.”

Stu and Odette: “Someone with the passion and curiosity to constantly learn more about how people interact with digital products.”

Kara Pernice: “Great UX designers have a desire to innovate and gather knowledge about potential users and customers, and the humility to know that their first design iterations will rarely be great.”

Tom Wood: “The willingness to collaborate with both the end user and the business client during the design process.”

4. How Do You Advertise UX Positions In Your Company?

There is a clear shift in the way UX roles are being advertised, in line with the increasingly social nature of the Web. Interestingly, Stu and Odette still succeed in finding candidates through specialist recruitment agencies, despite the perceived decrease in their popularity.

Here’s how our panelists fill their UX vacancies.

Tom Wood: “Our site, amplified by Twitter and LinkedIn activity.”

Kara Pernice: “We have the luxury of having our boss write a newsletter that reaches many UX professionals, so that is our biggest marketing tool when hiring. It works for us because people who read the newsletter have a sense of what we are about.”

Peter Merholz: “We have our ‘Work with us’ page on adaptivepath.com, and then we reach out through various channels to spread the word: Twitter, our blog, LinkedIn, UX industry mailing lists.”

Martin Belam: “We have our own recruitment portal site, and I usually tweet and blog in a personal capacity to help drum up candidates.”

Justin Cooke: “On the Fortune Cookie website, on LinkedIn, on totaljobs.com, on industry websites like Econsultancy and BIMA, at events and conferences, and through our employees, who receive a bounty to anyone they recommend who we hire.”

Stu and Odette: “UX Jobs Board and specialist recruitment consultancies.”

5. What One Question Do You Ask Every Candidate?

One thing that is universally agreed on is that there is no “right” way to interview someone, so I asked this question of our experts to see if we could at least draw out common themes.

Martin Belam asks of candidates, “Can you describe to me a project that when badly wrong. Why did it go wrong, and what did you personally learn from it?”

Failure is a topic that is all too often avoided in interviews, but a question like this helps the interviewer understand how a candidate copes with failure — failure being inevitable in any career. It helps you determine whether they are capable of humility and also to see how they have professionally developed as a result of failure. This seemingly innocent question can tell the interviewer a great deal about the candidate.

Justin Cooke: “What is the most amazing thing you have seen on the Internet this month?”

Justin’s is a great question to ask because it helps you understand if the candidate is as passionate as they say they are. (Do they keep up with the latest trends, or do they just say they do?) It also helps you to see the kinds of things that they get excited about; the question might just reveal whether the individual is a good cultural fit for your team and the kinds of projects you do.

Peter Merholz: “What is the thing that gets you out of bed every day and wanting to do this kind of work?”

As an interviewer, you undoubtedly want to understand the motivations of the person you are speaking with. After all, motivation is the key to a happy, productive workforce.

That being said, if you flat out ask a person what motivates them, they’ll probably lie to you with the usual interview spiel about their satisfaction in doing a good job.

Asking someone what gets them out of bed every morning is a roundabout way of asking the same thing, but you’ll catch the individual on the hop, and they’ll probably give you a more honest answer than had you asked what motivates them.

Finally, Tom Wood always asks people about their ambitions, “to see if they will push themselves — and us.” This is a superb question and allows you to determine whether the person has planned their professional life in the near and long term or are just plodding.

6. Do You Have A Particular Method Of Assessing Candidates?

Assessing a candidate’s suitability for a job is certainly one of the most, if not the most, challenging aspects of hiring, so understanding how the best in the business do it is helpful.

Some clearly like to go the practical route and judge a candidate by assigning them a task during or following the interview. Justin Cooke says, “Nothing beats setting a task. The output is always fascinating.”

Kara Pernice allows candidates to do most of the talking and gives them simulations to perform, “such as, give a short presentation and send us the video. This can’t truly demonstrate how they would do, but it’s a start. Sometimes we agree with a candidate to first test the waters by hiring them on a contract basis or as an intern. If we are all happy and still interested in the end, we hire them.”

Peter Merholz, Martin Belam and Stu and Odette feel that the process is fairly simple and that a candidate can be assessed based on their credentials and personality. Peter Merholz says, “It’s pretty straightforward: do they have the practitioner chops (across strategy, research and design), and do they have the right personality and cultural fit?”

Martin Belam adds, “I expect anyone in UX to have a significant online presence, and I’m always surprised if they don’t.”

To anyone reading this who is seeking a career in UX, a strong online presence is definitely a prerequisite.

7. Do You Hire Based On Years Of Experience Or Achievements And Portfolio?

I was surprised by the responses to this question. I assumed the quality of the portfolio would weigh more heavily every time, but that wasn’t the case.

Tom Wood responds, “Of the two, experience is probably the one I favor most, simply because anyone can catch a break on the projects they work on and the results they get (success has a thousand fathers, after all). Because of the emphasis we place on working directly with clients and end users, there’s often no substitute for the life experience that makes you comfortable in the company of these groups.”

However, Stu and Odette says, “The latter. You can get people who have been in the industry 10+ years and still haven’t produced good design work.”

Peter Merholz adds that his company generally favors the portfolio, but “if we’re hiring for a more senior role, where things like client-management skills are crucial (and perhaps even more crucial than super-awesome design chops), then experience definitely is a factor.”

Martin Belam supports this by saying, “I think in any team you need a mix of skills and experience. I enjoy mentoring people and bringing younger people into the profession, so I look more at what I think people will be capable of achieving and how they will go about it, rather than years of experience and qualifications.”

Justin Cooke adopts a completely different approach, saying “Years of experience and portfolios are useful inputs and metrics, but we are more interested in a candidate’s answers to our questions and their response to the task that we set.”

8. How Do You Retain Talent?

To someone outside of the UX community, talent retention might not seem like a critical issue, given the state of the economy and how many people are looking for work. But UX is a fiercely competitive market, with agencies and consultancies vying for the attention of the right UX folks.

The level of attention given to talent retention by the people I spoke with is fascinating. Here are what seem to be the key factors in retaining the best UX designers.

Opportunity

Kara Pernice: “We try to give people opportunities they are interested in.”

Self-Actualization

Tom Wood does it “by thinking every day about what motivates our people and making sure we do everything we can to help them realize their personal goals and ambitions. Beer also helps.”

Autonomy

Peter Merholz: “There is no UX consulting firm that allows the autonomy and freedom that Adaptive Path provides. Also, our commitment to sharing ideas, through writing, speaking and teaching, is unparalleled and attractive to our team.”

Professional Development and World-Class Training

Justin Cooke swears by “never saying no to a training request; employing brilliant leaders; listening to everyone’s ideas and auctioning them to make us a better agency; continually communicating how we are doing; starting at 10:00 am; tracking the market to ensure that our salary and benefits packages are among the best in the industry; and ensuring that we understand everyone’s career goal and mapping out a plan to make it a reality.”

Breathing Room

Stu and Odette: “We’re a pleasure to work with, and we only focus on a set number of projects, so as not to stretch people too far. The quality goes down if you do.”

9. What Kind Of Culture Do You Try To Create?

This question follows on the last one, because culture is obviously central to talent retention, and there are clear crossovers between the answers to the previous question and how this filters down through the culture that these leaders are trying to promote.

“Constellations are more interesting than individual stars.” This is the eloquent way in which Tom Wood describes the team culture he is trying to foster.

Justin Cooke supports the notion of a team culture by adding, “We are aiming to create a passionate team that cares for each other and is 100% committed to improving the digital world to make the real world a better place.”

Kara Pernice focuses more on the individual, describing the culture that she is trying to foster as being more autonomous, with “professionals producing high-quality, rigorous work that improves design for clients and UX professionals.”

10. What Skills Would You Like To See In More UX Designers?

I was most looking forward to hearing the responses to this question, not only for the insight, but also because they will help job seekers hone their skills in the most sought after areas.

The thing many of the experts seem to be looking for is holistic in nature — a well-roundedness more than particular design skills.

Client-Facing Skills

Tom Wood describes the need for more charming UX designers, who are “comfortable thinking in the same room as clients.”

Strategic Thinking

Justin Cooke looks for “a stronger understanding and awareness of the entire customer journey; a desire to improve the entire service rather than just the experience, and brilliant good storytelling.”

Stu and Odette add, “The ability to pragmatically design for digital products, rather than being able to talk solely about UX in general. Our industry is suffering from too many talkers and not enough walkers.”

Research Ability

Martin Belam says, “I wish people would read more widely, and more about some of the traditional design skills.”

Facilitation

According to Peter Merholz (and I tend to agree here), “Facilitation skills are becoming increasingly crucial in our work; being able to coordinate cross-functional teams and get the most and best out of them.”

Summary

UX is a hard skill to teach; no formal credentials are required, and no two career paths or job descriptions are the same. In fact, pinning down exactly what UX is can be difficult. It can mean different things to different people. Some UX design positions require only graphic design skills, others mainly planning and wireframing. Most, however, require a combination of design, planning, negotiation, conflict management, objectivity, leadership and openness. Above all, a good UX professional must have a natural appreciation of the human mind and be open to new attitudes and approaches and to exploring the impact of real people on the commercial environment around them.

Recruiting and hiring great UX professionals can be both challenging and fun. Quite often, the “right” person will be wildly different from the person you initially expected, and skill, judgement and intuition are required to pick them out.

One thing is for sure, though: UX skills are in high demand and short supply. It’s a candidate’s market, and companies need to try now more than ever to attract and retain the best minds in the field if they are to succeed online.

(al)

© Matthew Ogston for Smashing Magazine, 2012.

Other Web Design Information of Interest

• Learn WordPress For Free With These 10 Great Resources – blog*spot
• Upcoming Web Design And Development Conferences For 2012 …
• How To Recruit A UX Designer | Neil Kearney Design
• The Smashing Book #3: All Good Things Come In Threes Web …

  

Yes, the brand new Smashing Book #3 is coming. The printing press is warming up, the illustrations are finished, and the chapters are being proofread. This third book is the best printed book we’ve produced so far: it is a valuable, cutting-edge, high-quality printed book that any Web designer should have on their bookshelf. This time, we’ve also prepared an extra book 3⅓ that offers even more exclusive content.

We’re releasing two new printed books: the main Smashing Book 3 and Smashing Book 3⅓. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

Pre-order now and add your name into the printed book: a double-page spread has been reserved to print out all of the names of the pre-sale buyers. We will contact you in March 2012 and ask you for the name you would like to have published within the book. Space is limited, so you’d better hurry up!

What’s In The Smashing Book 3?

Unlike its predecessors, the new Smashing Book #3 has a theme: Redesign. It is a professional guide on how to redesign websites and it also introduces a whole new mindset for progressive Web design. In this ever-changing Web design industry, the book challenges you to think differently about your work and will change the way you design websites forever.

A detailed look at the business and technical side of redesign is followed by a comprehensive overview of advanced HTML5, CSS3 and JavaScript techniques that you can use today. You will get useful advice on innovative UX techniques, learn about the peculiarities of mobile context in Web design and discover appropriate Photoshop techniques. You’ll study a practical hands-on guide to a bulletproof workflow for responsive Web design. Finally, you will also dive deep into emotional design, content strategy and storytelling.

Table of Contents

Gallery of the authors of the Smashing Book #3.

Well-respected professionals have poured their heart and expertise into these contributions. To ensure the quality of the book, every chapter of the book has been thoroughly reviewed by experts including Jon Hicks, Tab Atkins, Paul Irish, Russ Weakley, Peter-Paul Koch, Bryan Rieger, Joshua Porter, Ryan Carson and Elliot Jay Stocks. Please notice that some details (e.g. titles of the chapters, the number of pages, etc.) may slightly change until release date.

A detail of a chapter illustration, designed by Kate McLelland.

Extra Book: Smashing Book #3⅓ — The Extension

Our authors have turned out to be much more productive than we anticipated and have produced more exciting chapters than one book could handle. Adding these chapters to the book would have increased its size and weight — and, hence, shipping cost — substantially.

Not wanting to withhold these chapters, we have decided to release them separately. We are proud to present an extra book, Smashing Book #3⅓ — The Extension, filled with four additional chapters of quick quality reading!

Gallery of the authors of the Smashing Book #3⅓.

About Smashing Book #3⅓

With Web design, we can do much more than inform the audience. The power of storytelling and content strategy is in creating engaging, emotional connections that transcend their platforms. In this book, we will review emerging navigation design patterns and understand how to employ a content strategy — which is an important process, often underestimated and dependent on many factors. A case study of Smashing Magazine’s responsive redesign beautifully illustrates what this approach could look like in practice.

Features Of The Smashing Books 3 + 3⅓

• Two separate printed books.
• 11 + 4 chapters, written by Web design experts.
• Quality flexibound cover (lighter than hardcover, heavier than softcover), with stitched binding and a ribbon page marker.
• Smashing Book #3: approx. 320 pages, 165 × 240 mm (6.5 × 9.5 inches).
• Delivery from Berlin, Germany, via air mail only (3 to 15 working days).
• $5 shipping per delivery (even if you buy both books!).
• Also available as eBooks (PDF, EPUB, Kindle).
• Release scheduled in the last weeks of April 2012.
• Pre-ordering starts today, with up to 30% off!

We’ll soon be releasing two new printed books: the main Smashing Book #3 and Smashing Book #3⅓. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

Why The Theme Of Redesign?

The reason is simple. In recent years, the Web has changed a lot. The Web designer’s tools now are advanced, and browsers are highly capable. Designers have established clever coding and design techniques, and they are facing new challenges and embracing new technologies. These changes are fundamental and require us to reconsider how we approach Web design. It’s time to rethink and reinvent: it is time to redesign the Web.

But are we all prepared for this? How does responsive design fit into your workflow? What UX and mobile techniques do you follow when designing websites? And if you have a redesign project on the horizon, how do you approach it and work your way through it? This is what the Smashing Book #3 is all about: it explains what you need to know to create effective websites today, and what you need to know to be prepared for the future.

Exclusive Artwork and Design

The Smashing Book series has gotten a rather eye-catching facelift. The well-respected Belgian artist Veerle Pieters has taken on the significant task of putting together an innovative, bold cover design. And the result is bold indeed. Veerle’s styling of Smashing Magazine’s “S” reflects the many aspects that make up a Web designer’s workflow today.

Veerle’s recent sketches for the cover of the Smashing Book #3.

Veerle’s recent sketches for the cover of the Smashing Book #3.

If you have Smashing Books 1 and 2, you’ll know that animals play a distinct role — forming almost a tradition for the series. This time, we have asked the talented young illustrator Kate McLelland to illustrate the introductory pages for all of the chapters. Kate has been impressively creative in her designs; the theme of redesign has obviously shaped the tone of her artwork. Each chapter begins with an elaborate drop cap.

A detail of a chapter illustration, designed by Kate McLelland.

Each illustration employs a different metaphor that relates to the accompanying chapter. Try to see what they all are once you get your hands on the book. Appropriately enough, when strung together, the drop caps spell out “Redesign the Web.” The composite style of the illustrations reflects how so many components have to come together for a successful redesign.

Pre-Order Now And Get Your Name In The Book!

As with the Smashing Book #2, we’ve decided to print the names of our readers right in the pages of the Smashing Book #3. A double-page spread has been reserved to print out all of the names of the pre-sale buyers (at least those who agree to it in the check-out process). The names will make up the Smashing Magazine logo: ASCII art at its best! Space is limited, so you’d better hurry up!

Please note: the sooner you order your copy, the higher the discount. With a pre-sale purchase, you can save up to 30%:

• Pre-order Smashing Book #3 printed book for $27.90,
• Pre-order Smashing Books #3 and #3⅓ bundle (both printed books) for $37.80,
• Pre-order Smashing Books #3 and #3⅓ eBook bundle (both eBooks) for $13.90,
• Pre-order full Smashing Book #3 and #3⅓ bundle (both printed books + both eBooks) for $49.90.

The books will be sent via air mail, and delivery should take no longer than 3 to 15 working days. Shipping starts in Berlin, Germany, and ends at your front door. If you run into trouble or have questions about your order, please don’t hesitate to contact our customer service or send us a tweet @SmashingSupport — we’d love to help out!

We’re releasing two new printed books: the main Smashing Book 3 and Smashing Book 3⅓. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

FAQ

Here are answers to some frequently asked questions about the Smashing Books #3 and #3⅓:

Content-Related Questions

• What’s the difference between Smashing Books 1, 2 and 3?
  The first two books covered best practices in modern Web design; although they had similarities, the two books covered different areas of Web design. Smashing Book #3 has a particular theme: redesign. It covers both the redesign process per se as well as cutting-edge approaches to Web design on a broader scale. It focuses on the most recent developments and the current demands of today’s rapidly changing environment. Smashing Book #3 gives professional advice on the what, when and how of responsive and bulletproof Web design, according to the requirements of today’s Web.
• Is Smashing Book #3 a completely new book?
  Yes, all of the content has been written from scratch, and all of the chapters have been written exclusively for this book.
• What’s this extra Smashing Book #3⅓?
  Our authors have turned out to be much more productive than we anticipated, coming up with more exciting chapters than one book could handle. Adding these chapters to the book would have increased the size and weight — and, hence, shipping cost — substantially. Not wanting to withhold these chapters, we have decided to release them separately. We are proud to present the Smashing Book #3⅓ — The Extension, four extra chapters of quick quality reading. Buy it as part of a bundle and save!
• Will the book be available in other languages?
  Maybe, but we have no plans for that yet, so don’t hold your breath.
• Will Smashing Books #3 and #3⅓ be available as eBooks?
  Yes, the books will be available in PDF, EPUB and MobiPocket, and you can pre-order an eBook bundle today.

You can find detailed shipping costs and delivery times in the Smashing Shop.

Purchasing-Related Questions

• What are the costs for shipping to my country?
  The shipping cost for one book or a bundle is $5 — wherever you are in the world. We are paying a share of the shipping costs ourselves to make it possible for anyone to purchase the book. Our prices are transparent: we don’t have any hidden costs, and we won’t confuse you with tricky calculations. What you see is what you pay!
• How long will delivery take to my country?
  All books will be shipped via air mail to keep delivery times as short as possible. You can find the anticipated delivery time for your country in the delivery times overview.
• What payment methods are accepted?
  We accept PayPal, VISA, MasterCard and American Express. We use a secure connection, with 256-bit AES encryption and a green GeoTrust Extended Validation SSL CA certificate.
• Is there a money-back guarantee?
  Yes, absolutely! No risk is involved. Our 100-day full money-back guarantee keeps you safe. Don’t hesitate to return your purchase. You’ll get your money back — no ifs, ands or buts about it.
• I can’t pre-order now. Will you inform me when the book is available?
  No problem. Just subscribe to our email newsletter, and we will let you know when the book is published (probably mid to late April 2012)!
• I have a question that is not covered here.
  Please leave a comment below, or get in touch with us via the contact form or @SmashingSupport on Twitter. We would love to help you in any way we can!

We’re releasing two new printed books: the main Smashing Book 3 and Smashing Book 3⅓. Both are available as a print bundle, as eBooks and as a complete print + eBooks Bundle.

© Smashing Editorial Team for Smashing Magazine, 2012.

Other Web Design Information of Interest

• Upcoming Web Design And Development Conferences For 2012
• Free WordPress Marketing Themes – WordPress Marketing Strategies
• Web Design Weekly #31
• All About Buttons: Inspiration, PSDs for Download, CSS Generators …

  

Have you ever looked at a bizarre building design and wondered, “What were the architects thinking?” Or have you simply felt frustrated by a building that made you uncomfortable, or felt anger when a beautiful old building was razed and replaced with a contemporary eyesore? You might be forgiven for thinking “these architects must be blind!” New research shows that in a real sense, you might actually be right.

That’s Michael Mehaffy and Nikos A. Salingaros describing a phenomenon we’re all familiar with, in their article “Architectural Myopia: Designing for Industry, Not People.” As I read the article, I became increasingly uncomfortable as I realized that the whole thing might as well have been written about Web design (and about our responses to the designs of our peers). How often do we look at a website or app and remark to ourselves (and on Twitter) that “these designers must have been blind!” Sometimes we’re just being whiney about minute details (as we should be), but other times we do have a point: “What were they thinking?”

Longaberger Home Office, Newark, Ohio. Image source.

In this article, we’ll discuss “designer myopia”: the all-too-common phenomenon whereby, despite our best intentions, we sometimes design with a nearsightedness that results in websites and applications that please ourselves and impress our peers but don’t meet user and business goals. With Mehaffy and Salingaros’s article as our guide, we’ll investigate the causes of designer myopia, and then explore some solutions to help us take the focus off ourselves and back on the people we’re designing for.

The Causes Of Designer Myopia

If the language in the opening paragraph sounds familiar, it’s because most of us privately and publicly mutter “What were they thinking?” almost every day as we move across the Web. We analyze the new Twitter app; we take it upon ourselves to redesign popular websites — and then we wonder if we should even be doing that. One thing is clear, though: we’re good at pointing out designer myopia in our peers.

But what are the causes of this lack of imagination and foresight in our work? Shouldn’t we be smart enough to avoid the obvious traps of designing too much from our own viewpoints and not taking the wider user context in mind? Well, it turns out that we quite literally see the world very differently than others. Again, from “Architectural Myopia”:

Instead of a contextual world of harmonious geometric relationships and connectedness, architects tend to see a world of objects set apart from their contexts, with distinctive, attention-getting qualities.

In other words, we see typography and rounded corners where normal people just see websites to get stuff done on. We see individual shapes and colors and layout where our users just see a page on the Internet. Put another way, we’re unable to see the forest for the trees.

How did we get here? Notice the striking resemblance to Web design as Mehaffy and Salingaros describe the slippery slope that has led to this state in architecture:

With the coming of the industrial revolution, and its emphasis on interchangeable parts, the traditional conception of architecture that was adaptive to context began to change. A building became an interchangeable industrial design product, conveying an image, and it mattered a great deal how attention-getting that image was. The building itself became a kind of advertisement for the client company and for the architect (and in the case of residences, for the homeowner seeking a status symbol). The context was at best a side issue, and at worst a distraction, from the visual excitement generated by the object.

This is why we often see designs that seem to be built for Dribbble, portfolios and “7 Jaw-Dropping Minimalist Designs” blog posts, instead of being “adaptive to context” based on user needs. We have gained much from the “industrialization” of design through UI component libraries and established patterns, but we’ve also lost some of the unique context-based thinking that should go into solving every design problem.

Jon Tan touches on this in “Taxidermista,” his excellent essay on design galleries in the first issue of The Manual:

Galleries do not bear sole responsibility for how design is commissioned. However, they do encourage clients and designers to value style more than process. They do promote transient fashion over fit and make trends of movements such as minimalism or styles like grunge or the ubiquitous Apple-inspired aesthetic.

The result of all of this is that we sometimes end up designing primarily for ourselves and our close-knit community. Jeffrey Goldberg reminds us that this is true for much of the technology industry in “Convenience Is Security”:

Security systems (well, the good ones anyway) are designed by people who fully understand the reasons behind the rules. The problem is that they try to design things for people like themselves — people who thoroughly understand the reasons. Thus we are left with products that only work well for people who have a deep understanding of the system and its components.

And so we end up with a proliferation of beautiful websites and applications that only we find usable.

We all follow some rules of thumb without understanding the reasons behind them.

We can’t talk about designing primarily for the community without bringing up the awkward point that we often do it deliberately. We thrive on the social validation that comes from positive Twitter comments, being featured in design galleries and getting a gazillion Dribbble likes. And let’s be honest: that validation also helps us get more clients. This is just part of human nature, and not necessarily a bad thing. But it can be a bad thing; so at the very least, we need to call it out as another possible cause for designer myopia so that we can be conscious of it.

The Manual brings clarity to the ‘why’ of Web design, and much more.

Oh, and while we’re at it, let’s ask the obvious next question. Why are we so good at noticing when others fall into the myopia trap but fail to catch ourselves when we do it? In “Why We’re Better at Predicting Other People’s Behaviour Than Our Own,” Christian Jarrett reports on some recent research that might provide the answer:

[When] predicting our own behaviour, we fail to take the influence of the situation into account. By contrast, when predicting the behaviour of others, we correctly factor in the influence of the circumstances. This means that we’re instinctually good social psychologists but at the same time we’re poor self-psychologists.

In other words, we’re much better at taking the entire context into consideration when looking at other people’s designs than when we are creating our own. Scary stuff.

So, if designer myopia is indeed a pervasive problem (and if we are not good at recognizing it in ourselves), what do we do to fix it? I’d like to propose some established but often-ignored techniques to get us out of this dilemma.

1. Conduct Observational User Research In Context

The first thing that Mehaffy and Salingaros suggest in their article to overcome myopia is this:

First of all, re-integrate the needs of human beings, their sensory experience of the world, and their participation into the process of designing buildings. Leading design theory today advocates “co-design,” in which the users become part of the design team, and guide it through the evolutionary adaptations to make a more successful, optimal kind of design. Architects spend more time talking to their users, sharing their perception and understanding their needs: not just the architect’s selfish need for artistic self-expression, or worse, his/her need to impress other architects and elite connoisseur-critics.

Note that this is not just about asking users what they think. It’s about making users part of the design process in a helpful, methodologically sound manner. To accomplish this, we can look to anthropology to play a substantial role in the design of products and experiences. Ethnography (often called contextual inquiry in the user-centered design world) is the single best way to uncover unmet needs and make sure we are solving the right problems for our users.

In “Using Ethnography to Improve User Experience,” Bonny Colville Hyde describes ethnography as follows:

Ethnographers observe, participate and interview groups of people in their natural environments and devise theories based on analysis of their observations and experiences. This contrasts with other forms of research that generally set out to prove or disprove a theory.

That’s the core of it: we do ethnography to learn, not to confirm our beliefs. By using this method to understand the culture and real needs of our users, we’re able to design better user-centered solutions than would be possible if we relied only on existing UI patterns and some usability testing.

Leaving the office and spending time observing users in their own environments is the best way to understand how a product is really being used in the wild. It’s the most efficient way to get out of your own head.

2. Design To Blend In

Let’s stick with the architecture theme for a moment. The concept of “paving the cowpaths” is another effective way to look beyond ourselves and to design websites and applications that form part of our users’ landscapes (rather than break their mental models). In “Architecture, Urbanism, Design and Behaviour: A Brief Review,” Dan Lockton writes:

One emergent behavior-related concept arising from architecture and planning which has also found application in human-computer interaction is the idea of desire lines, desire paths or cowpaths. The usual current use of the term […] is to describe paths worn by pedestrians across spaces such as parks, between buildings or to avoid obstacles […] and which become self-reinforcing as subsequent generations of pedestrians follow what becomes an obvious path. […]

[T]here is potential for observing the formation of desire lines and then “codifying” them in order to provide paths that users actually need, rather than what is assumed they will need. In human-computer interaction, this principle has become known as “Pave the cowpaths”.

This is such an interesting perspective on user-centered design. By starting a design project with an explicit goal to “pave the cowpaths,” we will always be pulled back into a frame of mind that asks how the design can better blend in with our users’ lives and with what they already do online. The same questions will keep haunting us, and rightly so:

• Do we have analytics to back up this behavior?
• Are we sure this is what users naturally do on the website?
• We know that most users click on this navigation element to get things done. How do we make that behavior easier for them?

In the same paragraph in “Taxidermista,” Jon Tan also calls for us to step back and ask questions like these before starting to design:

The answers to a project’s questions may have something to do with fashion, but not often. Good design does not have a shelf life. The best web designers gently disregard issues of style at the start. They rewind their clients back to asking the right questions, so they can rewrite the brief and understand the objectives before they propose solutions.

By asking the right questions, we focus our effort on fitting into the ways that users move on the Web, as opposed to bending them to our will.

3. Triangulate Results

The two recommendations above are very specific, so I’d also like to make a more general point. There are, of course, several other user-research methodologies to help us get into the minds of users and bring them into the design process in a helpful, meaningful way. Methods such as concept testing, participatory design and, of course, usability testing all have their place. But the real power lies in using not just one or two of these methods, but three or more. This is where triangulation comes in:

Triangulation is a powerful technique that facilitates validation of data through cross verification from more than two sources. In particular, it refers to the application and combination of several research methodologies in the study of the same phenomenon.

Using multiple data sources — both qualitative and quantitative — is a great way to avoid any myopia traps along the way. In addition to (or instead of, depending on the project) the two methodologies covered above, you should use as many appropriate techniques as possible to help confirm your intuition and direction.

As Catriona Cornett points out in “Using Multiple Data Sources and Insights to Aid Design”:

When used correctly, data from multiple sources can allow us to better identify the context in which our designs live. It can help us validate our assumptions and approach design with confidence and not subjective opinion. This not only helps to create better design, but also helps us achieve that all-important buy-in from stakeholders. It’s easier to defend a design when you have deep, rich insights to back it up.

The first response I get when proposing triangulation (or sometimes even just one research method) is usually, “We don’t have time!” The good news is that this doesn’t have to slow you down — even an hour at a coffee shop observing real users with your product will shock you out of your myopia. The only thing that’s not an option is skipping research completely.

Summary

User research and the techniques discussed in this article aren’t new, but they’re usually left to specialist researchers to champion, or they’re swept under the rug because “We’re using established UI patterns on this one.” Hopefully, this article has shown that designer myopia is too common and too dangerous to ignore or to be left to specialist researchers to fix. Sure, user researchers are critical to ensuring that a proper methodology is followed, but we can all get out there and use the data and information available to us to make sure we don’t put too much of our own viewpoints into our designs.

Web design is personal — deeply personal. As Alex Charchar puts it in his gut-wrenching essay for The Manual:

I now know that it is through love and passion and happiness that anything of worth is brought into being. A fulfilled and accomplished life of good relationships and craftsmanship is how I will earn my keep.

I doubt that any of us would disagree with those words. Our best work happens when we throw ourselves wholeheartedly into it. But this outlook on life and design comes with its own dangers that we need to watch out for. And the biggest danger is in being unable to see beyond our own passion and taste and, with the best intentions, in failing to make the necessary connections with our users.

My hope for all of us is that the three simple guidelines discussed here — contextual user research, designing to blend in, and research triangulation — will enable us to keep the perspective we need as we throw everything we’ve got at the design problems that we have to solve every day.

(al) (il)

© Rian van der Merwe for Smashing Magazine, 2012.

Other Web Design Information of Interest

• Upcoming Web Design And Development Conferences For 2012
• Free WordPress Marketing Themes – WordPress Marketing Strategies
• Web Design Weekly #31
• All About Buttons: Inspiration, PSDs for Download, CSS Generators …

  

Developing for the Web can be a difficult yet rewarding job. Given the number of browsers across the number of platforms, it can sometimes be a bit overwhelming. But if we start coding with a little forethought and apply the principles of progressive enhancement from the beginning and apply some responsive practices at the end, we can easily accommodate for less-capable browsers and reward those with modern browsers in both desktop and mobile environments.

A Common Structure

Below is the HTML structure of a navigation menu created by WordPress. This unordered list is pretty common for content management systems and hand-coded websites alike. This will be the basis for our work.

Please note: Any ellipses (…) in the snippets below stand in for code that we have already covered. We have used them to shorten the code and highlight the parts that are relevant to that section.

<nav class="main-navigation">
   <ul>
      <li><a href="#home">Home</a></li>
      <li>
         <a href="#about">About Us</a>
         <ul class="children">
            <li><a href="#leadership">Leadership</a></li>
            <li><a href="#involvement">Involvement</a></li>
            <li><a href="#vision">Our Vision</a></li>
         </ul>
      </li>
      <li><a href="#clients">Our Clients</a></li>
      <li>
         <a href="#support">Support</a>
         <ul class="children">
            <li><a href="#blog">Blog</a></li>
            <li><a href="#downloads">Downloads</a></li>
            <li><a href="#faq">FAQ</a></li>
         </ul>
      </li>
      <li><a href="#contact">Contact Us</a></li>
   </ul>
</nav>

Our navigation, unstyled.

Our Tools

• CSS Reset
• HTML5 elements
• LESS CSS
• jQuery

CSS Reset

Resetting our CSS styles is where we’ll start. Browsers have different default styles for the elements we’ll be using, so understanding this and getting all of the elements to look the same is important. In this example, since we’re using an unordered list, there will be default left padding, top and bottom margins, and a list-style. You can either deal with these individually or, if you’re project will include more than just this navigation, use a reset to clear all of the styles and start fresh. I prefer Eric Meyer’s Reset CSS, but there are a few others to choose from, listed below. Whichever you choose, make sure it accounts for the new HTML5 elements.

• Yahoo! YUI CSS Reset
• HTML5 Doctor CSS Reset
• Normalize.css (HTML5-ready alternative to CSS resets)

HTML5 and CSS3 Elements

We’ll be wrapping the menu in HTML5’s nav element, which is one HTML5 feature that we should be using right now. If you need more good reasons to use HTML5 in your daily work, such as accessibility, then read “Top 10 Reasons to Use HTML5 Right Now” over at Codrops.

CSS3 will give our menu the progressive feel we’re looking for. We can use nifty effects such as linear gradients, text and box shadows and rounded corners, while providing a reasonable appearance for browsers that are dragging their feet. You could also consider using something like CSS3 Pie in the process. This will give those lagging browsers most of the functionality they lack to display your CSS3 properties.

LESS CSS

To make our CSS more efficient, we’ll use LESS along with a class file to ease the difficulty of dealing with all of those browser prefixes. Other options, such as Sass and Compass, do effectively the same thing and might better fit your particular development environment. If you’re interested in learning more about LESS and how it compares to Sass, check out another article of mine, “An Introduction to LESS, and Comparison to Sass.”

jQuery

To make our navigation a little friendlier in small browsers, such as those on mobile devices, we’ll use JavaScript. Essentially, we will gather all of the elements in our navigation and reorganize them into a select form element. Then, when the user selects an option from the list, they will navigate to that page. Interaction with a select element is one of the easiest and best ways to handle navigation in a small window. The practice is pretty common as well, so the learning curve for users will be gentler.

Getting Started

After applying a reset, we get something like the following. You can see that the margins, padding and list styles have been cleared.

Reset navigation

Child-Level Menus

For now, the child-level menus will only get in the way. The best thing to do is remove them from the equation and add them back in when it’s time to style them. To achieve this, we will apply position: relative to all of the list elements, and move the children off screen until they are needed.

.main-navigation {
   li {
      position: relative;
   }
   .children {
      left: -999em;
      position: absolute;
   }
}

Applying left: -999em; position: absolute; will move the children to the left of the screen by a significant margin. This method is preferable to just using display: none because it is more accessible to screen readers.

Unstyled without children

Common Navigation Styles

Every navigation menu will probably have links in it. But these links are not like the links we see in the main body of the page, which are blue, underlined and distinguishable from the surrounding text. Rather, links in the navigation will stand alone, and their function will be obvious. That being said, the links in a nav element will probably have a few features of their own that distinguish them from typical anchor tags.

nav {
   a {
      color: inherit;
      display: block;
      text-decoration: none;
   }
}

Thus, a link will inherit the color of the text assigned to the parent element, in this case nav. It will be set to display as a block-level element, because we want the clickable area to be large and we do not want underlining (because that would just look funny).

Navigation with more functional links

Please note: color: inherit is not supported in IE 6 or 7. If you need to support those browsers, then you will need to explicitly set the color that you want.

Lining Up

Getting the menu in line calls for the use of floats. Initially, we’ll float all of the elements in the nav element to the left. Later, we’ll undo this property for the child-level menus, along with a lot of the other styles that we’ll set along the way.

.main-navigation {
   ul, li, a {
      float: left;
   }
   …
}

Inline navigation

Because every element in the nav element is now floated, the element itself will collapse as though it were empty. There are a few ways to deal with this. One is to also float the nav element itself, which will expand it to wrap around its contents. If need be, you can set it to width: 100% to fill any remaining space to the right. Or you could use Nicolas Gallagher’s “micro” clearfix solution, which essentially adds clear: both just before the closing of the nav element.

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Because we’re using LESS for our CSS, applying the clearfix to our main-navigation class without modifying the markup is very easy.

.main-navigation {
   .cf;
   …
}

We’ll see more of this, as well as a description of how this works, in the section titled “Rounded Corners and Gradients” below.

Styling

All righty. By now, you’re probably as tired of looking at an unstyled menu as I am. To start, we’ll build what looks like a block wall, and then chisel a nice menu out of it. We won’t serve the block wall to antiquated browsers, but it’s a good start anyway.

Background Color and Borders

.main-navigation {
   font-size: 0.8em;

   ul, li, a {
      …
   }
   ul {
      background: #eee;
      border: 1px solid #ddd;
   }
   li {
      …
      border-right: 1px solid #ddd;
   }
   li:last-child {
      border-right: none;
   }
   a {
      height: 35px;
      line-height: 35px;
      margin: 3px;
      padding: 0 15px;
   }
   .children {
      …
   }
}

In the code above, the text was just too big, so we shrunk it with font-size: 0.8em. This property is set on the main-navigation class, so it applies throughout the navigation. The top-level unordered list has a border: 1px solid #ddd property to break it out from the page. Each list item element is given a border-right: 1px solid #ddd; to separate it from each other. The li:last-child selector targets the last list item element in the unordered list, removing the right border because no item follows it.

The links within the navigation are given a background color and some left and right padding to add distinction and increase their clickable area. We’re fixing the height and line-height, instead of using top and bottom padding, so that we can predict more accurately where the child-level menus will be positioned relative to their shared parent list item.

Navigation resembling a block wall

Rounded Corners and Gradients

.main-navigation {
   …
   text-shadow: 0 1px 1px #fff;

   ul {
      border: 1px solid #ddd;
      .border-radius();
      .linear-gradient();
   }
   …
}

.border-radius (@radius: 5px) {
   border-radius: @radius;
}
.linear-gradient (@start: #fff, @end: #ddd, @percent: 100%) {
   background: @start; /* Old */
   background: -moz-linear-gradient(top,  @start 0%, @end @percent); /* FF3.6+ */
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,@start), color-stop(@percent,@end)); /* Chrome, Safari 4+ */
   background: -webkit-linear-gradient(top,  @start 0%,@end @percent); /* Chrome 10+, Safari 5.1+ */
   background: -o-linear-gradient(top,  @start 0%,@end @percent); /* Opera 11.10+ */
   background: -ms-linear-gradient(top,  @start 0%,@end @percent); /* IE 10+ */
   background: linear-gradient(top,  @start 0%,@end @percent); /* W3C */
}

Above, we have created two new classes, border-radius and linear-gradient.

The border-radius class is actually what LESS developers refer to as a parametric mixin. Essentially, it’s like a class, but you can pass variables to it in case the default value isn’t exactly what you want. In this case, if 5 pixels isn’t what you want, you could reference the mixin as .border-radius(10px), and then it would use 10px instead of the original 5px. With the border-radius property, you could also pass it something like .border-radius(5px 0 0 5px), and it would apply the 5-pixel rounding to only the top-left and bottom-left corners. For more information and possibilities on border-radius, see “Border-Radius: Create Rounded Corners With CSS” at CSS3.info.

Another parametric mixin is linear-gradient. But with LESS, you can add classes to other selectors and it will apply the same styles—thus negating the need to modify the markup just to add another class (and, by extension, its styles) to an element. Both of the classes I’ve created cover the possibilities of browser syntax. Currently, Webkit has two different syntaxes, because for some reason the browser makers decided to ignore the specification when first implementing it and made up their own syntax. With Chrome 10 and Safari 5.1, they went back to the specification, joining the other browsers, and made things a little easier for us. However, if you still care about the previous versions, you’ll need to add their crazy syntax as well. We’ve also added a white text-shadow to the text in the navigation to give it a slightly beveled look.

With the two classes applied, you can see the slight gradient and the rounded corners.

Some browsers do not support CSS3 gradients. Yes, I’m looking at you, Internet Explorer 6, 7, 8 and 9. If you want to use something other than the filter syntax for gradients, you’ll have to wait for version 10. In the meantime, either you could use the filter syntax for IE (see the “For Internet Explorer” section of “Cross-Browser CSS Gradient”) and put them in an IE-specific style sheet, or you could use an image gradient. You could also just leave them without the gradient, but that’s not the point here.

Parent-Level Hover States

.main-navigation {
   …
   li:hover {
      a {
         .linear-gradient(#dfdfdf, #c0bebe, 100%);
      }
      .children {
         …
         a {
            background: none;
         }
      }
   }
   …
}

The code above will trigger the hover state for anchor elements when the user hovers over their parent list item, rather than hovering over the anchors themselves. This way is preferable so that the anchor element maintains its hover state when the user is mousing over the child-level menu as well. Doing it this way does, however, create the need to reset the background color of anchor elements within the child-level menus. That’s the part you see within the children selector.

Hovering over the parent-level links

Displaying the Children

Bringing the children back onto the screen is easy enough. But before we get carried away, we need to clear out a few styles that are applied to all unordered lists, list items and anchors.

.main-navigation {
   …
   .children {
      background: #fff;
      left: -999em;
      position: absolute;

      li, a {
         float: none;
      }
      li {
         border-right: none;
      }
   }
}

The code above changes the background of the child-level menu to white, instead of the light gradient that we used in the parent-level menu. The next couple of lines remove the left float from the list items and anchors. We’ve also gotten rid of the right border that separates the list items in the parent-level menu.

The Hovering Box

.main-navigation {
   …
   .children {
      background: #fff;
      .box-shadow();
      left: -999em;
      margin-left: -65px;
      position: absolute;
      top: 30px;
      width: 130px;
      …
   }
}

…
.box-shadow (@x: 0, @y: 5px, @blur: 5px, @spread: -5px, @color: #000) {
   -moz-box-shadow: @x @y @blur @spread @color;
   -webkit-box-shadow: @x @y @blur @spread @color;
   box-shadow: @x @y @blur @spread @color;
}
…

We’ve added another parametric mixin to the equation. This one produces the box shadow, with all of its parameters as variables, and with the browser prefixes. We’ve borrowed the styles from .children to make the box appear to hover over the parent menu. To center the child underneath the parent element, we’ve set the left position to 50%, and set the left margin to the negative value of half the width of the child. In this case, the child level menu is set to 130 pixels wide, so we’ve set the left margin to -65 pixels.

Navigation with the child reset to hover style

Child-Level Hovers

.main-navigation {
   …
   .children {
      …
      a {
         .border-radius(3px);
         height: 30px;
         line-height: 30px;
         margin: 3px;
      }
      a:hover {
         background: #dff2ff;
      }
   }
}

We’re using the parametric mixin that we created for the border-radius for the links in the children as well. Adding a 3-pixel margin and 3-pixel border radius to all of the anchor elements within the child menu will accent the 5-pixel border radius of the menu well. We’ve also adjusted the height and line height a little, because they just seemed too high. Finally, we gave the list items a nice soft-blue background color on hover.

Navigation with child menus and their hover state

Responding to Mobile Browsers and Size Constraints

A lot of screen sizes and browsers are out there. The iPhone has had two resolutions. Up to the 3GS model, it was 480 × 320; since the iPhone 4, it has been 960 × 640. Android browsers run from 480 × 320 to 854 × 480. Android also has a lot of browsers to choose from. There are the usual Firefox and Opera, as well as a ton of browsers by small start-ups. You can get Opera for the iPhone, but since you can’t make it the default browser, you’re pretty much stuck with Safari. Given this variety, we’ll have to make some adjustments if we want our navigation to be useful on all devices and in all browsers.

Fitting the Content

Accomplishing this part is easy, but doing it will probably require adjusting our styles. But that’s why we’re here, isn’t it?

Currently, when we open the navigation demo in iOS, it looks like this:

Original navigation in iOS

This might not look too bad on a giant screen, and it might even be usable on the iPad, but you would struggle to use it on a phone. Zooming in might make it easier, but that’s not ideal. Optimizing for the device is preferable, and forcing the browser to use the available space is simple.

<meta name="viewport" content="width=device-width">

This alone makes a huge difference in the way the browser renders the page. And while the menu is not the prettiest it’s ever been, it is a lot more functional.

Navigation on iOS with the viewport adjusted

Media Queries

We can use media queries to adjust the styles based on the media in the browser. In this case, we’ll use the width of the page to change the look and feel of the navigation to make it more suitable to the available space. In this case, we’ll make the menu items more button-like.

@media only screen and (max-width: 640px) {
   .main-navigation {
      ul {
         border: none;
         background: none;
         .border-radius(0);
      }
      li {
         border-right: none;
      }
      a {
         border: 1px solid #ddd;
         .border-radius();
         font-size: 1.2em;
         height: auto;
         .linear-gradient();
         line-height: 1em;
         padding: 15px;
      }
   }
}

In the code above, we’ve used a media query to target situations in which the user is only looking at a screen and in which the width of the window is a maximum of 640 pixels. In this scenario, we’ve removed the border, background and border radius from the unordered list, and applied those styles to the anchors themselves. We’ve also increased the font size of the anchors, cleared the height and line height, and adjusted the padding of the links to increase the clickable area.

Navigation adjusted for mobile

As you can see, the links look much friendlier in a mobile browser. They are, however, only half functional, because touch devices don’t have a hover state. This means that if you have child-level menus, as we do here, you’ll have to figure out a way to display them as well. You could replace the hover state with a touch event of some kind, or expand the children out onto the page. That would greatly increase the size of the navigation, though. The following method might be best.

Replacing the Menu in Mobile Browsers With JavaScript

$(function() {
   /* Get the window's width, and check whether it is narrower than 480 pixels */
   var windowWidth = $(window).width();
   if (windowWidth <= 480) {

      /* Clone our navigation */
      var mainNavigation = $('nav.main-navigation').clone();

      /* Replace unordered list with a "select" element to be populated with options, and create a variable to select our new empty option menu */
      $('nav.main-navigation').html('<select class="menu"></select>');
      var selectMenu = $('select.menu');

      /* Navigate our nav clone for information needed to populate options */
      $(mainNavigation).children('ul').children('li').each(function() {

         /* Get top-level link and text */
         var href = $(this).children('a').attr('href');
         var text = $(this).children('a').text();

         /* Append this option to our "select" */
         $(selectMenu).append('<option value="'+href+'">'+text+'</option>');

         /* Check for "children" and navigate for more options if they exist */
         if ($(this).children('ul').length > 0) {
            $(this).children('ul').children('li').each(function() {

               /* Get child-level link and text */
               var href2 = $(this).children('a').attr('href');
               var text2 = $(this).children('a').text();

               /* Append this option to our "select" */
               $(selectMenu).append('<option value="'+href2+'">--- '+text2+'</option>');
            });
         }
      });
   }

   /* When our select menu is changed, change the window location to match the value of the selected option. */
   $(selectMenu).change(function() {
      location = this.options[this.selectedIndex].value;
   });
});

To summarize, first we’re checking whether the window is less than or equal to 480 pixels. To ensure an accurate reading on mobile devices, you can use a meta tag to scale the viewport accordingly:

<meta name="viewport" content="width=device-width">

We populate the first variable, windowWidth, with the value of the window’s width as defined by the given device. We can use this value to then check whether the width is narrower than a particular value. We’ve chosen 480 pixels here because, while we might want to use media queries to adjust the menu below 640 pixels, at a certain point the viewport would be just too small to justify the menu taking up all that space.

We then use jQuery to create a clone of our menu that we can later crawl to create our options. After we’ve done that, it’s safe to replace the unordered list with the select element that we’ll be using and then select it with jQuery.

In the largest part of the code, we’re crawling through the clone of our navigation. The selector used, $(mainNavigation).children('ul').children('li'), ensures that we go through only the uppermost list elements first. This is key to creating the nested appearance of the select menu. With it, we select the “direct” child-level unordered list elements and then their “direct” child-level list elements, and then parse through them.

Inside each of these “direct” descendants, we get the value of the href attribute and the text of the link, and we store them in variables to be inserted in their respective options. This is implemented by appending <option value="'+href+'">'+text+'&kt;/option> to our new select list.

While we’re in the top-level list item elements, we can check whether any child-level menus need to be parsed. The statement if ($(this).children('ul').length > 0) checks whether the count of the selector is greater than 0. If it is, that means child-level items need to be added. We can use that same selector, with a slight addition, to go through these elements and add them to our select list, $(this).children('ul').children('li').each().

The same parsing method applies to these elements, although they use different variables to store the values of the anchor tags, so as not to create conflicts. We have also prefixed text to the menu labels at this level, --- , to differentiate them from the other items.

Parsing through the menu in this method (nested) will create the parent-child relationship you would expect.

After the menu is created, a little more JavaScript will enable the select list to serve as navigation.

$(selectMenu).change(function() {
   location = this.options[this.selectedIndex].value;
});

When the select menu is changed, a new option is selected, and the window location is changed to reflect the value of the option. That value comes from the href of the original anchor element.

The result is like so:

The select menu in a desktop browser

The select menu in Android and iPhone browsers

Given the increased clickable area of the native controls, the select menu is obviously much more user-friendly on mobile.

Share Your Experience

We’d love to see and hear about some of your experiences with menus across browsers and platforms; please share below. And if you have any questions, we’ll do our best to find answers for you.

(al)

© Jeremy Hixon for Smashing Magazine, 2012.

Other Web Design Information of Interest

• Upcoming Web Design And Development Conferences For 2012
• HTML5 Best Practices for Web Developers
• 45+ Latest Free Fonts To Enhance Your Designs – Feedgrids
• Boorow.com Story: 15 Blogs Web Developers Should Check on a …

  

We’re well into 2012, and many designers and developers around the world are planning their travels for the year, which may include attending one of the many Web design and development conferences that will be held in the upcoming months. To help you out with your plans, we’ve once again put together a list of conferences and events that you might want to consider.

As always, this post covers events taking place in about a seven month timeframe that ends in early September. In August, we’ll post another article like this that will cover events for the six or seven month period beginning in September.

There is no way for us to include every possible event, so you are more than welcome to help us out and provide a comment to an upcoming event that you feel would be of interest to Smashing Magazine’s readers. This may also be a chance for you to meet members of the Smashing Team this year.

Using the in-page links below, you can choose the month that interests you most:

• February 2012 Events
• March 2012 Events
• April 2012 Events
• May 2012 Events
• June 2012 Events
• July 2012 Events
• August/September 2012 Events

February 2012 Events

Multipack Events
“The Multipack is a community of multi-talented Web professionals from across the West Midlands. Every month we get together to discuss design, code, standards and technology, and share our knowledge, skills and talents.”

When: Various dates throughout 2012
Where: Various UK locations

Web Direc­tions’ “What do you know?”
“Come by at 6.30pm and we’ll kick off around 7.00pm. There’ll be ten fast and furi­ous five minute pre­sen­ta­tions show­ing off a cool web devel­op­ment or design tech­nique. There’ll be free beer and a bite to eat, and it’s a great chance to see who’s doing what in the local web indus­try. See you there!”

When: Various dates beginning February 16, 2012
Where: Various cities in Australia

WordCamp
“WordCamp is a conference that focuses on everything WordPress. WordCamps are informal, community-organized events that are put together by WordPress users like you. Everyone from casual users to core developers participate, share ideas, and get to know each other.”

When: Various dates beginning February 17, 2012
Where: Miami, Phoenix, Slovakia, Bangkok, The Netherlands, San Diego, Ponce

SES Conference & Expo
“SES Conference & Expo is the leading global event series that educates delegates in search and social marketing, putting a special focus on tactics and best practices. SES Events provide instruction from the industry’s top experts, including representatives from the Search Engines themselves.”

When: Various dates starting February 20, 2012
Where: London, New York, Shanghai, Toronto, San Francisco

In Control Conference
“Learn from a diverse array of Web experts to use modern tools and techniques to refine your Web design craft now. Harness creative inspiration to unlock your potential, amplify innovation, and broaden your reach. Immerse yourself in two days of idea exchange with potential business partners who are as forward-thinking as you are.”

When: February 20-21, 2012
Where: Orlando, FL, USA at the Embassy Suites Orlando

iStrategy
“iStrategy is an inspirational, two-day, digital media conference for senior executives who believe that the success of their business requires a sound digital strategy. iStrategy is held bi-annually at each of our four regional event locations in North America, Europe, Australia and Asia.”

When: Various dates beginning February 21
Where: Sydney, London, Chicago

LessConf
“LessConf is not like other events you’ve heard about. Sure there’s speakers, after parties, people with laptops, but LessConf has been called ‘Summer camp for startups’, ‘the best time of my life,’ and even ‘the world’s worst conference’.”

When: February 23-24, 2012
Where: Atlanta, GA, USA

No Fluff Just Stuff Software Symposiums
“This conference will focus on the latest technologies and best practices emerging in the enterprise software development space. Our speakers are authors, consultants, open source developers, and recognized industry experts. NFJS brings a high quality conference to your city, making the event accessible not only to senior engineers, but to the whole team. ”

When: Various dates beginning February 24, 2012
Where: Various cities in the USA

SuperConf
“SuperConf 2012 is where web development & entrepreneurship converge. We will have 9 startups & 8 speakers over 2 days in perfect weather during February.”

When: February 24-25, 2012
Where: Miami, FL, USA at the Miami Beach Convention Center

PHP UK Conference
“PHP UK Conference 2012 is PHP London’s seventh annual conference, powered by PHP London, a community-run, limited company of the UK. For the first time, it is a two day event. The conference planning committee is made of up of the five members of the PHP London executive committee and five additional volunteers.”

When: February 24-25, 2012
Where: London, UK at the Business Design Centre

OpenCF Summit
“OpenCF Summit is a community gathering focused exclusively on advancing free and open source software in the CFML community. If you’re interested in diving into the free software CFML engines, learning more about the free software movement, and interacting with the most progressive thinkers in the CFML community, OpenCF Summit is for you! 72 hours of CFFreedom for the low, low price of only $72. Sleep optional.”

When: February 24-26, 2012
Where: Dallas, TX, USA at the Hyatt Place Dallas/Garland

Usability Week Conference 2012
“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”

When: Various dates between February 26 and May 18, 2012
Where: New York, Las Vegas, Edinburgh, San Francisco, Amsterdam, Washington

FITC Amsterdam
“FITC Amsterdam features renowned speakers from around the world, all of whom have signed up to share their knowledge and expertise; attendees will leave inspired, educated and challenged to set the bar even higher.”

When: February 27-28, 2012
Where: Amsterdam, The Netherlands, at the European Centre for Arts and Sciences

Confoo
“PHP, Python, Ruby, Java and .NET Conference.”

When: February 29 – March 2, 2012
Where: Montreal, Canada

Design Indaba Conference and Expo
“With a focus on international thought leadership, the Design Indaba Conference has become one of the world’s leading design events and hosts more than 40 speakers and 2 500 delegates. The Design Indaba Expo was inaugurated in 2004 and provides a commercial platform for the finest South African designers to leverage goods and services to the local and global markets.”

When: February 29 – March 4, 2012
Where: Cape Town, South Africa

March 2012 Events

QCon
“QCon London is the sixth annual London enterprise software development conference designed for developers, team leads, architects and project management is back! There is no other event in the UK with similar opportunities for learning, networking, and tracking innovation occurring in the Java, .NET, Html5, Mobile , Agile, and Architecture communities.”

When: March 7-9, 2012
Where: London, UK in The Queen Elizabeth II Conference Centre

SXSW Interactive
“The 19th annual SXSW Interactive festival will take place March 9-13, 2012 in Austin, Texas. An incubator of cutting-edge technologies, the event features five days of compelling presentations from the brightest minds in emerging technology, scores of exciting networking events hosted by industry leaders and an unbeatable line up of special programs showcasing the best new websites, video games and startup ideas the community has to offer. From hands-on training to big-picture analysis of the future, SXSW Interactive has become the place to experience a preview of what is unfolding in the world of technology.”

When: March 9-13, 2012
Where: Austin, TX, USA

Greenville Grok
“A small thing, in a great place, with wonderful people, asking a ton of questions and making headway on some decent answers.”

When: March 15-17, 2012
Where: Greenville, SC, USA

Webcoast
“We offer a weekend where you expand your knowledge and your network of contacts, a weekend you will remember and enjoy for a long time.”

When: March 16-18, 2012
Where: Gothenburg, Sweden

London Web Summit
“The two largest web & start up conferences in the UK & Ireland, GeeknRolla and the Dublin Web Summit, are merging to create the London Web Summit. LWS will take place on March 19th in the Brewery.”

When: March 19, 2012
Where: London, UK in the Brewery

DrupalCon Denver
“DrupalCon Denver is the official conference of the Drupal community. DrupalCon is a biannual event presented to an ever-expanding international audience since Drupal became an open-source project in 2001. It’s put on by the Drupal Association, as well as a fabulous group of volunteers and organizers from across the globe.”

When: March 19-23, 2012
Where: Colorado, USA, at the Colorado Convention Center

IA Summit
“The IA Summit is the primary event for those redefining strategy and structure in support of cross-channel systems and user experiences.”

When: March 21-25, 2012
Where: New Orleans, LA, USA at the downtown Hyatt Regency Hotel

FITC Spotlight: JavaScript
“Nearly everyone with a personal computer has some sort of JavaScript interpreter on it, making this language essential to the developer’s toolkit. JavaScript has become even more important with the increasing popularity of HTML5, as it is one of the language’s building blocks. By the end of event day, attendees will have enough information to get started with JavaScript development.”

When: March 24, 2012
Where: Toronto, Canada, at the University of Toronto Campus

Made by Few Web Conference
“Made by Few is a 1-day conference featuring talks from entrepreneurs, designers, developers, and creatives. It’s part showcase, part education, and part inspiration.”

When: March 24, 2012
Where: Little Rock, AR, USA at Little Rock River Market

Photoshop World Conference & Expo
“Designed to help you boost your skills, Photoshop World offers three days of pulse-pounding training with classes from renowned experts in the fields of Photoshop, photography and lighting and a once-in-a-lifetime experience guaranteed to enhance your skill set and help your work soar to new heights!”

When: March 24-26, 2012
Where: Washington, DC, USA at the Walter E. Washington Convention Center

DevConnections
“Join us and explore the latest trends and get the most up to date information and training available. All while networking with your colleagues and building a valuable network of peers in one of the most entertaining cities in the world.”

When: March 26-29, 2012
Where: Las Vegas, NV, USA at the MGM Grand

ArabNet Digital Summit
“The region’s largest digital event just got bigger! This year’s summit will go on for 5 action-packed days featuring cutting-edge panel discussions, specialized workshops, exciting competitions, focused networking sessions, social activities and more.”

When: March 27-31, 2012
Where: Beirut, Lebanon

April 2012 Events

JSConf
“We have been doing JSConf for 4 years and every single one has been better than the last, it is something we take a great deal of pride in. We make events that aren’t from the standard conference playbook because we believe you deserve more than that. We focus on two things, presenting mind-altering JavaScript technology and uses during the daytime and providing exceptional ‘networking events’ AKA killer parties during the evenings.”

When: April 2-3, 2012
Where: Scottsdale, AZ, USA at the Firesky resort

TYPO San Francisco
“San Francisco is renowned as a creative hub. The unique blend of innovative thinking, design, software and technological development in the Bay Area has changed the way the world works. Well designed connections have improved and made our lives more fulfilling. Greater connections mean life can be more challenging, and that requires innovative design solutions. TYPO San Francisco brings together incredible speakers from American and European design communities to share and discuss what it means to connect.”

When: April 5-6, 2012
Where: San Francisco, CA, USA at the Yerba Buena Center for the Arts

TYPO3 Developer Days
“So, here is the deal. You have a project related to TYPO3 / FLOW3 / Phoenix or the TYPO3 project in general? You need some manpower to get it done? You want to share your idea and probably find someone who joins your team? You just want to implement the coolest feature mankind has ever seen? Well, then the TYPO3 Developer Days 2012 is the event to go!”

When: April 12-15, 2012
Where: Munich, Germany at MACE

MADinSpain
“Breathe creativity. MADinSpain is an international design event and venue for the most remarkable creative minds of our time.”

When: April 13-14, 2012
Where: Madrid, Spain

360|Flex
“360|Flex has quickly become THE conference for Flex/AIR/ActionScript developers to attend to connect with the community, learn from the Adobe Engineers, as well as community experts, and get the deepest, most technical understanding of Flex and what’s coming for Flex, anywhere.”

When: April 15-18, 2012
Where: Denver, CO, USA

DIBI Web Conference
“Design it. Build it. The two-track web conference.”

When: April 16-17, 2012
Where: Newcastle upon Tyne, UK

Breaking Development
“Breaking Development focuses on new, emerging techniques for web development and design for mobile devices. Our speakers are hand-picked to make sure you get challenging, well-delivered talks from a variety of different perspectives.”

When: April 16-18, 2012
Where: Orlando, FL, USA at the Gaylord Palms

140 Character Conference
“The take aways from this event will provide the attending delegates knowledge, perspectives and insights to the next wave of effects twitter and the real-time internet will have on business.”

When: Multiple dates beginning April 17, 2012
Where: New York, USA

Great Indian Developer Summit
“With over 14000 attendees benefiting over four game changing editions, GIDS is the gold standard for India’s software developer ecosystem for gaining exposure to and evaluating new projects, tools, services, platforms, languages, software and standards.”

When: April 17-20, 2012
Where: Bangalore, India

UX London
“Presented by Clearleft, UX London is 3 days of inspiration, education and skills development for User Experience Designers.”

When: April 18-20, 2012
Where: London, UK, at the Cumberland Hotel

BACON
“BACON is a two-day, two-track technology conference on things developers love. Thirty-two tasty sessions on topics including web development, machine learning, astronomy, and electronic music.”

When: April 20-21, 2012
Where: London, UK

FITC Design & Technology Festival
“The game has changed and FITC is on it! Featuring over 70 renowned digital creators from around the globe, FITC Toronto 2012 attendees will be privy to the knowledge of the best and brightest in the digital space. Covering everything from HTML5 to making digital art, this three day festival will leave attendees inspired to create in new and innovative ways.”

When: April 23-25, 2012
Where: Toronto, Canada at the Hilton

beyond tellerrand – play!
“This a 4 day event with affordable ticket pricing. 2 workshop days feature full-day workshops and the conference covers 2 tracks with over 20 presentations about technology, design and inspiration on 2 days. Who ever wants to hear the latest buzz and exchange with other creative minds has reached the exact right event. And ticket prices start from just €99,00 including German VAT (19%) and booking fees.”

When: April 24-27, 2012
Where: Cologne, Germany

TNW Conference
“The 7th edition of The Next Web Conference will be packed with high quality content, networking events, parties and dealmaking opportunities. It’s the place to be for all web and mobile professionals.”

When: April 25-27
Where: Amsterdam, The Netherlands

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

When: April 26-27, 2012
Where: Warsaw, Poland at the Soho factory

ConvergeSE
“Peel back the layers and examine the intersection between design, development and marketing over two days of workshops and lectures.”

When: April 27-28, 2012
Where: Columbia, SC, USA at IT-ology

Future Insights Live
“Future of Web Apps, Future of Web Design, Future of Mobile, and Future of Web in the Enterprise have joined forces to bring you our most comprehensive event EVER!”

When: April 30 – May 4, 2012
Where: Las Vegas, NV, USA at the MGM Grand Conference Center

May 2012 Events

GRAVITY FREE
“If you aren’t finding the inspiration you need to think big ideas, to boldly imagine, to create surprise, to do things a little differently, consider the place you aren’t looking — GRAVITY FREE: Design That Opens Minds.”

When: May 1-2, 2012
Where: Chicago, IL, USA at The Spertus Institute

webDU
“The conference offers the opportunity to get hands-on technical training, gain new skills, hear breaking news from the Web Industry, network with peers and industry leaders, and ultimately become more successful developing and delivering web applications. Nowhere else in ANZ can this audience find the volume and quality of information available under one roof at webDU.”

When: May 3-4, 2012
Where: Sydney, Australia at the Four Points by Sheraton Sydney, Darling Harbour

Next Berlin
“The leading European conference for the digital industry. ”

When: May 8-9, 2012
Where: Berlin, Germany

CMS Expo
“2012 CMS Expo showcases the world’s leading Content Management Systems and the incredible people who power them. Come discover the most innovative CMSs on the planet. Connect to the growing CMS Community. Learn the best ways to deploy your content and tune your CMS to perfectly match the demands of an ever-changing mobile, social, interconnected marketplace.”

When: May 8-10, 2012
Where: Chicago, IL, USA

J. Boye Web and Intranet Conference
“J. Boye’s conferences grew out of our international groups for online professionals. We are in regular contact with our 400+ members from large and complex organisations and we know their agendas and projects. This puts us in a unique position to assess and determine what is happening in every corner of the field at any given time and enables us to put together a relevant program that really reflects the current challenges of our delegates.”

When: May 8-10, 2012
Where: Philadelphia, PA, USA at The Hub CityView

Mobilism
“Mobilism is one of the best-respected web conferences in the world, concentrating exclusively on mobile web design and development.”

When: May 10-11, 2012
Where: Amsterdam, The Netherlands

Semi-Permanent Creative Conferences
“Semi-Permanent is a world leading design conference that to date has hosted 29 events in 9 cities, covering 5 countries, with over 200 speakers and 50,000 attendees. In 2012, Semi-Permanent celebrates ten years of events- that’s a decade full of stories and wisdom from industry idols. ”

When: Various dates beginning May 11, 2012
Where: Sydney, Auckland, Brisbane, Melbourne (Australia)

Future Of Web Design London
“The Future of Web Design proudly presents three days of cutting edge learning and inspiration. Join us for a day of in-depth workshops, followed by two action-packed conference days in the heart of London!”

When: May 14-16, 2012
Where: London, UK at The Brewery

PEPCON
“Join the world’s top InDesign experts and the Adobe InDesign team, May 14-16 in San Francisco for the InDesign event of the year! Find answers and valuable insight on the topics publishing for eBooks, print, interactive documents, and more! Be inspired by fresh ideas and new products. Includes a 2-day multi-track conference followed by three full-day post-conference tutorials.”

When: May 14-16, 2012
Where: San Francisco, CA, USA

Confab
“As the leading conference of its kind, Confab plays a major role in driving the content strategy conversation forward.”

When: May 14-16, 2012
Where: Minneapolis, MN, USA at the Hyatt Regency Minneapolis

Internet Week New York
“Since its debut in 2008, Internet Week New York has quickly become one of the world’s top festivals celebrating digital culture, as well as a global showcase for New York City’s thriving technology industry. Internet Week New York 2012 is expected to bring more than 30,000 people from around the world to nearly 300 events at the festival’s headquarters and at dozens of locations throughout the city. ”

When: May 14-21, 2012
Where: New York, USA

UX Lx
“3 fantastic days with User Experience Professionals from all the over the world. 16 workshops to develop your skills, 10 talks to inspire you and 16 slots open for you to share your experiences. All this coupled with lots of parties and meetups in sunny Lisbon.”

When: May 16-18, 2012
Where: Lisbon, Portugal at the FIL Meeting Centre

WebVisions Portland
“It’s our 12th big year in Portland, and we’re celebrating with a fabulous lineup of experts in web and mobile design, technology, user experience, DIY, strategy and more!”

When: May 16-18, 2012
Where: Portland, OR, USA at the Oregon Convention Center

D2W Conference
“Workflow is what we do. Day in and day out, although you may not think about it like that. Do you work with multiple applications during the day? Do you work with a developer or designer (depending on which you are)? Then that is what the D2W is all about.”

When: May 16-18, 2012
Where: Kansas City, MO, USA at the Plaza Marriott

TYPO Berlin
“For decades, design has been looking for something new, for something different – often at the expense of resources and global justice. Many companies have already had to learn things the hard way, because they ignored contemporary social values. Others have learned from the crisis and take social and ecological matters into consideration in their business strategies. Discover at TYPO Berlin 2012 sustain the long-living and the constant in design!”

When: May 17-19, 2012
Where: Berlin, Germany at Haus der Kulturen der Welt

J and Beyond
“J and Beyond, an International Joomla! Conference, is back for the third year. For 3 days in May Joomla! developers and site builders from over 30 countries will gather in Bad Nauheim, near Frankfurt, right in the heart of Europe.”

When: May 18-20, 2012
Where: Bad Nauheim, Germany

phpDay
“We’ll show new development traits, best-practices and success cases related to quality, revision control, test-driven development, continuous integration and so on. There are also talks about design, project management, agile and various php-related technologies like Zend Framework2, Symfony2, Codeigniter, Drupal, WordPress.”

When: May 18-19, 2012
Where: Verona, Italy at San Marco Hotel

A Web Afternoon
“A Web Afternoon is a mini event intended to inspire and educate people who love the web. Think TED, but for the web. Both speakers and attendees will be people from a variety of disciplines, but who all share a common passion for making the web a better place.”

When: May 19, 2012
Where: Atlanta, GA, USA at the GTRI Conference Center

AgIdeas International Design Week
“agIdeas International Design Week is the largest and most prestigious design festival in the world. Established in 1991 by Ken Cato, developed and presented by the Design Foundation. agIdeas offers an extraordinary program of events that celebrate design excellence and promotes the value of design driven innovation. ”

When: May 21-23, 2012
Where: Melbourne, Australia

UXcamp Europe
“The main rule of the conference is: No spectators, just participants! This BarCamp-rule does not mean everybody has to do a Session, but everybody should come prepared to participate in an active manner.”

When: May 26-27, 2012
Where: Berlin, Germany at Erwin-Schrödinger-Zentrum of the Humboldt University

O’Reilly Fluent Conference
“The O’Reilly Fluent Conference is about everything JavaScript. If you’re developing for the Web, desktop, or mobile, knowing the ins and outs of JavaScript and related technologies is critical. Come to Fluent to learn from expert developers who are using JavaScript in all kinds of contexts, to do things that no one ever expected JavaScript could do, and do so well.”

When: May 29-31, 2012
Where: San Francisco, CA, USA

Big Design Conference
“Experts from across the country will gather to present theories, research, experiences, and best practices to students, professionals, and executives looking to stay on the bleeding edge.”

When: May 31–June 2, 2012
Where: Addison, TX, USA at the Addison Crowne Plaza Hotel

June 2012 Events

webinale
“The conference is to grow revenues, which shines through the web holistically, focusing not only on individual fragments. The conference is, thus bridging the gap between designers, web developers, managers and entrepreneurs, providing an incredibly lively forum for inspiration, networking and practical know-how.”

When: June 4-6, 2012
Where: Berlin, Germany

International PHP Conference
“The International PHP Conference is the global recognized event for PHP developers, webworkers, IT managers and everyone interested in web-technology.”

When: June 5-6, 2012
Where: Berlin, Germany at The Maritim proArte Hotel

Eyeo Festival
“In 2011, eyeo brought together an incredible group of creative coders, data viz pros, designers and artists. For 2012 we’ll raise the bar. Expect lectures, conversations and workshops with some of the most fascinating minds and makers today.”

When: June 5-8, 2012
Where: Minneapolis, MN, USA at the Walker Art Center

Interlink Web Design Conference
“Interlink Conference is a small hand-crafted event created for web professionals of all types. Explore the intersection of web design, code, and content during 2 empowering days of curated talks and workshops in Vancouver. (Plus, there’s dodgeball.)”

When: June 6-7, 2012
Where: Vancouver, Canada at Robson Square

Valio Con
“Conference at the beach where it’s all about actual fun and not sitting in a hotel lobby the entire time.”

When: June 7-10, 2012
Where: San Diego, CA, USA at the Hyatt Mission Bay

Front-End Design Conference
“The Front-End Design Conference is an annual event dedicated to content, presentation and behavior. The speakers and attendees are made up of awesome people from the web design and development community.”

When: June 8, 2012
Where: St. Petersburg, FL, USA at the Palladium Theater

NXNE Interactive
“With over 80 presentations, NXNEi bridges the gap between creators of all kinds and interactivity. Whether you’re a musician, film producer, marketer, public relations pro or community manager, NXNE Interactive programming has you covered. Join us for three days of tech and social media exploration to learn how to boost ingenuity while enhancing your marketing and business efforts.”

When: June 11-17, 2012
Where: Toronto, Canada

Ampersand 2012
“Combining the worlds of web & type design.”

When: June 15, 2012
Where: Brighton, UK

Nordic Ruby Conference
“Learn stuff. Meet people. Have fun. Nordic Ruby is a two-day, single-track Ruby conference. At a Japanese spa in the beautiful Stockholm archipelago. All-inclusive.”

When: June 15-16, 2012
Where: Stockholm, Sweden at Yasuragi Hasseludden

An Event Apart Boston
“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: June 18-20, 2012
Where: Boston, MA, USA at the Marriot Copley Place

HOW Design Live
“In 2012, Boston is the meeting point for the biggest gathering of designers, freelancers, creative team managers, and other creative professionals in the country. That much creative energy under one roof? It’s a recipe for revolutionary ideas and life-changing inspiration. You’ll rethink your approach to work and life, connect with like-minded allies, hear from creative visionaries, and discover new tools to make your job more satisfying and productive than ever before.”

When: June 21-25, 2012
Where: Boston, MA, USA at the Hynes Convention Center

O’Reilly Velocity Conference
“Most companies with outward-facing dynamic websites face the same challenges: pages must load quickly, infrastructure must scale efficiently, and sites and services must be reliable, without burning out the team or breaking the budget. Velocity is the best place on the planet for web ops and performance professionals like you to learn from your peers, exchange ideas with experts, and share best practices and lessons learned.”

When: June 25-27, 2012
Where: Santa Clara, CA, USA

Google I/O
“After Google I/O 2011, you consistently told us you wanted more time to attend sessions, visit our partners in the Developer Sandbox, and meet 1:1 with the engineers behind Google’s developer platforms and APIs. We recently received an unexpected opportunity to extend Google I/O to three days, so as we announced on our +Google Developers page, we are moving the conference to June 27-29, 2012.”

When: June 27-29, 2012
Where: San Francisco, CA, USA at Moscone Center West

Lone Star PHP Conference
No description available.

When: June 29-30, 2012
Where: Dallas, TX, USA

Scottish Ruby Conference
“The Scottish Ruby Conference started life as Scotland on Rails in 2008 and has grown to become Europe’s premier multi-track Ruby conference. And by premier, we mean the one with the most whisky consumed.”

When: June 29-30, 2012
Where: Edinburgh, Scotland at the Royal College of Physicians

July 2012 Events

WebVisions Barcelona
“WebVisions heads to Europe for three days of workshops, sessions and keynotes by leading web, mobile, UX, DIY and strategy experts.”

When: July 5-7, 2012
Where: Barcelona, Spain at Pompeu Fabra University

An Event Apart Austin
“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: July 9-11, 2012
Where: Austin, TX, USA at the Hilton

WDCNZ
“Tech talks for web devs. JavaScript, HTML5, CSS3. Mobile, Security, Scale. Web dev conversations.”

When: July 14, 2012
Where: Wellington, New Zealand

O’Reilly OSCON
“OSCON is where all of the pieces come together: developers, innovators, businesspeople, and investors. In the early days, this trailblazing O’Reilly event was focused on changing mainstream business thinking and practices; today OSCON is about how the close partnership between business and the open source community is building the future. That future is everywhere you look.”

When: July 16-20, 2012
Where: Portland, OR, USA

CSS Summit
“The online conference for CSS. Speakers include Chris Coyier, Lea Verou, Estelle Weyl, Jonathan Snook, and more.”

When: July 31 – August 2, 2012
Where: Online Conference

August/September 2012 Events

An Event Apart DC
“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: August 6-8, 2012
Where: Washington, DC, USA at the Westin Alexandria

UX Week
“UX Week is the premier user experience design conference. Design professionals from all over the world gather for four days of community, inspiration and skills building.”

When: August 21-24, 2012
Where: San Francisco, CA, USA

An Event Apart Chicago
“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: August 27-29, 2012
Where: Chicago, IL, USA at the Westin Chicago River North

UX Australia
“UX Australia 2012 is a 4-day user experience design conference, with two days of workshops and two days of presentations about designing great experiences for people.”

When: August 28-31, 2012
Where: Brisbane, Austalia at Sofitel Brisbane Central

UX Australia also presents Agile UX and Service Design 2012.

dConstruct
“”Our 8th year!””

When: September 7, 2012
Where: Brighton, UK at the Brighton Dome

Related Links

• Conference Roundup
  A web app inspired by the original conference roundup here on Smashing Magazine.
• Lanyrd
  The Social Conference Directory. Also check Smashing Magazine’s Profile.
• ontwik
  Lectures, Screencasts And Conferences For Real Web Developers & Designers

(il)

© Louis Lazaris for Smashing Magazine, 2012.

Other Web Design Information of Interest

• Upcoming Web Design And Development Conferences For 2012 …
• Mobile Bundle (eBook + HTML5 App) » eBooksMafia.org …
• WordPress Support Ticket – WordPress Marketing Strategies
• Upcoming Web Design And Development Conferences For 2012 …

  

Are you fascinated by dynamic data? Do you go green with envy when you see tweets pulled magically into websites? Trust me, I’ve been there.

The goal of today’s tutorial is to create a simple Web app for grabbing movie posters from TMDb. We’ll use jQuery and the user’s input to query a JSON-based API and deal with the returned data appropriately.

I hope to convince you that APIs aren’t scary and that most of the time they can be a developer’s best friend.

APIs Are The Future But, More Importantly, The Present

JSON-based APIs are a hot property on the Web right now. I cannot remember the last time I went onto a blog or portfolio without seeing the owner’s tweets or Facebook friends staring back at me. This interactivity makes the Web an exciting place. The only limit seems to be people’s imagination. As demonstrated by everything from pulled tweets to a self-aware exchange-rates API, data is currently king, and websites are swapping it freely.

Developers are allowing us to get at their data much more openly now; no longer is everything under lock and key. Websites are proud to have you access their data and, in fact, encourage it. Websites such as TMDb and LastFM allow you to build entirely separate applications based on the data they’ve spent years accumulating. This openness and receptiveness are fostering an intertwined network of users and their corresponding actions.

This article is aimed at people who are competent in HTML and CSS and have basic knowledge of jQuery techniques. We won’t delve deep into advanced JavaScript techniques, but will rather help the beginner who wants to create more complex Web tools.

APIs in a Nutshell

In basic terms, an API enables you to access a website’s data without going near its databases. It gives us a user-friendly way to read and write data to and from a website’s databases.

Sure, Great, But What Code Do I Need?

Like many developers, I bounce merrily between back-end and front-end development, and I am as happy working in PHP as in jQuery. It just depends on which hat I’m wearing that day.

Because this article is mainly about jQuery-based JSON API clients, we’ll focus on client-side code (i.e. jQuery).

When dealing with APIs, and armed with jQuery, one is more likely to encounter JSON.

Player 1: JSON

JSON (or JavaScript Object Notation) is a lightweight, easy and popular way to exchange data. jQuery is not the only tool for manipulating and interfacing with JSON; it’s just my and many others’ preferred method.

A lot of the services we use everyday have JSON-based APIs: Twitter, Facebook and Flickr all send back data in JSON format.

A JSON response from an API looks like this:

([{"score":
null,"popularity":
3,"translated":true,"adult":
false,"language":"en","original_name":"The Goonies","name":"The Goonies","alternative_name":"I Goonies",
"movie_type":"movie","id":9340,"imdb_id":"tt0089218",
"url":"http://www.themoviedb.org/movie/9340",
"votes":16,"rating":9.2,"certification":"PG","overview":"A young teenager named Mikey Walsh finds an old treasure map in his father's attic.
Hoping to save their homes from demolition, Mikey and his friends Data Wang, Chunk Cohen, and Mouth Devereaux runs off on a big quest
to find the secret stash of the pirate One-Eyed Willie.","released":"1985-06-07",
"posters":[{"image":{"type":"poster","size":"original","height":1500,"width":1000,
"url":"http://cf1.imgobject.com/posters/76b/4d406d767b9aa15bb500276b/the-goonies-original.jpg",
"id":"4d406d767b9aa15bb500276b"}}],"backdrops":[{"image":{"type":"backdrop","size":"original","height":1080,"width":1920,
"url":"http://cf1.imgobject.com/backdrops/242/4d690e167b9aa13631001242/the-goonies-original.jpg",
"id":"4d690e167b9aa13631001242"}}],"version":3174,"last_modified_at":"2011-09-12 13:19:05"}])

A bit of a mess, right? Compare this to the same JSON viewed in Google Chrome’s developer console:

The JSON response is accessible via a jQuery function, allowing us to manipulate, display and, more importantly, style it however we want.

Player 2: jQuery

Personally, I’d pick jQuery over JavaScript any day of the week. jQuery makes things a lot easier for the beginner Web developer who just wants stuff to work right off the bat. I use it every day. If I had to complete the same tasks using native Javascript, my productivity would grind right down. In my opinion, JavaScript is for people who want a deeper understanding of the scripting language and the DOM itself. But for simplicity and ease of use, jQuery is where it’s at.

In essence, jQuery is a JavaScript library, with handy functions like getJSON. This particular function will be the glue that holds our API client together.

The Goal: A jQuery-Based JSON API Client

I recently submitted to An Event Apart the Web app that we’re about to go through now. It’s called Front Row.

The idea of the Web app is to take a movie title inputted by the user, run it through TMDb’s API, and return the relevant poster. The user could then share it or save it to their computer.

The Web app is split into HTML, CSS and jQuery. We’ll focus on the jQuery, because that’s where the magic happens.

The HTML

Below is the basic structure of the Web app. Nothing special here.

<!DOCTYPE html>
<html>
<head>
   <meta name="author" content="Ben Howdle and Dan Matthew">
   <meta name="description" content="A responsive movie poster grabber">
   <title>Front Row by Ben Howdle</title>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
        <!--jQuery, linked from a CDN-->
   <script src="scripts.js"></script>
   <script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
   <header>
      <h1>Front Row</h1>
   </header>
   <section id="fetch">
      <input type="text" placeholder="Enter a movie title" id="term" />
      <button id="search">Find me a poster</button>
   </section>
   <section id="poster">
   </section>
   <footer>
      <p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>
   </footer>
</div>
</body>
</html>

All we’ve got is a bit of Twitter self-indulgence, an input field and a submission button. Done!

The CSS is a bit off topic for this article, so I’ll leave it to you to inspect the elements of interest on the live website.

The jQuery

$(document).ready(function(){

   //This is to remove the validation message if no poster image is present

   $('#term').focus(function(){
      var full = $("#poster").has("img").length ? true : false;
      if(full == false){
         $('#poster').empty();
      }
   });

I like validation messages to disappear when the user starts retyping in an input field. The script below checks whether an image is present (i.e. a movie poster), and if not, empties the container of the validation message once the input field gains focus.

//function definition

   var getPoster = function(){

        //Grab the movie title and store it in a variable

        var film = $('#term').val();

         //Check if the user has entered anything

         if(film == ''){

            //If the input field was empty, display a message

            $('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

The reason why we store the main code that retrieves the data in a function will become clear later on (mainly, it’s for DRY programming).

We then store the value of the input in a variable, so that when we use it again in the code, the jQuery doesn’t have to rescan the DOM.

Basic validation is performed on the input, checking that something has actually been entered in the field.

In an attempt at humor on my part, I display a message warning the user that they haven’t entered anything and asking them to please do so.

} else {

            //They must have entered a value, carry on with API call, first display a loading message to notify the user of activity

            $('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

If the input contains a value, we then process the user’s request. Another message is displayed, letting the user know that something is happening.

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {

               //TMDb is nice enough to return a message if nothing was found, so we can base our if statement on this information

               if (json != "Nothing found."){

                  //Display the poster and a message announcing the result

                     $('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

Here we get to the meat of our API client. We use jQuery’s getJSON function, which, by definition, loads “JSON-encoded data from the server using a GET HTTP request.”

We then use the API’s URL, suppled in this case by TMDb. As with many other APIs, you have to register your application in order to receive a key (a 30-second process). We insert the API key (23afca60ebf72f8d88cdcae2c4f31866) into the URL and pass the user’s movie title into the URL as a search parameter.

One thing to mention is that appending callback=? to the end of the URL enables us to make cross-domain JSON and AJAX calls. Don’t forget this, otherwise the data will be limited to your own domain! This method uses what’s called JSONP (or JSON with padding), which basically allows a script to fetch data from another server on a different domain. To do this, we must specify the callback above when jQuery loads the data. It replaces the ? with our custom function’s name, thereby allowing us to make cross-domain calls with ease.

In the function’s callback, we have put the word json (which holds our retrieved data), but we could have put data or message.

The next check is to see whether any data was returned. TMDb is kind enough to supply us with a message of “Nothing found” when it can’t find anything. So, we’ve based our if statement on this string’s value.

This check is API-specific. Usually if no results are found, we would expand the object to find a property named length, which would tell us how many results were returned. If this happens, the code might look something like this:

   if (json.length != 0){

As a side note, before writing even a line of code in the callback function of the JSON call, we should become familiar with the results returned in Chrome’s console or in Firebug. This would tell us exactly what to check for in if statements and, more importantly, what path to take to grab the data we want.

Let’s add console.log(json);, like so:

$.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {
         console.log(json);

This will output something like the following in the console of your favorite browser (click the image to see the full size):

The last line of this code outputs our poster. We display another message to the user saying that we’ve found a result, and then proceed to show the image.

Let’s spend a moment figuring out how we got to the poster images using the line json[0].posters[0].image.url.

The reason we use json[0] is that — since we want to display only one poster, and knowing how relevant TMDb’s results are — we can gamble on the first result. We then access the posters array like so: json[0].posters[0]. Chrome even tells us that posters is an array, so we know what we’re dealing with. Again, we access the first value of the array, having faith that it will be most relevant. It then tells us that image is an object, so we can access it like so: json[0].posters[0].image. By expanding our object further, we see that image contains a property named url. Jackpot! This contains a direct image link, which we can use in the src attribute of our image element.

} else {

   //If nothing is found, I attempt humor by displaying a Goonies poster and confirming that their search returned no results.

   $.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) {

      $('#poster').html('<h2 class="loading">We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');

   });
}

Having determined that the API has no results for the user, we could display an error message. But this being a movie-related Web app, let’s give the user a preset poster of The Goonies and let them know we couldn’t find anything. We’ll use the exact same src attribute for the image that we used before, this time with goonies hardcoded into the API call’s URL.

});

          }

        return false;
   }

   //Because we've wrapped the JSON code in a function, we can call it on mouse click or on a hit of the Return button while in the input field

   $('#search').click(getPoster);

   $('#term').keyup(function(event){

       if(event.keyCode == 13){

           getPoster();

       }

   });

});

It is now clear why we wrapped our JSON call in a function: doing so allows us to run the function when the user hits the submission button or presses Enter while in the input field.

The Full Code

The HTML

<!DOCTYPE html>
<html>
<head>
   <meta name="author" content="Ben Howdle and Dan Matthew">
   <meta name="description" content="A responsive movie poster grabber">
   <title>Front Row by Ben Howdle</title>
   <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
   <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.2.min.js"></script>
        <!--jQuery, linked from a CDN-->
   <script src="scripts.js"></script>
   <script type="text/javascript" src="http://use.typekit.com/oya4cmx.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
   <link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
   <header>
      <h1>Front Row</h1>
   </header>
   <section id="fetch">
      <input type="text" placeholder="Enter a movie title" id="term" />
      <button id="search">Find me a poster</button>
   </section>
   <section id="poster">
   </section>
   <footer>
      <p>Created by <a href="http://twostepmedia.co.uk">Ben Howdle</a></p>
   </footer>
</div>
</body>
</html>

The jQuery

$(document).ready(function(){

   $('#term').focus(function(){
      var full = $("#poster").has("img").length ? true : false;
      if(full == false){
         $('#poster').empty();
      }
   });

   var getPoster = function(){

        var film = $('#term').val();

         if(film == ''){

            $('#poster').html("<h2 class='loading'>Ha! We haven't forgotten to validate the form! Please enter something.</h2>");

         } else {

            $('#poster').html("<h2 class='loading'>Your poster is on its way!</h2>");

            $.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/" + film + "?callback=?", function(json) {
               if (json != "Nothing found."){
                     $('#poster').html('<h2 class="loading">Well, gee whiz! We found you a poster, skip!</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');
                  } else {
                     $.getJSON("http://api.themoviedb.org/2.1/Movie.search/en/json/
23afca60ebf72f8d88cdcae2c4f31866/goonies?callback=?", function(json) {
                        console.log(json);
                        $('#poster').html('<h2 class="loading">We're afraid nothing was found for that search. Perhaps you were looking for The Goonies?</h2><img id="thePoster" src=' + json[0].posters[0].image.url + ' />');
                     });
                  }
             });

          }

        return false;
   }

   $('#search').click(getPoster);
   $('#term').keyup(function(event){
       if(event.keyCode == 13){
           getPoster();
       }
   });

});

Conclusion

That’s it: a handy method of reading data from a remote API with jQuery, and manipulating the JSON output to fit our needs.

Every API is different, and every one returns different results in a different structure — it’s all part of the fun! So, get used to using console.log(), and familiarize yourself with the results set before trying to access it with code or using it in your application.

Start with something practical and entertaining: build a check-in checker with Gowalla’s API; visualize trends with Twitter’s API; or make a face-recognition app with Face.com’s API.

APIs are fun. By definition, the data they bring to the page is dynamic, not static.

If you have any problems with the API we’ve used here or you have any success stories with other APIs, please do leave a comment.

Further Resources

• “How to Use JSON APIs With jQuery,” Joel Sutherland, HiFi
• “How to Use jQuery With a JSON Flickr Feed to Display Photos,” Richard Shepherd
• “Bing Instant Search With jQuery and Ajax,” Srinivas Tamada, 9Lessons

(al)

© Ben Howdle for Smashing Magazine, 2012.

Other Web Design Information of Interest

• Upcoming Web Design And Development Conferences For 2012 …
• Mobile Bundle (eBook + HTML5 App) » eBooksMafia.org …
• WordPress Support Ticket – WordPress Marketing Strategies
• Upcoming Web Design And Development Conferences For 2012 …

  

This special is the first in our series of Smashing Specials — extended articles and studies dedicated to a specific topic. The special features current WordPress theme trends for 2012, covering past trends, new developments in theme design and trends in the theme development.

2011 was a great year for WordPress, with some excellent new updates that saw the introduction of a drag-and-drop uploader, distraction-free writing, the HTML5 Twenty Eleven theme, and movement towards a fully responsive dashboard. As well as changes to WordPress core, theme development continued to evolve, as whispers of responsive design spread like wildfire across the WordPress community.

(image credit: Bowe Frankema)

Over the next year, some recent developments will become standards. Others, now just remote flickerings in the eyes of a few theme designers and developers, will start to take hold. Now that 2012 has properly started, let’s look at some trends that have emerged and are emerging.

Due to the length of this special, it was split into three parts:

• Part 1: Past Predictions
• Part 2: WordPress Design Trends for 2012
• Part 3: WordPress Development Trends for 2012

Past Predictions

When thinking about future trends, it’s fun to look back and see what people predicted before to see whether any of their predictions came to fruition. Thankfully, with the power of Internet, combined with Ian Stewart’s “Future of WordPress Themes” posts (as well as WPCandy), doing this is very easy.

So, just what were people predicting when WordPress was growing up?

The Demise of the WordPress Premium Theme Market

At the start of 2008, when creating a premium WordPress theme was frowned upon, Ian Stewart wrote this in a post:

It’s prediction time: The premium WordPress theme phenomenon has approximately one year left before collapsing entirely, leaving a rather large hole between completely free WordPress themes and custom themes $1500 and up. If you’ve got a “premium” WordPress theme waiting in the wings, I advise releasing it sooner rather than later. As in, now.

We don’t really need to add a comment to that one.

“Cluttered and Pimped Out”

Here’s what Robert Ellis said about the future of WordPress themes in 2008:

The vast majority of themes will still be garish mutations of Kubrick, but more cluttered, more pimped out with widgets, scripts and effects. There will still be premium themes that push the envelope in terms of built-in options and quality, but the market will become saturated, setting off even more accusations of copying (as we’ve seen with magazine themes; though personally, I think most of them look like they were “inspired” by CNN).

This was more on the money, and we have seen amateur designers cram in a lot of different scripts and effects. This has diminished over time. Hopefully, our direction now is more Zen.

Early Niche Predictions

Justin Tadlock had this to say in 2008:

I do hear some talk of moving into designs for specific niches, so theme developers could cater to particular users. I think this is a great idea, which could be a nice trend as we’ve seen with magazine-styled themes. Users want something that works for them before unwrapping the packaging.

Justin was definitely prescient then, as niche themes became more popular in 2011. And we’ll see much more of them in 2012.

Everyone Loved Theme Options

In 2009, themes that allowed you to customize the layout and design started to appear. Here’s what Dougal Campbell had to say:

The main change I see happening here is with themes which provide some sort of customizing feature on the back end which lets you choose options like: header graphics; one, two or three sidebars, along with their positions; color schemes; They will also be pre-bundled with several plugins which allow you to pull in your content from other sources such as Twitter, Facebook, Flickr, etc. These kinds of themes already exist, but I think we’ll see the ease of customization rise to a new level.

By 2012, this trend towards adding options and customizations reached its zenith, and it will hopefully decline over the coming year.

Want to have fun reading past WordPress theme predictions. Check them out here:

• “The Future of WordPress Themes in 2008,” Theme Shaper
• “The Future of WordPress Themes in 2009,” Theme Shaper
• “The Future of WordPress Themes in 2011,” WPCandy

A Trip Down Memory Lane

Let’s look at how theme design has changed over the past few years.

Free Themes: The WordPress Repository

Below are the most popular themes downloaded from the WordPress theme directory since 2009 (thanks to Otto for getting this information). You can see how WordPress themes have moved away from looking like blogs to a more professional appearance.

2009

iNove was the most popular theme in 2009, followed by Atahualpa and then Pixeled.

2010

Mystique was the most popular theme in 2010, followed by Atahualpa and then TwentyTen.

2011

Delicate was the most popular theme in 2011, followed by TwentyEleven and then Platform.

The Most Popular Themes in the Forest

To see how things have fared on the commercial theme front, we scoured the archive of ThemeForest. Below are the best-selling themes from the last quarter of each year.

Here were the top themes:

2008

Sharp was the top theme for the end of 2008.

2009

Twicet topped downloads for the last quarter of 2009.

2010

Striking was the most popular theme in the last quarter of 2010.

2011

The multi-optioned uDesign was the most downloaded theme in the last quarter of 2011.

What Happened In 2011?

Before getting to our predictions for what will take hold in WordPress themes this year, let’s quickly look at what has happened over the past year:

• Theme frameworks
  Theme frameworks were everywhere in 2011. As someone who blogs regularly about WordPress, I found myself announcing the launch of three different frameworks in one week. WordPress staples such as Thematic, Thesis and Genesis continued to grow in popularity, but more and more frameworks appeared on the scene, including the likes of Wonderflux, Bones and Roots. Perhaps in 2011 we’ll see fewer new frameworks and more themes for existing ones.
• Child themes
  Child themes took off in a big way in 2011. Once people grasped the concept that creating a child theme and making edits to it was better than hacking away at the parent, they started to have fun. Will we see child themes in the WordPress repository in 2012?
• The “CMS” theme
  At the start of 2011, everyone seemed to be calling their theme a “CMS” theme, implying that their awesome theme gave WordPress the characteristics of a CMS, as opposed to WordPress itself being a CMS. Thankfully, that trend petered out towards the end of the year, perhaps as it became less imperative to convince people that WordPress was a CMS.
• Sliders everywhere
  Every theme seemed to have a slider on the home page. This might have been due to the gorgeousness of Nivo and other sliders that make it easy for anyone to include a jQuery slider in their theme. Hopefully, designers will be more inventive with their jQuery this year.
• Tumblr themes
  All of a sudden, creating a Tumblog became easy. Designers first achieved this with the Woo Tumblog plugin, but the introduction of WordPress post formats made it possible to create a Tumblog with WordPress core functionality.
• Custom post type mania
  As predicted by Brad Williams in WPCandy’s predictions for 2011, we saw loads of themes that made use of custom post types, including ones for job rollers, e-commerce websites, real estate websites, review websites and so on and so on. Not to mention a plethora of WordPress custom post type plugins.

Now we’ve got the past out of the way, let’s look at the future!

Smashing Special: A Three-Part Series

Due to the length of the series, it was split into three parts:

• Part 1: Past Predictions
• Part 2: WordPress Design Trends for 2012
• Part 3: WordPress Development Trends for 2012

(al)

© Siobhan McKeown for Smashing Magazine, 2012.

Other Web Design Information of Interest

• 20 Free Peeling Paint Textures For Your Designs – Feedgrids
• 7 Web Design Resources You Might Have Missed Today
• 2 Indispensable Elements of Excellent Mobile Responsive Design
• Profile: Brian Hoff | Interview | .net magazine

  

Before the very first page of a book has been read, you’ve already analyzed it in countless ways without even noticing. The paper stock, the thickness of the binding, the aroma, the color of the type and even the texture of the cover; the very character of the book is being dissected by the hand and eye at every moment.

In this brief second there is a dialogue between the reader and the object. This conversation is subtle and complex, but for most people it is entirely subconscious. This is because we rarely think about these things  —  we feel them instead.

Before this dialogue can take place however, the ideas of the author must be given shape. By examining the relationship between the form of the book and the information contained within, we can begin to understand how these visual and sensory components work, but it will also teach us how to create long-lasting emotional bonds that we’ll want to keep forever.

Lost In Translation

I recently read The Greatest Show on Earth by Richard Dawkins. His book explores the wonder of evolution and scientific discovery in fabulous detail and also goes into explicit detail as to how these ideas better our society and affect our perspective of morality and philosophy. But its uncomfortable size and shape as well as its flimsy typesetting gives the book characteristics of apathy and exhaustion.

The object reveals much about the world in which it was made: a heartless, ignorant and illiterate world, filled with people that viewed the author and the reader as a stepping stone to the top of the New York Times bestseller list.

And yet, these aesthetic and ergonomic failures are more than skin deep as they interfere with the relationship between writer and reader. Dawkins’ evidence seems less empirical, less established and somehow less wonderful, as the book miserably fails to explain the poetry of its content.

Notice how jarring and uncomfortable it is as these glossy, brightly colored pages sit next to ordinary blocks of text.

Dawkins’ argument is damaged by these cluttered, noisy and mistreated illustrative pages. Whilst he describes the wonderful and unique beauty of life, his ideas feel ordinarily ugly. The images to the left of the spread, their jarring and chaotic arrangement, the tension built by their seemingly random position, fail to reflect the ideas of wonder, beauty and order that the writer so eloquently describes.

The ideas contained within have lasted centuries, yet this book has barely lasted a single reading.

Walk into any large, commercial bookstore and you’ll see thousands of books treated in a similar way  —  each with layer upon layer of unnecessary information that conflicts with the intent of the author. Something crucial is destroyed in this journey as the object disrupts vital information on transit.

To understand why these books are not working, we must first examine how information passes from writer to reader.

The Journey

For centuries, the book was a tool that existed for a single purpose; to transfer information from one mind to another. Although much has changed, there will always be a problem with this form of communication, and in our reliance on systems to safely relay data.

In bookmaking these systems are traditionally enforced by a publisher, as they have complete control over the quality of the binding, the typographic details, the use of color and the overall physical identity of the idea. All of these visual and sensory elements combine to produce the system by which the idea is given form. However, as in the case of the majority of books out there, this system poisons and infects it.

These systems comprise of an immense number of components, such as the combination of typefaces, the paper density, the use of color, the printing method, the measure, the width of margins, and other typographic details. But the problem with these systems is that they are incapable of reflecting the ideas of the writer with the form of the book. They act as a barrier that the information must travel through to be able to find the reader.

Cheap paper, bad typesetting and an awkward binding cause confusion and disrespect to the author’s ideas. But if we understand how these elements work together we can make systems that provide useful signs to the reader, and also manage to safely transport the ideas of the writer at the same time.

Emotional Information

When a visual component accurately represents the ideas of the writer, it becomes a source of emotional information. This aids in the transferral of ideas, and promotes and persuades the reader that the content is worthy of their precious time.

It’s more than just a pretty cover, visual pun or marketing gimmick that creates emotional information. It’s everything from the size of the type to the texture of the page, because these components not only help to explain the content of the book but also continue to engage and stimulate the reader throughout.

The Vintage Classics edition of As I Lay Dying is almost lifeless, whereas Trevor Baum’s redesign provides the reader with an emotional experience as they must carry this dying woman in their hands, much like the characters in the novel.

A system can bind the ideas of the writer to the form of the book with these carefully chosen elements, but it’s when the form and the idea become inseparable that unique relationships begin to emerge.

Take for example Do You Know What It Means to Miss New Orleans? that was published by the Chin Music Press back in 2008. The book is focused primarily on the aftermath of Hurricane Katrina and the impact it had on the music, economy and spirit of the city.

The physical elements of the book act as a rhetorical device, directing the reader with subtlety and charm.

Nineteenth century engravings flourish beside carefully set blocks of text and each page has been lavishly printed on high quality paper. These components, amongst many others, combine to create a distinct sense of pace that sets itself apart from legions of other books. The idea of the book and the form of the book become one  —  they merge into an emotional cornucopia that is impossible to ignore.

The texture of the page, the subtle typographic details and the distinctive illustrations implies a specific tone and atmosphere.

This is emotional information and it coerces the reader to take notice of the subject and to read each page with as much attention and focus as those that designed and published it.

Another book that provides the reader with emotional information is the Book of war, mortification and love. The author, Ruud Linssen, investigates why people suffer voluntarily whether it be for love, war, religion or art. The blend of fiction and non-fiction, and the haunting accounts of depression and loneliness are only reinforced by the physical elements of the object.

The text also acts as a specimen for the typeface Fakir. This dark blackletter eloquently explains the subject and forewarns the reader of the book’s ghostly nature. It is even printed with the author’s own blood, the ink on the cover blends into the background as if the words are shaking with anxiety.

Texture, ink, type: three dimensions of emotional data that captures the spirit of the writer’s intent.

It’s these extra pieces of information, these tangible components of a unique sensory and visual language that must be pieced together in order to accurately reflect the author’s ideas. It is the format, the texture, and the combination of the printed word and the weight of the object that ignites this special relationship, and aids in the transfer of information between writer and reader. Ideally, these extra pieces of information provide the reader with the unspoken history, idea and argument of the book. Without them, the conversation between the book and the reader would be less interactive and engaging.

Of course, not every book can feel like Do You Know What It Means to Miss New Orleans?, or Book of war, mortification and love – but then why should they? Each book should be treated as a unique problem requiring a distinct and innovative solution.

Emotionless Systems

This is the problem with the current state of ebooks. As e-readers split content numerically or into ‘real’ turning pages they impersonate the form of the book, whilst disregarding the unique nature of the writer’s ideas. This gives us books that all feel and look the same.

The Picture of Dorian Gray by Oscar Wilde and Shit My Dad Says by Justin Halpern look and feel the same, but are different in every meaningful way.

The system disregards the writer almost entirely; all ideas have the same graphic character, tone and appearance. But just as unique and brilliant writers follow a certain pattern and rhythm within their work, so too must the visual and sensory elements of a system. This indicates to the reader that the content is one of a kind and worthy of their precious time, but these systems are also capable of creating emotional experiences that can entertain, persuade, teach and inspire.

So the problems on screen are very similar to that of the problems on paper: the system is acting as a barrier into the author’s ideas.

Why Should We Design Emotional Systems?

In a perfect world we would share ideas through a semipermeable membrane; we would absorb ideas via osmosis and send them around the world as casually as we breathe. Sadly, we cannot do this. Instead, we have systems set in place to communicate. The problem is that these systems are failing us. They are hurting us. They are making beautiful things boring and are getting in between us and the ideas that we need.

This is not about nostalgia or the glorification of a particular medium. This is about information, and how best to communicate the content as a visual and sensory device. These systems have an obligation to not only safely and quickly transfer data, but also to make us care.

Of course, this is subjective and very little of this article goes into the specifics as to how to create emotional experiences, but this is because each idea requires a different visual and sensory tone. Some books require explosive typography and thick paper to feel revolutionary, others require a softer and more delicate tone to feel calm or charming.

The form of the book is merely a tool, a sometimes wonderfully beautiful and effective tool, but a tool nonetheless. It is the ideas within that give us wonder, and these tools must be built for their purpose if they are not to be thrown away, lost or forgotten.

We can embed within these systems a lasting piece of our culture if only we are willing to change the way we think. So instead of us asking the question, “How do these things look?” perhaps we should rather be asking, “How do these things feel?”

Further Reading

• The Crystal Goblet
  The classic essay by Beatrice Warde on the art of printing, still applicable to book and Web design today.
• Designing for Emotion
  The lead UX designer at MailChimp, Aaron Walter, discusses how emotion can be used in interfaces.
• On Book Design
  Richard Hendel examines how and why books are designed in the way that they are.

(il)

© Robin Rendle for Smashing Magazine, 2012.

Other Web Design Information of Interest

• 20 Free Peeling Paint Textures For Your Designs – Feedgrids
• 7 Web Design Resources You Might Have Missed Today
• 2 Indispensable Elements of Excellent Mobile Responsive Design
• Profile: Brian Hoff | Interview | .net magazine