The US presidential race is heading into full swing, which means we’ll soon see the candidates intensely debate the country’s hot-button issues. While the candidates are busy battling it out, the Web design world is entrenched in its own debate about how to address the mobile Web: creating separate mobile websites versus creating responsive websites.

It just so happens that the two US presidential candidates have chosen different mobile strategies for their official websites. In the red corner is Republican candidate Mitt Romney’s dedicated mobile website, and in the blue corner is incumbent Barack Obama’s responsive website.

We’re going to see how well their mobile Web experiences stack up. But before we do, we need to ask a few questions.

Why Bother With Mobile?

Why are the candidates attempting to create mobile-optimized Web experiences? Well, the US population is sitting at around 311 million. Of those 311 million people, about half of US adults own a smartphone. On top of that, for a whopping 28% of Americans, a mobile device is their primary way of accessing the Web. So, for a candidate looking to reach potential voters, mobile provides a tremendous opportunity to connect with their constituents.

What’s more is that people are arriving to the mobile Web through more diverse channels than ever before. In addition to direct and referral traffic, candidates are using social networks, email campaigns, SMS campaigns, search and more. Because these activities are increasingly happening on mobile, creating Web experiences optimized for mobile makes even more sense for the candidates.

These are just a few channels that drive people to the Web on mobile devices.

The candidates see mobile as a big opportunity to turn visitors into voters. We can see the candidates’ incentive, but now we must ask another important “Why” question.

Why Would Anyone Visit A Candidate’s Website?

Who is visiting these candidates’ websites? What are they looking for? Why might they want on a mobile device?

Visitors are generally either looking for information on the candidates or looking to take action.

The Information-Oriented Visitor

The information-oriented user might be looking for basic information about the candidate, such as his biography, background or stance on issues. They might also be interested in regularly updated information such as news, locale-specific blog posts and information like myth busting (where the candidate tries to dispel nasty rumors circulating in the media). The official websites give the candidates a chance to deliver information straight from the horse’s mouth, free from news media bias and inaccuracies that arise from crowd-sourced information.

The Action-Oriented Visitor

The action-oriented user is looking to support the candidate in some way, shape or form. Both websites prominently feature calls to action asking visitors to donate money to the campaign and to sign up for their email newsletter. Action-oriented users might also want to connect with the candidates on social media channels, volunteer their time at an event, make calls on the candidate’s behalf or shop for merchandise.

The candidates have accounted for these use cases in their Web experiences. Let’s look at how they execute on mobile.

Criteria For Judging: Layon’s Theory of Mobile Motivation

The effectiveness of Romney and Obama’s positions on the economy, foreign policy, social issues and other important subjects depends on certain criteria. Likewise, we need to establish a set of criteria to determine the effectiveness of the candidates’ mobile Web experiences.

Mobile Web designer Kristofer Layon has a clever way of looking at the hierarchy of mobile needs. His “theory of mobile motivation” is based on Maslow’s hierarchy of needs, a psychological theory that identifies the various levels of human needs.

Maslow’s hierarchy of needs.

Kristofer Layon has applied that theory to the needs of mobile Web users, where primary access and navigation are the most essential aspects of an experience, and at the top of the pyramid are HTML5 enhancements (such as offline storage and a boatload of other features).

Layon’s hierarchy of mobile needs.

Let’s apply a simplified version of Kristofer’s hierarchy to evaluate how well each candidate’s website holds up.

My simplified version of Layon’s hierarchy of mobile needs.

Access

First and foremost, users need to be able to access an experience. The most beautiful design in the world will accomplish nothing if people can’t view it. Historically, the mobile Web has been viewed as the Web Lite™, whose users get served only a subset of content and functionality. However, a whopping 28% of US residents use a mobile device as their primary way to access the Web. With more people relying on their mobile devices to access the Web, achieving content parity and giving users access to a full experience regardless of their device or configuration are more important than ever. Let’s see how the presidential candidates’ mobile Web experiences hold up.

Barack Obama

Barack Obama’s “mobile” website has no “full site” link because it shares the same code base as the “desktop” website. Content on a responsive website lives under one roof, which gives the website a better chance of achieving content parity. And while responsive designers can (and do) hide content from small-screen users, responsive design affords less opportunity to fork the content and create disparate experiences, which would deprive certain users of valuable information and features.

Mitt Romney

Mitt Romney’s website uses device detection to route mobile users to a separate dedicated website. Creating this separate experience allows the designers to tailor the mobile Web experience, but a separate design and subdomain also opens the door to some serious problems.

The main problem with Mitt Romney’s mobile website is that only a fraction of the full website’s features are included.

Only some of the features from the full website have made it onto the mobile-specific website.

It’s a myth that mobile users don’t want access to all of the information and functionality available to desktop users. The absence of key content on Romney’s mobile website leaves a lot of serious questions unanswered for potential supporters, such as “Who is this guy, anyway?,” “Where does he stand on issues?,” “What’s his plan for the economy?,” “What can he do for my state?” and “Where can I shop?”

Another common problem with separate mobile websites is URL management. Because desktop and mobile content live at separate URLs, device detection is required to route users to the appropriate site. Unfortunately, many websites don’t go deep enough in their URL redirection, so desktop users will get sent to mobile content and vice versa. This becomes apparent when mobile content gets shared by mobile users on social networks and then gets accessed by desktop users:

Issues arise when a mobile URL is accessed from a desktop.

As we can see, having Web content all under the same roof and URL definitely makes it easier to give visitors access to the content they’re looking for, regardless of the device they happen to be using.

Interact

Basic access to a website is essential, but what happens once the visitor is on the website? They need to be able to interact with the content and get around the website. Let’s start with one of the most common and important interactions: navigation.

Navigation

Navigation, especially on mobile, should be like a good friend: there when you need it, but considerate enough to give you your space. When navigation takes up a ton of real estate, it gets in the way and becomes that annoying friend who won’t leave you alone. When it’s inaccessible, hidden or just hard to reach, it becomes that friend who’s conveniently absent when you’re looking for help to move to your new apartment.

Barack Obama

Obama’s website serves navigation at the top for large screens and then transforms it into a left fly-out menu for screens narrower than 1024 pixels.

Obama’s website has Facebook-esque left fly-out navigation for small screen resolutions. Among popular responsive techniques, this one is relatively complex and opens the door to problems. As Stephanie Rieger points out in her post “A Plea for Progressive Enhancement,” Obama’s navigation fails on a whole load of mobile devices: “And the menu failed. Never even opened. Suddenly, the site was without navigation… at all.”

These situations, regardless of approach, can be avoided using proper progressive-enhancement techniques, but it’s a good example of the challenges that arise when creating adaptive experiences.

Mitt Romney

Romney’s mobile website has a dashboard home page and “Back” and “Home” links for inner pages. The full website has top navigation.

Romney’s relatively simple mobile navigation contrasts starkly with Obama’s navigation. It sits as a dashboard on the home page, and all inner pages simply include a “Back” button and a logo that links back to the home page.

This navigation technique certainly solves the problem of limited real estate and avoids complexity, but it creates other issues. Requiring a full page refresh just to jump to another section of the website isn’t very efficient. A logo as a button doesn’t exactly scream “Click me for navigation!” And the “Back” button does nothing if the visitor arrives at the website on a page other than the home page. It’s also worth noting that mobile browsers already have their own back buttons, so duplicating that functionality in the header could be regarded as wasted space.

Scrolling

Scrolling is an interesting interaction on mobile devices. The “fold” as a set pixel value is a myth, but users still need to be able to access the core content as quickly as possible.

Mitt Romney

Romney’s mobile website has an acceptable page length. Not much chrome or clutter before you get to the core content, and for the most part the user doesn’t have to scroll much to find what they need.

Barack Obama

Obama’s pages contain a massive amount of content, often introducing entirely new sections far down in the flow. The result is extremely long pages that have serious problems.

Scrolling through disparate content types is not a good experience. How do users figure out that other content exists? Finding what they’re looking for becomes a scavenger hunt. While they might be all right with sifting through one or two content types (for example, a blog’s main article and subsequent sidebar), a lot of disparate types makes the content unfindable and the page impractical.

While content parity is essential for mobile users, that doesn’t mean websites have to be one size fits all. Techniques like lazy loading and conditional loading enable Web creators to provide access to full content without having to stuff it all on the page at the same time. And while those techniques can be extremely effective, there’s no substitute for subtracting supplementary content everywhere to focus on core content.

In addition to the annoyance caused by having to scroll through so much content, these massively long pages have another downside: terrible performance.

Perform

Performance has gotten the short end of the stick. Web creators have assumed too much about the user’s context (“Of course, the user has a fast connection!” “Of course, their machine is powerful!”). As a result of these convenient assumptions, the average page now weighs a whopping 1 MB.

One MB might not seem like a big deal until we look at the mobile user’s expectations. 71% of mobile users expect mobile websites to load as fast, if not faster, than desktop websites, and 74% of mobile visitors will abandon a website if it takes more than 5 seconds to load. In other words, you have 5 seconds to get someone’s attention. Make it count.

To evaluate how well the candidates’ websites perform, we’ll use the excellent Blaze.io mobile performance test to capture performance results on real devices.

Mitt Romney

A typical page on Romney’s mobile website is about 687 KB and, as a result, takes about 8.75 seconds to load. While that’s over the 5-second mark, the pages still weigh less than the average size.

Barack Obama

A typical page on Obama’s responsive website is a massive 4.2 MB, resulting in a 25-second loading time.

Despite the fact that only the most patient of visitors would wait 25 seconds for a page to load, such a large payload creates real accessibility problems. Some devices (such as my cousin’s company-issued BlackBerry) won’t even render the page because it’s too large.

While some of this is RIM’s or my cousin’s employer’s doing, it’s a legitimate constraint that we need to be mindful of.

Unfortunately, poor performance is prevalent among the current crop of responsive designs in the wild. Guy Podjarny, chief product architect at Akamai and CTO of Blaze.io, discovered that only 3% of small-screen versions of responsive websites are significantly lighter than their large-screen counterparts. This is all the more reason to focus on performance as a key component of adaptive Web design.

Enhance

We’ve talked about content parity and the importance of providing access to information and functionality regardless of device or configuration. But that doesn’t mean we have to settle on serving a one-size-fits-all experience. Many mobile devices and browsers can do things that desktops cannot. Making the most of these wonderful features will take the mobile experience to the next level.

Mobile Communication

Obama’s designers have implemented one huge enhancement: the ability to make calls on the candidate’s behalf directly from a phone. We tend to forget that mobile phones are, at root, voice-based communication devices and that mobile browsers can initiate a call when the user clicks a tel link. By exploiting this enhancement, Obama is able to mobilize his mobile users into action, which could have a big impact on the campaign.

Obama’s call functionality enables users to make calls on the candidate’s behalf, right from their phones.

Besides enabling phone calls to be initiated from the browser, there are many other opportunities for mobile enhancement. Here are just a few ways that both websites could enhance the experience and make the most of the mobile Web.

Simple Form Enhancements

The great thing about form enhancements is that they require barely any effort. One enhancement for many mobile browsers is to specify an HTML5 input type to pull up the appropriate virtual keyboard for the user. While this enhancement isn’t particularly mind-blowing, anything that allows the user to complete their task more quickly certainly helps and could lead to more conversions.

Setting these forms to input type=number would pull up the appropriate virtual keyboard, thus saving the user an extra step.

Geolocation

Detecting location is an extremely powerful way to provide users with contextually relevant information. Imagine dynamically displaying blog posts, news and upcoming events relevant to the user’s location. Obama’s website smartly allows users to choose their state; perhaps they could take it further and add geolocation as a way to identify it. Geolocation can also save steps when filling out forms, and it creates opportunities for innovative new features.

Touch Events

The beauty of touchscreens is that they give users a way to interact directly with content and can add a layer of fun to the experience. These websites could leverage touch events to allow users to swipe through photos in a gallery or to thumb through a quick overview of the candidates’ stances on important issues.

Many More

This is just a small sampling of enhancements. Support for a ton of features can be detected, and a ton of use cases emerge from the plethora of devices that access the Web. Ask questions. “Can I offer features that are useful to users on the go?” “How might I use offline storage to improve the experience?” “How can I take advantage of touch events?” Lay a solid foundation, and look for opportunities to enhance.

So, Who Wins?

If there’s one lesson to learn from analyzing these websites and techniques, it’s that this stuff is genuinely hard. A lot goes into making a great mobile Web experience, and I’m personally thrilled that the candidates have taken the important first steps toward making their websites mobile-friendly. Viewing the mobile web as a wonderful journey and not as a destination is absolutely essential. As we step into the deep end of multi-device Web design, we must strive to continually improve our websites and services in order to better serve our users — wherever they may be.

While the design of a candidate’s website might not determine the outcome of the presidential election, it will certainly influence how the world perceives the candidate. And for a Web-savvy voter like myself, a website’s design might just sway my vote. I know who I’m voting for in November!

(al)

© Brad Frost for Smashing Magazine, 2012.

  

First, let’s set a few things straight: becoming a top WordPress developer is hard work — very hard work. It’s going to take a lot of time, energy and determination. If you’re looking for an easy checklist or some “fast pass” to the top, you’re going to waste your time. Being one of the best is hard, and statistically speaking, the odds are stacked against you.

By the way, installing WordPress, reading a few tutorials and customizing a few themes does not make someone a top developer. They may call themselves an “Expert”, and that’s fine. They may know more than the average person. But a top developer moves far beyond the basics, and pushes the very boundaries of what is possible. They innovate, contribute to the community, and demonstrate mastery in the work they do. So I want you to be more than an “expert”, I want you to be one of the best.

Why Be A Top Developer

Why not? If you work with WordPress (or plan to start), why just settle for being average? There’s too much “average” in life already. “Normal” is highly overrated. There are other reasons, though. For instance, the top WordPress developers:

• Make the most money
  Demand for WordPress development is high and clients are willing to pay more for developers who are the best in their field.
• Get the best clients
  When you are at the top, you have the freedom to say “No” to the projects you don’t want, and “Yes” to the projects you do.
• Have the most influence
  Being at the top means you have influence (and responsibility) and the capability to shape the future of WordPress as well as the ecosystem that is built around it.

One Hour of Reading a Day

If you’re going to make it to the top, then you need to spend at least one hour each workday focused on reading and learning more about WordPress — outside of any development work. There are no shortcuts, and no other ways around it. Learning and mastering WordPress is going to take time. If you watch TV, cut it out — more than 90% of it isn’t good for you anyway. If you’re a gamer, sell your games or throw them away. Reaching the top takes commitment and sacrifice and the best place to start is with the things in life that aren’t doing you any good anyway.

Start with one dedicated, distraction-free hour of reading for each workday. Shut off instant messages, put your phone on silent, and read. Take notes on what you learn along the way. You’ll find the time goes by faster than you would have expected. Keep at it, day after day, week after week, and month after month. And as you start to see success, put in more time for reading.

Alternatively, consider a three-hour block, two to three times a week. The key is to make a commitment to learning and honoring that commitment by setting aside the necessary time to see it through.

Enrolling in WordPress University

There’s never been a better time to learn and master WordPress than right now. There are so many excellent resources available to those willing to put the time and effort into using them. Before you can start gaining experience, you need some education. Sure, you could just jump in and start breaking things. But I suggest you wait, and cultivate the self-discipline it takes to learn — there will be plenty of time to break things later. As you start your education, it’s important to begin with the social aspect of your experience.

Hang Out with the Right Crowd

We become like those we associate with. If you want to be one of the top WordPress developers, start spending time with those at the top. Read their blogs, follow them on Twitter, give feedback on their thoughts and ideas, go to WordCamps to meet them and listen to their talks. Read the interviews on CodePoet. Follow their examples, ask them for advice, follow their advice, and report back.

Here is a small list of WordPress developers to get you started:

• Andrew Nacin (@nacin)
• Alex King (@alexkingorg)
• Bill Erickson (@billerickson)
• Carl Hancock (@carlhancock)
• Corey Miller (@coreymiller303)
• Mark Jaquith (@markjaquith)
• Matt Mullenweg (@photomatt)
• Mike Schinkel (@mikeschinkel)
• Nathan Rice (@nathanrice)
• Peter Westwood (@westi)
• Jeff Starr (@perishable)
• Joost de Valk (@yoast)
• Justin Tadlock (@justintadlock)
• Silviu-Cristian Burc (@scribu)

Read the Material

The amount of reading material available on WordPress is overwhelming. There are thousands of people talking about WordPress and it is becoming increasingly difficult to filter through the noise. There are authorities, however, and when you commit to mastering WordPress, then you should start your journey by finding the highest quality resources and concentrating your efforts just on those.

Here are a few resources to get you started:

• WordPress Codex
  The WordPress codex is a community-edited repository for all things WordPress. Start with the very basics and focus on mastering the WordPress interface itself from an end-user’s perspective. Learn the WordPress semantics. Read about theme design and plugin development.
• Books on WordPress
  There are more than a dozen books available on WordPress. Start off with the titles of greatest interest to you and then work towards the others. Think “WordPress For Dummies” is too basic? Maybe not. Your clients may read it and it’s important to have their perspectives. When you’re finished, thank the author and write a review.
• Blogs on WordPress
  Find and follow the best blogs about WordPress. Subscribe to their feeds. Read them regularly and give feedback to the authors. A few of my favorite blogs are WordPress on Smashing Magazine, WP Tuts+, and WP Candy.

Do the Homework

Put what you’re learning into practice. Start with your own WordPress websites. After you read a tutorial, follow it on your own. Experiment. Break things down. Track what you’ve learned and record your insights and breakthroughs for future reference. Spend as much time as you can taking what you’ve learned and applying it to your own projects and experiments.

Here are a few areas to explore:

• WordPress APIs
  Start by familiarizing yourself with the list of available APIs on the Codex. Read through the information available for each API and experiment with each (some will be easier than others). Search for tutorials for each of the APIs to give you some real-world perspective and experience on what can be done with each.
• Ajax in WordPress
  Even if you’re already familiar with Ajax, learn about the use of Ajax in WordPress. Then, move on to tackle using Ajax in plugin development. Search for tutorials to develop your experience further.
• WordPress PHP Classes
  Familiarize yourself with the list of classes created by WordPress developers. Experiment with them on your own projects and master them. In particular, pay special attention to WP_Query, WP_Theme, and wpdb. Search for tutorials on each of the classes, as well as non-core, community contributed classes like WPAlchemy.

Gaining Experience With WordPress

With your education well underway, it’s time to gain real-world experience — and lots of it. Your path to the top is lined with trials and difficulties and gaining experience outside the safe playgrounds of your own projects is a critical step in the right direction. One of the best ways to get started is doing work for others.

Take On Clients

Working for clients, paid or free, is one of the best ways to gain experience. Clients introduce challenges you would never have to deal with working on your own. If you’re just getting started, learn how to get your first client. While the market focus (large clients vs. small clients) will vary, the heart of the matter is get a lot of experience. The goal is to not just get a few hundred hours working on WordPress, but a few thousand. You need to put the time in with real-world experience and taking on clients is one of the best ways to do this.

Develop a Public Theme

Build a theme you’d actually use. Release it, paid or free. Listen to the feedback you get from developers and end-users who use your theme. Ask for a peer review from theme designers you respect. Update your theme as you get feedback and as your abilities improve. Work hard to make a theme that you can be proud of.

Develop a Plugin

As you learn and work with WordPress you’ll eventually find a need that hasn’t been met. When you do, meet it yourself. Take what you’ve learned about plugin development and put it into practice. Write a plugin that’s secure and that solves a real need, without being another “me too” contribution to the already massive plugin community. Release it, paid or free, and get feedback from the people who put your plugin to use.

Contribute a Patch

Read the Core Contributor handbook and learn how to submit a patch. It can be a daunting process your first time around, but look for a challenge that you can tackle, and stick to it. Contributing a patch is an invaluable experience and an important part of being able to consider yourself a top WordPress developer.

Master Debugging

Learning how to write bug-free code is a critical step in becoming a great developer. Start with the Codex and learn about debugging in WordPress. Read Andrew Nacin’s post on 5 Ways To Debug WordPress. Familiarize yourself with some of the developer oriented plugins, like Core Control, Debug Bar and Log Deprecated Notices.

Joining The WordPress Community

As you continue your education and put what you’ve learned into practice, the next step is to become an active member of the community. You may be a fantastic developer, but it doesn’t count for much if no one knows you exist. Spend time investing in the community. One of the best ways to do so is sharing what you know.

Write Tutorials

I got my start back in 2006 with a simple tutorial I wrote (be warned, it is a little dated). I took what I had just figured out and poured it into a tutorial to help others and save them the time (and headache) I had just experienced. A lot of people read it, a few wrote back and said thank you, and some people even asked me to do some work for them. So write tutorials that take the best of what you’ve just learned and present it to others so they may reap the benefits of your efforts. It’s worth it.

Contribute to the Codex

As you spend time reading through the Codex you will notice areas that need improvement. Learn about becoming a volunteer in the Codex. Dedicate time to improving the quality of the documentation. While documentation in the Codex is continually improving, there are still functions and features in the WordPress core that go undocumented. If an area is beyond your current capabilities, bring it to the attention of others and embrace the opportunity to learn more in the process.

Participate in Forums

Most WordPress beginners start out asking questions on the official support forums. Start there by answering questions (even the silly, basic ones — we all start somewhere). From there, become an active member of the WordPress Stack Exchange community. Answer questions and learn from the answers that other developers are giving.

Present at WordCamps

Attend upcoming WordCamps and look for opportunities to present and give value to the WordPress community. A true sign of your expertise is your ability to take what you know and teach it to someone else. Read the Diary Of A WordCamp. Want even more of a challenge? Become an organizer and start a WordCamp near you.

Reward And Responsibility

The reward at the top is worth the effort. If you’re building a business around WordPress (read 7 reasons why you should), a mastery of WordPress is a critical step to your success. In 2011, according to the official WordPress Survey results, “6,800 self-employed respondents were responsible for over 170,000 websites, personally”. Of those, the average median hourly rate was $50/hour. Based on the Pareto principle, the top 20% of those developers (less than 1,400) are responsible for 80% of the work done (and they make more than $50/hour).

Now, being in that top 20% carries with it a high-level of responsibility. Staying at the top requires a commitment to ongoing education and continual experience. Never stop learning and improving. Being at the top also puts a level of responsibility on your shoulders for the health and future of the WordPress ecosystem. Get involved. Weigh in on important matters. Contribute. Put a percentage of your success back into building up WordPress and ensuring its future.

Conclusion

Becoming a top WordPress developer requires a mindset of continual improvement and a willingness to do the hard work. It starts with an intentional focus on education and then moves to extensive real-world experience. Finally, the title of a “top developer” demands dedication to the WordPress community, as well as recognition of the responsibilities by those who mold and shape the future of WordPress.

What about you? What advice do you have for becoming a top WordPress developer?

© Jonathan Wold for Smashing Magazine, 2012.

  

I am sure that my day job as a designer has a lot of similarities to that of the entire Smashing community. I create wireframes, mockups and concepts. I craft HTML and CSS using methods that I hope are fluid and adaptive. At the same time, my coworkers and I serve over 100 clients and 13 million users on a single platform.

Each client has the ability to design their website as they see fit, but we have an unbalanced ratio of designers to clients. I do not have the luxury in my day-to-day work of spending months working through a design process as part of a client’s implementation. However, this scenario of limited time hardly strikes me as rare among my design peers.

Because of these constraints, I hear a phrase quite often that many designers would compare to nails on a chalkboard. The people I work with who do not handle the design side of our platform will often tell clients, “The designer will make it look pretty.” Now, “it” could refer to a lot of things: a log-in form, maybe a simple button, or the entire website. When content is raw, unformatted or confusing to the user, it gets sent to the design department so that it can come out the other end “pretty.”

The result of my design process.

Web designers hate this perspective. We consider what we do to be far more important than decorating sloppy content and returning it in a timely fashion. Many of us would argue that our real job is to make content accessible, flexible, easy to use and easy to work with. The real value in design comes from what you can’t see or what you don’t appreciate; it comes from all of the trouble that you don’t have because we fixed it ahead of time. Thank goodness we know better: if we just made things pretty, all of our work would be in vain.

Why Designers Hate “Pretty” Design

Professional designers don’t make things pretty because it’s beneath us. Your visual acceptance of our work is the result of careful decision-making built around grid systems, perfect ratios, color theory, typography and—no, I won’t make your logo bigger—white space. The practice of simply decorating is something we used to do when we were just getting started down this career path. We used to make pretty things in Photoshop to kill time in class or to tinker with a new tool or technique. We have since moved on to bigger and better things.

Image source: Mike Rohde.

Yes, the design community has graduated from the pretty principle to less visual but supposedly more impactful measures. The technology of the present enables us to reach a higher plateau, and we are a bunch of people who refuse to settle for good being good enough, and that includes making something pretty. Right?

Embrace The Pretty

Anyone who feels they have left pretty and supposedly meaningless things behind is wrong. Leaving behind the idea of making your work appealing to the eye is to leave behind real value. Aesthetics are no petty trick for the uninspired. Quite the opposite, really.

Our great human minds come preprogrammed with many incredible default behaviors that automate complex decision processes. One such behavior is to be drawn to attractive things. Of course, this isn’t news. We prefer to spend our lives with companions who we are attracted to, we want pretty spaces to live and work in, and we invest our time and money into these things to make them look good. However, this hidden pattern in our behavior can account for much more than these obvious attraction-driven actions.

Attraction works surprisingly well not just by direct preference but by association, too. Take, for example, something that we see on a daily basis. The process of selling products with attractive models or celebrities may come across as a lazy method of advertising, perhaps by a marketing team that is slacking off. But despite its transparency, this method remains an effective way to pass attributes that we generally associate with attractive people onto a completely unrelated product.

This comes to light in a study performed on two groups of males who were shown the same car advertisement, the only difference being the inclusion of a pretty woman alongside the car. The group that was shown the car with the woman not only rated the car as faster, better designed and more valuable, but when they were confronted about the influence of the attractive woman, nearly all of the subjects denied that it played a role in their judgment of the car.

How does all of this relate to Web design? Like so many things, it comes back to the content. Content is the most important element of a website, and how a user reacts to that content or recalls it later can be heavily influenced by its surrounding. The most obvious example is our judgment of credible information.

In the example above, you can see an article surrounded by distracting advertisements on the right. Crushed into leftover space or given no regard for good typography seems less important or even less factual to us than one that excels in all of these categories—even if the words are exactly the same. To the reader, it is clear that the time spent crafting an article into a beautiful experience indicates that it has higher value and more legitimacy. But the benefits don’t stop at the paragraph level. The entire experience of a website can be enhanced with an eye for beauty. I’ll even show you how.

The Laws of Attraction

The process of booking a place to stay on vacation or a trip has been completely transformed by the Internet. To be completely honest, I’m in my 20s, so I don’t really know what people did to book places to stay before the Internet, but it had to be terrible. Today we have dozens of options for finding deals on hotels, resorts, apartments and beyond. From the variety of choices out there, patterns have emerged in the process of finding places to stay. Every website out there starts with the basics: destination, arrival and departure dates, and guests. This is a good pattern, and it generally serves our best interests, but oh, the difference that design can make.

Airbnb has established an impressive level of popularity in a short time among travelers looking for an experience outside of the standard hotel room. This is in no small part due to the emphasis it has placed on design. When you visit the Airbnb website, its entire mission is revealed to you in an instant. Large vibrant images bleed through the background, showing some hand-picked potential destinations.

These careful selections serve several purposes. First, it becomes immediately clear that we are dealing with something beyond the drab hotel experience. Secondly, it’s no coincidence that the destinations that enter and leave your peripheral vision are so gorgeous. Let’s take a moment to compare this experience to another website that offers a similar set of features.

Vacation Rentals By Owner (VRBO) helps you accomplish a goal similar to that of Airbnb’s users, which is to book destinations with individual owners. Honestly, VRBO does not make this process difficult, and its inclusion here is not meant to imply “Never do this.” The steps are the same (destination, arrival and departure dates, guests, etc.), and its design does not hinder the user from completing this process. However, the difference in experience between the two websites is drastic.

The primary difference is that Airbnb has done a wonderful job of presenting its primary content (the places) beautifully. The large pictures of the very pretty places gets us excited about our trip and about the sort of unique residences we could stay in. Because of the pretty things we immediately see on Airbnb’s home page, our entire experience is enhanced. Even if the process of booking a place to stay is no harder or easier on Airbnb, more people are likely to come back or share this resource with their friends because of the positive and memorable influence of the pretty images and interface. The unique style of Airbnb translates into measurable results in the form of a noticeably lower reliance on search traffic and a higher percentage of direct and repeat traffic.

The Industrial Age Is Over

There was a time when design was a secondary consideration for the products we used and the services we enjoyed. This mostly came about during the Industrial Revolution, and it could be argued that we relived a similar mentality through the Information Age. Both of these eras share a common theme of production on a large and affordable scale. We found ourselves constantly inventing a new mouse trap, except that it didn’t have to be a better mouse trap if it could be a cheaper one. So long as your table, automobile, computer software or thermostat had a utility and was affordable, it was good enough.

If you have the pleasure of living in a developed country, it should be obvious to you that times have changed and this no longer applies. Why did the Nest thermostat make such a huge splash online? Because finally we have a device that can automatically control the temperature in our home? For years we have longed for something that allows us to regulate the temperature where we live! Sorry, but we’ve had these things. In fact, hundreds of these things exist. But that’s precisely why Nest took off: it was the same thing done again but with real design this time.

Sure, it’s important that the Nest makes it easy to program the temperature in your house, which is an element of “good design” in the sense that designers love. The controls are simple, and it’s super-easy to understand, read and use. I would argue, though, that all of this is secondary to the fact that the Nest looks really cool. Perhaps you would scoff at the statement that looking cool is more important than being easy to use. But the fact is that this thermostat will spend most of its life not being touched and not being interacted with in any way. It’s a thermostat, so what will people do with it almost 100% of the time? They’ll look at it.

We see this in industries beyond home décor. It wasn’t long ago that the US automotive industry was in a nose dive for the crapper. This shouldn’t have been much of a surprise because the industry was built on Henry Ford’s principle of mass production on a cheap, repeating, large scale. As the world moved away from affordable necessities to desirable luxuries, the car industry needed to move with it or go broke. In the early 2000s, automotive juggernaut General Motors rehired Robert Lutz, the man who would rewrite the script on how GM made cars. Lutz ditched the industrial mentality of GM and started to imbue his own opinion of cars, saying, “I believe very deeply in the automobile as an art form.” Since then, GM has transitioned from manufacturing cars to designing them.

Looking around, you can see that making things pretty is going from being an afterthought to being an integral part of our lives. We have reached the point where making something affordable yet high in quality is second-nature. Look no further than the content we curate in our social media profiles today to get a prime example of the difference design makes.

The Internet is becoming a culture of hoarding; with Pinterest, Instagram, Facebook, Twitter and websites like Dribbble and 500px, a premium has been put on building a digital collection of things. We share the food we eat, the places we go, the clothes we want to buy and the gadgets we love. Often the primary requirement for sharing these things with our social networks is that they stand out visually. They need to be unique, stylish and well designed… they need to be pretty. As discussed earlier, all of these qualities build a connection between who we are and the products we love. In order to create a product or website of extraordinary value to the millions of digital curators out there, we need to invest in aesthetics that reflect well on those same users.

Put Pretty Into Practice

The landscape of the Web is not so different from that of thermostats or cars. If anything, its resources are over-abundant. Any task you might want to accomplish online either has been done thousands of times or can be easily duplicated after the fact. When users have limitless options and limited time, design is the deciding factor in what makes one experience more worthwhile than another. So, don’t cringe when “pretty” is included as a design requirement, because it should always be. When we make a design pretty, we are deliberately basing our design choices on aesthetic value. A pretty design has a visceral impact on the user and prompts an emotional response.

Designers who ignore the potential impact of prettiness on their work are at risk of being surpassed by peers who share their skill set but who appreciate the role of beauty. Pretty design isn’t just for Dribbble. Your clients, customers and users all stand to gain a lot from that extra coat of paint. A user’s personality can be imbued, however slightly, by the work done by a designer merely by association. I implore you to keep work from leaving your desk until you have had time to make it pretty.

Additional Reading

• A Whole New Mind, Daniel Pink
• “In Defense of Eye Candy,” Stephen Anderson

(al)

© Jason Gross for Smashing Magazine, 2012.

1. New Super Mario Brothers 2

Nintendo released New Super Mario Bros. 2 this Sunday, along with their monstrously big 3DS XL. It has many of the great elements from the Wii’s New Super Mario Bros.: sharp graphics, fun gameplay, and challenging levels.

New Super Mario Bros. 2 brings the bling. Instead of collecting just a few coins each level, it becomes the entire mission of the game. Special power-ups turn Mario into Midas, or turn his enemies into gold. The most humorous one turns Mario’s head into a gold brick that spits out coins. Although this seems a little gimmicky, the game is solid. You can even play cooperatively with your friends across a wireless connection.

Click here to view this gallery.

It’s tough to keep up with all the great games worth playing. Between consoles, PCs and our mobile devices, there are so many ways to play alone or together that it’s hard to decide what to pick up.

We’re here to help. Here’s a list of five titles you should definitely consider playing this weekend. Some are new, while others are noteworthy because of a sale or deal. We also tried to represent a broad cross-section of gaming platforms and genres.

SEE ALSO: 15 Vintage Video Games You Can Play on Your iPhone

If you’re playing anything else you think we should mention in the future, or you see any great sales on current games, let us know in the comments.

More About: Feature, Gaming, iPhone games, trending, video games

When Neil Armstrong died today at the age of 82, we lost a beacon, a somewhat distant and fading light that remained present enough to remind us what’s possible. Armstrong was the first man — human– to ever set foot on the surface of the moon, and when he did, he spoke words that instantly lifted a generation’s eyes to the skies: “That’s one small step for [a] man, one giant leap for mankind.”

The moment, which I witnessed when I was just five years old, changed me forever.

Now, back then, I didn’t even want to see the moment. I was tired and the Apollo 11 astronauts were not even scheduled to step onto the Moon’s surface until nearly midnight. My father, though, knew it wou…
Continue reading…

More About: NASA, Neil Armstrong, space

It can be tough to keep up with all the new apps released every week. But you’re in luck — we take care of that for you, creating a roundup each weekend of our favorite new and updated apps.

This week we found an app that lets you broadcast video live to all your Facebook friends, and another that will help you figure out who is really behind the political ads you see broadcast on TV.

American Idol fans can sing like their favorite contestants from the show with a new karaoke-style app, and a popular music app saw a significant Android update this week that included the addition of full lyrics for song, so you can sing along with your favorite tunes.

Several other popular exi…
Continue reading…

More About: android, apps, iphone, trending

We don’t blame you if you spent the week waiting for the Samsung-Apple verdict, which was announced on Friday with Apple winning quite the pretty penny over design patents.

For those of us who didn’t just lose $1,049,343,540 in damages, however, there are plenty of digital resources from the past week that remind us that the tech world goes on.

We have a list of Google+ circles marketers that you should follow, an explanation for why we’re only in the early days of social search and tips for ditching that ancient landline of yours.

We also have a bunch of interesting infographics from our Lifestyle channel about e-commerce, cyberbullying and Facebook at work, as well as 13 “de…
Continue reading…

More About: Business, COMMUNICATIONS, Features Week In Review, Social Media, Tech

A new film called Sight successfully tackles the subject of augmented reality, commenting on the potential impact of this rising technology.

More About: Augmented Reality, CGI, Sight, trending

Facebook headquarters has hired world-renowned architect Frank Gehry to design its campus extension.

More About: architecture, facebook headquarters, trending

Online shopping is discreet, easy and fast. It’s no wonder shoppers are filling up virtual carts instead of visiting brick-and-mortar shops.

Shopping online allows us to skip the lines, crowds, travel expenses and the hassle of parking. A recent survey conducted by Lab42 — a market research company — found 66% of consumers prefer web retailers. Nearly half of the survey participants complete 73% of their shopping online.

Savvy shoppers are also turning to web and mobile stores for bargains. Nielson recently reported nearly 50% of U.S. smartphone owners are using shopping apps each month, frequenting eBay, Amazon, Groupon and LivingSocial’s mobile stores. About 45 million smartphone…
Continue reading…

More About: Mobile, apps, infographic, online shopping, trending