Keepin’ it 200 (OK)

Category Archives: Design

Keepin’ it 200 (OK)

WordCamp Fayetteville #wcfay, a gathering of WordPress enthusiasts is being held June 22-24, 2018 in Fayetteville, Arkansas. Being loyal WordPress fans ourselves, it only makes sense that Sharp Hue is a Proud Sponsor of WordCamp Fayetteville 2018.  

Since the Sharp Hue team will be in attendance at the conference, we tasked ourselves to create a shirt for the occasion that celebrates our unique brand. So, we went straight to the drawing board to sketch out a few possibilities.

Our process starts on paper

Putting pen to paper is the best way to jumpstart the brain and get ideas flowing freely. We wanted a design that our team members could wear proudly, while not resorting to the overdone designs like putting software code on a shirt. While that’s something designers and developers would understand, we didn’t want to create something so niche that people outside of our circles would be lost. We needed something that everyone could enjoy while also channeling our inner geek!

Our original sketches (four concepts shown above) ranged from baking cakes to a Rubik’s cube. Now, while walking around wearing a shirt with a cake on it would’ve been a great fashion statement, everyone really liked the idea of playing off the “100” emoji 💯 and its related hashtag #KeepIt100.  And so…

#KeepIt200 was born!

If you’re wondering by now why we’re Keepin’ it 200 OK, that’s because 200 OK is a status code used by web browsers that means “The request has succeeded”. The hacker looking graphic below provides some insight into that page loading process.  While most people have come across a 404 Page Not Found, very few realize that 200 OK is a status.  In fact, there are dozens of status codes if you want to check them out here:  HTTP Status Codes.

From paper to digital concepts

Now that we had a solid concept,  then came the question, “how could we incorporate our own personal twist?” So, we made several variations and plentiful design revisions. During these revisions, we determined it would make sense to have a t-shirt color that matched to a color or two on our logo for the sake of brand consistency.  We decided on using two colors so we could keep the shirts within our project budget.  You may have noticed the Sharp Hue logo is quite colorful which can mean more cost in screen printing projects.  We had our shirts inked with a company called real thread that has a really simple online ordering interface coupled with a great customer service team that takes care of you along the way.

Finding opportunity in every concept

$1M dollar, original, one of a kind prototype.

All said and done, the t-shirt concept that the team loved the most was a badge-style emblem that marries the idea of #KeepIt200 with being proud of our company’s history. See bottom right of the photo above.

We are always a little sad when a design isn’t used, however, we also love stickers!  While “Keepin’ it 200 OK Since 2006” is great for a Sharp Hue team member to wear, we decided that the “Keep It 200 OK” emoji style emblem was a great way for others to champion our brand.

After some tweaking and including the sharphue.com domain name,  Kevin Bourne, our newest team member who worked on this project, was personally rewarded with the $1 million dollar paper prototype! We had the stickers printed with Sticker Giant which was very easy.

So, what does #KeepIt200 mean to the team at Sharp Hue?

While the t-shirt and sticker were really fun projects to work on, there are some deeper meanings to how #KeepIt200 connects with the Sharp Hue brand.

  • We always give our best to whatever problem we’re solving or project we endeavor.
  • We think through all the angles and double check to make sure we’ve thought of everything.
  • We really love things that are high-quality, built-to-last, and pay respect to our craft.
  • Because 200 OK means the website loaded successfully, we feel this strongly represents everything we do behind the scenes at Sharp Hue to create Beautiful Websites That Work®

What is A/B Testing?

A/B testing, also known as split testing, is a way to compare variations of the size, color and arrangement of your web pages’ elements in order to let you know which version provides optimum conversion. Split testing can let you know which changes increase conversion rates, unique visits, lead captures, signups and other calls-to-action.

A/B testing can reveal the truth about your design assumptions and alert you to interpretations you didn’t anticipate.

Where do you start?

When you perform A/B tests on your site you will want to keep your goals clear and in order. Ask yourself, “What do I want my visitors to do when they visit my site?”  Once you’ve answered that question, consider all of the basic page elements you have at your disposal that will facilitate that goal: your logo, action buttons, heading text, input forms, informational text, photography, and navigation items.  Create a design that arranges these elements according to what you think will best encourage fulfillment of your goals. Put your best foot forward and start your tests.  If you use a platform like Google Analytics Content Experiments to perform your A/B tests and have steady traffic to your site, the results should start to favor A or B within a couple of days.

What do I look for with my test?

A/B testing is not simply about identifying which page performs best.  It is about identifying why a particular page performs the way it does. The former tells you what’s popular. The latter tells you what your visitor wants and needs.  That’s the most important part.  Otherwise, you’re still guessing why your visitors took one path over another.

It is important to remember that when you test multiple changes simultaneously it can be difficult to determine why exactly a particular version was successful or unsuccessful. For instance, if you make a version where you move the logo and change the text in the same variation, then you have no way of knowing if the key factor was the position of the logo or the new text. The most valuable tests are ones that give you information on what your users prefer not just which version wins. One of the great things about optimizing your web site is that you can’t lose if you do your tests methodically. Each new test will give you the answer you need and eventually you will end up with a version that is better than the one before.

What else can I do?

Consider using a heat map tool like CrazyEgg to enhance your understanding of which parts of your site visitors expect to be clickable. Traditional analytics software like Google Analytics can tell you which pages are getting attention relative to other pages on the site; but they can’t tell you how far down your visitors scroll, which images and headlines they expect to be clickable or whether they ever saw your call-to-action button.

Optimizely is a popular tool used for A/B testing. It is a code generator that allows you to create variations of your website by inserting a snippet of code into the head of your pages to be tested. The code is generated through an online editor that lets you resize, move, hide, edit your HTML and more.  Unbounce is another A/B testing tool, but, unlike Optimizely, Unbounce includes landing page templates, lead capture forms, email lead notifications, Facebook “like” conversion tracking and even mobile landing page templates.

Conclusion

A/B testing can be a very useful process to help you optimize elements on your site that will lead to higher conversion.  Sometimes a particular design choice versus its outcome is not intuitive. You don’t always have to take the recommendation of an A/B test if you feel it may compromise your brand or messaging.  Use A/B tests to help you validate design assumptions and produce the best business result for your web site.

Going Mobile-Friendly

In 2011, mobile access to the web doubled to over 8%. In many of these cases, the site visited from a mobile device is the exact same site displayed on a laptop or desktop computer. Just because it can be seen, however, doesn’t mean it can be used. Most full sites viewed on a mobile device require you to pinch, flick, double-tap, or drag in order to access their content. You need both hands for these gestures: one to hold the device and the other to perform the action. A mobile-friendly site, however, eliminates this barrier and makes accessing essential information as simple as a single touch with one hand.

By displaying only essential information such as hours of operation; directions and location; contact information; service offerings; deals and promotions; and basic “about” information, mobile-friendly versions make it easy to identify critical information without the need to navigate a full site. Trimming down information from a full site for a mobile device and making it “touchable” rather than “pinchable” is one of the most significant advantages of a mobile-friendly site.

Awareness of these differences is important when considering the development of a mobile-friendly version. Jumping in headfirst, however, is not advisable. There are guidelines and considerations for going mobile-friendly. A substantial increase in capabilities is not necessary to create a custom, friendly version if your site traffic is minimal. More specifically, we at Sharp Hue use the metric that if 20% of a site’s traffic (as reported by Google Analytics) is mobile, then it’s probably time to put the design of a mobile-friendly site on the to-do list.

Bikes Blues And BBQ-mobileWordPress is one platform that simplifies the process for displaying a full site on a mobile device. Plugins such as the WordPress Mobile Pack, for example, will automatically rescale a site’s images, split articles into multiple pages, simplify styles and remove non-supported media. Plugins such as this enable these capabilities quickly. However, they are usually not customized or visually appealing. They don’t necessarily use the color palette from your full site and they don’t necessarily display the logo you’ve invested so many resources in creating. Further, plugins like this don’t necessarily make the mobile version of your site easier to use.

In addition to these pre-packaged plugins that can do most of the heavy-lifting, there are also mobile frameworks available, like jQuery mobile, that allow for custom, rapid development without the extensive resources necessary to build a full-fledged mobile application. Frameworks such as this make it easy to maintain a site’s color palette and logo. They also make it very easy to manage content from within the Dashboard if WordPress is used as the site’s platform. Using this technique allows changes to be made to two different sites with only one edit. This sounds elementary, but managing mobile content is a development consideration many people disregard. Developing mobile-friendly sites should always include thoughts about maintaining the mobile version in the long run.

Another consideration in developing a mobile-friendly site is redirection; i.e., how a site’s visitors will navigate to it. Generally speaking, when a URL is typed into a mobile browser’s address bar, a request for information is sent out. A browser can recognize that the request is coming from a mobile device and, in those cases, sends back a specified message. The message can be a command to redirect to another site like an “m.domainname.com” site, for example. The message can also be a serving of different content or even a stylesheet change.

WordCamp Fayetteville 2012-mobilePlugins can take care of this return “message” for you as well. We’ve found that Mobile ESP for WordPress is best suited for our needs. Many times, plugins like this are sufficient to do the job. It all depends on the needs of your mobile version. Sometimes you just need something that isn’t worth a developer/designer’s time to miniaturize a full website. Other times, a smaller, limited version of a site is needed, especially if the site owner wants to maintain their color palette and display their logo. In still other cases, the theme being used isn’t compatible with any of the available mobile plugins. In the case of WordCamp Fayetteville, which is yet another example, the full site is built on a multi-site platform administered by super-admins who work for WordCamp Central. Plugin compatibility isn’t an issue. It’s not even an option. The theme and administrative privileges of WordCamp sites don’t allow for the installation of plugins. It’s in cases like these that it’s time to create a custom, mobile-friendly site from scratch.

White Space Makes Everything Better

White space in web design is not the absence of an element. It is its own element and has its own properties and functions.  It is also a fundamental and necessary consideration that is often overlooked by web designers and developers when creating sites for their client’s customers.

It is well-known that web users scan web pages. They don’t read. This means that, as a designer, the amount of screen real estate you allocate to content must be concise, purposeful, and obvious.  You have to say what you want to say quickly, efficiently and in a manner that anticipates a visitor’s questions well ahead of time.

At first glance, this sounds like a navigation issue. Ensure you have necessary information appropriately arranged and easy to discover, right?  Right.  However, it is white space that drives this initial discovery and allows visitors to find the information they want easily. It does this in at least three distinct ways:

Readability

White space improves readability by adding space around blocks of text, between words and even within words. The font type and size you select matters not only stylistically, but also in terms of readability; and some font families are naturally more readable than others.   The goal of using white space for readability is to increase comprehension and subconscious appeal by making the job of reading seem easier to the reader.

Breathing Room

White space provides a feeling of fresh air, comfort, and relaxation. When a site is constructed with only essential elements, visitors are allowed more pause to reflect on the message of the site and more time for deeper comprehension. Sites that have too much information on a single page or crammed together too closely create feelings of suffocation, information overload, and distrust. This distrust can carry into the psychology of the visitor who is seeking your business goods or services.  Visitors may imply that if you’re not organized on your site that you are not organized enough for a business relationship.

Qrme.co.kuAn example of overload is http://www.qrme.co.uk/. When you first land on this site, you see ten pages in the top nav, one of which has twenty child pages.  There are also ads, randomly placed images, a login feature, a visitor counter widget, a slider linking to an online store, and more. Although the background is a very light shade of gray, and although there is, technically, lots of white space on the site, there is very little space between the elements. Fonts have been reduced to fit more content on the page and graphics with varying widths dominate the middle of the page.

Attention & Focus

With fewer elements on a page, there are fewer opportunities for distraction; fewer competing messages; and fewer options for action.  With a skillful use of white space, your visitors can concentrate on one thing at a time and take their time absorbing the carefully selected information you decided to include on your page.  The challenge with fewer elements is that every decision you make becomes a strategic one.  Allocating screen real estate for white space forces you to economize the remainder of your available space. It forces you to be thorough, quick and effective with your message.  It forces solid copywriting.

We’re Only Human After All

A sponge can only hold a limited amount of liquid before it starts to leak. Likewise, there is a limit to the amount of information a human brain can process in a given time period before it reaches a saturation point; before it simply can’t learn anything new.  If you’ve ever gotten burned out at a conference or reached that point when you’re “done”, then you know the feeling.  An effective use of white space understands the limit of this capacity and reduces your visitor’s cognitive load by dividing page elements into easily digestible chunks.

In other words, it’s easier to remember stuff if there is less stuff to remember.  “But what about…?  We’ve got to have that somewhere!”  Do you? Do you really?  If you ride that necessity out to its inevitable conclusion, you’ll see that a site is never complete.  There is always something more that could be said; and that’s okay. That’s what contact forms are for. Just be sure to answer those emails in a timely fashion.

In Conclusion …

White space, when used thoughtfully and with patient deliberation, creates a sense of natural balance and a sense of emotion. Visitors who are engaged on more than only pragmatic levels use a site more often; stay around a little longer; read more than scan; remember your message and have a better chance of clicking your action button.

Heat Maps Increase Website Usability Analysis

How far down do your website visitors scroll? Which images and headlines do they expect to be clickable?  Where is the best place to insert a photo or button?

Heat maps are visual representations of the relative popularity of your website’s elements; and they can answer these and other non-intuitive questions.  As a small business owner or non-profit organization, you need to know where your website visitors are getting frustrated. You need to see the elements that are causing your visitors to hit the back button and you need to know where your visitors are clicking.

Web analytics software like Google Analytics can tell you how your visitors found your site; which pages of your site are most popular; how long your visitors spent on your site; where your visitors are geographically located in the world and more.

Although most web analytics software can give you the “numbers”, they cannot tell you which parts of your site visitors expect to be clickable. They cannot tell you exactly how far down a page your visitors scroll. Without this information, you don’t know whether your visitors ever saw your call to action; whether they value one image over another; or whether a specific field in a form is the culprit for that page’s peculiar bounce rate.

Heat map tracking software, like CrazyEgg.com, enhances your existing analytics by filling in these gaps and providing precisely this kind of information.

Let’s review a snapshot of the homepage for My Diamond Obsession as an example.  The most frequently clicked elements of the page are colored in yellow and the least clicked elements are colored in blue.

There are several areas of this page that are completely untouched. Two “Buzz” posts, two “Most Obsessed” products, and one of the products in the featured slider don’t have a single click.  Instead, the hottest spots are the arrows showing additional product, other product, and the RSS button.  This suggests visitors want to know about future additions, but don’t necessarily like what they see on the homepage in this instance of time.  This should be a clue to add different content to the homepage.

Heatmap Selling to the Masses, Monday, February 27, 2012Let’s take a look at another example: Selling to the Masses.

In this graphic you can see that one of the “hottest” areas is the play button for the video.  This is as it should be.  The site owners invested a substantial amount of resources to produce the video and should be one of, if not the most, frequently clicked elements.  You can see that “The Mentors” and “The Classroom” links in the main navigation are popular as well. Careful review of this map shows a series of blue spots along the right vertical. What are these? What does this pattern indicate? One possibility is that these are attempts to exit the modal or “pop-up” that appears when the video is played. This is something to consider in an evaluation of this site’s usability. While heat map software provides rich, visual insight, it is important to examine the anomalies of the software’s resulting graphic.

A more significant point of interest, however, is that the “Browse Mentors” link all the way down at the bottom of the page in the footer is highly popular compared with other links on the page. Notice that the central area showing photographs of featured mentors shows very little activity. Some of the photographs are completely untouched. This site’s visitors are more interested in browsing mentors than they are in looking at the details of the featured mentors. This should trigger a repositioning of the browse link to a higher, more prominent area of the homepage.

Heat maps alone do not provide all of the data that other analytical software does. Heat map software can, however, increase conversion and add value to your web analytics by:

  • answering design questions you may not have thought to be relevant
  • revealing poorly performing areas like specific fields in a form
  • identifying usability issues that might have been missed
  • suggesting refinements to your site’s information architecture
  • highlighting areas commonly mistaken for links or other clickable elements

This kind of information allows you to keep the things your visitors like and change the things they don’t. It reveals an entirely different view of your website’s usability and helps you keep your most desirable content intuitively accessible for your visitors. Another advantage of heat maps is that they are visual and, as such, they are well suited for presenting raw data to non-technical audiences. They also help cement the position and organization of the elements of your site that work; and they can help you ensure that that the content on your page is relevant, easy to use and valuable.

#10: Keep your site fresh

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…

 

The best websites are like living things. Your visitors come to see what’s new, to interact with your company, to learn, and to enjoy.

 

Getting this effect takes time and effort. If web design, web content, and web marketing aren’t your areas of expertise, it can be a struggle. Yet it’s essential. Your web site is an investment. Failing to keep it fresh limits your return on that investment. An out of date site creates the impression that your business is also out of date. It’s the same as having a ramshackle building with peeling paint. It affects your visitors’ impression of your business.

 

Plan when you design your site for the ways you’ll want to refresh your web site. Your web professional can help you explore the options and make the best plan for your circumstances.

 

Managing a small business and keeping up with your web site can be cumbersome. But it’s worth doing. If you don’t have the time to do it yourself, or prefer not to divert staff from essential tasks, engage a professional to keep up with your web site.

#6: Create a Call to Action

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…

Even with fast web hosting and a search engine optimized site, your visitors’ experience has to be easy. Since your web site is connected with a business, you’ll have more to offer your customers than just the information and enjoyment they find on your homepage. Make sure you drive them all the way through the sales pipeline by creating text and buttons that make their next step clear.Spend some time thinking about, and perhaps researching, the optimal user journey for your customers. Identify the decision points along the way and plan to give your visitors clear guidelines every time they need guidance. When your customers want to buy, subscribe, or otherwise take their next step with you, make sure it’s easy for them to do so.

Don’t think you’re being too aggressive by providing those clear guideposts. In fact, you’re helping your customers. They’re wondering how they can get the great goods or services you provide, and you’re making it easy for them.“Buy Now”, “Sign up”, “Schedule an appointment.” Phrases like these, linked clearly to the pages that let your customers take those steps, keep your visitors traveling smoothly along the path to a satisfying transaction.Contact Sharp Hue and we’ll give you a free analysis of your web site’s usability. Check back soon for tip #7: Understand your traffic

#2: Create a Visually Appealing Home Page

…part of the “Ten Ways to Maximize Your Small Business Website’s Performance” series…

When people first access your web site, whether it be from a search engine or by typing the web address in from your business card, they should land on a home page that represents exactly what you do. They should know immediately what you have to offer, and how they can get what you’re offering. Your unique selling point and the visitor’s next action step should both be visible within the first few seconds of opening your home page.That’s not enough, though. When your visitors get the message immediately, but it feels like an ad, they’re likely to click away. When they grasp the information but feel no connection with the site and no desire to deepen their relationship with your company, you lose them.Your visitors have to get your message, but they should also say “Wow,” and feel moved to click deeper into the site to learn more. People stay longer and explore further at a web site that is a pleasure to look at, that sparks curiosity, that engages them.Take the time to develop a home page that gets this response, and your web site will be a valuable member of your sales force.Contact Sharp Hue to have us create your website with “Wow”. Check back on Thursday, May 7, 2009 for tip #3: Make navigation easy

Using Image Size in Adobe Photoshop CS3

Images often need to be resized, and the Transform option may seem like the best tool for this. However, images can easily be ruined due to stretching. The Transform option isn’t the best option when working with images because it doesn’t maintain any image resolution and it doesn’t constrain proportions.

It is quite easy to resize images using the “Image Size” tool that is located under the image menu.

Open the photo you wish to resize.

Click on the Image menu and a menu will drop down that includes the “Image Size” option.

Click on “Image Size” and an option box will appear on the screen.

Before making any changes to the photo make sure the “constrain proportions” and “scale styles” are selected. This will ensure that the image is not distorted. Also make sure that the resolution stays the same while you are typing in numbers.

The photo was brought in at 503×604 pixels and it needs to be a width of 300.Change the width number to 300. If the “constrain proportions” and “scale styles” options are selected, Adobe Photoshop will mathematically change the height number to a correct proportion. In this case, 360 is the number that was given.

Click “okay.”

The image will resize with the proportions and resolution intact.

This tool is one of the easiest to use in Photoshop CS3 and it helps your images look clear and keep their desired appearance.

If you need to increase the image size, you’ll want to make sure the resolution doesn’t diminish. You can easily increase the image size by typing in the resolution that you desire and Photoshop will match the resolution with the size that will work. Never increase the size more than once because the pixels might get blurred and create “noise” within the image.

The re-sample option below “constrain proportions” and “scale styles” allows you to specify how you want your image to be resized. These options include “Nearest Neighbor,” “Bilinear,” “Bicubic,” “Bicubic Smoother,” and “Bicubic Sharper.” Here’s an idea of what these options do and when to use them:

“Nearest Neighbor”: Produces a smaller image file but also a lower image quality, used mainly for illustrations. Resizes by replicating pixels.

“Bilinear”: This option produces medium quality results and resizes by adding pixels that match the surrounding pixels’ colors.

“Bicubic”: This option produces a higher quality result because it uses precise calculations to determine what values are being used within the image. Because this is more precise and higher quality, it takes a little bit more time.“Bicubic Smoother”: This option gives the smoothest results when enlarging images.“Bicubic Sharper”: This option is best used when you’re reducing your image and you want to maintain detail. It re-samples your image and at the same time sharpens your image.

Using Live Trace in Adobe Illustrator CS3

Adobe Illustrator CS3 includes a tool called “Live Trace” that turns pixels into a vector. A vector can be scaled up or down and it will not lose its quality, so this is a better choice for designs that may be used in a number of different contexts, such as a business logo.

Live Trace is the easiest way to convert a photo or piece of art into a vector, and using the tool’s options will give you a controlled and personalized rendering. Give yourself time to explore all the options, and you’ll find that you have lots of creative new ideas, as well as the technical benefits.

To try out Live Trace, first bring a photo into Adobe Illustrator Cs3. In this case, we’re using a photo of a flower.

When you click on the photo with the selection tool you will notice the Live Trace feature at the top of your screen. To get an idea of what the Live Trace feature does, click on it. As you can see, the result is unclear and doesn’t resemble the original photo. Live Trace will always put out a black and white rendering unless you use the options palette.

Let’s take the photo back to its original state. A shortcut to undo the Live Trace is “control + Z (PC)or Apple + Z (Macs)

Once the photo is in its original state, click on it again with the selection tool. Next to the Live Trace button there is a small drop down arrow. To keep the image photo-like, try modes such as “color 6,” “color 16,” or “photo low fidelity” and “photo high fidelity.” Those options will try to render the graphic in a photo-like fashion.

The “photo high fidelity” option was used to create our flower vector.

But what if you want your flower to look like an illustration?

Within the option bar there are more choices. The very last of the choices is “Tracing Options.” Return your photo to its original state, click on it with the selection tool and click on “Tracing Options.”

A box will pop up with numerous options for you to choose from. Now’s the time to start playing with the different effects! Check the Preview box on the right side so you can see what changes you’re making to your photograph. Play with the different possibilities to see what best suits your taste.

To get the vector flower as shown below, we used the color mode with the number of colors set at 5.

The possibilities are endless with Live Trace. Try the other options and see what cool renderings you can come up with.