Tag: kranthi

Being Real Builds Trust

Being Real Builds Trust

Tons of products and services are the best, easiest, simplest, smartest, most beautiful, cost-effective, and affordable things ever. They also all increase profits, decrease costs, and save you time.

That makes your decision to choose one very easy: they’re all the best! No matter which one you pick, it’ll be perfect!

Or so it seems, anyway.

These kinds of qualifiers overrun our content because we’re constantly looking around at what everyone else is doing. We compare our own websites and portfolios against other people’s. We look at competitors’ sites, then compare how our interfaces and feature sets are different.

After we’ve surveyed what exists out there, then we try to be unique. One of the ways we do this is by describing “how we’re different” from (and better than) others like us. Consultants might talk about their unique process. Companies might design graphics that position their “features and benefits” side-by-side against their competitors’.

The problem is, this shifts the context of the conversation to external factors beyond our control. What other people do online has nothing to do with us or our users.

Our best chance for establishing trust with our users is to be honest. After all, trust inspires confidence. And it’s confidence—not just a knowledge of differences—that compels decision-making.

Perhaps we should stop fixating on what makes us different and, instead, acknowledge the real aspects of who we are, what we do, and why people choose us.

How can we start getting real?

Ask your mom

One way we can establish trust with users is by cutting the crap and getting real with our content. I do this with the Mom Test.

For me, no one on earth is better at calling me on my crap than my mom. She worked hard to birth me, raise me even when I was incredibly annoying, and guide me as I struggled through all my melodramatic “Who am I?” crises. All while deftly managing millions of dollars for an entire school system in Ohio.

So whenever I write content, I apply the Mom Test to ferret out hidden marketing or business jargon. Here’s how it works: I write content, then read it out loud while imagining my mom is listening. (Sometimes she actually is. Call your mom; she misses you.)

If at any point I envision my mom saying, “That sounds nice, Steph,” then I know it’s not real enough. The goal of this technique is always to elicit an actual reaction from her, like “Oooh, can I use it?” or “When is this event happening, again?” These substantive “What next?” responses indicate that she really understood.

I learned to do this years ago, when I was applying for editing jobs using a cover letter with this sentence:

I constantly analyze the best ways to leverage communication avenues in order to reach target audiences and inspire them to engage.

I wasn’t getting any responses to my applications, so I whined to my mom about it. She asked me to send her what I had written. I did. It massively failed the Mom Test.

She asked me point-blank questions like, “What are communication avenues?” and “Engage in what?” Yikes. I had applied to many jobs with that impossibly unreal sentence. I felt sheepish.

She told me to be honest and specific, so I took her advice. Here’s the rewrite:

I constantly edit and analyze. I think of new ways to deliver messages through websites, newsletters, speeches, novels, dissertations, research studies, RFPs, donor letters, press releases, and other forms of communication.

This passed the Mom Test. I thought it was too wordy (and still do), but she was adamant I keep it straightforward. She’d seen enough resumes in her lifetime to know that being real was my best hope of getting an interview.

She was right. I ended up getting a call right away—and later a job—at a startup called WCSN.

Getting real about user assumptions

Six years later, I’m still applying the Mom Test. Except now it comes earlier in my process: I use it to identify unrealistic assumptions I’m making about my users, well before I craft any content.

I start by writing down my assumptions about what my users care about.

Then I ask, “Would my mom ever say these things out loud?”

If the answer is “no,” then my assumptions are probably a stretch. I need to try harder to get at the kernel of beautiful truth. I keep going until my assumptions all sound like something my mom would actually say out loud.

As an example, let’s say we run SuperCool Web Agency. We want potential clients to choose us, so we create a page on our site called “Our Approach” to describe how we’re better:

We don’t force-feed you a solution. Instead, we listen to your business needs. Then our experienced team implements the most suitable technology to support your unique goals.

Now, keep in mind that this content is aimed at helping a potential client (who may not have domain expertise of the web) choose us over competitors because of our better approach.

Is this content helping a potential client trust us?

Let’s apply the Mom Test. First, we’ll dissect that paragraph for assumptions we’ve made about the user. Here are several:

  • I value this kind of approach
  • I know how technology influences my business goals
  • I think a cookie-cutter approach is an inferior approach to websites
  • I only hire experienced teams

These sound too stiff and business-driven; my mom would never say them. But rather than jump into rewriting the paragraph, let’s first make the assumptions more realistic. I could imagine my mom saying these things:

  • I don’t want to feel stupid
  • I want to hire people I trust
  • I want to have a say in the final product
  • I want to feel valued
  • I’m nervous about this decision

So now that my user assumptions are more realistic, I can rewrite the paragraph itself:

Some clients prefer we take the lead and deliver fast. Others want to work with us for as long as it takes to get it right. But no matter your preference, we’ll try our darndest to accommodate.

Cheesy? Perhaps. Pass the Mom Test, both in the assumptions and in the content itself? You bet.

Your mom may not be your target user, but she is a real person who’ll call you on your bullshit. That’s what this exercise is about: forming real assumptions, and then writing what’s real as a means to establish trust.

Having realistic assumptions first better enables us to write real content later. But traditionally, we don’t do this—instead, we write content first that answers the question, “What are we trying to communicate?”

I hope you can imagine your mom calling you on your crap, too. But perhaps your Mom Test is actually a Husband or Wife or Brother Test. Whomever it may be, use that person to keep you real. (He or she probably already does that anyway.)

Yet beyond the Mom Test, the rewritten paragraph speaks to the user’s emotional needs in a more human way.

Being real builds trust. And trust helps users more confidently make a decision.

Sameness is a problem

A challenge to establishing trust is that building it takes time, and time is precious. We only have a sound bite to convey worth to a user. We have real deadlines to meet.

These challenges aren’t overcome by the formulaic approach we’ve learned to accept. They’re why every car company is “best-in-class,” every cell phone carrier has the “most coverage,” and all consultancies are “full-service.”

Why pressure users to make a choice based on the same absolutes your competitors claim?

For example, I don’t know what differentiates a great TV from a crap TV (technically speaking). But that didn’t stop me from showing up at Best Buy, where I listened to sales pitches filled with words like “smart technology” only to then ask topical questions like, “Does this one come with a stand?” At H. H. Gregg, a salesperson told me I “couldn’t go wrong with the LG or Samsung,” yet I felt anxious about both. I went home exhausted and confused. I felt embarrassed that I couldn’t make a decision about a damned TV. Which TV was best for me, and from which store was it best to buy? (Best Buy pun not intended.)

Amazon restored my sense of confidence. It had more than 1,000 reviews from real people, plus warranties for half the price but twice the coverage. White-glove delivery two days later only made me more confident—an emotional feeling that the box stores didn’t inspire in me.

I trusted I was making the best decision for me.

This made me feel happy.

Write real things

Not all of us have thousands of user reviews, better prices, or faster delivery. That’s OK, because we do have other assets. (And if we don’t, we have bigger issues than how to position ourselves online.)

We often overlook our own assets because they’re real. Real things aren’t flashy, polished, or perfect. That’s often what makes them an asset in the first place.

For designers, maybe your assets are those sketches you created in college or while listening to a conference speaker. Just because they weren’t created for a client doesn’t make them any less valuable in demonstrating your creative skills. You can still write about those sketches.

For developers, maybe it’s that Android app you quietly released that has 50 downloads and 5 stars with no marketing at all. Or it’s a peer’s email that states, “I don’t know how you fixed that, but thank you. You’re awesome.” You can still write about your side projects and the praise you’ve received from colleagues.

For organizations, maybe it’s a quote from the intern who wrote a blog post about how amazing it was to work there for the summer. Or perhaps a client or customer sent a kind email to one of the higher-ups. What did these people say, exactly?

The bottom line is that familiar-yet-generic approaches to positioning ourselves in this world work against our ability to build trust with those around us. Don’t spend any more of your creative energy on fluff. Write real things that pass the Mom Test.

If you need a little inspiration, ask your users, employees, clients, colleagues, or friends this question: Why do you trust me? Why do you trust my company? I bet their answers don’t include words like cross-platform, leverage, or utilize.

Instead, they’ll probably use plain-speak language chock full of emotional adjectives like confident or happy. Words that’ll make you blush with pride.

After all, people don’t edit themselves when they’re telling you why you’re awesome. That means you get real feedback that highlights specific assets about you.

For example, I recently asked Jared Spool why he keeps working with me. He said, “You get what we’re trying to do. I can have a very short conversation and somehow magic comes out of your fingertips. My theory is it has to do with mushrooms or some other hallucinogenic.”

The reality is more benign: I work super hard to make it seem easy. But he knows that well—well enough to unabashedly make such a joke in the first place. Best of all, he described two of my assets: an ability to comprehend ideas quickly and to write content in a way that seems magical.

A hallmark of realness is specificity. People will get specific if you ask them why they care about you, your product, or your company.

Real is trustworthy. Trust in that.

Translations:
Italian
Portugese


RSS readers: Don't forget to join the discussion!


Passive Income Strategies For Web Designers // Freelancing Experiments


  

Finding ways to earn passive income is a growing concern among many freelance designers. I’ve always loved client work, but I have to admit that the pressure of juggling multiple bosses and constant deadlines eventually started to wear me down.

As a result, in the past couple of years I’ve been focusing more and more on personal projects, and thinking about ways to make money from them. I’ve sold themes and templates and written an eBook, and I’m now focusing on launching my own job board for designers.

In a previous article for Smashing Magazine, I compared various ways to sell software products online. What I’ll do in this article is not just compare ways in which freelance designers can earn passive income, but speak about my own experience in exploring these avenues.

And, yes, that will include telling you how much money I’ve made!

Disclaimer: This post is about my own personal experience. Just because I have, for example, never made much money from ads does not mean you can’t. So, please take this as a “Here’s what I did,� not as a “Here’s what you should do.�

Themes

I was lucky enough to join ThemeForest (the biggest themes and template marketplace on the Web) in January 2009, shortly after it launched. ThemeForest seemed like the perfect way for an unknown, inexperienced designer to make money: no need for a fancy degree or years of experience — just design something cool and the market will reward you. In fact, that’s exactly what happened. Top designers now gross six-figure annual incomes solely from selling themes, and some do so despite being relative unknowns in the rest of the design world.

So, what was the result of my own venture into theme-making?

Overall, it was very positive. First, it helped me launch my design career, because my first couple of freelance clients were all people who contacted me after seeing my templates. It was also lucrative: in June 2010, my best month ever, I made $1,248. For a year after that, having not even launched new themes, my existing ones still made me around $200 a month, with minimal effort on my part.

The high point of my ThemeForest career.
The high point of my ThemeForest career.

Altogether, I’ve earned around $12,675 from ThemeForest in two and a half years; nothing to scoff at, especially because I completely stopped supporting my themes about a year ago. So, if selling themes is so great, why did I design the last one more than two years ago? There are a couple reasons for this, the main one being that the market drastically changed, and customer expectations changed with it.

Designing a good-looking theme isn’t enough anymore. If you want your theme to be competitive, you need to support shortcodes, build a custom back end and design multiple layouts, not to mention provide excellent support and build a documentation website.

In other words, in the span of a couple years, building themes went from something that you could do on the side to being a full-time job. Because I didn’t want to become a WordPress guru and spend all of my time creating themes, I decided to put theme design aside.

My most successful theme.
My most successful theme.

Theme design, then, is one of the best ways a designer can earn passive income, but it’s also one of the hardest. By the way, another important factor to consider is that theme design makes sense only if you’re in it for the long run and can reinvest the time you spend on a theme into subsequent ones (by reusing bits of code, streamlining the process, building a mailing list, etc.).

Pros:

  • Very lucrative if you’re successful.
  • No need for experience or education, as long as you have the right skills.
  • No need to be famous or have a big following.

Cons:

  • Requires a lot of HTML and CSS coding, and probably familiarity with WordPress or another CMS.
  • Providing good support is time-consuming.
  • You will probably need to launch more than one theme before the venture becomes more profitable than regular freelance work.

Icons And Vectors

Note: I have never released any icon packs, brushes or vector resources, so I asked Vincent Le Moign of Webalys for his thoughts on this market.

“I started to create passive income by accident. In 10 years of freelancing, I’ve created a small stock of vector graphic elements that I’ve been using repeatedly for interface design. At first, it was just a few Illustrator files, where I pasted GUI elements, such as buttons and icons, to reuse in future projects.

“In June 2010, I decided to make it comprehensive and consistent, and then release it for free. Inspired by Web application frameworks such as Ruby on Rails, the User Interface Design Framework was based on the concept of modularity, productivity and fast wireframing.�

Statistics from the launch of the User Interface Design Framework.
Statistics from the launch of the User Interface Design Framework. Large preview.

“It took me a few weeks to create it, without making any money on it, but the feedback was impressive: in two months, 52 000 unique visitors, more than 1000 tweets, dozen of blog posts. Even the godfather of Web design, Jeffrey Zeldman, reviewed it. I was high on a cloud!

“Looking at it now, I have no idea why I invested so much time doing it — probably because of passion, and I felt the urge to fill a gap: this kind of tool was missing. I didn’t make any conscious plan, but this is how my new career started. Seeing this steady traffic, I thought I could build a premium version on top of it. A few month later, I launched a commercial pack filled with 750 vector icons. Then the magic happened.â€�

The Minicons icon pack.
The Minicons icon pack.

“Money started to add up in my PayPal account. I remember checking my inbox compulsively to see if the latest emails announced sales. It wasn’t a lot of sales yet, just a few hundreds dollars, but it showed me the way: that making a living from passive income was possible. In the past two years, the sales gradually went up and reached the point where I could stop working for customers and spend 100% of my time on my own products. In 2011, I launched one more resource: a vintage vector ornaments pack, which was successful, too. Having two different products guaranteed a more regular income flow.

“I currently earn a few thousands dollars each month from sales. My income is the same as what it was when I was a freelancer, but I have the satisfaction of developing my own products. But designing quality content is not enough to make sales. I actually spend most of my time on other tasks:

  • Creating the sales pages, writing the text, polishing the product websites.
  • Setting up the e-commerce solution. In two years I’ve wasted a lot of time building the sales process. I switched e-commerce solutions four times until I found the perfect one (DPD — almost unknown but highly recommended).
  • Advertising and promoting. I spent a lot of time and money finding the best sources of traffic.
  • Improving marketing and SEO, and setting up and learning how to use products such as MailChimp, Google Analytics, GetClicky, SEOmoz, Curebit.
  • Optimizing the conversion rate by setting up A/B tests with Google Optimizer.
  • To be honest, I don’t provide a lot of support (a few minutes a day), but I commit to responding as soon as possible. And I spent a lot of time writing the documentation (with screenshots) to avoid answering the same questions over and over again.

“So if you’re considering creating premium resources, the answer is yes, you can live off of it. But your creativity and designs skills are not the keys elements of success. You’ll need to invest a lot of time in learning and practicing all areas of business: marketing, promotion, copywriting, SEO, analytics, etc.

“Actually, this is the beauty of launching your own products: you will become a better designer not by creating better graphics, but because you will have a full view of the business and will master a full range of skills. You will see your customer with new eyes and focus on the efficiency of your designs more than their outer beauty. And believe me, your customer will love that and will pay you more if you increase their sales.

“On the downside, the market is becoming highly competitive. The same shift that is taking place with templates is happening in my market. Competition is becoming fierce, and not a week goes by without a few more icon packs getting released. I mean, which designer hasn’t launched their own set by now?

“I’ve counted more than 50 competitors who sell icons, and the number and quality is improving constantly.�

A sample of the Vectorian vector pack.
A sample of the Vectorian vector pack.

“Also, the growing trend of discounted bundles (like on Dealotto and MightyDeals), where you get a ton of resources for a few bucks, risks drying up the market. I’m still not sure if this will convince more designers to add these resources in their workflow, thus expanding the market, or stop them from buying these packs at the current prices.

“This tougher competition has forced me to spend months this year doubling the number of my icons, from 750 to 1500, and adding variations for different software, such as PowerPoint and Keynote. Also, I’ve improved my other product, the vector ornaments, and paid another freelancer to fix a few problems. And I recently paid a great calligrapher to create a logo for Vectorian and improve the branding. Expenses and time investment are going up.

“Another problem: I don’t think my designs are as creative or as good as before. I’m so focused on creating the content, marketing it and thinking like a business owner that I sometimes have less passion for design and less creativity.�

Pros:

  • You already have the skills to create the content.
  • If you use marketplaces such as iStockphoto and GraphicRiver, you don’t need to build a website or promote your products.
  • Almost no support is required (if you write good documentation).
  • You will expand your skills and become more business-oriented.
  • You don’t need to write in English (this was a big advantage for me because I’m French and a poor English writer).

Cons:

  • It’s time-consuming.
  • The expectations of quality and quantity are rising. And more and more free content is becoming available.
  • The market is competitive; you need not only great content, but great marketing.

Advertising

I can still remember when Carbon first accepted one of my websites into its advertising network. I was overjoyed! At last, I would be able to dip into the river of money that flows into Internet advertising! Of course, I didn’t expect to earn a salary from ads alone, but I thought it might be a nice supplement — say, a couple of hundred dollars a month.

If you’ve ever run any kind of ads on a website, you know what’s coming: my first payment must’ve been for something like $5. So, yes, Internet ads are no fun — unless you bring in a massive amount of traffic (or if you plaster your website with a massive number of ads).

My first ever ad spot.
My first ever ad spot.

Since then, I’ve joined Fusion Ads for my blog and joined Yoggrt for The Toolbox (both ad networks belong to BuySellAds). To give you some numbers, The Toolbox gets about 20,000 uniques a month, which is not huge but still decent. This converts to $30 to 60 per month. My blog is a little more successful (probably due to the higher click-through rate), and I’ve succeeded in pulling in $100 or $200 in extremely good months when a couple of my posts went viral. But the average has been around $50 to $100.

Altogether, the total from advertising comes in at around $600 over six months. So, as far as I’m concerned, ads are a good way to pay for a meal to celebrate the weekend, but not much more unless you decide to become a full-time blogger.

Pros:

  • Does not require any work.
  • Joining a respected ad network will give your website cachet.

Cons:

  • Pays for a meal, if you’re lucky.
  • Did I mention that you probably won’t earn anything?

Books

Writing an eBook (or plain old book) might seem relatively easy. After all, we all know how to write, right? In fact, I’d say that actually writing the book is not the hardest part. Sure, developing a good writing style takes years of practice, but the truth is that people will forgive clumsy writing if you have something valuable to say. No, the real work in writing eBooks is in what comes before and after the writing.

Before writing the first word, you need to come up with a good topic and, more importantly, develop the skills necessary to make you an authority on the topic. Simply compiling existing knowledge might work for a blog post, but it won’t fly when you ask people to hand out their hard-earned cash.

Consider writing an eBook only if you have a couple of years of experience under your belt and feel ready to distill it into a book. And please don’t make the mistake of thinking it’s over once you’re done writing. That’s actually when the real battle begins: selling your book.

My eBook’s landing page.
My eBook’s landing page.

How will people find out about your book? What reason will they have to buy it? Why should they buy yours instead of competing books? These are the kinds of questions you’ll have to face.

If you want to rest your chances on a personal website, take a page from Jarrod Drysdale’s book (pun intended), Bootstrapping Design. Drysdale not only set up a website for his book, but also used a mailing list before and after the launch to promote it by sending out sample chapters and asking his audience various questions. I did my best to promote my eBook by setting up a landing page, writing guest posts about it and holding giveaways.

Another good strategy is to target a niche. This is what I did by focusing specifically on user interface design for startups, and Matthew Butterick also did it with his Typography for Lawyers book.

Last but not least, I strongly recommend partnering up with websites such as AppSumo and Hyperink to open up distributions channels for your book and to create new revenue streams.

Sales started strong but have slowed to a couple per week.
Sales started strong but have slowed to a couple per week.

Writing an eBook turned out to be great for me. I had a great launch, making about $8,000 in the first two weeks alone. Since then, sales have slowed considerably, but I did manage to make another $6,000 in the four months since the launch. In my case, the key to earning more was partnering up with AppSumo and Dealotto, which both brought in a couple of thousand dollars in extra revenue after the initial boost from the launch faded away.

Pros:

  • Almost no support needed.
  • No technical skills required.

Cons:

  • You need to have something to say.
  • A lot of promotion is required.
  • The market is competitive and crowded.
  • Sales will quickly dry out after launch.

Software As A Service

Building a business requires a ton of work and commitment, but unlike freelance design or, say, mowing lawns, building a software-based service of some kind takes away the 1:1 relationship between your efforts and your income. Some services charge only once, as is the case with job boards such as Authentic Jobs and my own Folyo. But, of course, the cash cow of passive income is subscription services because they enable you to anticipate your cash flow and build a steady income stream.

The obvious challenge in building a software service is that it requires technical skill, which you might not have if you’ve got a design background. It’s not the end of the world, though. You could find a cofounder, outsource the project or even learn the skills yourself. And you don’t need to go all out right away. When I speak with non-technical founders, I often notice that a preliminary version of their idea could very well have been achieved with a simple WordPress blog.

If you explore a little deeper, you’ll realize that opportunities for monetization are everywhere. For example, WordPress has numerous membership subscription plugins. Even MailChimp lets you charge for newsletter subscriptions. By thinking outside the box and combining existing services, even a moderately technical person can get a minimum viable product out the door.

I launched Folyo (a website that helps startups find great, vetted freelance designers) about a year ago:

Folyo, a private job board for freelance design projects.
Folyo, a private job board for freelance design projects.

For the first couple months, I ran it as a simple newsletter of job offers, with a Wufoo form for submitting projects. There was no back end, no database and no user accounts! This was enough to validate the concept and to motivate me to build a real app. So, I found a Ruby on Rails developer through a Hacker News jobs thread and paid him about $3,000 to create a working app (a process I cover in more detail on my blog).

Meanwhile, I had been learning Ruby on Rails myself, so I’ve since taken on part of the development myself, outsourcing the remainder to a friend in exchange for some design work. Was it worth it? While I have no doubt I would be earning more if I was focusing on freelance work rather than Folyo, I’m still very happy that I decided to launch my own project.

I currently make about $1,000 a month from Folyo, which is good enough for one person with minimal costs after one year. More importantly, each day spent working on Folyo makes it a little better and increases the website’s value (unlike with client work, where working on one project doesn’t help you with the next).

Of course, when I’m working on Folyo, I do very little actual designing. In fact, my time breaks down something like this:

  • Email and support: 20%
  • Blogging: 20%
  • Coding: 40%
  • Miscellaneous tasks: 10%
  • Design: 10%

So, if you’re thinking of launching your own service, consider that it probably means spending much less time designing.

Pros:

  • Theoretically, it can be lucrative and even get you bought out by Google or Facebook.
  • The work is very motivating.
  • You have the freedom to build anything you want.

Cons:

  • You will need to step way outside of your comfort zone.
  • The chance of failure is high.
  • At the end of the day, relatively little designing is involved.

Lessons Learned

What did I learn from all this? And what would I do differently if I could start over? Well, one thing I realized is the importance of building a network. You need to find a way to get connected, whether it’s by becoming a famous designer, writing a blog, building a Twitter following or, ideally, doing all that and more.

Of course, a lot of great designers focus simply on doing a great job and don’t concern themselves too much with the rest. But maybe these designers went to a great art school and kept in touch with their classmates. Or maybe they attend design meetups regularly. One way or another, you can bet that most successful designers maintain a network, even if they don’t realize it.

Blogs and Twitter are simply the digital equivalent of this. Making it entirely on your own is very hard, so the earlier you start cultivating these relationships, the better.

Related to this, have a strong identity. Try to stand out from the crowd, and make sure people know who you are. You can achieve this by cultivating your own style, being involved in high-profile or viral projects or, what I think is the best way, launching your own projects.

Visual Idiot’s humor at work.
Visual Idiot’s humor at work.

If you want to see how it’s done, look no further than Visual Idiot, who converted his great design skills and weird sense of humor into a job at GoSquared, despite no one on the Internet even knowing his real name.

This may sound obvious, but the reality is that projects that help build your network or identity are not often the most lucrative ones (actually, they usually don’t make you any money). So, it’s tempting to take that high-paying contract to design a pharmaceutical company’s intranet, rather than spend a couple days building a silly JavaScript that replaces stuff with pictures of cats.

But guess what? Nobody outside of Big Pharma will ever see that intranet’s beautifully crafted pixels, but that cat website might go viral and lead to thousands of people suddenly becoming aware of your existence.

To summarize, the main lesson I’ve learned over the last couple of years is to have a long-term view and invest in yourself, not chase a quick buck.

The plan is rather simple, then: build a network, cultivate a strong identity to ensure the network knows who you are, and then come up with a product you can market to it.

Of course, each step usually takes a couple years. I said it was simple; I didn’t say it was easy!

(al) (il)


© Sacha G for Smashing Magazine, 2012.


The Designer Will Make It Pretty // A Matter of Aesthetics


  

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.
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
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.

News Story Comparison

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 website

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

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.

Nest Thermostat

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

(al)


© Jason Gross for Smashing Magazine, 2012.


How To Become A Top WordPress Developer // advancement to excellence


  

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:

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.

Understand the Technology

If you’re going to master WordPress as a developer you need to understand the technology. If you’re already a programmer and PHP/MySQL aren’t new to you, great. Make sure your skills are up-to-date. If you’re new to programming, start learning.

Here are some ways to begin:

  • Learn PHP and MySQL
    It’s really important that you know PHP and MySQL and that you learn the best practices. A few out-dated tutorials aren’t going to do it. And if you learned it a few years ago, a lot of the practices you picked up are probably out-of-date. Not sure where to begin? Start with Lynda.com or Learnable.com. Learn about MySQL performance.
  • Explore the Codebase
    Take time to explore the WordPress codebase on Trac and on Xref. Read through the documentation to understand how things work. Look up what doesn’t make sense to you and ask questions. Familiarize yourself with how WordPress is structured.
  • Run The Nightly
    Setup a local development environment and run the nightly build as a way to stay up-to-date on WordPress as it’s being developed.
  • Read “Make WordPress”
    A good way to understand the technology is to follow the development discussions taking place on make.wordpress.org. You can follow discussions about the Core, Plugins, and Themes for starters.

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.


Separate Mobile Website Vs. Responsive Website // Presidential Smackdown Edition


  

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.

Mitt Romney and Barack Obama websites

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.

What Drives to Mobile Web?
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
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
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
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.

Mitt Romney mobile site features vs desktop site features
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:

Romney's mobile site displayed on a desktop
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

obamanav
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

Mitt Romney Mobile Nav
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.

Romney vs Obama's mobile page length

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

Romney Mobile performance

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

Obama performance results

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.

Real BlackBerry trying to load barackobama.com

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 Call functionality
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.

Simple form enhancements can make an experience just a bit less tedious
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.


  •   
  • Copyright © 1996-2010 BlogmyQuery - BMQ. All rights reserved.
    iDream theme by Templates Next | Powered by WordPress