On That Photo From the Vatican with All the Mobile Phones

I’ve been thinking more about that photo we all saw and most of us shared yesterday. If you haven’t seen it, NBC posted an image on Instagram of St. Peter’s Square in Vatican City, juxtaposing photos from the 2005 announcement of Pope Benedict XVI and the 2013 announcement of Pope Francis. It was accompanied by the caption: “What a difference 8 years makes.”

St. Peter's Square in 2005 vs. 2013 - via NBCNews Instagram

St. Peter’s Square in 2005 vs. 2013 – via NBCNews Instagram

The difference is obvious. In the first, thousands of people look up at the balcony, awaiting the announcement. In the lower right corner, one person holds a small flip phone. In the other, an endless sea of glowing smartphones and tablets, as thousands of people stare intently up at the tiny balconies on the tiny screens floating between them and their new pope.

I saw it first from Eric Meyer and immediately shared the image on Twitter and G+, accompanied by the line “Are you paying attention to mobile?” Brad Frost did almost the exact same a few seconds after me (whoo!).

Those two images, taken in the same spot just 8 years apart, stand as a stark example of the unquestionable presence of the mobile device. These devices are as much a part of our lives as the religion that these people came to celebrate. So much so, that they actually placed their device between themselves and the highest living representative of their faith. That’s not symbolism–that’s the reality of the mobile era.

But I missed the real point of that photo, I think.

When I said “mobile” I meant mobile web–and responsive design, and adaptive content, and apps, and all the other things we typically think of when we read about “mobile.” I’m currently working on several website redesigns and replatforms–all of them going adaptive, responsive, etc. I just installed a responsive template to this blog (from the fantastic people at Creative Market, btw.).

But the more I look at this image, the more I realize it’s not about those things at all. In the context, it extends beyond the screens these people are holding up in front of their faces.

They’re not surfing the web. They’re not downloading apps. They’re certainly not reading my blog. They’re taking photos and video, they’re live chatting, Facetiming, Skyping, Google Hangout-ing. They’re actively sharing their experiences, or recording their experiences with the explicit intention of sharing them with their friends, families, followers, and perfect strangers all over the world.

In that context, this wasn’t about the device, it was about the basic need to share. To be a part of a community. To make connections with other human beings. It was about shared experiences. (Sure, it could be about the lack of shared experiences those people had with others around them. Or maybe it’s about the experience we all shared as we looked at that picture and thought about our lives 8 years ago.) Remember, the person gave us that picture was also staring at a tiny screen in front of their face, between themselves and one of the most impactful events in the world.

In this sense, it’s not about mobile. It’s not even about social. It’s about the way we live our lives, the things we choose to surround ourselves with, and the effects those decisions have on us all. And it’s about the basic need for human connection.

So yes, if you’re building a website, you need to think about mobile devices. Because that’s the way you’ll connect with people and share your story. If you’re planning an event, you need to plan around people’s experiences with and through their devices, because that’s how they’re going to experience it either way. And if you’re taking over as leader of a 2,000-year-old religion, you need to realize that your followers, no matter how dedicated, have a device in their pocket that gives them access to the entire history of human knowledge and realtime updates of every event that’s happening every second in the entire world.

It’s not about mobile, it’s about context. It’s a reminder of how fast things change around us and how little we know about our world 8 years from now. All we can do is strive to keep up with what we need today, and hope it will still be relevant tomorrow.

That’s the context we all work in today.

The Case for Skeuomorphic Content

Over the last few months, a debate has raged over skeuomorphism vs. “flat design.” I won’t rehash the terms or the arguments here, but you can get a good idea from these two posts from Daring Fireball and LayerVault.

But nobody’s talking about the content.

Most of it revolves around Apple and the growing backlash to their skeuomorphic visual styling. There’s been much handwringing about the “calendars with faux leather-stitching, bookshelves with wood veneers, fake glass and paper and brushed chrome.”

But does anyone care that we still call it a “bookshelf”? And if we call it a “bookshelf,” should it in fact look like one? If you’re going to call it a “notepad,” why not make it look like a legal pad?

In a sense, these skeuomorphic designs are direct descendants of skeuomorphic naming conventions. PC’s had a notepad long before they had the ability to make it really look like one. We grew up drawing with a program called “Paint,” and MS Word let us type directly on a mockup of a sheet of loose paper.

LayerVault, at the forefront of the “flat design” movement, still has files, eyedroppers, outposts and signposts.

Is that bad? No. Is it skeuomorphic? Kind of.

Skeuomorphic content helps provide context

Okay, I realize there’s a difference between calling it a “bookshelf” and giving it a crappy wood veneer. And I’m definitely not defending the corintian leather calendar. And I should have said this earlier–LayerVault is BEAUTIFUL. As is Letterpress and the new Gmail app for the iPhone.

Faux corinthian leather is not necessary to understanding the calendar function. But calling it a “calendar” is. Creating a basic layout that looks like a wall calendar kind of is, too.

So while flat design can beautifully strip away the uncessary. Flat content can strip away the inherent meaning of your product.

The case for skeuomorphic content

I work in ecommerce software, where there’s a really strong correlation with the actions, concepts and processes for a traditional retail storefront. We’re also designing complicated, technical workflows for software users who are–on the whole–less technically savvy than you and me.

Managing inventory, processing orders and organizing your store are hard to do in the meatspace, and they can be overwhelming in a new piece of software. So the more familiar and relatable we can make things for our customers, the better.

But there’s a line to be drawn. Sure, we talk about “storefronts” and “shopping carts,” but we don’t put products into “isles” or “stockrooms.”

When there’s an easily understood software term or concept that works, I would prefer to use it. But when we can use a term to create a clear mental model for merchants or shoppers, then I’m happy to port it over from the physical retail world.

This is exactly what I believe Allan Grinstein meant when he introduced us to the term “honest design” on the LayerVault blog.

Designing honestly means recognizing that things you can do with screens and input devices can’t be done with physical objects — more importantly that we shouldn’t try copying them… We borrow metaphors from physical objects but we refrain from copying.

And I hear echoes of it as John Gruber describes the beautifully flat design of Letterpress:

What Letterpress rejects is not depth, but depth as mere decoration. The visual ‘raising’ of a tile as you play it is a natural visual cue, a way of emphasizing what it is you’re moving.

The case against skeuomorphic content

Maybe I’m making an unnecessary stretch by calling this type of content “skeuormorphic.” In fact, the definition quoted from George Basalla’s The Evolution of Technology on the skeuomorph Wikipedia entry describes “an element of design or structure that serves little or no purpose in the artifact fashioned from the new material but was essential to the object made from the original material.”

This type of content serves a purpose in the new material. It provides context for the user. It offers visual cues. It primes users with a clear mental model of what it is they’re supposed to do with that thing. As long as it doesn’t get in the way.

Corinthian leather serves no purpose (though I’d argue it served no real purpose on a physical calendar either).

As simple as possible, but not simpler

In The Lightness of Being, Frank Wilczek quotes a famous piece of advice from Albert Einstein to “make everything as simple as possible, but not simpler.”

There’s a fine line between skeuomorphic and cheesy. Between flat and bland. And that’s why I believe this debate has touched such a deep nerve in the design community. It becomes a matter of taste (at least until it’s a matter of data).

Shortly after Grinstein’s post on Flat Design, LayerVault founder Kelly Sutton applied the same philosphy to writing. While discussing of one of my favorite books of all time (William Zinsser’s On Writing Well), Sutton elaborates on their approach to “simplicity and flatness in design as honesty”:

Rule #6: Good design is honest. But interface design shares a similarity with non-fiction writing: At its core, it is meant to be the vessel for something else… Flat Design is no trend. Gloss and ‘lickability’ are the siblings to colloquialisms and weak writing. No emcee upstages the performers. When designing interfaces we must remember that our work is never the story.”

That’s why I like the term “honest” more than “flat”–especially in terms of content. An honest telling can use metaphors and borrowed terminology to help the story along, as long as they don’t get in the way.

If it’s simpler (for the user, not the writer) to call it a “shopping cart” then by all means, let’s call it a shopping cart. But we can leave out the chrome.

CMI Post: How to Build a Balanced Content & Design Marriage

Here’s my recent post on Content Marketing Institute about building a healthy marriage of design and content

 

Almost everything we create is published in or alongside some kind of design, be it a website, print layout, infographic or blog post. But in our busy schedules, it’s easy to simply write the content and pass it on, without any thought for the design or the person creating it. Or the opposite happens, when a design is already complete and we’re asked to simply “plug in the content.” Rarely do either of these situations work out well for the writer, the designer or the end user.

I’m not here to start a chicken or egg debate. For me, it’s not a matter of content before design or design before content. This is about writing with design in mind. From the initial concept to the final publication, there are a lot of things that we as content creators can do to support a balanced, productive marriage of content and design.

Lay the Groundwork

This is the simplest step you can take to make life easier for your designer: Do your part first.

Don’t go into a project without the content, or at least without a pretty detailed plan for content type, tone and structure. As Jeffrey Zeldman says, “Content informs design; design without content is decoration.”

Without the content, or at least a solid content plan, you’re essentially asking the designer to create a container, without any knowledge of what’s going in it or how people will use it.

When you have a project that you know will need to be designed, don’t just start writing–start planning.

1. Consider the end product. You should already be thinking about the audience and goals, but also try to think about what the final product may look like. Will it have big content blocks or small? Long headlines or short? Will there be pull quotes, images with captions or graphics that you can tie into? Thinking about these elements early on can help ensure consistency throughout, and it will make your designer’s life a lot easier.

2. Create a template. If you know ahead of time that there will be specific content types, elements or constraints, create a template. I don’t mean a wireframe necessarily, but just something that identifies the specific details or requirements for each content element. This can be in Word, Excel, XML or whatever platform you feel most comfortable in, as long as it clearly communicates the content structure and hierarchy.

3. Don’t just lob the content over. No doubt your template and your content are great, but don’t leave them to speak for themselves. When it’s time for design to start, schedule a meeting (or at least a phone call) to explain any important details. Oh, and send the content over early, so the designer can be ready with questions and ideas of their own.

 

Share in the Concepting

There’s another great benefit to doing a lot of the heavy lifting early: it typically earns you a spot at the table in the concepting and design phase. Whether it’s a conceptual project like an infographic or advertisement, or a more traditional layout like an ebook or newsletter, your content expertise can go a long way towards shaping the overall design style and approach.

More than simply providing edits and proofing, this is your chance to make the content and concept sing. Here’s what you can do to make sure that happens:

1. Be a good Googler. As a writer, I do a lot of research for my projects, both formal and informal. When you’re researching for your part of the project, keep an eye out for interesting designs, related ideas, competitor work or anything else that may help inform the concept. Share your research with everyone involved, and explain why you think the information matters.

2. Identify key themes and details. As you’re writing the content, highlight any potential hooks your designer can hang their design on. When you hand over the content, make note of any central themes, traits or other elements that may be useful. If you write the piece with a specific voice, emotion or personality, make sure you communicate that too.

3. Start sketching. There’s no rule that says all your ideas have to be written. Don’t think you can draw? Who cares. You’re not designing the actual concept, you’re just communicating ideas. The person you’re working with is a very visual thinker, and often a poor drawing can do say more than the best description. The same thing applies for quick and dirty Photoshop mockups. Plus, the more you do it, the better you’ll get!

 

Remember, Collaboration is a Give AND a Take

As the design process moves forward, there will no doubt be edits. How you handle those changes can have a significant effect on your project’s success and on future projects with that team or client. By being responsive to new ideas, answering questions and brainstorming together, you can help your designers realize the benefits of pulling you in early, which can have significant long-term effects.

You don’t have to be completely at the mercy of the design, but choose your battles. Know when to hold your ground, and know when to walk away.

1. Open your mind, open your ears. If you created the content with a particular concept in mind, don’t assume that’s the way the design must go. There’s a big difference between participation and dictation. The first can be the start of a long and prosperous relationship. The second can ensure you never get invited to the party again. Be open to new ideas and directions, and you never know where your content may go.

2. Learn to love word limits. Don’t fall in love with your content. Or as the old saying goes, “Kill your darlings.” Be willing to make changes, adjustments, additions and, yes, deletions to help your content work with the design. Not only does this give the designer more room to work with, it makes you a better writer. Sometimes you’ll have to make sacrifices, but more often than not it helps you strip away the unnecessary, the trivial and the mundane from your writing.

3. Don’t hover. If you’re like me, you don’t like writing with someone looking over your shoulder. Just because it’s easier to watch their work in progress, it doesn’t mean your designer wants you sitting next to them the whole time. Help out whenever you can, but be receptive to verbal and non-verbal cues from your teammates. Share your ideas, then let them get to work.

Give Quality Feedback

Once the initial design is done, it’s time to review. As you know from feedback on your own work, “I like it” and “I don’t like it” rarely help. If you’ve been involved in the concepting and design process, you should have a pretty good idea of what can be done to improve or clarify a design.

As the content expert, your feedback should be some of the most valuable and helpful comments your designer receives, so make it count!

1. Offer explanations, not solutions. If there’s an issue with something in the design, take time to explain the problem and provide any ideas that may help them solve the problem. If you can change the content to help, let them know, but otherwise let them do their job.

2. Embrace your expertise. One place you can be specific with edits is in the content itself. Look critically at your own work and how it comes across within the design. You’re the most qualified person to make changes to the voice, tone and grammar, so don’t be shy. This also applies to the way the content physically appears in the document. If there are awkward line breaks or something is hard to read, let them know.

3. Edit in place. To counter my recommendation about hovering, you should also be willing to sit down next to the designer and make changes in the document. Sometimes it can be much faster and much easier to rework specific pages or sections on the fly, rather than passing emails and documents back and forth.

 

Learn the Language(s)

If you want to take your work to the next level, start learning the basic tenets of design and development. You don’t have to become a full-on graphic designer or web programmer, but it helps to get outside your comfort zone and learn more about the professions you work with.

This can have both short-term and long-term effects on your work. It can help you have meaningful ideas and discussions with your teammates, and it can make you much more attractive to future partners, clients and employers.

1. Learn the basics of graphic design. Start with a general introduction to graphic design principles of layout, grids, typography and white space. Knowing some of these basics can help you create content that supports and enhances the designer’s work.

One of the best introductions to these concepts is The Elements of Graphic Design by Alex W. White. And if you don’t already, I’d recommend regular visits to A List Apart for discussions on new and emerging ideas in design, content and beyond.

2. Understand user experience. It’s important to understand how content and design affect the overall usability of your project. Look for tests on word choice, calls to action and content structure for your project. Or better yet, start doing your own A/B tests to see what works best for you.

There are countless UX and usability resources on the web, but one of my personal favorites is UX Matters, where you’ll find a range of detailed articles on accessibility, design processes, content strategy, information architecture and much, much more.

3. Learn to code.

If the majority of your content is for an online publication, learn to code. At a minimum, learn to style an HTML document, so you have a better idea of how your content can and will ultimately look. From there, it can help to have a basic knowledge of what can and can’t be done in each major language, especially new developments in CSS3 and HTML5.

For a great (FREE!) introduction to the basics of HTML, CSS and jQuery, check out Codecademy. If you prefer instructor-led courses, you can learn from top practitioners in person or online at General Assembly.

Create Content with Design in Mind

Ultimately, these recommendations boil down to playing well with your peers and being a part of the team. By thinking about the design (and the designer) during content creation, you’ll set your project up for success.

On formal teams, the writer is often the first person involved in a project, so you get to set the tone. By sharing early and often, you can build trust among the others involved and help foster a collaborative, creative working environment. And that makes everyone’s job easier.

But often, we’re expected to simply write the content and move on, or to come in at the end and write to fill in an existing design. While these situations aren’t ideal, do what you can to make your part go well, and it may be enough to get you included a little earlier the next time.

In the end, creating your content with design in mind will result in smoother process, better working relationships and better final products for your audience.

 

Your 0.2 Second Chance to Make a First Impression

This post is from my new series “Method & Message” on the Volusion ecommerce blog. You can see the original post here.

 

There’s a lot of talk about how short the average user’s attention span is online (and believe me, it’s short). An online user can take as little as 0.2 seconds to form an opinion about your brand.

But a funny thing happens after that. If they stick around for a few seconds, they’re likely to stick around for a few minutes. And that’s when users become buyers.

So the question is, how do you keep them around?

First Impressions: Getting Them Through the Door

We’re brutally efficient at sorting through content on the web. With so many choices online, we don’t take the time to make rational, studied assessments of brand, character and quality. We’re visual creatures, so these snap judgments are based almost exclusively on how a site and its various features look.

Fortunately, Volusion’s ecommerce templates, custom web designs and innovative features can help your store stand out from the crowd.

But successfully selling online takes more than good looks. Imagine walking into the most beautiful store you’ve ever seen–incredible architecture, impeccable interior design, luxurious displays. But there’s no product. Or maybe there is product, but there’s no one at the checkout counter. How long would you stay? How much would you buy?

The Staying Power of Quality Content

When we talk about “content” on most sites, we tend to focus on the words. But “content” literally refers to the contents of your site: all the things it contains. That includes the words, but also the images, videos, audio, banners, buttons… the list goes on. Oh yeah, and in an ecommerce site, that also includes your products.

If good design gets your online customers through the door, good content is what gets them to stay and, more importantly, gets them to buy.

Here are some ways your content can help get your customers from impression to purchase:

Inform the Design

Give your design meaning. Make sure design elements like colors, icons, fonts and imagery all convey the personality of your store. As an example, your main homepage image should be more than just a pretty picture. Use that space to provide a key differentiator, a special offer, or interesting message, in addition to the big beautiful imagery. Make it beautiful, but make it count.

Show Them the Way

Many large retailers have renovated their stores with wider aisles, lower shelving and bigger signage. Why? Because shoppers felt boxed in and many couldn’t find their way around. The same holds true for online shoppers. Your categories and navigation titles help your customers find their way in your store. But they do more than tell customers where to go–they also tell them, at a glance, what you sell. Make sure your navigation labels are clear, descriptive and relevant to your products and your brand.

Show Them the Goods

If your navigation is the signage within your store, then the homepage is the main entrance. Featuring your newest, most popular or specially priced products on your homepage can get potential customers to “come inside” and look around. To appeal to the most visitors, make sure your featured products show a good mix of your store’s inventory and your price range.

Mind the Details

Customers can’t touch, feel, try on or try out your products online. So you have give them all the information you can. Try to anticipate buyer’s questions, especially on details like sizing, materials, product specs or special features. And if you get the same question from several buyers, update your description with those details for future customers! As an added bonus, detailed descriptions can help boost your SEO rankings for that product and others like it.

Be Trustworthy

Customers want to know they’re buying a quality product from a quality source. A detailed “About Us” page, clear contact information and personal messages can build trust and help your customers feel comfortable buying from you. If you’re active in social networks, professional organizations or communities, provide links so they can see how you interact with your customers, friends and colleagues.

When in doubt, put yourself in the customer’s place. Think about what would help you find, choose and ultimately purchase your products.

Remember, Usable is Beautiful

If you’re still more concerned about how your site looks than how it works, take this to heart. Studies have shown that when it’s easy for customers to find and purchase the product they want, they actually find those sites more attractive. When sites have poor content and poor usability, visitors get frustrated and they become more critical. That makes them less likely to buy on the first visit, and less likely to come back for another.

So by all means, spend time on your design, play with the options and tweak your template, but don’t neglect your content. That first 0.2 second impression is predominantly visual–but that’s only the beginning.