Mobile First Web Design

Working with web technologies means keeping up with the blistering pace of change.

In the past few years, the web has transformed from primarily desktop to mobile.

The next few years will continue that evolution as more devices and screen types become part of the web. For many organizations, this creates both a problem and an opportunity.

Sites large and small must come to grips with creating a satisfactory experience for all types of devices and screens.

The web is no longer just desktop, tablets, and phones. People are accessing the web on e-readers, plasma TVs, gaming consoles, retina displays, and smart watches. Navigating the myriad of resolutions and devices necessitates modifying our design workflows. The traditional method is designing for desktop first, and adding a responsive version of the site at the end. If we recognize that mobile has become where the majority of people use the web, then designing for mobile first becomes easier.

Quick survey. Raise your hand if you own a smart phone. Now, raise your hand again if your phone is never more than arm’s length from you.

For many Americans, their phone is the first thing they pick up in the morning, and the next to last thing they look at when you go to bed. People use the internet on their phone if they’re sitting on the couch, even if their desktop computer is five feet away.

If your site’s users are starting a search on their phone and completing a transaction later on their laptop or desktop (or vice versa), making sure that the experience is consistent and smooth on every device will help you increase conversions.

This is why I get so frustrated when other designers dismiss responsive or mobile design as inconsequential. When everyone below the age of thirty never knew a world without cell phones, they are definitely buying things on mobile.

Straight Up Facts

A 2012 study showed that 70% of consumers who searched on mobile took action online within one hour.

As of May 2013, 58% of all US adults owned a smartphone, and 42% of US adults owned a tablet. 63% of adult cell phone users used their smart phone to go online, and 34% of them used it as the primary means of going online.

As of January 2014, Mobile app use exceeded that of desktop use. Mobile also accounted for 55% of all internet traffic in the United States. That makes the mobile view of your site the default view.

The rise of mobile is not just in the US, but worldwide. In regions like China, India, and Africa, many people own smartphones and use them to access the web. ComScore reports that 2014 will be the year that mobile use surpasses desktop use worldwide.

Mobile Usage Stats 2014

How This Affects the Design Process

There’s a huge positive to the rise of mobile: it forces us to evaluate what objectives are the most important. User flow on mobile is a bit different than desktop; reducing options and prioritizing content becomes necessary. Making these decisions in the early stages of the project allows us to take those decisions and create a similar hierarchy for the desktop layout. Another thing it forces us to do is make sure we are putting the emphasis on the message, and not the decoration.

Focusing on content, architecture, and prioritizing objectives comes early in a mobile first workflow. This is a significant priority change from traditional workflow, where the full-screen ornamentation and aesthetics come first.

Closing Thoughts

Web design used to mean building for 800 by 600 pixel screens. Then it meant designing for progressively larger screens. But as a great man once said, “it was a collective hallucination we all agreed upon”. Web design today encompasses a field vaster than a single size of screen.

Traditional web design isn’t dead; it’s only beginning. We will look back in a hundred years at this time as the Golden Age of the Web, before the whole web splintered and fractured into a million divergent devices on billions of screens. In the here and now, fortune favors businesses that go to where their customers are, and that means embracing mobile as the #1 platform.

Technicians vs Professionals

Today’s post is for solo entrepreneurs, freelancers, and service based businesses, but the concepts discussed can apply to certain types of businesses outside of that.

The topic de jour is “Are you a technician or a professional? And what’s the difference between the two?”

Proceed with caution, you might alter your way of thinking.

Technicians vs Professionals

The World English Dictionary defines technician as:

  1. a person skilled in mechanical or industrial techniques or in a particular technical field.
  2. a person employed in a laboratory, technical college, or scientific establishment to do practical work.
  3. a person having specific artistic or mechanical skill, esp if lacking original flair or genius.

The World English Dictionary goes on to define a professional as:

  1. a person who belongs to or engages in one of the professions.
  2. a person who engages for his livelihood in some activity also pursued by amateurs.
  3. a person who engages in an activity with great competence.
  4. an expert player of a game who gives instruction, esp to members of a club by whom he is hired.

Dictionary.com defines a professional as:

  1. an expert player, as of golf or tennis, serving as a teacher, consultant, performer, or contestant; pro.
  2. a person who is expert at his or her work.

Let’s focus on some key points here.

Both the technician and the professional are competent at their jobs. They both have the skill and experience to perform necessary tasks. Both a technician and a professional make their livelihood from their chosen field, and are not amateurs.

The thing that stands out to me is that a technician is employed strictly for their artistic or mechanical skill, and not for their creativity, thought process or input. Their work is practical, even proficient, but not instructional or insightful. In other words, they do as they are told, and that is where their value begins and ends.

On the surface, the professional may look like the technician. The professional can do all the things the technician does. The big difference is that the professional is also a teacher, consultant, and adviser. Their value exceeds that of the technician, because they share insight, lessons and advice about their chosen field.

How Does This Discussion Apply To Websites?

The web industry is filled with many technicians, and a smaller number of professionals.

Web design studios that fall into the technician camp are motivated primarily by making their clients happy. They will do whatever they are asked even when it is the wrong thing for the client’s business. The technician designer is basically a mercenary for hire, unwilling or unable to contemplate how their work will either help or harm their client’s business. They are afraid to give honest advice to their client, for fear of losing the job. That, or they lack the integrity, motivation or fortitude to share the expertise they do have.

Honesty and transparency are two things you should always have from your service professionals when the growth your business is involved.

The professional web studio is not only good at creating designs and building sites, but they solve problems you may have not even thought of before. A professional web designer gets to know your business, your industry, your competitors and customers before making a single recommendation. A professional designer takes the burden of creating the design off of their clients’ shoulders, and lets them worry about what they do best—running their business.

A professional web design studio looks at the overall landscape of your business, and sees how the website, marketing, social media, and community outreach can all benefit the client’s business. They have a deep knowledge not only of Photoshop and code, but also of people. Ultimately, the web professional serves the client’s customers and not the client.

Letting It All Soak In

A professional always looks for ways to make their client’s business better. This benefits both the client and the professional.

Technicians make themselves money. Professionals make their clients money.

Some Closing Thoughts

Technicians reduce risk by reducing up-front cost. However, they are generally not going to give you input or insight. The technician focuses on the task at hand, and doesn’t look at the bigger picture. They are akin to the mechanic who keeps fixing the same broken part on your car engine. Their motivation is to make you happy and get paid, even if what you are asking for is detrimental to your business.

Professionals are a valuable ally because they are fully mentally invested in seeing your business succeed. Professionals reduce risk to your investment by investigating details, doing research, and planning strategy before planning design and production work. Professionals know the terrain, and plan a course for success. They help solidify the direction of your business and are trusted advisers.

If you work on the web, which of these definitions fits you most accurately? If you’re a client who has hired a web studio in the past, what type of service did you receive? I would love to hear about your own experiences.

Finding Your Business Voice

All businesses have some form of communication with their customer base.

But why do some brands resonate with us while others do not?

Brands that are strong have a cohesive way of speaking to the public, whether it is on their site, in print or video.

These companies have taken time to think about who they are, what they stand for, and why they exist.

They have also made an effort to define their voice and tone.

Business is all about trust, and people trust companies that sound the same on a consistent basis. These highly defined brands don’t suffer from an identity crisis. They know who they are, and that same voice and personality is reflected in everything they say and do. Today’s post is for businesses that need help finding their business voice and are focused on better defining their brand.

Part of finding your business voice is figuring out the thoughts and motivations behind the business. How did the company start? What is the company trying to accomplish (beyond making money)? What values does the company embrace, and what practices does it admonish? Answering these questions will give you a clearer picture of what your brand voice is, what it wants to say and who it wants to say it to.

Reason For Being

Every company has a reason for existing that goes deeper than turning a profit. Why is it important that your company continues to exist? Who are you seeking to help and what do you want to do for them? If you were to meet those people face to face, how would you talk to them and what would you say?

Define Your Core Values

If you are able to articulate why your company exists, that should lead you to internal company values that support those goals. Make a list of things you stand for and things your company stands against. What are the values you want your company to live by?

Making a list of adjectives that describe your brand, and ones that are the opposite of your brand will help you define the characteristics of your brand, and these will shape its voice. By writing down what principles are guiding your company, you are beginning to define the type of culture you want your business to have. You will also attract clients who stand for the same things that your company does.

If your brand voice was a celebrity who would it be and why? If your brand voice was a regular person, what would they look, act, and sound like? Would that person be able to influence your target audience?

Black and white photo of a retro microphone

You cannot be all things to all people. If your brand values fluctuate on a regular basis, your words will be hollow to your audience. Define your core values and let those guide your communication with your customers. You may choose to write these values down as a mission statement for the benefit of your internal team.

Phrasing

A good way to test your material for comprehension and tone of voice is to read it out loud. Does this sound like you? If not, what can you do to make it sound more like your conversational voice? You should not feel uncomfortable reading your copy out loud. The closer your marketing copy is to your natural voice, the more authentic it will feel to your clients.

Things To Avoid

These are worst practices — some sure signs that your business voice needs to be more clearly defined.

Bluster

Back in the day, we had a family friend with a plaque on their wall stating, If you can’t dazzle them with brilliance, baffle them with bulls**t. Sometimes I will come across a website, and that’s exactly how it feels when I read their copy. It’s difficult to keep bluffing people with fancy words that mean nothing. Your prospects have a finely tuned BS meter; don’t let your marketing efforts set theirs off.

Jargon and Marketing-Speak

Many brands fail to reach their audience because they use marketing speak and jargon. If someone outside your industry wouldn’t understand it, don’t use it on your website or in your marketing materials. While using jargon may be normal for you and your peers, to your clients, it sounds like gibberish. When your copy is intimidating or confusing, the confidence of your potential clients is shaken. Superfluous statements may impress others in your field, but to a prospect, it sounds like the teacher on the Charlie Brown cartoons.

Inauthenticity

People can sense when you’re being inauthentic. In the immortal words of the band Pantera, you can’t be something you’re not. Don’t try to be someone you admire, just be yourself.

Copycatting

In school, there would always be one kid who seemed to be copying other kids, wearing the same clothes, adopting their mannerisms, using the same phrases. These kids were shunned because their peers found it annoying. Why did these kids copy other people? They were likely trying on identities to try to figure out who they were, but also they were trying too hard to fit in.

Don’t let your business resemble that kid in the corner that no one respects. Instead of trying to be someone else, figure out what your business stands for, and speak with conviction and originality.

Ambiguity

Clarity of message is why it is important to decide on your business values and tone of voice. If your business adopts one persona on Monday and a completely different persona on Tuesday, your customers will be confused, and your words will cease to have impact. Mixed messages and conflicting tones of voice are warning signs that a business is still trying to figure out who they are. Make sure your business does not have an identity crisis, but speaks in a consistent manner, no matter what you decide that voice is. You are more likely to attract people to your business by establishing who you are than by trying to adopt personalities that are not your own.

Finding Your Business Voice

Establishing Guidelines

Well-defined brands have guides not only for the way they look, but for the way they sound and talk. The tone of voice may depend on the target audience. While professionalism should always be present, the tone of voice could be playful, irreverent, serene, uplifting, empathic or refined, just to name a few. The tone depends greatly on the guiding values of the company, who they are trying to reach and why.

Try creating a Communications Guide for tone of voice, the brand personality traits, and phrases to use and avoid. This guide may also list ways that your brand voice guidelines support your brand goals and values.

Finding Your Business Voice Takes Thought

These exercises require some introspection. Defining tone of voice may be a little easier for a solo entrepreneur, and may take a little more time, energy and discussion for a larger organization. Whatever that brand voice ends up being, it has to come from within you and your organization. People have an uncanny ability to sense when something is disingenuous. Your business voice and tone have to come from a place that is real and a company culture that already exists.

I hope this has given you a few things to think about — there are some additional resources to check out below.

Recommended Resources:
Finding Your Brand’s Voice by Harriet Cummings.
“Find Your Voice” by Libby Wagner.
“Create Your Brand & Find Your Voice” by Marie Farleo.