The current mobile experience

Up until recently, if you wanted to give your users a mobile experience, you had to build a separate mobile site. Not only can building and maintaining a separate mobile site be expensive and tough to maintain, it can also be an awkward experience, as the site is often structured differently than the “full” desktop version of the site. As mobile usage increases, people are beginning to expect richer website experiences on their mobile phones. Having to pinch and zoom sites just doesn’t produce a smooth browsing experience. If we want people to take time interacting with our sites, we’ve gotta find a way to give them a better mobile experience.

So what if you could have one site that serves up both desktop, mobile, and even tablet-optimized experiences?

Now you can. Enter responsive web design.

A new and improved mobile experience

Responsive design is a relatively new type of website design that is gaining a lot of steam, and becoming very popular. In a responsive design the site layout (and even content) is designed to change based on the size of the device it is being viewed on. A responsive website uses the same code for both mobile and desktop experiences, but includes additional styling that detects browser window sizes and alters the display accordingly. In fact, you can give it a try right now by resizing our site and checking out how the content layout changes as the browser window gets smaller.

Responsive design isn’t the answer for every site, but for a basic informational site, it can be a great way to go. It usually costs a little extra, since there is additional design, code, styling and testing to get it right. However, a responsive site is still significantly more cost efficient than creating and maintaining two separate sites.

A few samples

Want to see more responsive design in action? Check out a few of the sites below:

United Pixelworkers

Open Medical Device Research Library

The Brasserie Cayman

University of California, San Diego

To view even more responsive sites, you can check out Mediaqueri.es, a gallery showcasing dozens and dozens of responsive sites.

I was recently searching out a script face for a project, and was shocked with the quantity and quality of some of the free script fonts I was finding. I thought I’d compile a few of the beauties I stumbled upon and share them with you all:

Lavenderia

Lavenderia is a really graceful, swirling script face with an approachable personality. You can download Lavenderia for free (or a donation, if you choose) at the Lost Type website.

Euphoria

Euphoria is a friendly script face that mimics cursive handwriting with it’s partially connected, and partially disconnected lines. It is available in Opentype format and as a @font-face kit, and you can download Euphoria for free at FontSquirrel.

Arizonia

Arizonia is an energetic script, with slightly extended letterforms. It is also available in Opentype form and as a @font-face kit, and you can download Arizonia for free at the Font Squirrel website.

Kaushan

Kashan is a happy, gestural face, inspired by old-fashioned sign lettering. It is available in Opentype format and as a @font-face kit, and you can download Kaushan for free from Font Squirrel.

See for yourself

Take a look at the two pieces below. In the layout on the top, the elements are scattered across the card, resulting in very little white space, whereas the layout on the bottom groups content together and uses white space to emphasize that content. You’ll notice that the layout on the bottom is just plain easier to look at, as well as quicker to read. The fact that there are areas to rest your eyes makes the layout much less stressful than the the left layout that is devoid of white space.

Social media diffuses dependence on your website

Don’t get us wrong, it is still important to have a website in order to provide a consistent, branded experience for your prospects to learn about you. However, with the rise of Facebook, Twitter, Yelp, etc. over the past years, there are a lot more ways for customers and prospects to learn about and interact with your organization. Because social media has made it so easy to get in direct contact with organizations quickly, there is not as much need to provide an over-abundance of information on your website.

Users are in a hurry and don’t want excess information imposed on them—they just want to access the info they need, quickly and easily.

Mobile browsing demands refined content

There is a growing movement called “mobile first” that urges web designers and developers to use the brief, often urgent tendencies mobile web users have as a litmus test for site content. Simply put, they focus on refining site content to the most basic items needed by mobile users before choosing to add additional content. With the recent surge in responsive web design, it is now possible to create one website that works perfectly in a desktop browser and also a mobile browser. However, with this comes a need to refine content so that it is brief and to the point. Increased mobile browsing is propelling the trend of simpler websites forward, as there is simply no room for fluff when you consider mobile users’ needs.

So how are organizations simplifying their sites?

There are a lot of ways to simplify your site, and different steps are appropriate for different organizations. The best way to simplify your site is to revisit the content it currently holds and really consider if it is all completely necessary, or if it can be cut. This not a time to coddle pet projects, this is a time to be ruthless. Put yourself in your user’s shoes—does your user really need to real full-page bios about all of your staff, or would a paragraph do? Is your about page really offering value to your users, or could the most compelling pieces be merged with other content? Sites are also getting simpler in their physical format. People are choosing single-page sites over multi-page sites, drastically reducing menu options, ditching their drop-down navigation, using shorter bits of copy paired with meaningful graphics and many other techniques to help their users get to the point quicker.

A few examples from around the web

BarCamp Omaha chose a single-page site that gives the most basic of information.

Stonehenge Veterinary Hospital uses a simple navigation system to help their users jump to different places on their single-page site.

When your product is as simple as a book, who needs more than a simple, one-page site?

There are a host of reasons why drop-down navigation menus are on their way out the door. Here’s a few of the most prominent reasons:

Drop-downs conceal users’ options
By it’s very nature, a drop-down is designed to hide additional options until activated. Because things are hidden, it reduces a user’s ability to be able to scan the content. Once they decide to click on a menu item, they are often surprised that it triggers a drop-down, rather than the new page they were expecting. Consequently, this can be very frustrating for a user. Imagine you’re navigating a website: after having made a decision to click on a nav item, you’re anxiously awaiting to find the information you are looking for on the next page. However, instead of finding the information you’re searching for, you’re confronted with having to make another decision when a new menu drops down. This frustration is compounded when some sites add second or even third layers of drop-downs! Research shows that users “decide first, move second,” which means they make a decision, then act on it. Instantly throwing up a second decision to be made can cause users to lose confidence in their decision making, question themselves, and ultimately give up on navigating the site.

Drop-down menus are difficult to use
We’ve all experienced the irritation of trying to click on a drop-down menu item. Drop-down menus are often extremely sensitive to mouse-overs. This means, you’ve gotta be in the exact correct place to click on the menu item or else the drop-down quickly scurries away, and you’re faced with having to try again. This sensitivity is easily compounded, as drop-down navigation menus are notorious for acting different in different browsers. Although every site will differ slightly between browsers, it is especially tough to get all of the states of a drop-down to match properly across all browsers. The least user-friendly part of drop-down menus are that they are not as accessible for screen readers or users who have a low level of dexterity. Considering that over 25% of internet users have some sort of disability, accessibility is a very real fact to be considered.

Drop-down menus get in the way of browsing
Because of the sensitive, skittish nature of drop-down menus they often pop out when least expected. Often users “bump” the navigation when trying to get to other content, and the drop-downs fly out unexpectedly. This interrupts their flow of navigating the site and prohibits them from achieving what they are trying to do. Additionally, when a drop-down menu expands, it covers other content and obscures it from your user’s view.

In addition to these larger issues, there are several other peripheral issues posed by drop-down navigation:

• Drop-down navigation is not as SEO-friendly
• Drop-down menus are cumbersome to use on mobile devices (phones, tablets, etc.)
• Drop-down menus encourage navigation creep

How to avoid drop-down menus
So now that you’re sold on the perils of drop-down navigation, how do you restructure your site to avoid using them? There are two steps you can take to avoid the dreaded drop-down.

The first step is to have an honest-to-goodness, come-to-Jesus conversation about your website content. Is it all absolutely necessary for your users? Or is there a bunch of fluff content included to either pacify your internal team’s inability to really refine the content or give the impression that you have lots to say (if you think more content equals more credibility, think again). You need to work hard to refine your content down to only what is necessary to your users. Now that the internet has invaded every nook and cranny of our lives, user are actively looking for companies whose websites give them exactly the info they need (and nothing more) in a concise, no-nonsense way.

The second step is to implement a better way of navigating deeper sets of content. This can be done by using a category landing page. A category landing page enables you to give your user more information about their options, which helps them navigate smarter and make better (read: less frustrating) decisions.

Scout books chose to use a category landing page for their "Make your own" page, rather than having a user select their product type from a drop-down.

For more reading on this topic, check out these articles written by industry usability experts:

• Users decide first
• Drop-down menu disadvantages
• The problem with drop-down menus in website navigation

I’m working on redesigning my website with my designer, and we’re having trouble getting all of the elements to have a lot of emphasis. Why can’t we get everything in the design to be large and bold?

This is definitely a challenge for just about every business owner–and designer–on the planet. When designing a website (or even a brochure or flyer), there always seems to be a surplus of information to convey to your prospect, yet a shortage of actual page real estate to display it on.

Newton’s Law applied to design

When working to design a website page with my clients, I’m often reminded of Newton’s Law that for every action, there is an opposite, equal reaction. Newton may have been referring to science when he discovered this law, but the concept applies to design as well. If we choose to make something larger or bolder in a layout, often a different element needs to be reduced in size or emphasis in order to make room for that enlargement.

The best-kept design secret

Well, we’re here to let you in on a little secret—the key to creating a website that communicates well is carefully refining the information, rather than trying to make all of it large and bold. If you start running into problems fitting everything in, that is probably a good indication that you might be trying to do too much on one page.

One of the first principles of design is to establish hierarchy. Hierarchy enables a reader to quickly scan a page in search of the information they need. When you try to fit too much information into a piece, it often destroys any hierarchy and causes all of the information to blur together, making it tough for a reader to digest.

So if you find yourself having trouble getting all of your content to fit into your page layout while still reading clearly, consider taking a few steps back and investigating whether there is anything you can refine from the message to make it crisper and clearer for your reader.

If you are paying any attention to what’s happening in the marketing world, you’ve probably heard the word ‘branding’ a lot lately. But not many people understand what branding really is and the value it brings to your company.

A brand is not a logo.

A lot of people think their brand is the same thing as their logo or their corporate colors. While these are foundational elements to your brand, it is much more than the sum of those items.

So what is a brand?

The simplest way to describe a brand is that it is the soul of your company. A company with a strong brand radiates their values and purpose through everything they do. Their customers see those values and associate them with your company. A strong brand should seep into every crevice of your business—from the design of your logo, the experience of your print collateral, packaging or website and the technique of your photography to the style of your copy, the tone of your customer service interactions and the atmosphere in your physical space. A strong brand is an all-emcompassing, holistic experience for your customer.

What happens if my brand isn’t strong?

A strong brand is easily identifiable by your customers and infuses meaning into their lives. Customers become loyal to brands that offer them true value, and they are willing to pay a premium for them. If your brand is weak, you’re probably sending mixed signals to your customers, confusing them about who you really are, what you offer them, and why they should care about you or show loyalty toward you.

There is a scene from Breakfast at Tiffany’s that always reminds me of how a conversation between a weak brand and a consumer might go. It is ripe with confusion—they have their own impression of you, but it isn’t what you hope that they think of you.

If you haven’t seen Breakfast at Tiffany’s, let me give you a quick recap. A young woman named Holly is living it up in New York City when she encounters a new neighbor in her building. Although the man’s name is Paul Varjack, Holly insists on calling him ‘Fred’ because he bears a striking resemblance to her brother with the same name. Although Holly and Paul share many adventures, she continues to introduce him to all her friends and colleagues as ‘Fred.’ The following conversation takes place between Paul and Holly’s former agent when Paul calls the agent to enlist his help in freeing Holly from jail. The call goes something like this:

Paul: “Hello, this is Paul Varjack.”
Agent: “Who?”
Paul: “It’s Paul Varjack. V-A-R-J-A-C-K.”
Agent: “Who?”
Paul: “Paul Varjack. V-A-R…. it’s Fred!”
Agent: “Oh hey there, Fred, how are you doing?”

This conversation is a great example of the confusion that comes when a brand tries to interact with a customer who doesn’t understand who they are. As a company, it is important to take a strong, authentic stance on your values. Then, listen to your customers and stay true to the value they find in you.

Why is consistency important to the visual design of my brand?

Branding expert Marty Neumeier explains in his book that a brand is not what you say it is, but that it is what your customer says it is. This means it is incredibly important that you are transmitting the values you want your customers to associate with your company. Once your customers start understanding what your company is really all about, it is important to continue to maintain that impression. This is where consistency comes in.

It is important to unify the entire customer experience so that it aligns with the company’s values and mission. Your should do this not only for your visual design, but also at every customer touchpoint from the design of your retail or office space, all the way to how you treat your customers.

President Obama’s 2008 campaign branding is a great example of this consistency in action. Obama had a unique platform based on bringing change to our nation. To visually illustrate this concept, his marketing team worked to create a logo and overall visual look that was a radically departure from what most presidential campaign logos look like. To take it even further, President Obama’s team demonstrated his mission in dozens of other ways, including the candid interactivity of his online presence, which attracted youthful, change-hungry supporters who rallied for him. Obama’s marketing team took the core of his campaign and consistently reinforced it through every single touchpoint. Because of this, his mission occupied a distinct place in citizens’ minds and drew like-minded supporters to him like a moth to a flame.

No matter how small your organization is, you can achieve similar effects with your clientele by consistently reinforcing your brand through every opportunity you have—including every piece of visual design. This consistency helps develop brand recognition and fosters your customer’s trust in your company. Over time, they come to know exactly what they’ll get when they choose to work with you, and this reliable experience is what builds the loyalty that keeps them coming back over and over again.

I’m working with my designer on a brochure design, but she told me she can’t use the images that are on my website. Why can’t you just grab images off my website to use in the brochure design?

To answer your question, let’s break down how photographic images are created. All photographic images (this includes all website images) are created from hundreds of pixels. These pixels are so incredibly small that they are invisible to the naked eye when you are viewing an image at full size. However, if you were to zoom in very closely on a digital image you could see each pixel and how each one’s color slowly shifts to provide optical illusions of smooth color transitions that make up your photo.

What’s the difference between a web image and print image?

Web images are created in 72dpi because screens are created to view at this resolution. Printed images are traditionally created in 300dpi. When a print designer is asked to take an image from a website, it must be scaled up from 72dpi to 300dpi. Basically, this means each pixel will need to be enlarged to about three times its original size.

Why can’t you enlarge my website images?

Enlarging a pixel creates an effect called “pixelization.” Pixelation happens because the pixels that make up the image have been enlarged so much that you can start to see them individually, which breaks down the smooth optical illusion. At this point, the information in the image has been stretched to such a degree that there are now gaps, and no amount of “photoshopping” can supplement this lost information. Because the pixels are now oversized, pixelated images will appear blurry in print and create a sloppy, unprofessional image.

How can I provide better images to my designer?

If you are are involved in the design of printed pieces, it is a good practice to make sure you always keep a copy of the original, high resolution image files on your hard drive or backed up externally. By doing this, you’d be able to provide high resolution images quickly and easily whenever your designer needs them.