GMT NewYork London Moscow Tokyo Sydney

Sep

21

2016

Scrolljacking: The Good, The Bad, and The Ugly

maxresdefault-23-391938-edited.jpgIn its simplest terms, scrolljacking is the web industry term for repurposing the scroll wheel/motion for something other than the expected advancing up or down the page. Though some may have a more specific definition, this is the one we’re going to work with in describing unexpected behavior triggered from scrolling.

There are several ways developers have scroll jacked different sites at varying levels of “jackedness,” if you will. Doing a quick Google search, you can find plenty of strong opinions on scrolljacking, most of which reveal vehement opposition.

In this post, I will explain and critique a few different scrolljacking techniques and give my thoughts on how and when this can be a positive experience.

Technique 0: Parallax

Probably the most common example of scrolljacking these days is a parallax background — when a background image moves at a different speed than the rest of the content on the page, creating an interesting layered effect. This is a very minor example of scrolljacking, though it does use the scroll to manipulate the page in a way that is not consistent with what users expect from a scroll wheel.

I’ve decided to make this “Technique 0” because at this point, though it is falling out of favor, most users don’t bat an eye at seeing parallax backgrounds. Of course any element can have the parallax effect applied to it, though backgrounds are the most common.

Technique 1: The Full Jack

Some sites feature elements that are essentially slides which take over the full browser area and use the scroll wheel to advance or rewind. Some examples of this technique can be found at Apple, Huge Inc, and Yapstone.

These are pretty easy to get used to, though this can be frustrating for a user who may want to jump around the content or quickly scan the whole page. These are sections that demand your attention the same way a pop-up does. You are not able to continue to the rest of the page until you get past the scroll-jacking section. Pop-ups are universally hated, so why should scrolljacking sections be viewed differently?

Technique 2: The Slight Jack

Some sites still show the expected scrolling of text with a background image that becomes fixed and perhaps changes to a different background image at a certain point. It eventually either becomes relative again and scrolls up the page or gets covered by content below the particular section. This would be a pretty low level of scroll “jackedness,” and perhaps the least offensive. A couple examples of this technique can be found at The New York Times and Grammarly.

Technique 3: The Fading Jack

A third variation can be found at dstillery. This technique utilizes both fixed background and foreground elements, and then uses scroll position to fade through text and imagery.

This is the least intuitive example for the end user. It is easy to get to a point where you can use the scroll wheel a bit and nothing will change because you have passed one trigger but have not yet hit another. Issues like this can make it seem like the site is broken by not responding to your scroll.

So What’s the Big Jacking Deal?

Scrolljacking alters the fundamental truth users have come to expect from using their scroll wheel. Think of it like renting a car and then when some a-hole cuts you off on the freeway, you go to honk your horn but instead you get a spray of washer fluid and the wipers start wiping at full blast.

OK, so scroll jacking certainly doesn’t create dangerous situations, but still, it goes against everything a user has learned to expect from their previous experiences with scrolling, both on the web and in most applications.

How Can Designers/Developers Practice Responsible Scrolljacking?

Probably my favorite example of scrolljacking, which I would call a slight variation to Technique 2 comes from Melanie Daveid. This is an example of half of the screen starting as relative, becoming fixed for a certain duration, and then becoming relative again.

Only half the screen gets jacked at a time, so you always see the continuity of the page scroll. We’ll call this technique “The Half Slight Jack.” Then she’s got the cherry on top at the bottom of her page with her scroll event animation.

In my opinion Melanie Daveid has it right on, and Technique 2 is pretty good as well. When it comes to scrolljacking, as long as something on the page is still moving in an expected way, the user is getting that motion and a good deal of the control they expect.

It can be used as an interesting and interactive way to tell a story without the use of a slider or accordion, which, by the way, can be used against you when it comes to SEO.

Though scrolljacking has many opponents, I don’t see it going away anytime soon. I’m going to guess it will become more prevalent throughout the web and that UX designers will continue to come up with new ways to scrolljack, many of which will continue to get serious opposition from the web community.

Growth Driven Design eBook: Reboot Your Website Into a Lead Generation Machine

Aug

28

2015

10 Tips That Can Drastically Improve Your Website’s User Experience

In today’s changing marketing landscape, your website has become a more powerful tool than ever. As a 24/7 salesman, your website has the potential to be your most powerful asset and the centerpiece of your marketing efforts.

However, rapidly changing technology can make your website feel old and outdated. While sometimes a redesign might be ideal, you may not have the time or money to invest in such a large project. If you’re one of the folks that falls into this boat, we have put together a list of 10 simple ways you can improve your website to make it more helpful and useful. 

1) Use White Space

On more than one occasion I have heard clients complain that there was too much white space on their site and that this unused real estate ought to be used for advertising more of their services. However, white space is essential to good design. White space makes your content more legible while also enabling the user to focus on the elements surrounding the text.

According to Crazy Egg, white space around text and titles increases user attention by 20%. White space can also make your website feel open, fresh and modern and if your branding is consistent with these then it can help you communicate that feeling to the user. One downside of white space to keep in mind, however, is that it does indeed take up space.

If you’re trying to get a lot of content above the fold (above the part that is immediately visible without scrolling) having too much white space might be replacing some valuable information. The key is to find the balance between what is most important to communicate at the top and surround that with some space to highlight the image and/or text.

A great example of effective white space usage is http://www.sessionm.com/. In this example the white space surrounding the title “One Platform. Many Applications” allows the reader to focus his attention on the meaning of the phrase and the screenshot, and the supporting paragraph helps the reader feel a sense of openness and clarity.

1-12) Page Speed

One of the most frustrating experiences for users of the web is waiting for a page to load for too long. With the rise of the mobile devices, people are accessing content all over the world on many different platforms. While browsing online at Starbucks or while watching TV on their laptop, they expect a fast result for the content that they want.

When they don’t get it, they usually bounce. Slow page load is an interrupting experience for the user and it can be a source of frustration and often users simply don’t have the time to wait. Need some proof? A 2-second delay in load time during a visit results in abandonment rates of up to 87%. 

So where do you go from here? Get your score. Google offers a free service where you can get information on your page speed. Google will also offer you some suggestions for improving your load time on Mobile and Desktop.

A great example of speedy load is Barnes and Nobles. No matter what device your own Barnes and Nobles loads quickly. Taking the extra caution to load some important elements first so that you know that the content is on its way. Try it yourself http://www.barnesandnoble.com/.

3) Use Attractive Calls to Action

Your customers are already accustomed to following visual cues to determine which content is important to them. Calls to actions that are clearly marked with an action word enable your user to more easily navigate your site and get to where they want.

In creating buttons for your website you should think about color and the psychology of color. In a study done by Maxymiser, researchers are shocked to find that hey achieved an increase of 11% in clicks to the checkout area of the Laura Ashley website, by testing color variations and action messaging. Different colors evoke different messages. Think about the message that you want to evoke for a user (trust, experience, intelligence) and choose your colors wisely.

A second thing to consider is the actual words you use for your buttons. The words should include a verb or an action word that excite the user to do SOMETHING. Choosing the right words or psychological triggers is highly determined by the level of emotional identification that word prompts. No emotional connection means no action. So make your words bold, time sensitive and action-oriented. 

A great example of the good use of calls to action is WUFOO. Their entire page is action oriented and uses buttons to encourage the user to go to the next step. At the end of the page you’ll also see the use of time sensitive language like “Sign Up Now” and action oriented language like GET STARTED. These are active action words that prompt and guide the user.

2

4) Use Hyperlink Differentiation

When you add a link to any page you are saying you want the user to click there. Make sure links are easily identifiable by visual cues. Underlined text and different colored text, draws the attention of the reader and lets him know that this is a link.

In a study done by Karyn Graves, she shows that the regular web user sees blue-and-underlined text as links and knows to click on them. Exploiting user expectations and what they already know about using the web is tantamount to success. When it comes to hyperlink differentiation you do not need to reinvent the wheel. Sticking to convention can be your best ally here. A simple way to test how effective your links are is to blur and remove the color from the design and see what stands out.

When hyperlinking, also stop to think about the length of the hyperlink. The longer the link titles the more easy to identify they are.

For example: To check out the GE Website click here. vs. Check Out the GE Website here.

3

5) Use Bullets, Bullets, Bullets

Bullets will enable the user to quickly get all the information they want: benefits, ways you solve their problem, and key features of a product/service– all in a short amount of time. This will make your propositions more attractive and will enable the user to get all the information they need. Additionally you do not have to go the traditional route with a simple circle.

With tons of cool icons out there you can also get creative with your bullet and help the reader further with images that represent your point. This is also useful because it will force you to isolate the most important points you are trying to make without getting caught up in terminology or specifics.

One great example of non-conventional bullets comes from http://www.one.org/us/about/ . On this page they use icons as bullets to highlight their accomplishments in a way that is easy to read. Also, notice the white space surrounding the bullets that allow you to focus on each section.

4

6) Use Images (But Use Them Wisely)

People across the Internet are getting smarter and faster at judging company websites.  When they first visit your site they are easily able to pick out a generic stock photo that they have already seen elsewhere or that resembles the non-personal style of stock photography.  Using stock photography can decrease trust and also stand out as generic and non-unique. Unfortunately these associations carry over to your business as well.

In a case study done by Spectrum, Inc. of Harrington Movers, a New Jersey and New York City moving company, they were able to increase conversion on a page by simply replacing a stock photo with an image of the actual team of movers.  They got the same increase in conversion and confidence to the page by adding a picture of their actual moving truck versus the stock photo. (Read the full study here.) Just like this one, there are many studies that support that while stock photography can be high quality, it fails to create a connection between the user and the company/brand.

Ultimately, no stock photography will be as capable of conveying YOUR brand, services, and products the way that you want to. Only your own actual images can do that while also speaking clearly to your potential customer. Use images strategically and place them in your website to support the content and allow the users a visual break from text, but make sure they are relevant and non-generic. Check out this infographic on real images versus stock photography.

5

7) Include Well-Designed and Written Headings

Your headings and content should be driven by what your potential customers are looking for. Including keywords in your title is also very important for targeting your message and attracting the right audience.

Search Engines typically give headings more weight over other content, so choosing the right heading and making it stand out can significantly improve your search ability. But more importantly, headings guide your user through the site, making it easy to scan through and find content that speaks to them directly.

A great example of well-designed headings with consistent content comes from Tilde. http://www.tilde.io/ Here you can see that the headings stand out in size and color and accurately describe the content that follows.

6

8) Keep Your Website Consistent

Consistency means making everything match. Heading sizes, font choices, coloring, button styles, spacing, design elements, illustration styles, photo choices, etc. Everything should be themed to make your design coherent between pages and on the same page. In order to provide your user with a beautiful experience as they navigate through your site, it is important that they know they are still in your website. Drastic design changes from one page to the other can lead your user to feel lost and confused and to lose trust in your site.

“Am I in the right place?” Is a question I often find myself asking when navigating through inconsistent sites and when I do – I usually end up leaving! Inconsistencies in design lower the quality of the products and services you are providing in the viewer’s eyes.

Winshape Foundation is a great example of consistent design. All of their pages follow one common pattern: navigation on the right, big header, sub header with a background image and some content below. I know no matter where I click, that I am still in their website as all their styling is consistent. Check it out http://www.winshape.org

7

9) Catch Your 404s

While search engines don’t punish you severely for soft 404 errors (page not found), a user will! When a user approaches a link or an image they are expecting this link will take them to the next place they want to go.

Encountering a 404 will make your user annoyed and have them re-think spending their time on your website (when they probably could go elsewhere for a faster solution). Next to slow page load time, running into 404s another highly frustrating event for a user and it completely disrupts their journey throughout your website.

To check if you have any 404s you can set up Google Webmaster tools on your website and check crawl errors. (Here’s how) you can also use this free 404 check

As an additional resource, you can also make sure that when your user lands on a 404 it provides them with the option to get back on track. Check out these cool examples of 404 pages.

8

10) Be Responsive & Mobile-Friendly

Our technologies have advanced to meet our needs to be mobile. Websites are also a significant part of this evolution. It is imperative that your website is mobile-friendly and easy-to-navigate no matter the screen type through which it is being accessed. 

Recently, Google started penalizing sites that aren’t mobile optimized, making the need for responsiveness even more crucial. This is probably the single most valuable way in which you can improve your website’s usability. If you are not sure whether your website is mobile, you can use this free tool.

I hope these tips have given you some ideas on how you can revamp your website to be more user friendly without shelling out the dollars on a complete redesing. To see more examples of useful websites, check out our free guide below.

New Call-to-action

Aug

3

2015

5 Easy Ways to Help Reduce Your Website’s Page Loading Speed

The adage “patience is a virtue” doesn’t apply online. 

Even a one-second delay can drastically reduce pageviews, customer satisfaction and drop conversions

The speed of your site even affects your organic search rankings. Since 2010, Google has been accounting for a site speed in its algorithm. 

So what’s the biggest factor contributing to your page speed?

Size.

It takes browsers time to download the code that makes up your page. It has to download your HTML, your stylesheets, your scripts and your images. It can take a while to download all that data. 

As web users expect more engaging site designs, the size of a site’s resource files will continue to grow. Each new feature requires a new script or stylesheet that weighs down your site just a little more.

How do you make sure your site is up to speed?

There are some great resources for analyzing your site’s speed. Google’s PageSpeed Insights and GTMetrix are probably the most popular. Both services will analyze your site and tell you where you’re falling behind.

A little warning: the results can be a bit daunting sometimes, but most fixes are relatively quick and easy. You might not fix everything the speed service recommends, but you should fix enough to make the site experience better for your visitors. 

Let’s learn how to speed things up!

While a few modern content management systems like HubSpot implement speed-enhancing options out-of-the-box, the more common systems like WordPress and Joomla require a little manual labor to get up to speed. 

Now let’s look at some essential speed solutions that every webmaster should consider. 

1) Optimize Images

Images are one of the most common bandwidth hogs on the web.

The first way to optimize your images is to scale them appropriately.

Many webmasters use huge images and then scale them down with CSS. What they don’t realize is that your browser still loads them at the full image size. 

For example, if you have an image that is 1000 x 1000 pixels, but you have scaled it down to 100 x 100 pixels, your browser must load ten times more than necessary. 

Scale your images before you upload them to your site, so you don’t ask for more from your visitors than you should. 

Take a look at the size difference when we scaled down one of our images:

speed-01-scaling

The second way to optimize your images is to compress them. 

There are several free online tools for image compression, such as tinypng.com, that can reduce your image sizes dramatically without losing quality. You can see size reductions anywhere from 25% to 80%!

2) Browser Caching

Why make visitors download the same things every time they load a page?

Enabling browser caching lets you temporarily store some data on a visitors’ computer, so they don’t have to wait for it to load every time they visit your page.

How long you store the data depends on their browser configuration and your server-side cache settings.

To set up browser caching on your server, check out the resources below or contact your hosting company:

3) Compression

Enabling compression is like putting your website into a zip file.

Compression can dramatically reduce your page’s size and thereby increase its speed. According to feedthebot.com, compression can knock off 50 – 70% from your HTML and CSS files! That’s a ton of data your visitor won’t have to download.

Compression is a server setting, so how you implement it will depend on your webserver and its settings. Below are some resources for the most common webservers. If you don’t see yours, contact your hosting company to see what they can do.

4) Optimize Your CSS

Your CSS loads before people see your site. The longer it takes for them to download your CSS, the longer they wait.

Optimized CSS means your files will download faster, giving your visitors quicker access to your pages.

Start by asking yourself, “do I use all of my CSS?” If not, get rid of the superfluous code in your files. Every little bit of wasted data can add up until your website’s snail-pace speed scares away your visitors.

Next, you should minimize your CSS files. Extra spaces in your stylesheets increase file size. CSS minimization removes those extra spaces from your code to ensure your file is at its smallest size.

So how do you minimize your CSS files?

First, see if your CMS already minimizes your CSS or if there’s an option for it. HubSpot, for example, already minimizes your CSS by default whereas WordPress or Joomla do not.

If your CMS does not have a minimize CSS option, you can use a free online service like csscompressor.com to minimize your files. Simply paste in your CSS and hit “Compress” to see your newly minimized stylesheet.

Minimizing your resource files is a great way to knock some size off your files. Trust me—those little spaces add up quickly.

speed-02-minification

5) Keep Your Scripts Below the Fold

Javascript files can load after the rest of your page, but if you put them all before your content—as many sites do—they will load before your content does.

This means your visitors must wait until your Javascript files load before they see your page, and we know how much they like waiting.

The simplest solution is to place your external Javascript files at the bottom of your page, just before the close of your body tag. Now more of your site can load before your scripts.

Another method that allows even more control is to use the defer or async attributes when placing external .js files on your site.

Both defer and async are very useful, but make sure you understand the difference before you use them:

  • Async tags load the scripts while the rest of the page loads, but this means scripts can be loaded out of order. Basically, lighter files load first. This might be fine for some scripts, but can be disastrous for others.
  • The defer attribute loads your scripts after your content has finished loading. It also runs the scripts in order. Just make sure your scripts run so late without breaking your site.

All you need to do is add a simple word in your <script> tags.

For example, you can take your original script

<script type=”text/javascript” src=”/path/filename.js”></script>

And add the little code to ensure it loads when you want it.

<script type=”text/javascript” src=”/path/filename.js” defer></script>
<script type=”text/javascript” src=”/path/filename.js” async></script>

The importance of your scripts will determine if they get an attribute and which attribute you tack on. More essential scripts should probably have the async attribute so they can load ASAP without holding up the rest of your content. The nonessential ones, however, should wait until the end to ensure visitors see your page faster.

But always make sure you test each script to ensure the attribute doesn’t break your site!

Conclusion

As online users demand a richer online experience, the size of our pages will continue to grow. There will be flashier Javascript, more CSS tricks and more third-party analytics to weigh down our sites.

As marketers, we can’t let this bog us down.

A little attention will go a long way—remember, just a one-second delay is all it takes to lose a lead.

New Call-to-action

Jul

17

2015

5 Website Design Lessons for Industrial Businesses

construction-website.jpg

If you’ve ever looked at your website and thought, “maybe it’s time for an upgrade,” chances are that time has passed and you’re overdue. With search engines constantly rolling out new algorithms and new design trends taking shape every day, it’s understandable that managers are getting overwhelmed just trying to keep their heads above water. Website re-designs are long, labor-intensive processes that require input from many different departments to make sure everything is moving on track.

Especially in the industrial space, where resources are limited and staff members are already being pulled in a hundred different directions, adding a website re-design to the mix is an intimidating prospect, to say the least. But, if you keep a checklist of deliverables and work toward each individual component as a separate project, it will make the whole process easier.

1) Define Your Angle

Before you get started writing anything – answer this question: What value do you provide to your customers? Figure out what it is that sets your company apart from others, and use that to your advantage wherever you can.

For custom manufacturers, having a wide range of equipment and capabilities that can serve a variety of needs is a good differentiator. For distributors, it might be your global presence and stellar customer service. Think about what makes you unique, and how best to represent that online. Once you figure out what gives you an edge over your competition, consider the types of web pages that will help you explain these benefits.

After you’ve outlined a basic site map, you can get started writing content that covers all of these bases. Remember to include keywords and terms that people are searching for online, and incorporate them naturally in the text to make it reader- and search engine-friendly.

2) Put Products Front and Center

If a prospective customer is on your website, make sure it’s easy for them to find what they’re looking for. Many industrial companies seem to think that explaining their processes and end products is enough, and that customers will call for more information.

But increasingly, website visitors are looking for all of those details online so they can make a decision before they call. For this reason, your website should include a product catalog with high quality pictures, descriptions, and any customization options that are available. It’s also a good idea to include pricing, although for custom products it’s understandable if that’s not always possible.

If most of your work is custom and you don’t have a catalog available, you may instead opt to include a calculator that allows users to input their unique specifications and get a custom quote. A benefit of this route is that you can create a website form that also includes contact information, allowing you to capture that data and keep in touch with interested individuals.

3) Feel Free to Name Drop

Okay, you might not want to disclose who your customers are, but if you have a long list of distributors, that might be good information to highlight. If a prospect is looking for a local company, but your main facility is hundreds of miles away, they might be turned off by the distance. But if you have distributors located around the country or around the world, that can make all the difference. And if your distributors are well-known, all the better.

4) Show Off a Little

When you’re thinking about purchasing a high-ticket item, chances are you’ll do your research to find the best possible option. It’s no different in the industrial space. People want to find someone who can deliver what they want without having to worry about quality issues. So if you’ve earned ISO certifications, awards, or meet any special product requirements, let it be known on your website.

Create an area on the website specifically for these recognitions, and spread the word when you add any new acknowledgements to the list. Every time you win an award or obtain a new certification, put together a press release, blog, and social media posts to announce it before adding it to the master list on the site. It’s not just about bragging rights – it’s about establishing yourself as a key industry leader and trusted partner.

In addition, you’ll also want to showcase certifications that are not related to quality – such as if you operate a woman owned business, or a minority owned business. Many companies are required to meet diversity requirements in their supply chains, so if they can meet those requirements by working with you, let them know that.

5) Don’t Underestimate Navigation

On each website page, you want your basic navigation options to be accessible without being obtrusive. Try a couple of different locations that are easy to find while at the same time being out of the way of your main content. It sounds like a catch-22, but once you find the right place it’ll all make sense. As always, check to make sure that even on a small mobile screen your navigation is available without taking up too much space.

The best way to achieve this is to “hide” the navigation in plain sight behind a smaller hamburger icon, which is essentially three stacked bars that very loosely resemble a hamburger (I didn’t make this up, I swear). If a site visitor taps on the hamburger icon, the full navigation menu will appear.

Similarly, make sure any links or buttons are easily clickable with a finger-tap on a mobile device. If you’ve ever done any mobile browsing, you know how easy it is to click the wrong link or accidentally tap a button while scrolling. Run through your mobile site as many times as necessary to make sure it’s as user friendly as possible.

Hopefully this information helped outline some of the important factors to keep in mind when designing an updated, responsive manufacturing website. This is just a basic introduction though; if you’re interested in learning even more, download this free responsive website design ebook for additional information.

New Call-to-action

Jul

6

2015

7 Reasons Why Your Website Isn’t Performing

charts-2.jpg

Most articles with titles like these are usually designed to educate people with little understanding of the inbound to redesign their website with the said methodology in mind. While good for people who don’t know anything about Inbound, they’re rather redundant to those who have already made the switch and designed their site with conversions in mind. This article is for the latter.

Instead of telling you that you need CTAs on all of your web pages and that you need to implement landing pages, this article will focus more on the smaller things that will help the websites and pages that were already built to convert, do it better. So without further ado, here are 7 reasons why your conversion optimized website might not be performing at its full potential.

SEO Reasons

1) Poor Performance Due to Poor Traffic

Google Webmaster Tools Crawl Errors

A website can be optimized to perfection and have all the right content in the world but that means nothing if it can’t be found through search engines. A properly optimized site makes it easy for Google and other search engines to crawl and index its pages but if an error in a few key sections occurs, all hell can break lose.

How to Diagnose:

Utilize Google Webmaster Tools to see if there are any crawl errors making it so that people can’t easily find different parts of your site. The helpful dashboard will give you a list of anything wrong as well as directions on how to fix them.

How to Fix:

This is dependent on the errors brought up by Google. While there are a number of different problems you may need to fix, the most common solution will be the implementation of 301 redirects for any major 404 errors that are occuring.

Promotional Reasons

2) Your Current Promotion Strategy Is Attracting the Wrong Audience

Before you make any crazy changes to your site or content strategy, consider the people currently coming to your site. Are they the right people or are they unqualified, irrelevant visitors that are quickly leaving your site once they realize what you do and sell?

Are you promoting your business and website in the correct areas that attract the correct demographic? If you aren’t, you could be wasting precious time and money bringing in meaningless traffic while your true target market continues to live without knowing of your existence.

How to Diagnose:

Utilize your website traffic tracking app (Google Analytics, HubSpot, etc.) to review the bounce rates attached to your site while also checking your website analytics to see if particular sources of visitors are generating fewer conversions compared to others.

If you see high bounce rates and low conversion rates connected to particular sources, you may want to consider a new promotion strategy through that source.

How to Fix:

The solution to this problem depends largely on where and how you are currently promoting your website and its content. Here are a few different options for you depending on what you are currently doing:

  • For paid advertisements: if you are currently paying for traffic in one way or another (Google PPC, social advertising, display ads, etc.) and are not seeing results from these campaigns, you may want to either completely cut off any that aren’t showing ROI (are you paying more than you are receiving back in potential leads/business?) or consider targeting different avenues that can offer you better results. If, for instance, you are a business that targets a very specific segment of a market, you may find more success with a paid advertising tool that allows you to target with demographics and job info like LinkedIn versus a PPC campaign that can only target through keyword selection.
  • For organic promotions: if you are finding it hard to successfully promote and draw out engagement for your website’s content through organic social posting you may want to consider performing an audit of your current social media strategy (if you have one at all). Ask yourself, your customers and your prospects where they go for information (social media- which channels, industry-specific forums, etc.). From there, get into the mind of your personas once more to understand what information they are looking for and what they will find useful so that you can create and share that type of information on the correct channels in the correct way so that the right people will not only find it but also interact with it and hopefully end up on your optimized site for conversion.

Design Reasons

3) Your Website Isn’t Responsive

Google’s “Mobilegeddon” has all but terrified anyone without a responsive website and for good reason. For those of you unaware, in April of this year Google released a new algorithm update focused on boosting the ranking of mobile-friendly websites and pages in mobile searches while pushing unresponsive sites down the ranks. Even without this new update, it’s been proven time and time again that mobile-friendly sites receive lower bounce rates and higher conversion numbers compared to those that aren’t.

How to Diagnose:

Use Google Analytics to see how many people are coming to your website and within that demographic how many of them are bouncing. If these numbers seem unusually high, especially when compared to your desktop traffic, utilize Google’s Mobile-Friendly Testing Tool for a final answer.

How to Fix:

While there are many services online that will either create a mobile site or help you to take a currently unresponsive site and make it mobile friendly, there’s something to be said about utilizing a platform that is responsive right out of the box. An example of one of these platforms is the HubSpot COS.

4) Your Website Has Unclear or Cluttered Navigation

Google Page Analytics Plugin

Your navigation should include a small selection of clearly-labeled page options that match your users’ needs. If you’ve filled your navigation with every product and service you offer or have created awkward side navigation that adds to the confusion, you may be distracting your visitors from key conversion points.

How to Diagnose:

Utilize Google’s Page Analytics plug-in to view just how your site’s visitors are engaging with the different parts of your navigation. If there are areas on the navigation that are receiving significantly lower clicks compared to others, you may want to consider consolidating.

How to Fix:

Write down every page you have connected to your website’s top row of navigation and include its click rate from the Page Analytics tool next to it. Highlight any pages that have received low click rates and either look to group them together with other, more generalized navigation items or consider taking the link off the navigation and having it live on a specific page instead.

5) Poor Landing Page Design

One of the more obvious areas to look, your landing pages can be a tricky piece of business when it comes to fully optimizing them to help your website perform. Everyone knows the general best practices regarding landing page design.

HubSpot wrote an ebook on it and it has to be one of the most downloaded pieces in their library. Even with a landing page optimized to best practices, conversions aren’t always guaranteed and minor tweaks can bring on major results.

How to Diagnose:

Utilize your landing page tool to review all of your pages’ conversion rates. Depending on your industry and products/services your business provides, you and only you will know what a good conversion rate is for your landing page.

Knowing this, look through your list to find any pages that show below-average percentages. If you believe that your average conversion rate should be higher, you may want to look into your overall landing page design.

How to Fix:

In an attempt to save precious space in my article and avoid wasting your precious time and patience, I’ve gone ahead and listed out a few smaller tweaks that you might look to implement that can help to better optimize your already well set up landing pages.

  • Focus on the right content: Spending 2-3 sentences explaining what the offer is and then dropping 4 bullet points on what the reader will get out of it is all well and good but maybe you should consider other angles. Try including testimonials and social proof regarding the offer or service it is connected to or breaking up your content so that people can read a short excerpt and make a quick decision on whether they want to download it or not.
  • Spend time creating and promoting the right imagery: Are you using stock imagery or bulky photos to show off what your landing page is trying to promote? Should you instead use offer-specific .png images that take up less page space and quickly tell the reader what the offer is right away? Maybe you should consider taking out the image all together and replacing it with a video that explains everything in a more easily digestible manner?
  • Experiment away from the standard 2/3 -1/3 layout: The idea of a “landing page” isn’t the digital marketer’s secret anymore. More and more Internet users are catching on to the idea and can more easily spot the generic template of 2/3 content on the left, 1/3 form on the right. Several companies have caught on to this and have changed their formats to be less content heavy, more visual and all about the simple form. Maybe you should give it a shot, too.

Content Reasons

6) Blog Topics Aren’t Connecting With Readers

They say that content is king. What they should really say is that the right content is king. If you are spending more time thinking about blog topics than you are about who you are writing for then you may be missing the boat on your content creation.

Your blog content is only as good as the reader says it is and if you and your words aren’t connecting well enough with them your brand, traffic, conversion rates and lead generation could suffer.

How to Diagnose:

Utilize your blog dashboard to review the average blog views as well as CTA clicks attached to each one. While digging into analytics, collect qualitative data by monitoring shares and comments, requesting feedback from your readers both in your article content as well as through different feedback applications such as Hively, Feedbackify or Qualaroo. If your analytics are low and you continually receive negative or no feedback from readers, you may want to step back and review your current content strategy.

How to Fix:

If you find that you need to spend more time on your content creation strategy, start from the beginning with your buyer personas. If you have them set up and in place, fill out a buyer persona workbook with the information that you currently have and then test that against current customer and prospect interviews to see if there are any discrepancies. Once a full persona is finalized, utilize the goals, challenges and pains collected in the interviews to develop targeted content before mapping out your content with an editorial calendar.

7) Page Content and Offers Aren’t Strategically Connected

The success of a lead generation website hinges on its ability to convert visitors into leads. In order to do that, best practices ask for CTAs to be placed on most if not all site pages to always provide visitors a point of conversion.

Unfortunately, some site pages may contain CTA’s that promote content that is irrelevant to the topic covered on the page that houses it, leading to poor click through and even worse conversion rates.

How to Diagnose:

Utilize your site page analytics to find pages with CTA’s that are not being clicked on. From there, dig into the content to see if the offer being promoted is either irrelevant compared to the content on the page or does not have the necessary context on the CTA to connect the two. If this is the case, you may want to consider a new CTA and/or offer.

How to Fix:

For any pages with CTA’s that need new CTA design but not a new offer, reword the designs to better connect with the persona and content on the page. From there, you will want to take the remaining pages and sort them by the main topic they discuss. Do the same for your entire library of content. If you have any overlaps in topics between pages and offers, place that offer’s CTA on the page. 

For any pages with topics that aren’t covered in your current library, you should either use that list to help you define your offer creation strategy moving forward OR see if there are other pieces of content that you might be able to promote on that page including specific blog posts or bottom of the funnel conversion pages.

The Bottom Line

While a properly optimized will outperform a static website any day of the week, many people who have utilized inbound marketing for enough time will tell you that there is always more that you can do to improve conversions.

If you are one of these people, I hope you found a few new ideas in this list and can now head back to the drawing board to start on more improvements. If not, I would love to hear your thoughts on different things that you can look for that might help you turn around a poor performing website.

New Call-to-action

Jun

9

2015

5 Things Custom Manufacturing Websites Must Have

manufacturer.jpg

Each and every day design engineers and procurement managers across the world search for new suppliers. What have you done to position yourself to have a shot at all of this business? Most likely, your first opportunity will happen without you knowing about it.

That’s right – the first place these folks are looking is your website. If you just groaned because you have been putting off updating your website for years, don’t worry, you’re in good company. You run a very busy manufacturing business and you most likely aren’t sure where to start.

The following are the five most important pieces of information that design engineers and procurement managers are searching for when considering new suppliers: 

1) Capabilities Information

First and foremost, they need to know that you can perform the service they are seeking. This means you need to have very detailed information about the fabricating and manufacturing services that you offer.

In depth content on your abilities around materials used, achievable tolerances, maximum dimensions, quality processes, production volumes, industries served, secondary services and drawing formats accepted. This will let the engineers and industrial buyers know they have found a viable vendor, but it is not enough.

2) Machine List

Frequently your machine list will say a lot about who you are as a business and what you are capable of manufacturing. For example, listing a simple Bridgeport Lathe just lets engineers and buyers know you can do turning, but doesn’t speak to any real specialization.

However, if you have a 5 Axis Haas CNC machine, this lets the world know that you deal in highly complex geometry and very specialized components. List as many as you feel comfortable with and organize them into the services that they provide.

3) Certifications

Promote the fact that you have met the criteria for the various certifications you hold. Some potential customers will not consider working with you without the right certifications. Be sure to display these prominently on the website and provide the ability to download or request the documentation.

4) Video

Everyone loves a shop tour. Admit it, you love giving them, too! The reason you do this in person is to show your capabilities as well as the scope, safety, and quality processes of your facility. Most custom manufacturers tell me “If I get them to the shop, they’ll want to work with us.”

Why wait for the in person visit? Get some video of your plant in operation on your website to give prospective customers that early view of who you are and what you can do for them in the supply chain.

5) Sample Project Information

Engineers and procurement managers want to see the types of projects you’ve worked on and parts that you have manufactured. You know that glass case full of parts you point to and explain when visitors come to the shop? Take that same information that you convey in person and get it onto your website.

When you do this right, you can move from this to this. I know this is a huge challenge. What to focus on? How to get the content? Don’t worry, we’ve got you covered. Download our Comprehensive Guide to Website Content Creation for Custom Manufacturers to get started.

New Call-to-action

Jun

8

2015

Beyond Responsive Design: How to Optimize Your Website for Mobile Users

Mobile-Inbound.png

You’ve weathered Mobileggedon. You’re confident that your website and blog will look great on mobile devices and that Google’s algorithm change won’t hurt your search listings.

Congrats! You’ve survived this skirmish … but it’s not going to be the last. 

The algorithm change is evidence Google knows it has to surface websites that painlessly get users what they need at the time that they need it. Google doesn’t want to send mobile users to websites that provide a frustrating browsing experience — that would damage Google’s promise to its users to always deliver helpful, relevant content. 

But this algorithm change is not what marketers should be reacting to. It’s a signal of a much larger shift that’s afoot. It’s the canary emerging from the mine shouting, “Consumer behavior is changing! We must adapt!”

Building a mobile-friendly website is step one, but tweaking your website will not keep you ahead of consumers’ changing behavior and expectations. In short, you have to infuse your marketing strategy with a “mobile mindset.” Here’s how.

Map a Customer Journey Full of Interruptions, Detours, and Multiple Devices 

Imagine the experience of Sally, a young marketer who has just moved to Chicago. While out for a walk, Sally passes by a hair salon and realizes she needs a haircut. She pulls out her phone a search for hairstylists in Chicago who specialize in curls and color. Her Google search pops up Joann’s Stylez. She flips through the website quickly and wants to research more but it’s too hard while on the move — so she emails herself a link. When she gets home, she uses her tablet to quickly check Yelp reviews, examine her calendar, and then book an appointment using the simple form on the Joann’s website.

When Sally loads up her laptop later that night to check her email, she discovers an email from Joann’s that confirms her appointment and gives her the option to add it to her calendar. The next day, 30 minutes before her appointment, she receives a push notification on her work computer reminding her of the appointment. The next day Sally receives an email asking for feedback on the cut and offering to set up a recurring appointment at a discounted rate. She’s sold.

Sally’s experience is illustrative of the cross-device journey that many customers now make as they move through the marketing funnel: 75% of US online adults use 2+ devices connected to the internet, and 67% have switched devices while completing common tasks, according to Forrester.

Consumers now expect this type of experience from all of their digital interactions. They want to be able to accomplish whatever fits their fancy on whatever device is at hand. This means that simply adapting your site to look nice on different devices is not enough. As a marketer, you must dig deeper into your customers’ and prospects’ lives.

For example, at HubSpot, we know that a visitor on a mobile device is very unlikely to fill out a long form on one of our landing pages. So we started using Smart Content to automatically shorten the form when a mobile viewer is looking at it. By doing this our mobile prospects increased by 5X

Seize Intent-Rich Micro-Moments, but Avoid Stripped-Down Solutions

You’ve likely already developed a strong set of buyer personas. You’ve conducted user research and testing to understand which content and CTAs to present to each persona as they move down the funnel. You must now go a step further. You must understand both the rhythm and rhyme to when, why, with what, and from where people are interacting with your website and content.

Google encourages marketers to identify the “micro-moments” in a customer’s journey: 

Micro-moments occur when people reflexively turn to a device — increasingly a smartphone — to act on a need to learn something, do something, discover something, watch something, or buy something. They are intent-rich moments when decisions are made and preferences shaped.” 

A number of brands have figured out how to anticipate and capitalize on these mico-moments. Apple Passbook loads up your Starbucks card when you’re near a coffee shop. Hertz sends you an email when your plane lands to let your know that your car is ready. Starwood allows you to check in and open your hotel room with your smartphone. 

Consumers are increasingly becoming acclimated to companies offering such intimately responsive experiences. Already, 62% of US online adults expect a mobile-friendly website and 23% expect their mobile experience to change based on location, according to Forrester’s US Mobile Mind Shift Online Survey.

How can you figure out these micro-moments and design your content to meet prospects’ intent? Tap into your data. Here are three analyses you should start with:

  1. Search: Which queries, ads and keywords are bringing users on different devices to your website and landing pages? Once they land on your site, what types of searches are users on different devices performing?
  2. Content: Examine the content that users access by stage in the funnel and by device. Is there a trend around what prospects on their phones are downloading? Sharing?
  3. Flow: Dig into a flow analysis segmented by device. What is the path mobile-using prospects follow? What is the path tablet-using customers follow? From what sites and sources are these visitors arriving?

After building your trove of micro-moments, it would be easy to think: “Okay, we just need to strip our website down to the specific things our visitors will mostly likely want to access on the go.” But mobile users are not limited to completing short, simple tasks. Device does not directly imply location or intent.

A busy professional may use her commute time to conduct in-depth industry research on her phone, process her email inbox on her tablet while watching a movie with her family, and browse the websites of potential contractors while flying across the country. Confirming this intuition, the Pew Research Center’s study of U.S. smartphone use in 2015 found that 99% of smartphone owners use their phone at home, 82% use their phones while in transit, and 69% use their phone at work each week.

People don’t want a stripped down set of content. Instead, they want quick and easy access to the materials they need on whatever device they happen to be using. Thus, while you want to optimize your site, landing pages, emails, etc. for micro-moments, you do not want to force visitors into a box from which they cannot escape.

Reconsider Your Metrics

The metrics you established in the desktop-centric days may not seamlessly translate to our new multi-device, micro-moment world. For example, you might have fought tirelessly to find ways to increase visitors’ time on your site, recognizing that more time means higher engagement, which translates to higher conversion.

The micro-moments you identify for mobile visitors, however, might suggest that you want a lower time-on-site. A prospect visiting the website of a consulting firm may be looking for:

  • An infographic they want to show a coworker
  • The bio of a partner with whom they are about to meet
  • A case study to read while traveling

In order to meet this prospect’s expectations for their mobile experience, you must design your website to quickly and intuitively help them find the specific piece of information for which they are looking. If their mobile visit is distracting, frustrating, or too time consuming, you’ve damaged their perception of your brand.

Embrace the Intimacy of Mobile

For better or worse, I go to bed with my phone (reviewing tomorrow’s schedule and reading a nighttime meditation) and I wake up with my phone (silencing the alarm and checking the weather). I communicate with my fiancé and my best friends everyday — all through my phone. When my MBA classmate sends a GIF of Tyra Banks being sassy, I turn my phone to the person next to me and we have a good laugh together.

Day-in and day-out, these interactions create an intimate connection between my phone and me. And I’m not alone: Most consumers imbue their mobile experiences with more intimacy than desktop experiences. The Pew Research Center found that Americans view their smartphones as freeing, connecting, and helpful, and associate their phones with feelings of happiness and productivity.

These associations can inspire greater engagement with and interest in content. Google has found that individuals watching video content on their phones are 1.6X as likely as TV viewers to talk about what there watching with peers and 2X as likely to feel a sense of personal connection to brands that show video content.

As marketers, we should take advantage of these trends and consider how to make our prospects’ mobile experience more personal and social. Perhaps change your website to increase the proportion of social CTAs you display when someone arrives on mobile.

Remember the Basics and Think Multiple Steps Ahead

Overall, embracing the mobile mindset means ensuring that the entire customer journey is responsive, relevant, actionable, and frictionless. As a marketer, you want to help consumers quickly and easily find what they want to find and do what they want to do. Again, this means thinking ahead, understanding when, with what device, and from where your prospects will interact with your content.

This can seem daunting, but mostly it means diligently applying the basics across channels. For example, since over half of all emails are opened on mobile, ensure your emails are mobile optimized. Litmus recommends doing the following:

  1. Use large, easy-to-read text.
  2. Use large, clear images.
  3. Keep layouts simple.
  4. Use large, mobile-friendly calls-to-action.

Recognizing the personal associations people have with their phones, you’ll want to ensure that the “From” name is familiar and that the preview text is inviting. And think ahead: Don’t email a link to a form or an event registration landing page that is not mobile friendly.

Follow these tips and you will be well on your way to living the mobile mindset and weathering the change in consumers’ digital behavior. Forrester predicts that the vast majority of companies will underinvest in mobile in 2015. Move quickly and your organization could be at the head of the pack.

Image credit: Placeit

free guide: make your site mobile-friendly

May

27

2015

The 6 Month Website Redesign Framework

pizza.jpg

When you’re craving pizza, you have a few options: You could take the easy way out and order a greasy pie or pop a frozen ’za in the oven. Or, you could make one from scratch.

Those fast solutions will be satisfying in the short run, but you’ll get more out of making your own dinner. You’ll be more careful with ingredients. You’ll be able to make it exactly how you like it (one quarter pepperoni, one third green peppers, and the rest extra cheese? It’s up to you). And you’ll gain the experience of making something out of nothing.

The same is true of website redesigns. You could hastily compile a website in 30 days, but it won’t be the same as if you dedicate your time to making it perfect.

The difference is that a quickly built website often only focuses on the look and functionality of the website. As long as it’s easy on the eyes and the buttons all work, it’s considered a success. But inbound marketers can’t have that attitude.

Because so much of inbound marketing occurs on your website, a website redesign has to focus on more than just the site’s style. It has to focus on meeting your goals and matching up with your overall strategy.

That’s going to take a little longer than just slapping some content on a site page. But how long do you need? If you are planning a strategized website redesign, here’s a rough timeline that you can follow.

A few notes: This timeline might vary a bit depending on the complexity of your site. More pages and more features mean more time. And it’ll also vary depending on the team that’s working behind the scenes.

An internal team, freelancer, and agency will have different processes that will affect the schedule. If you plan to hire an outside developer, whether it’s a freelancer or through an agency, add in a 30- to 60-day window research and select the right one.

Month 1

Review of Current Site

You have to have a good reason to redesign your website. That’s why assessing your current site is the first step — you have to find that key reason for the redesign.

Take a good, hard look at the site. What do you not like about it? What do you like about it? This review has to go beyond your personal preferences though — it has to be about the numbers. Study (and record) key site metrics, such as time on site, bounce rate, conversion rate, and more. These statistics will tell you in black and white which parts of your site are failing (and, therefore, which parts to focus on during the redesign).

Goal Setting

Once you’re well aware of what’s not working, you can plan goals around what you want your new site to accomplish in the future.

Lots of people will skip this step (the goal is just to have a new website, right?). But don’t pass this part up. You wouldn’t launch a campaign without goals, so why would you launch a website without goals? Setting these goals early is important, too. That way, you can plan to build a site that’s optimized to meet those goals.

These should be SMART goals (specific, measurable, attainable, realistic, and time-sensitive) based on the numbers you reviewed in the last step. Ask yourself: How many visitors do you want every month? How many leads? What conversion rate do you want to see? Write them down and keep them in mind every step of the way.

Buyer Personas

You may already have clear buyer persona stories that guide all of your marketing efforts (awesome!). Even if you do, consider this a good time to revisit and potentially revise them. If you don’t already have thorough buyer persona profiles, you absolutely need them before starting a redesign project.

There are a few reasons buyer personas are key to website redesigns. The profiles will determine how you set up your site. The site should easily guide users through the funnel, and the track has to be slightly different for various buyers. Personas also affect your premium content offers, so having ideal buyers in mind well before you start making the website will help you plan to bring in more leads.

Month 2

Content Audit

You wouldn’t order a pizza if you still had leftovers in the fridge. Just like you wouldn’t overhaul site pages or content that were already resonating with readers and encouraging conversions.

That’s why you need to search through all of your organization’s online content assets — old site pages, blog posts, portfolios, case studies, any other materials you use with clients or for marketing purposes. Determine what can be kept, what needs revising, and what needs to be cut completely.

For what you plan to keep or revise, determine if it will be at the same URL or a new URL. For things you plan to cut, where will the old page redirect to? HubSpot’s got a handy Excel sheet to plan this all out in a super organized fashion. Bonus: This document helps you plan for SEO while you’re at it — which is crucial at this stage. After all, you don’t want to lose the valuable SEO value your old site has accumulated.

Month 3

Information Architecture

Now that you know what site content you’re keeping and cutting, it’s time to plan for new content to fill the gaps and how all of that content will be organized.

Your first step: Draw out a site map. Plan what the categories will sit on your navigation bar, and what content will live under each category. Will there be drop down menus? A helpful trick: Don’t necessarily organize content by type or general topic. Instead, organize your pages to create a story or a path for those buyer personas. How do you want your ideal visitors to progress through your site pages? Make it easy for them to follow that path.

An easy way to do that: A purpose map. It’s an extension of your site map. On a purpose map, you assign a specific buyer persona, lifecycle stage, and goal to each page (which can save you money and time in the long run). As you do that, you’ll need to add pages and remove pages to complete the buyer’s journey on your site.

purpose-map-_sparkreaction

Write Content

When you know the ultimate goal of your pages, you’re ready to write content. Take plenty of time to craft all the content that will appear on your site. Do this early in the process — it’s always easier to design around content than to write content around design.

While this does include body copy, don’t forget about some of the finer details. Write copy for calls-to-action, forms, meta descriptions, and other micro text elements. If you are redesigning on the HubSpot COS, you can think about smart content and personalization tokens here, too.

Develop Wireframes

It’s time for the designer to step in so that your site can take shape. Before making your site look awesome with eye-catching photos and beautiful text, figure out where, exactly, all of those elements will appear on the page. That’s what wireframes are for.

Starting with wireframes saves so much time in the long run. Rather than moving around tons of design elements, you can simply move placeholders until they are exactly where you want them.

There are lots of ways to do wireframes. The easiest route? Sketching on a whiteboard. But if you want sharper wireframes, draft them in Photoshop (or another image editing software), or use an interactive wireframing software like Axure.

sparkreaction-faq-wireframe-new

Month 4

Design Mock-Ups

Once the wireframes are in place, it’s time to start making them pretty. Now, you can start adding colors, playing with fonts, and placing photos.

This should all be done in Photoshop or another design software. When the design mock-ups are done, they should look almost exactly like what your site will look like on the web. That means they should include real content.

Schedule several weeks for this process. First, it’ll take your designer plenty of time to incorporate all the elements. More importantly, though, you’ll likely want to incorporate a review and revision process. After all, you want the design to be pixel-perfect.

sparkreaction-faq-design-mock-new

Month 5

Development

You’ve got everything exactly where you want it. You think your site will help meet your goals and move visitors through the buyer’s journey. The hard work is over. (Woohoo!) Now, go ahead and hand everything over to a coder.

Usually, you can sit back and relax and wait for your fully functioning site to be developed. Programming can take a while, though. Depending on who’s in charge of development, the timeframe can vary. Plan for at least a month of coding allowance.

2 Weeks Before Launch

Determine Content Placement

Once the pages are ready to work with, the first step is to place your content. This includes copying and pasting body text, building CTAs, uploading files, and dropping in images. Keep in mind that you might need to do some copy fitting. Even though you should have designed with content in mind, sometimes, the words you want just don’t look right. This is the time to adjust your phrasing so the message fits.

It’s also the time to proofread! Nothing diminishes a site’s credibility like a glaring typo. Avoid that at all costs.

Finalize URLs & 301 Redirects

Remember the list you made a few months ago of all your old site pages, their URLs, and where to redirect them? That will come in handy. Now’s the time to put those new web addresses into place. Enter in the right (new) URLs on pages, and set up 301 redirects for old pages. It’s super simple, but a super important step that you can’t skip over.

SEO

You should already have a keyword and search engine optimization strategy in place. You’ll want to incorporate SEO best practices now, before the site goes live. On the back end of your site, add meta descriptions, add internal links, and double check that your keywords are in your URL, H1 tags, and alt text.

Troubleshoot

Before you push that “publish” button, make sure your users will have a great experience from the get-go. Preview multiple site pages in various browsers and devices to make sure they look nice and work well. If not, adjust! Click on all your links, too, to make sure there are no broken links. When everything works as it should, you’re ready to go!

Month 6 (Launch Date)

It’s the big day! Publish all of your new pages, but don’t sit back and relax right away. Instead, be prepared to fix unexpected problems.

Be sure to do a bit of quality assurance today, too. You never know if something went wrong somewhere along the way. Check that your 301 redirects worked and that your site pages are all in the right place.

Post-Launch

(What, did you think you were already done?)

Generate Heat Maps

Heat maps are insanely helpful for understanding how your visitors interact with your website. Install a heat map software (like Hotjar, Crazy Egg, or HeatMapper) to learn where your visitors are clicking. This allows you to draw hypotheses around their actions and revise accordingly. Ultimately, you want to make your site easy to navigate.

sparkreaction-heatmap

Run A/B Testing

Maybe you couldn’t decide if that one CTA should go beside the copy or below it. Maybe you weren’t sure which headline to put on your homepage. After your site has been up and running for a bit, you can set up A/B tests to determine the best long-term solution.

Experiment With User Testing

User testing can actually come before your site launch too — in fact, that’s probably preferable. But because most people are in a rush to publish that brand new site, it’s OK to push user testing to after the launch.

During user testing, sit down with real people and see how they use your site. What do they like? Where do they get stuck? Use those insights to revise your site.

Review Goal Analytics

Remember those goals you set six months ago? (Sure hope so — they should have been guiding all your web design decisions). Now, it’s time to assess them. You’ll want to compare new site data to old site data to get the clearest picture about what is (and isn’t) successful.

The specific analytics you look for will depend on your individual goals, but here are a few good ones to look for:

  • Time on site
  • Bounce rate
  • Click-through rate
  • Conversion rates
  • Traffic sources
  • Highest ranking pages
  • Total pageviews

While this is the end of the timeline, it’s not the end of your work on your website. In fact, your website should never really be “done.” After all, you’ll want to adjust to optimize for conversions, add new content, and change it around as your organization changes. As you move forward, remember that revising along the way is OK, as long as your long-term goals are at the forefront of those decisions.

New Call-to-action

 

May

26

2015

38 Essential Website Redesign Terms You Need to Know

glossary-1.jpg

Every industry has its buzzwords, and web design is no different. If your head is spinning from seemingly endless jargon, or if you’re getting ready to redesign your company website and want to inform yourself on the most common technical terms in modern web design, then this is the list for you.

Knowledge is power. Here are 37 of the most popular technical terms and buzzwords we hear (or use) as we do website redesigns, organized from A to Z. Do you see one you’ve heard lately on this list?

“Above the Fold”

Ironically enough, “above the fold” is a term taken from newspaper design. If elements of your website are “above the fold,” then people don’t have to scroll down to see them.

Just like in newspaper design, most designers will put the most important information above the fold. This term has lost a lot of relevance in modern web design, though, because the “fold” is almost never in the same place because of different screen sizes and resolutions.

Analytics

Analytics is a term that refers to numerical tracking of your website visitors.  With analytics, you’ll be able to see how many people are visiting your website, which pages are most popular, where people visit from geographically, and much more.  Analytics will tell you what is happening on your website, but not why.

Backend

A website “backend” (pronounced “back end”) is a way to refer to a website’s content management system or server.  This is where you log in and make changes to your website’s content or pages, write blogs, or review form entries.  “Backend” code handles technical things like redirects for pages that are no longer on your website or your website’s templates.

Browser testing

Once a designer turns a mockup into a template using code, the template has to be tested because there are literally hundreds of web browser combinations. You may not know that all of the combinations of operating systems and browser versions can render websites very differently.

Throw in different mobile devices and platforms, and, well, that’s a lot of testing. Before your new website is made public, it has to be tested with different browsers to ensure it will show up properly.

Call to action (CTA)

Call to Action, or CTA, is a button, graphic or text link that encourages your visitor to take an action. This might include subscribing to your blog, signing up for monthly email updates, or requesting a product demo.

Content Development

Creating a graphic design for your website is only part of a website design project. Writing content is also a significant and often overlooked part of the website redesign process.

Content development can refer to coming up with words and narratives for your website that communicate your unique selling proposition and your products’ or services’ benefits in a way that your target market will respond favorably to. It can also mean creating video content, infographics, or other forms of information that your visitors will want to consume.

Content Management System

A content management system, or CMS, is a program that lives on a web server. Its function is essentially twofold.  First, it allows you to log in and make changes to your website, usually with little or no code knowledge.  

Second, it stores that content in a database and combines it with web template files to create web pages that make up your website.  We wrote a 2-article series on how to choose a content management system that’s right for you if you are considering a new content management system during your website redesign.

Conversion Rate

Conversion rate is an incredibly important metric to understand your website’s effectiveness.  It’s the number of visitors divided by the number of leads or contacts you receive from the website. The higher your conversion rate, the fewer visitors you need to get the same number of leads.

Designers care about creating your website to “convert” as many visitors as possible into leads or sales.  The process of optimizing your website for better conversion is called Conversion Rate Optimization (CRO).

CSS

CSS stands for Cascading Style Sheet, which is a file that dictates how things will be displayed on your website. Contained in these files are information about font color, font size, page margins, backgrounds and much more. CSS files are “called” by HTML files to tell your web browser how things should be arranged on screen.

Customer Personas

Customer personas are detailed descriptions of your ideal customers.  They are fictional representations, but represent a segment of your target market. Customer personas may contain information like demographics, goals, challenges, frustrations, key marketing messages, common quotes, what they read, where they work, where you can find these people, and much more.

They are created to help designers and writers understand the key messages for your website redesign, and what things matter most to your target audiences.

Domain Name

Domain name is your website address, most commonly ending in .com, .net or .org.  You purchase domain names through a domain registrar, and these domain names point to web servers that contain your website.

A domain name is essentially a memorable “shortcut” to your website, because without it, people would need to know a series of numbers (called an IP address) to visit it.

Flat Design

Flat design is a type of website design characterized by the lack of shadows, bevels and gradients. Flat design is often minimal, clean and simple. These designs will not look 3-D or have shadows.

The opposite of flat design is called “skeuomorphic” design, which is designing to make things look 3-dimensional with shadows, bevels and gradients of color.

Front End

A website’s front end is the part of the website that you’d see when you visit a website on a computer or mobile device.  When a designer “creates the front end,” they are essentially creating graphic designs or coding those designs in HTML and CSS.

FTP

Short for File Transfer Protocol, FTP is how a designer connects their computer to the web server to transfer files that will ultimately run your website.

Grid System

A grid system is simply a structure of pages on your website, comprised of columns and rows. They are used to lay out and align web page content to make it more readable and manageable.

Hosting

Hosting, or “web hosting,” is the method of making your website available to the public on a web server, a computer that’s always hooked up to the Internet.  You’ll need web hosting to make your website available to the public, and you’ll have the choice between “shared hosting,” “managed hosting,” or “dedicated hosting.”

Shared hosting is the least costly but requires sharing a server with other companies. Managed hosting means that a hosting company has server engineers available to manage your server for you.  Dedicated hosting means that your website or websites are on their own server, which is more secure.

HTML

Short for HyperText Markup Language, HTML is a simple web programming language that tells web browsers like Google Chrome how to render the words, pictures, audio and video on  your web pages.

Infinite Scrolling

Infinite scrolling is a method of loading a web page on a visitor’s screen whereby content will load as you scroll down the page.  This technique can present more information on a page without requiring someone to click a “next” button.

It can also speed up the time it takes pages to load since the web browser doesn’t have to load the entire page of content at once.

Information Architecture

Information architecture sounds complicated, but it’s simply organizing and labeling your content. Information architects are people that take all of your website content and arrange it in a way that’s easy to find.

Included in that process are things like deciding what pages and sections will be called, how large or small sections should be, designing “paths” through your content to points where people would become leads, and deciding how pages should link together.

Jquery

Jquery is a JavaScript “library” that includes several commonly-used javascript functions.  Jquery can be used for things like making sure your web forms are filled out properly or not left blank, creating complex animations, handling page transitions and much more.

Landing Page

The term “landing page” can have different meanings to different people.  Some people call your homepage a landing page because that’s where people visit first. Advertisers may call a page on your website that people visit first a landing page.

From a marketing standpoint, a landing page is a lead-generating page — a page that has a single purpose, which is to get someone to become a lead. People become leads by filling out forms, so a landing page will always have a form.

Lead Form

Lead forms are forms that can be placed on any page of your website. People fill out these forms to download something or to request information.

Localization

If you do business internationally, you’ll want to localize your website. More than just translating, localizing your website means that your designer will change messaging and photographs and cultural references to be more appropriate in the international markets you are targeting.

We recently wrote an in-depth article on website localization called “Website Localization: 7 Handy Tips For The Enterprise Website” that you can read to learn more.

Meta Tags

Meta tags can have many uses, but they are most commonly thought of in a search engine optimization context.  The two types of meta tags that most people refer to are called “meta keywords” and “meta description” tags. Many think they influence your search engine rankings, but actually they don’t.

Mobile First

Mobile first is the mindset that you should design a website with the mobile experience in mind before you design for the screen. Here, a designer may first design a smartphone view of a website that contains just essential information, then a tablet view, then a screen view.

The mobile first methodology is the opposite of the “subtraction method” which is where a designer starts with a design for a computer screen then removes, or subtracts, lower priority things as the screen gets smaller.

Mockup

A mockup is a picture of how your website will look on a screen when it’s finished. It’s not a working version of what you’ll see, just a picture of what it will look like. Mockups can be “high fidelity” or “low fidelity.”

High fidelity mockups will have exact wording, photographs and literally will be a picture of how your website will look when it’s finished.  A low fidelity mock up may have words or photographs for placement purposes only to show where certain elements will be placed on the screen.

Parallax Scrolling

Parallax scrolling is where a background image moves slower than the foreground image or text, creating an illusion of depth as a visitor scrolls down a page.

Photoshop

Photoshop is a computer program made by Adobe that is the industry standard for creating website mockups and designs. This program allows designers to easily create the graphics and page layouts that make up your website.

Responsive Design

Responsive design is a design and coding technique that makes your website mobile friendly.  It enables your website to “respond,” or reformat itself, to the screen size it is being viewed on. Responsive designs are a must for modern websites because they make your website readable and usable on smartphones and tablets.

Without a responsive design, your website would appear miniature or compressed when viewed on a smartphone or a tablet, creating a less than optimal viewing experience for people on mobile devices. For a more detailed explanation, you may want to read this blog post or this blog post.

QA

Quality assurance, or QA, involves more than just testing your website on web browsers.  Different features of your website have to be tested to ensure they work as intended.

Sometimes this involves a written test plan for a technically advanced website, but if you want your website visitors to be pleased during their visit, things need to be tested so they work as intended.

SEO

Short for Search Engine Optimization, SEO is the practice of optimizing your website and overall web presence (including social media) so that your business can be found on Google, Bing and other search engines.

Sitemap

A sitemap is an outline of how your website content will be organized.  This can take the form of a Microsoft Word outline or an Excel document. It shows the high-level naming structure and hierarchy for your website and were each page will live under that structure. It also can show cross-linkages between related pages.

SVG

SVG stands for Scalable Vector Graphics, which allows code to create high resolution artwork on your website without loading graphics files, which speeds up the performance of your website. SVG can be important to websites with responsive design because at any size or resolution, these graphics remain sharp and clear.

Template

A template is code that tells your content management system how to render pages on your website.  The website will probably be comprised of several templates since different pages may have different looks. The term “template” can also refer to a pre-designed website “theme.”

UI Design

User Interface, or UI, is a way to describe the page that visitors will see.  When a designer does UI design, they are designing the pages that visitors will interact with. In simpler terms, UI design is all about aesthetics and layout.

UX Design

UX design, or User Experience design, is a strategic way to look at web design. UX design considers your visitor’s needs and abilities, the technology or device, as well as the ultimate goals that you want a visitor to take.

UX design put simply is making the “desired path” more prominent and relevant so a visitor will do what you want them to do, whether that’s navigating to several pages in succession, downloading something, or filling out a form.

Whitespace

Whitespace is the amount of padding or margin around key pieces of content on a web page including paragraphs and images. A cluttered website is the opposite of the website with plenty of whitespace.

Wireframe

Wireframes are early stage designs that don’t include all the detail that a mockup would. Wireframes can be page layouts drawn on whiteboards like the ones shown here, or digital drawings with lines, boxes and words, but no photography or color.

The idea behind a wireframe is to organize content and the structure of pages before designing them graphically.

There you have it, 38 of the most common buzzwords that you’ll hear during your next website redesign. Have you heard a technical term that you’d like explained in layman’s terms? Leave it in the comments below.

New Call-to-action

May

1

2015

Photoshop, InDesign, Illustrator & More: Your Cheat Sheet for Adobe Keyboard Shortcuts [Infographic]

Adobe_CC_Keyboard_Shortcuts_Edit.jpeg

Between calendar updates, emails, and social media notifications, it can often seem like your computer is working against you.

But, as distracting as it may seem, your computer actually has lots of ways to save you time at work. Considering data from Atlassian revealed that 60% or less of work time is actually spent productively, it’s clear that time is something you could probably use a lot more of. 

One of the most powerful (but time-consuming) pieces of software many marketers and designers use is Adobe Creative Cloud. Aware that their users are crunched for time, Adobe has implemented a ton of keyword shortcuts designed to help speed up the process so you can get your infographics, social images, videos, or ebooks out faster. For a handy cheat sheet of these shortcuts, check out the following infographic from SetupABlogToday.com.

You’ll be amazed at what you can do with just the touch of a key (or two).

 

2015-ultimate-adobe-cc-keyboard-shortcuts-cheatsheet.jpg

10 free infographic templates in powerpoint

Apr

28

2015

Inside ESPN.com’s Brilliant Redesign: Why You’re Going to See More Personalized Websites

Introducing_the_new_ESPN_com_copy

ESPN recently redesigned their website. Nothing out of the ordinary there. Companies redesign their websites roughly every 18-24 months. (You’re probably sick of yours right now, am I right?)

But this particular redesign garnered a ton of attention, earning coverage and analysis in Fast Company, TechCrunch, and VentureBeat, among other publications.

So why did so many other publications want to cover such a common thing like a redesign? Well for starters, ESPN’s website gets a ton of traffic. In 2014, ESPN.com attracted 22 million daily users, notably more than CNN.com, BuzzFeed, and other high-volume sites.

But that’s not the only thing they did. They made one major strategic shift: ESPN redesigned the website to adapt to the person looking at it.

Building personalization features into the fabric of the new site, ESPN.com will now reflect the interests, location, and device of each fan. For example, when I visited ESPN.com for the first time after the redesign, it took a guess at my favorite sports teams based on my location, then enabled me to tailor my view for future visits. It looked like this (Clearly, I’m a bit of a townie):

ESPN-For-Boston

Once your preferences are set, the website will prioritize relevant content whenever you visit again. With dynamic delivery of relevant stories, ESPN.com becomes, as the company put it, “a constantly updating river of content” that is tailor-made just for you. 

“We’re hoping what you will notice is that you are more engaged and immersed than ever, getting exactly what you want, when you want it, wherever you are,” wrote ESPN’s editors in the redesign launch post. “That’s what all of us fans expect.”

ESPN was not the first to add personalization to its website, but given its popularity and the sheer volume of impact this approach will have, we expect this may signal a tipping point in website personalization.

Why You’ll See More Adaptive Websites

Personalized content on websites began in the ecommerce space with Amazon recommendations, and continues to be prevalent on many other sites today. Shop Direct, one of the largest U.K. retailers, recently launched a fully personalized homepage for its main brand, Very.co.uk. Shop Direct claims that this website will serve 1.2 million different versions of the homepage to its customer base and expects that number to rise to 3.5 million by the end of the year. 3.5 million different web experiences out of one website. 

Spurred in part by early experiences with personalization on ecommerce sites and a natural proclivity for relevant content, consumers in all industries are starting to expect some level of a customized experience. According to Janrain, nearly three-fourths (74%) of online consumers get frustrated with websites when content appears that has nothing to do with their interests.

Where customer demand exists, technology shortly follows. As more websites are plugged into contact and email databases, dynamically producing different views becomes technically much easier. While Amazon and ESPN likely have robust personalization and content delivery engines powering their entire sites, a wide range of companies are using tools to leverage what they know about visitors and personalize their most critical pages or conversion paths.

How to Make Your Own Website Adaptive

Get the Technology

To personalize your website, you’ll need a database to automatically store relevant information on each visitor about their on-site behavior. You’ll also need a tool to serve up different content based on a set of criteria from that database. (Full disclosure: HubSpot software does this or we wouldn’t know so much about the topic. There are also a number of other personalization engines out there you can research, including Monetate for ecommerce and retail.)

Start With Mobile

I know. I know. You want to get to the good stuff like personalizing for brown-haired, knitting fanatics or targeting CEOs who have visited your pricing page. But trust me, before you do anything else, start with mobile. Make sure your website, blog and landing pages can recognize the various devices visitors use to view your content and adapt to give them the best possible view. The reasons for this are manifold.

First, mobile-optimization is now weighed heavily as a search rank criterion on Google. If your site isn’t fully optimized for mobile, its ranking could plummet on mobile searches, no matter how good the content.

Second, making sure any person could easily read content and click on your links your links is the very foundation of creating a good user experience. But that good experience needs to adapt as your visitor moves from their static desktop to mobile phone to their tablet on the couch at home. Customer-focused personalization has to be rooted in a responsive, device-agnostic design. As Ryan Spoon, ESPN’s SVP of product development told Fast Company, “The last time we did a redesign, there was no concept of a mobile application or fragmentation between iOS and Android. As the world has evolved, we want all our experiences to evolve.”

Add in Lifecycle Stages

Think of a brand new, fresh-faced, first-time visitor to your website. Got ’em? Aren’t they adorable?

Now think of a long-standing, loyal customer of yours.

How different are their needs from each other? Furthermore, how different are those needs from the needs of someone who has been to your site repeatedly and is seriously considering purchasing your product or service?  

You see what I’m getting at. As an individual’s relationship with your company evolves, the content that is interesting to them is going to change too. Media companies, like ESPN, may differ on this slightly, but for my marketing dollar, the most important personalization I can do is to adapt my content to fit the customer lifecycle. By customer lifecycle, I mean all of the stages individuals go through when they’re weighing a purchase decision. People begin with needing exploratory information on the field, then progress into more and more specific questions related to your product and company. After someone purchases and becomes a customer, his or her content needs shift again. 

Get Advanced With Interest- and Persona-Based Personalization

The second major personalization feature you should implement is based on what topics are most relevant to certain types of people. This is the strength of a website redesign like ESPN’s. In a world of hundreds upon hundreds of sports teams, how do you appeal to everyone?

You can get a sense of what’s interesting to each individual viewer by keeping tabs on their viewing history. That’s where the contact or subscriber database comes in. By leveraging cookies to store the pages, articles. and other content each viewer consumes in a running profile, you can start to pick up on and leverage trends based on that behavior. If, for example, I only read articles about the New England Revolution and skip articles about the Boston Celtics, you might start to guess that my interests are squarely in the soccer/football arena. By surfacing those articles above the articles on basketball, ESPN would save me the step of having to search for them, making my whole experience on the site more relevant and fulfilling.

Allow Your Visitors to Contribute to Their Own Personalization Settings

Every website visitor brings with them a certain amount of information when they land on a site — it’s kind of like a digital footprint. From the moment someone arrives on your site, your analytics can recognize the device they’re using, the channel or site from which they came, and their general location based on the IP address associated with their computer. That IP address is what told ESPN that I was accessing their site from a computer in Massachusetts.

Given that, they then took the educated guess that I would be interested in Massachusetts based sports teams. It was a good starting point because it meant the personalized experience began right away.

But what if I wasn’t into Boston sports? What if I liked the Denver Broncos, The English Premier League, or somehow (inexplicably!) the New York Yankees? ESPN was smart to follow up their automatic personalization with filters I could tweak to correct my view. Checking in with your website visitor directly to make sure you’ve gotten personalization right is a great move to keeping your viewers engaged.

When in doubt, ask — particularly if personalization is going to have a big change in the visitor’s experience of your website. Sales Benchmark Index, an entirely different type of company from ESPN, does this kind of visitor-selected personalization to send visitors down the conversion path that works best for them.

SBI-personalization

Time will tell if ESPN’s website results in better numbers for the media company. The move to create a website that acts more like living, evolving channels than static brochures, however, seems to be a trend that is swiftly finding its way toward the norm. There is still more to discover in this space, including more than a few mistakes I’m sure companies will hit along the way, but a personalization strategy rooted in the desire to create a better experience for visitors holds a lot of promise for marketers and media companies alike.

website redesign workbook guide

Apr

8

2015

13 Quick Tips to Improve Your Web Design Skills

web-design-4

Designing your company website can be a challenging proposition. You’ve got to juggle the expectations of many stakeholders, and you can often hit obstacles that prevent new ideas from emerging.

I was the design manager for a large company website for nearly six years, and during that time, I found myself losing perspective of what our target audiences really needed.  Call it “tunnel vision.” When you work on the same website, it often helps to take a step back and think through new approaches. That’s the purpose of this blog post.

What follows are some tips, tricks, shortcuts and general advice for creating great website design. Can you try any of these to take your web design to the next level?

1) Design in shades of gray, then add color

If your web designer creates wireframes prior to visual designs, then you know the value of starting with shades of gray.  Turn your wireframe into a grayscale visual design, add your photography, then carefully add color to design elements one at a time.  

This will prevent an “overdesigned” website and help to place prominence on just the items that need it.

2) Use Keynote (Mac) to create rapid page prototypes

You don’t need Photoshop to create rapid prototypes of web pages, landing pages, call to actions or other web interface elements.  There’s an entire underground movement around using Keynote (that’s Apple’s version of PowerPoint) to create mockups.

There’s even an online repository containing user interface design templates for wireframing, prototyping and testing mobile and web apps in Keynote.

3) Add web fonts to your corporate style guide

It’s 2015, and if your corporate style guide doesn’t include web fonts, then you need to look into adding those so your website has the same governance that corporate documents and collateral does.

If you haven’t looked into this yet, Google Fonts is a great place to start. Find a suitable web font and define usage in your corporate style guide so you use it consistently online

4) Bury those social media icons

You did all that work to get people to your website, and yet you’re inviting them to leave? That’s what you’re doing when you place social media icons in a prominent location of your website, like in the header. Bury the icons in the footer.

If people are on your website, you want them to stay, learn and perhaps inquire about your services, not check out company picnic photos and bowling outings on Facebook. Social media should send people to your website, not vice versa.

5) Ditch the slideshow/carousel

When the homepage slideshow/image carousel came into fashion, it was a way to get lots of information on the first page of your website. The problem is that most people don’t stay on the page long enough to experience all of the tiles/messages.  

What’s more is that the messages and images usually aren’t relevant to your prospect’s first visit. What’s the one thing a visitor should take away from their website visit? Promote that one thing — usually what your company does in layman’s terms — and ditch the rest.

6) Simplify navigation

Reducing your visitors’ options might seem counter intuitive, but it can actually help guide people to your most productive content. Rather than overwhelming your website visitors with links to every page, simplify your navigation.

Eliminate dropdown menus and especially multi-tier dropdown navigation that only the most skilled mouse user can navigate, and go a step further by reducing the number of links in the header or sidebar of your website.

7) Remove sidebars

The sidebar has been an especially popular web design trend for the last ten years, especially on blogs. Many companies are finding that when they remove sidebars from their blogs, it encourages reader attention to the article and the call to action at the end.

Removing the sidebar on our company blog has increased the number of clicks on call to action graphics over 35%.

8) Get color inspiration from nature

Struggling to find the perfect color combination for your website or a call to action graphic? Get your inspiration from nature. You can either use your own camera to photograph natural wonders around you or find landscape photos on the web, the use a color picker to select a color. Nature’s color palette never fails.

9) Step away from the computer

I believe that good design starts with great planning. Getting your ideas down on paper or on a whiteboard can help you iterate through a design, refining it and adding detail as you go along. Drawing on a whiteboard can also make the design process collaborative and allow other team members to give input.

It’s also easy to erase pencil from paper or marker from a whiteboard and make quick changes, and once you have something concrete to work with, snap a photo with your mobile phone and get to work on screen.

Drawing web design ideas on a whiteboard

10) Use Pinterest to create mood boards

When you’re putting together inspiration and ideas for a new website, or you’re redesigning part of your website, you need a way to collect your inspiration in one place for future reference.

Did you know that you can use Pinterest to create a mood board of your favorite images, colors, layouts, patterns, sample websites and concept material? Another great advantage of using Pinterest is that other designers create and share mood boards too, and they’ve already curated a ton of resources that you can use.

11) Increase your font size

Typography is incredibly important in web design. Text is hard enough to read on a computer screen, so you have to make the important things stand out.

One way to do this is to increase your font sizes, especially for headings and important blocks of text. Consider increasing the size of your normal font, too.

12) Use white space

It may be hard to believe that using whitespace is a hack, but I evaluate websites every day that could use more whitespace. Not every blank area of the screen needs to be filled.

Even though whitespace and simplicity are in style right now, too many companies try to cram everything into a small space, or worse yet, “above the fold.”  Give your design room to breathe, and your website visitors will be able to find things easier.

13) Use the squint test

Want a quick way to learn what’s most prominent on your website? Back away from your computer screen and squint.  Most everything will become blurry, and only the larger, colorful, more prominent features will be noticeable.

It’s said that this technique helps a designer understand what a first-time visitor may notice when he scans your website. Will the visitor notice what’s most important?

While this is a big blog post about little design hacks, I’m sure you have some hacks of your own that I haven’t thought of here. What’s your favorite design hack? Why not share it in the comments below? Let’s see how many you can add!

New Call-to-action

Apr

7

2015

5 Reasons Why Your Web Design RFP Is All Wrong (and Why It’s Hurting Your Business)

rfp-1

So it’s finally time. You’ve decided your business needs a new website. There are probably a variety of reasons why (it’s outdated, it’s not mobile friendly, it doesn’t represent your brand, etc.)—but where to start? Well, many businesses will write a website RFP (request for proposal) and then send that RFP out to multiple agencies hoping they’ll respond.

But here’s the thing, some of the best agencies out there hate responding to RFPs because they’re time consuming and creatively constraining. That’s a problem because as a business, you want the best agencies to respond to your RFP so you can get the best website possible.

Here are five reasons why your website RFP is failing you:

1) You Don’t Establish Attainable, Measurable Goals

All projects should stem from goals and objectives. Your website is no different. You should have a clear set of goals—measurable goals.

Many website RFPs have goals around attaining new functionality (such as mobile friendly), however functionality is a means to an end, not a goal. Your goals should be around increasing leads from your website. Your website can increase leads in two ways: either by ranking higher in search engines or by improving your website’s conversion rate.

Pro Tip: Calculate your website’s conversion rate and then set a goal of improving that conversion rate. Your website’s conversion rate is basically the number of conversions (leads) you get over a set period of time divided by your website’s total traffic (sessions). Say you get 1,000 sessions per month in traffic and of those 1,000 you convert 20 into leads, your conversion rate would be 2%. In your RFP you should state “Our website currently converts leads at a 2%, our goal for the new website is to convert at 3%.”

When you set goals like this, you offer a challenge to agencies to come back to you with their ideas to not only give you a prettier website, but one that performs better for your bottom line.

2) You Don’t Share Your Budget

Listen, we’re all adults here. We’re professionals. And we’re busy. No one has time to play the “whoever says a budget number first loses” game.

Websites can cost as little as a couple thousand dollars to as much as hundreds of thousands dollars. If agencies know how much your budget is, they can submit a plan tailor-made for your budget (and your goals). If you keep it a secret, they might spec a website that is far too expensive, filled with bells and whistles you can’t afford (and might not even want or need).

Or they might spec something on the low end that comes under your budget but doesn’t include the strategic considerations you need to hit your goals. If you don’t share your budget, it’s a real guessing game that will cause problems when you try to move your selected agencies to the next round of consideration, only to find that agencies that submitted proposals that happened to meet your budget range don’t fit later on.

3) It’s a Turnoff

You’re probably thinking that hiring an agency is like hiring a new employee, so you write your RFP like it’s a job description, filled with requirements and reference requests. But you would be wrong to treat your agency search like an employee search.

Here’s the deal, you don’t want another employee; you don’t want someone you’re the boss of. What you want is a partner. A partner who will counsel you and guide you through this process because they are a seasoned professional in this field. So in essence, you should be hoping that your agency also wants to pick you back.

The courting goes both ways. So keep that in mind when you catch yourself writing lines like this:

“Agency Requirements — The hired agency must demonstrate a strong understanding of modern web technology and be skilled in seamless integration of web 2.0 best practices and social media platforms.”

Not only should that go without saying, but it’s a very dry way to present your company and your understanding of this project. Agencies get multiple RFPs per month, probably even per week. They are long, repetitive and often times extremely boring, chock full of so much fine print, that the most talented agencies (who don’t need to chase RFPs), drop the whole thing in the trash.

Your RFP should be an ad for what an exciting project this will be and what a great company you would be to work with. If you want to work with the best web design agencies out there, then they’re going to have to have to want to work with you too. If your RFP is a big bummer, the best and brightest agencies will opt out.

4) It Doesn’t Allow Agencies to Answer Creatively

Be careful with all your requirements. Remember you’re hiring an expert in website design because, well, you are not one. But just imagine you are a web design expert, and then you get an RFP from someone else (who is not an expert) filled with requirements telling you how to do your job. Not attractive right?

You need to leave room for agencies to solve your problems. If you spec everything from the content management system (CMS) down to the server requirements, your agency may not have any room to offer other recommendations, so they might not even bother.

Instead, write your RFP in a way that lets agencies suggest what they feel is the best solution for your company and your goals. Your RFP should ask for advice. Go ahead an include lines like “We would like to build the new website on the HubSpot COS or WordPress, however, are there any other options we should be considering?”

5) It Doesn’t Require Inbound Assets to be Created

Once your new website is launched and live and your champagne-fueled launch party is over, then what’s your plan? If you invested all this money in building a website, one would hope there would be a plan to drive traffic to it after it’s live.

Not only should there be a plan for traffic driving post launch, the website should have been built with this plan in mind. These days all websites should be built to support an inbound marketing strategy.

This means the site should have a blog (that is easy for you to update), a landing page template to follow, a call-to-action (CTA) strategy and even a resource center. Your new website should position you for an inbound content marketing strategy from day one.

So.

Now that you know the reasons your website RFP might be hurting your business, hopefully you’re ready to rewrite it better. Be clear on your goals and transparent with your budget. Show enthusiasm for your project and allow for creative responses.

And finally, think about your post-launch traffic and lead goals. With that approach, you’ll be well on your way to a website RFP that will attract a true marketing partner to help grow your business online.

New Call-to-action

Mar

27

2015

18 of the Best Examples of Mobile Website Design

mobile website examples

Now more than ever, businesses are focusing on creating delightful mobile website experiences.

After all, Google has been heavily favoring mobile-friendly websites since they updated their algorithm in April 2015 and again in March 2016. And that’s crucial, seeing as there have been more Google search queries on smartphones than on desktop computers and tablets for over a year now.

Going forward, Google will only continue to raise the bar for what it considers to be mobile-friendly (including page load time) and reflect that in its algorithm updates. So if you haven’t been focusing on improving your mobile experience, you’d better prioritize it now, or your search ranking could really suffer. Download our free guide here to learn how to design your own mobile-friendly website.&nbsp;

To help inspire any mobile website design changes you’ll be making, here’s a list of 18 companies who really nailed their mobile web experience.

18 of the Best Mobile Website Design Examples

1) Shutterfly

Shutterfly is an online service that allows users to create photo books, personalized cards and stationary, and more. Because more and more people are taking photos and then accessing them using their smartphones, Shutterfly recognized the need to create a great mobile experience for their customers — and they delivered.

Shutterfly accomplishes two key goals on their mobile website:

  • It’s easy for users to find out information about their offerings.
  • They’re selling that information by way of beautiful imagery.

When you arrive on their mobile site, you’ll see the menu items have been enhanced into large buttons at the bottom half of the screen. This makes it easy for users to quickly select which option they’re interested in learning more about.

shutterfly-mobile-site-1.png

Once users click through to one of those options, they’re greeted with large photos showcasing what Shutterfly is capable of for easy browsing.

shutterfly-mobile-site-2.png

2) Google Maps

Everyone has their favorite map or directions application. Mine is Google Maps, which I use whether I’m walking, driving, biking, or taking public transportation. What’s special about their mobile website is that it’s virtually indistinguishable from their downloadable mobile app.

The screenshots below are taken of their mobile website, but if you’re familiar at all with the app, you’ll notice they look exactly the same. Not only is the appearance identical, but the mobile website has the speed and functionality of the app.

google-maps-mobile-site-1.png

google-maps-mobile-site-2.png

3) Typeform

Typeform is a Barcelona-based tech company with one, simple mission: to “make forms awesome.” Their desktop website is really beautifully designed, greeting visitors with succinct copy, high-definition videos, relevant animations, and other, more complex design components.

But for mobile users, they recognized that complex design components like video and animations could significantly affect page load time, among other difficulties. That’s why they actually removed many of them — which decluttered the site and simplified the overall mobile experience. The mobile website is a simpler version of their desktop website, and it’s still beautifully designed.

typeform-mobile-site-1.png

Take note of the large buttons in their menus — perfect for tapping with your finger on a mobile screen.

typeform-mobile-site-2.png

4) Etsy

Etsy is an ecommerce website where people can buy and sell vintage or handmade items. Most buyers who visit Etsy’s website are there to do one of two things: Either they’re searching for a specific item, or they’re browsing items in categories that interest them.

The mobile website caters to both types of visitors from the very beginning. When you first go to their mobile website, you’re greeted with an option to search for specific items, shops, or categories.

etsy-mobile-site-1.png

Immediately below the search bar are thumbnail images of trending items that showcase some of the most popular things you can buy on Etsy. Mobile users can view these trending items in a collage format, and the images are big enough for them to easily tap with their finger.

etsy-mobile-site-2.png

5) Adrian Zumbrunnen

This is the personal website of Adrian Zumbrunnen, a UX designer, writer, and speaker. When you visit his website, you’ll notice right away there’s something very unique about it: It’s a conversational website.

It almost looks like a text message conversation you’d normally have on your phone — including the ellipsis to show he’s “typing.” Users are given two response options at the end of every exchange, so it’s kind of like a “choose-your-own-adventure” experience.

While the mobile and desktop experience are very similar, the desktop website feels like it was made primarily for mobile — which could be the direction sites will go in the future.

adrian-zumbrunnen.gif

And if you’d prefer not to engage in the conversation-like exchange, you can simply scroll down for details.

zumbrunnen-mobile-site.jpg

6) Elf on the Shelf

Elf on the Shelf is, relatively speaking, a fairly new Christmas tradition based on a children’s book. If you’re unfamiliar, the basic premise is this: The book tells the story of Santa’s scout elves, who are sent by Santa to watch over children in their homes all over the world and report back to Santa.

Along with the book, parents can purchase an elf figurine, which they’ll subtly place somewhere in their house where their kids can see it. Every night leading up to Christmas, parents move the elf to a different location around their house to “prove” to their kids that the scout elves are real and always looking over them.

When you first arrive on Elf on the Shelf’s website, you’ll see that there are actually numerous types of Elf on the Shelf products you can purchase. But instead of forcing users to scroll through a long, text-based list, the web designers made it easy for users to simply swipe from left to right to look through all the different options — ideal for visitors browsing products on the website.

elf-on-shelf-mobile-site.png

7) BuzzFeed

BuzzFeed is a news company known for it’s viral content and popular quizzes. It also happens to be one of my favorite sources of entertainment during my commute to and from work.

And where do you think I’m checking BuzzFeed during my commute? You guessed it: on my phone. BuzzFeed knows that a lot of their visitors are visiting their site on mobile, so they’ve taken great care to create a smooth experience for their on-the-go readers.

When you arrive at BuzzFeed’s mobile website, the first thing you’ll see is some of their most popular pieces of content displayed in a simple, collage-like format using large images that are easy to tap with your finger.

buzzfeed-mobile-site-1.png

For users interested in specific categories, there’s a clickable menu in the top left-hand corner of the screen that lists out all the post categories.

buzzfeed-mobile-site-2.png

8) Evernote

Evernote is an application that allows you to store notes, images, and web articles and then access them across all your devices. Because users tend to download the app or access the website on multiple devices including desktop computer, smartphone, and tablets, it’s essential that Evernote get the mobile experience right.

If you look at Evernote’s homepage on your desktop computer, you’ll notice how clean the design is. The value statements are short and to-the-point, and the images add to the positioning but don’t clutter the page. When you look at their mobile website, they’ve kept this design and style entirely intact. Their mobile website is clean, simple, and doesn’t detract at all from the value of the app.

evernote-mobile-site-1.png

Plus, there are those large call-to-action buttons again, which are great for mobile users.

evernote-mobile-site-2.png

9) Huffington Post

The Huffington Post is a well-known news outlet that reports from everything from politics and current events to entertainment and technology. What makes their mobile website unique is that they actually alter their headlines slightly for mobile users so their content is more easily scannable.

If you compare the desktop versus mobile websites, you’ll notice that the mobile website has fewer words on the homepage. The headlines are shorter and much more digestible — perfect for someone skimming or reading on a small screen.

huffington-post-mobile-site-1.png

As with BuzzFeed, you’ll find a clickable menu in the top left-hand corner of the screen listing out all the post categories.

huffington-post-mobile-site-2.png

10) Express

Express is a clothing store that caters to young men and women. Because their audience often comes to their website to browse clothing, it’s important for their website to include big, clear images of their clothing — especially on mobile devices, when users will need to tap items on the screen with their fingers to click through for purchase information.

Express takes their mobile experience a step further than most online retail sites. If you slide your finger from left to right across an image showing a piece of clothing, the image will change so you can see the clothing in a different view. In other words, users don’t have to load another page to see multiple pictures of the same article of clothing.

Look at the image on the top right in the following two images to see how it changes when you swipe to one side:

express-mobile-site-1.png

express-mobile-site-2.png

11) Nationwide Insurance

Nationwide Insurance provides insurance and financial services. You might think a financial company would have a really complicated website, but on mobile, Nationwide Insurance nails down the simple user experience.

When you arrive on their mobile site, you can get an auto insurance quote right away by entering your zip code — or, alternatively, you can “Find an Agent” to learn more information about their services. Other than logging in or signing up for an account, that’s all the homepage offers.

Although this gives users limited options, it makes for a much easier experience for visitors using small screens. This is a great technique to lead potential customers in the right direction.

nationwide-mobile-site.png

12) Squaredot

Squaredot is a HubSpot partner agency that helps marketers build out their inbound marketing strategies. Their mobile website is colorful, simple, and makes for easy navigating. But what sticks out to me most is how they’ve adapted their blog for mobile users. Check out the screenshot below, which shows one article in a list of many. Each article takes up the entire width of the screen, making for large, eye-catching images and text that’s big enough to skim

squaredot-mobile-site-1.png

We like how they’ve optimized their online forms for mobile, too. Check out how large the text and the form fields are in the subscription CTA below, making it easier for folks to fill it out on their mobile devices instead of pinching and zooming.

squaredot-mobile-site-2.png

13) Zappos

Zappos is an online vendor for shoes and clothing known for their stellar customer service. Their top priority on mobile is to help users search easily for the items they’re looking for on their website, so they’ve put a large search bar at both the top and bottom of their mobile website to make it super easy for them.

This is what the top of their mobile site looks like:

zappos-mobile-site-1.png

And here’s the bottom of the page (equipped with a delightful signoff):

zappos-mobile-site-2-1.png

14) ABC

ABC is a television broadcasting company known for popular shows like “The Bachelorette,” “Battle Bots,” and “General Hospital.” Users visiting ABC’s desktop website are greeted with a ton of options: view their television schedule, check out the Oscar winners, watch some of your favorite television shows, or even look at entertainment news relating to those shows.

But ABC knows that the experience on a mobile device should be simplified. When you visit the ABC website on a mobile device, you aren’t offered nearly as many choices from the get-go. Instead, you’re given one option: to scroll through large, clickable images representing all their television shows. Users can scan through these options and click into any show they want.

abc-mobile-site.jpg

15) Lean Labs

Lean Labs is a HubSpot partner agency that creates engaging, responsive, and high conversion web solutions. (They were also featured on ABC’s hit TV series Shark Tank.) The folks over there do a great job of providing a smooth experience for their mobile users, especially with regard to their design techniques and the emphasis they place on their core values, which are apparent to visitors within seconds of landing on their mobile site.

Notice how their mobile website uses scale and color to distinguish certain elements of their page:

lean-labs-mobile-site-1.png

And, like I said before, their core values — growth strategies, responsive web design, and inbound marketing — are clearly visible to mobile users scrolling through the homepage, with relevant icons to match.

lean-labs-mobile-site-2.png

16) SAP

SAP is an enterprise software company that manages business operations and customer relations. They enhance the mobile experience by condensing information.

More specifically, they combine some of their calls-to-action into sliders, whereas their desktop website has these CTAs laid out horizontally. This helps keep things simple so mobile users aren’t overwhelmed with a lot of information at once, and it also ensures none of the CTAs are too small to read.

SAP-mobile-site.jpg

17) KISSmetrics

KISSmetrics provides analytics software for businesses. On their homepage, there’s a lot of information explaining what the software does along with a testimonial.

But their mobile site is displayed a little differently: On a mobile device, the information on their site is shown in a list with alternative dark and light modules. This makes it easy for users to skim the page without getting lost in text.

kissmetrics-mobile-site-2.png

They’ve also made the text and fields on their forms large and easy to read:

kissmetrics

18) idig Marketing

idig Marketing is a development and communications provider. Their mobile website is laid out similarly to their desktop website, but I especially liked how they incorporated the interactive heart icons into their blog posts so users can “Like” their posts.

This mimics the “Like” heart icon in Instagram and Twitter, which is easily recognizable for mobile users familiar with those platforms.

idig-marketing-mobile-site-2.jpg

These were some of our favorites. Which other mobile websites have caught your fancy? Share with us in the comments!

Editor’s Note: This post was originally published in March 2015 and has been updated for accuracy and comprehensiveness.

free guide: make your site mobile-friendly


free mobile-friendly website guide

Feb

11

2015

5 Tired Web Design Trends Marketers Should Retire

webdesign

Beware… bad web design can happen to good web pages. Compelling design is an imperative aspect to your website. Your visitors will spend an average of .05 seconds before they form an opinion of your site once your page loads. 

Make sure your design aids the user experience to ensure they stay on your site. Learn from these tiresome design flubs so your website doesn’t fall for them.

1) Sliders

I know what you’re thinking, “how did this make it on the list?” The truth is, sliders aren’t working for you; they’re actually working against you. As a marketing company, you want to direct your viewer’s attention to how you can solve their pain points. Don’t give them a chance to lose track of this by distracting them with multiple images.

Even though all your messages may be relevant, you need your target audience to hone in on the main value proposition. When someone lands on your page, they’re on the hunt for information pertinent to what they’re looking for. It’s very unlikely that a visitor will sit idle and view all images in a slider. The only reason they’re usually being utilized is because a client asked for it.

Sliders are made using JavaScript and multiple large images. This can be detrimental to your website’s loading time. On mobile devices, these images tend to slow down your page load speeds to a crawl. As more people today access content from a smartphone, rather than a computer, this is especially important (Convince&Convert). It takes just three seconds of load time until you lose your precious visitors (Econsultancy). Slow your website down with sliders, and your website will start to look like a ghost town.

2) Snarky Pop-ups

Pop ups that offer you the option to subscribe to a blog, or engage in another action on your website, aren’t a bad practice, so long as they don’t hijack the user experience and subvert marketing efforts. A message that pops up after an appropriate time with an option for you to easily opt out of the box is effective. When pop-ups become mean – now that’s a problem.

When the pop-up is labeled something snarky, such as “no, thanks. I like missing out on leads….” it can be offensive, or annoying, to your audience. Never use wording on your pop-up that tries to get your viewer to feel bad that they’re not doing something. People are savvy; they will easily see how you’re trying to trick them… and they won’t like it.

3) Auto-play Videos

No one wants to be ambushed by sound and video.  The goal is to get viewers to stay on your page, not drive them away. In an effort to get away from the noise, in many cases, your visitor will just leave your site. Respect your viewers and give them the ability to opt-in to watching your video.

4) Separate Mobile Sites

What Google says goes. If you feature a responsive, smart design, Google will give you a better rank and prefer your website over another that doesn’t use responsive design. A “mobile only” version of your site doesn’t give you a high quality user experience like having a responsive site does. Also, Google doesn’t recommend them; you’ll actually get penalized due to the duplicate content issue.

Many people who visit websites on a mobile device expect to see similar functionality to the desktop website. Mobile-only versions of websites tend to differ widely from the desktop counterpart, and thus only confuse the user.

5) Skeuomorphism

Skeuomorphism: this trend had a long life span, and I’m happy to say that it’s finally on it’s way out. It’s the design principle that makes digital images look lifelike– and it’s been used far too much.

At first, it was a functional design technique. It eased the transition of doing something the old way by cuing you into how it’s done the new way. This just makes design on websites, for lack of a better word, look cheesy. People have already realized what to do with a notebook, or how to use a calculator on their phone. The iOS7 dropped the trend, and so should you.

There are instances where a specific group of your users may not be as tech-savvy as others on your site, and flat design tends to confuse this group; think Windows 8. With these users, skeuomorphism can prove to be helpful. You can subtly use this design technique with buttons and other interactive features on your website to gently guide this user group in the direction you want them to take.

No matter what design trend you’re utilizing, always put yourself in the mind of the visitor. Do your design efforts hurt or improve the overall user experience? Diversity in web design is what makes design fascinating… just make sure that diversity supports the overall goal of your website. It’s a big world out there: if you don’t captivate your visitors, someone else will.

New Call-to-action

 


Below are Sister sites of the Site you are on Powered by: MCC Group
Advertising Pages Exchange Free Traffic Exchange Free Links Directory Free Promotion Forum