Category Archives: Website Design

Four Common Responsive Design Mistakes

responsive

 

  1. Starting with the full-size website.

It is so very tempting to begin website design on the full size desktop website that has not been scaled down.  The full size desktop version is where your website will look beautiful.   However, it is much more difficult to make a streamlined and easy to use small scale version that is consistent with your desired image.  Starting big will lead to you trying to cram a full size website into a small space. Instead, thoughtfully and creatively tap into the potential of the mobile experience, it will lead to a better experience on both small screens and big.

 

  1. Not Thinking About Touch

Consumers interact differently with mobile screens than they do on a desktop.  That may seem obvious, and yet many responsive designs are difficult to use on small screens.  The touch targets for buttons are far too small to use comfortably forcing users to zoom in the screen to actually hit it, or maybe the navigation is text heavy and difficult to follow instead of indicated with simple visual clues that don’t hog screen space.  Remember that mobile is now the norm, according to Search Engine Watch, Google’s mobile visitors surpassed desktop visitors in 2014, so the smallest version of your website needs to be perfect and easy to use.  Speaking of Google, the search engine now uses search rankings to penalize websites that have any mobile usability issues.

 

  1. Hiding Content on Mobile

Sites will often choose to hide content from mobile users in order to simplify the layout.  Don’t do this.  Mobile web users want full functionality and content, limiting content confuses users and often causes them leave if searching for information, or to switch devices if shopping.  Even if the user follows through and purchases, you have created a more difficult user experience and 64% of shoppers who are dissatisfied will shop somewhere else next time.  Moreover, if you are simply hiding content, mobile devices are forced to load with the slowness of a content heavy website with none of the reward, search engines can also catch the hidden content and reduce your mobile search ranking.

 

  1. Creating Heavy Websites

No website can afford to load slowly on any platform. A 2009 study shows that for every additional second of load time, user satisfaction declines 16% and conversions decline 7%; 40% of users will abandon a website that takes more than 3 seconds to load. Responsive websites must be light in order to render quickly whether the consumer is using fiber optics, broadband, or a 3G mobile connection. A slow loading website is yet another factor that will hurt your all-important search engine ranking.  One essential tactic used to lighten the load is to render image resolution depending on screen size, so a huge file does not slow image loading on a mobile screen, and a small resolution image does not look terrible on a 27 in. monitor.

Quiz Me!

 

Clever schoolmatesThe first goal of your company’s marketing and online presence is to create customer interaction.  You may want to make sales, get subscribers, and create email lists along the way, but that can only happen once you first convince someone to interact with you and your brand.

Interactions can be achieved through calls to action, asking your customer to go to your store, enter their email address, download your brochure, or pick up that phone.

But there are levels of calls to action, certainly entering an email address or downloading a product guide from your website are smaller demands than physical actions such as going to a store or dialing the phone.  It is often better to start with a smaller request, to ease someone in.

One online request that consumers find difficult to resist is the online quiz.  There is a reason Buzzfeed is incredibly popular, and no, it’s not because of their cutting-edge news coverage.  It’s because their many fun lists and quizzes draw you in until you are addicted.  Which Disney villain are you?  I’m Jafar.

People love being the star of their own story, so make it about them!  Quizzes don’t have to be about Disney characters – for a consultant agency try “What kind of leadership style do you have?  For a bookstore “Which Steven King protagonist are you?”  Or even “How does your manufacturing style compare?” Quizzes can be fun or informative but either way,  people are actively engaging in your site, enjoying a brand-related positive experience, receiving subtle marketing, and possibly feeding you personal information.

Don’t forget to end the quiz by asking for their email address or another stronger call to action.

Sooo, What Exactly is a Landing Page?

student-849825

You’ve heard the term, you’ve nodded knowingly about them in conversations, but what exactly are landing pages?

A landing page is a website page meant to target a specific audience and obtain their information.  A landing page might be used as a target for people who find your website through an email campaign, an ad, or through specific targeted keywords.

Sending all traffic from many different sources to your generic home page means you are missing a powerful opportunity for your website and your business.

A landing page calls for action catered to your specified audience – it asks for contact information, provides a newsletter sign up, or whatever you want this specific type of visitor to do.  Often an interested person who lands on a website homepage instead of a landing page will get lost, explore the website a little and then leave because no direct action is requested of them once they arrive.

An effective landing page takes immediate advantage of your visitors’ interest.  It has limited navigation, making it less likely that they will move on other internal pages. It is short and to the point as not to bore them, and it offers immediate action.  It also delivers value.  With understanding of what is compelling for you audience, your landing page should provide a valuable offer in exchange for their contact information, whether that is a discount, information, or access.

Plan ahead, what call to action and offer would be effective for your audience?  Is there a strong visual element you can include that will complement the specific call to action? What title should you use that will include the most effective keywords?  Once you can answer these questions, you are ready to create your own revenue-driving landing page for your own business.

6 Ways to Establish Trust as a New eCommerce Retailer

laptop-1367299_1920

  1. Flaunt your Compliments

When customers rave about your business, flaunt it!  Posting gushing reviews on your website helps future customers feel more secure.

  1. Activate Your Social Game

Yes you have a Facebook and maybe even an Instagram account, but a post every six months is not enough.  Regular posting of new products, insider content, chatting up confused customers, are all part of the necessary social media game.

  1. FAQ

Answer questions before they are asked! Show customers that you are always one step ahead of tem and think of every possible scenario a buyer could go through.  Create a FAQ page and utilize thorough product descriptions.  Offer clear policies on shipping and returning items.  Customers who have a positive and easy return experience are actually more likely to shop with you again.

  1. Introduce Yourself

It is easier for customers to trust a business with a face, so introduce yourself and your brand.  Spotlight the people working behind the computers and you will create a sense of human connection.

  1. Connect

Make yourself available so your customers can connect with you.  Be available and responsive with email, phone, social media, and online forms.

  1. Compete

If you are willing to put your brand out there in direct competition, consider offering a comparison chart.  You can set up a comparison table breaking down what your products offer and what your competitors offer.  This shows strong confidence in your product.

Don’t Let Your New Website Go to Waste

So, you have a new website. Or, maybe you have branched out to a new form of social media, you finally got that Instagram account.  Congratulations! A new digital footprint is an accomplishment worth celebrating. quote

Now, you need to promote it.  Creating something wonderful is not enough, you have to let people know it exists.

Start with an official email blast. Add pictures, graphics, and compelling text and send the email to every contact you have. Do not be afraid of self-promotion, you have the perfect excuse to utilize your contact list!

You can recycle that content to your existing social media channels as well, hit Facebook, Twitter, and LinkedIn with the same content.  For a website launch, you can actually stretch this process out over a week or more.  Drop teasers along with a countdown over the course of days until you reach “launch day” when you utilize your prepared content.

If you are willing to spend money for promotion, consider Facebook ads.  Facebook ads are less expensive than you think, some campaigns can be created on as little as $5 or $6 a day.  Because Facebook contains demographic information on all of its users, you can really target your ads to the appropriate audience.  Internet users spend approximately 4x more time on Facebook than Google, so if you are interested in dipping your toes into internet advertising, start there.

What exactly is Responsive Web Design?  And do you need it?

Responsive design is the new standard for modern website design.  And yes, you need it.

Okay, so there is a little bit more to it than that.  Any modern website will be accessible from cell phones, tablets, laptops, and huge desktops screens.  It is impossible to create a static, unchanging website that will look great and be easy to use on every single type of screen.  For a while, designers were often developing two separate websites, a full desktop version, and a stripped down mobile version. However, this was not a perfect solution. There are wide variety of screen sizes and dimensions, what looks good on the smallest smart phone, will not look good on a tablet, and with the vast array of devices on the market, it is impossible to create a set design for every device.

Then came the advent of responsive design.

responsive design

Responsive design is the concept of a website which responds to screen size, rendering a display to be optimized for and easily usable on any size device.  By using flexible grids to layout a website, developers create a fluid website that adapts to its environment.

Responsive design is no longer an optional upgrade for a business, it has become the standard.  Ignoring all trends, at the end of the day there are two reasons you need a responsive design website.  1) Google prioritizes mobile optimized websites on all Google searches conducted on a mobile device.  Considering that mobile Google searches outpaced desktop searches back in 2014, your search engine ranking is being negatively impacted in the majority of searches.  And 2) Users may not notice if your website is optimized, but they will notice if it isn’t.  It is frustrating to touch small buttons, zoom in and out, and scroll side to side.  It is not a positive experience.  User research indicates that 64% of Internet users will not return to a website that they found frustrating to use.

Call Collective Design Works at (423) 591-8656 or email us at info@collectivedesignworks.com for a consultation on upgrading your website to a responsive design.

How to Steal Business from Your Competitor

 

Winning clients is not just about proving your company can do a good job, but also about convincing them you can do better than your competitors.

Identify Your Competitor

If you operate an independent bookstore is your direct competitor actually the big franchise bookstore? Maybe it is magazine stand at the mall? The comic book shop in the same shopping plaza?

Identify Their Client Base

If you are interested in attracting the comic book buyers because of the regularity of their purchases you first have to figure out who their client base.  Comic book lovers, yes.  But are they people who are looking to also be able buy collectibles? Are they drawn in because of the sociable nature of the store? Or is it reliance on the knowledgeable staff that brings them in?

Find Their Flaws

Is their special ordering process slow?  Chairs not comfortable?  No business can cater to everything and everyone, find out where they are lacking.

Create Your Niche

You know your business.  Make yourself at least competitive in all major areas comparative to you competitor, and come out swinging in one area where your competitor is not strong.  Your clients need a reason to choose you, create one.

Optimize Your Website to Go After Those Clients

Now it’s time to draw in your desired clients.  A very focused use of Search Engine Optimization (SEO) is the weapon of choice.  Create a section of your website specifically addressing your new niche, incorporate keywords throughout your website, and follow our SEO 101.  Using extremely focused keywords for a focused client draw means you are not attracting as much of the general population, but there will be less local competition for those keywords, allowing you to quickly rise in search engine rankings

Rescuing Abandoned Shopping Carts

While estimates vary, according to Econsultancy more than two thirds of all online shopping carts are abandoned.  Meaning, two out of three times someone adds an item to an online shopping cart, they do not follow through and purchase.

Don’t abandon these sales – these customers are already considering a purchase and are hot leads! Instead, try to “rescue” the sale after they have abandoned the cart.  The most effective tactic to try to recover these customers is to send an abandoned cart recovery email.

If you are considering setting up an online storefront or revitalizing your current one, then it is essential to deploy this tactic.  The online retailer Shopify introduced this email tactic in September 2013. In the first 12 months of use, they were able to recover 3.6% of all abandoned carts.  Over the course of the year this added up to $12.9 million in additional revenue.   They tested with emails being sent out between 6 and 24 hours after cart abandonment, with 6 hours being the most effective time period.

When analyzing your company’s online shopping experience it is also essential to review your checkout process for best practices.  Are you showing pictures of your product on the checkout page?  Are you showing security logos and ensuring clients about the privacy of their information?  Do you offer multiple payment options?  Do you offer support?  Do you offer checkout without requiring registration?  Do you offer a clear and visible refund policy?  Is it easy to edit the cart?  If you aren’t following these basic tenants, it is time to start now in order reduce cart abandonment and stop customer loss before it happens.

Goldilocks’ Web Design

Once upon a time, there lived a golden-haired consumer who decided to search the Internet to research buying new camping gear to use on her summer adventure in Chattanooga, TN.

The first website she went to had a minimalist design that looked beautiful at first.  But it had very little actual information and was pretty much useless, so she left uninformed and returned to her search.

The second website she went to was full with information.  It was full of “best of” lists and in-depth discussions of different levels of water resistant fabric treatments, a novel could have been written simply from the hiking boots section.  It was way too much for the overwhelmed millennial and she decided to educate herself and learn more as she obviously did not know enough to buy any of this gear.

After returning to her search once more, she discovered a third website.  It was not only pretty and easy to use, but pages also included helpful specs, reviews, and a short-breakdown of what kind of gear was best for what length of trips.  This website was just right! Feeling informed and much more confident, she bought everything she need to go camping.  Two weeks later she had a wonderful weekend trip and even saw a bear!

The End

One quick way to get visitors to bounce off your shiny new website is to provide them with a beautiful design that is less than helpful, or, worse, a torrent of information they neither requested nor needed. Most visitors will leave if they don’t immediately find what they are looking for and look for an alternative rather than spend the time on your site trying to figure out what you have to offer.

It is important to find a balance and only provide information that will bring users to the next step they ask for and make seeking this information fun and easy to obtain.

The Call to Action: A Design Perspective

Note: Remember to read the previous blog The Call to Action: A Copywriting Perspective

The design of a call to action statement or button ensures a visual focus on this essential piece.   In a well-known test, Hubspot conducted a simple A/B test of two online call to action buttons.  One was green, one was orange.  The orange button outperformed the green button almost 2 to 1. Many people walked away from this well-known case study saying orange is better than green for conversion rates. When making a choice- make your call to action button orange.  This is wrong.

Taking an actual look at the websites used leads to slightly different conclusion.  The primary color in use in the test website was green.  Orange provided a high contrast and made the call to action button stand out from the rest of the page, making it much more effective.  So while this study does not tell us that orange is better than green in every case, it does tell us that the color choice of a single button can have an incredible impact on your website conversion rate.

Obviously, the specific graphic format of a call to action statement or button is an incredibly important factor.  It is absolutely worth it to spend time finessing and testing different styles. Taking advantage and grabbing more of the consumers who are already viewing your web page or reading your direct mail is a wise investment that is considerable lower in cost than paying for new marketing.

Factors to Consider:

  1. Color

Make it pop, don’t be afraid to contrast the rest of your page.  If you must have two competing calls to action, use color to indicate the more important one.

  1. Position on page

Guess what? People don’t read all of your copy.  They really don’t.  You are doing really well if your readers are reading through an average of about 60%.  Putting your call to action at the bottom of all of the copy that people often don’t scroll through isn’t a great idea.  Try testing it out in different locations and see how your response rate varies.

  1. White space

In a busy design scheme a perfect call to action can simply fade into the background. Above anything else on the page, your call to action must stand out.  Use white space effectively to make sure it doesn’t get lost in the crowd.

  1. Make it big

Seriously, make it big.

  1. Have the same call to action available in multiple places

While a single call to action is fine on a postcard, on bigger spaces don’t be afraid to repeat.  Don’t just have the call to action on your website home page, it’s okay to use it throughout your site.  Printing a newsletter?  Have a call to action in the interior as well as the front page.

  1. Make it easy to read

Avoid ornate or small fonts and visual clutter.

  1. TEST

Test everything!  It can be very hard to predict what visual representation people are most likely to respond to.  So stop trying to use sorcery and instead find out by testing.   Test button size, box color, use of white space, number of colors, content, page position, everything you can think of in simple A/B tests with a single controlled variable.

 

Web Design For Seniors

By 2030, 19% of the US population will be over 65 – about the same percentage as people who own an iPhone.  There are specific products and programs designed for older adults, but the truth is everything should be designed with the realization that older adults might use it – they are 1/5 of the potential consumer base.  This applies to websites as well as everything else.

Here are a few facts to keep in mind when designing for a senior-friendly web presence:

Keep an eye on color.  The ability to distinguish color declines with age even for seniors who have not previously experienced color blindness.  Shades of blue are often the most affected, different shades can often become difficult to distinguish and can also appear faded and desaturated.  Using multiple similar shades of blue in design or text can make your website difficult for seniors to use – instead make color choices with high contrast in mind.

Be aware of the interaction between responsive design and font size.  Responsive designs are becoming the new industry standard, it is important that every website appear beautiful on every size screen – from smartphone, to tablet, to large desktop monitor.   What we may not consider is that when the website adjusts to smaller screen sizes, the text can get considerably too small for seniors to be able to read.  Also, users may not know how to manually change the screen font size.   So make sure your font sizes are always at least 16 pixels, and aim for high contrast.  Additionally, consider adding a method to increase font size that is easy for users to locate.

Understand that motor control changes over time.  Motor skills decline with age, which is why many older users prefer tablets to smart phones –  older adults are the largest user group for tablets.  With desktops, some older users will even use two hand on a mouse to increase control.  Try to make clickable or touchable buttons at least 11 millimeters diagonally in every case.

Be sensitive with your password reminder questions. Recently I updated my bank online security questions.  I was required to pick three.   It was difficult to pick three questions that I was sure I would always know the answer to and in what format I answered it.  Now imagine that you are 80.  Do you think you could remember what streets you lived on 60 years ago? What model year exactly your first car was?  Many “standard” security questions become downright impractical when accounting for age.

The Essentials of Newsletters

Newsletters can be an effective marketing tool, establishing your business’ reputation and opening up a stream of regular communication between you and your customers.  They can also be junky, obnoxious pieces of self-promotion that customers throw in their trash or delete from their email as soon as the newsletter is received.  Try out these Dos and Don’ts for a successful newsletter that your clients and customers will actually value.

Do

  1. Include Relevant and Informative Content

Talk about what’s coming up at your business, recent successes, highlight your employees, discuss implications of industry news, and offer helpful tips.

  1. Use a General Template

Your newsletter, as representation of your brand, should be professionally designed and follow a general template so it is easy to read every issue. Your logo, slogan, and business information should be clearly identifiable so there is no doubt who sent the newsletter.

  1. Focus on Visual Appeal

The average person’s inbox is full of junk mail as is their physical mailbox, you only have a few seconds to make sure your newsletter is not ignored. 90% of information transmitted to the brain is visual, use this.  Integrate beautiful pictures and infographics, on your e-newsletter, don’t be afraid to include video.  Have a definable personality and use visual elements to make it pop.

  1. Allow People to Unsubscribe

Include links or instructions to unsubscribe from your newsletter.  Don’t force people who don’t want your content to receive it, that is the fastest way to make a bad impression.

  1. Provide a Copy on Your Website

After spending time to make beautiful and informative content, don’t restrict it to the select few.  Have an easily accessible copy available on your business website, always post it in the same location.

Don’t

  1. Use it as a Sales Piece

A newsletter is not a distribution of coupons or upcoming sales.  To create brand loyal customers who trust you as a source of industry information, you must first prove that you are after more than just the next sale, don’t waste this opportunity.

  1. Require More Steps

Do not make your readers go to your website for more information or fill out forms to get what they need.  It’s okay to provide links or further resources, but your newsletter should be able to function as a standalone piece.

  1. Focus on Me, Me, Me!

It’s not bad to talk about yourself or highlight your employees, it is bad to talk ONLY about yourself.

  1. Include Irrelevant Content

It does not make your newsletter look clever and fun or even caring, it makes it look unprofessional.

  1. Have a Long Newsletter

You have competition, there are other newsletters, emails, and flyers out there.  People don’t have time to read everything.  If you want people to return and open your NEXT issue, keep your newsletter short.

Interacting With Photos in Digital Content

Having beautiful photographs and graphics is essential to online content – no one wants to read a plain wall of text.  Yet users don’t always interact with photographs the way developers and designers would hope or expect.   Online users will pay intense attention to photos and images that they believe contains relevant information, but will “ignore fluffy pictures used to jazz up Web pages” according to a study by the Nielsen Norman Group.

The Nielsen Norman Group has conducted several eye tracking studies observing how users interact with different content.  Over time, researchers noticed a dramatic difference between how users interact with pictures.  Either the pictures are careful evaluated and returned to several times or they are completely bypassed and not even acknowledged.

Photos of actual products or real people are highly valued content.  When relevant photos are present, users may even spend more time examining the photos than reading provided copy.  Users also value the ability to enlarge interesting photos.  However when a photo is either an obvious stock photo or a real photo irrelevant to the information at hand, users ignored them outright.  Visual bloat has annoyed users for a long time and users are now practiced in casually dismissing entire sections of a website, instead searching for actual relevant information.

Study by Nielsen Norman Group:  http://www.nngroup.com/articles/photos-as-web-content/

SEO 102: The Beginners Guide, Part Two

If you have not had a chance to read SEO 101, the first part of this blog, go back and start there before continuing here with part two.

How do search engines work?

Before you even begin typing in your search query, search engines have already done the majority of the work needed to find websites related to your search.  Search engines “crawl” (yes, that’s a real technical term) the Internet, looking at content of web pages, refreshing their caches of old content, and indexing new web pages.  They index all of the pages they find, creating their own massive internal map with information about every site and every page.

When you type in a search, the search engine must respond with websites that it believes are the best and most appropriate.  Search engines first bring together all of the websites they believe are relevant.  But Google does not simply look for web pages that contain the same words that you search has, it uses advanced algorithms looking at your website organization, code, topics, and pictures.  Then, the search engine looks at importance.  Even if Google decides your website is in fact relevant to the search term “Ear Muffs Chattanooga, TN”, it still may decide to rank your page dead last behind hundreds of other results.  Using many different “ranking factors”, Google will put every website in order before returning results to you, all in less than a second.

social-371649

How does SEO work?

SEO is an entire field with many advanced SEO techniques used to refine rankings. However, everyone should start with the basics.  Create a relevant and information filled site that is updated regularly.  The more informative and active your website is on a particular topic, the more likely it is to be well ranked.  An important factor is the use of title, sub section titles, and alt-texts that are all topic relevant.  Do not hide all of your content inside pictures and pdfs, because that is not indexable content that search engines can read and remember.  Linking to and from webpages (even internally inside your own site) can also be helpful, the more pages that link to yours, the more important search engines think your page is.  Linking can be a tricky one though, barrages of irrelevant links can actually HURT your rankings.

While SEO may seem overly technical and a luxury your business will have time for later on, there is one very important thing to remember- 75% of users never make it past the first page of search results.   If you are considering skipping SEO on your web page, consider that you may only have access to less than 25% of your potential online customers.

SEO 101: The Beginners Guide, Part One

What is SEO?

SEO stands for Search Engine Optimization. It is the practice of tweaking a website in order to increase its ranking in search engine results and therefore increase website traffic.  It is the method that website designers use to try to move your site from the third page of results of a Google search to the first page of results.  Many times it just means organizing your site in a way that is easy for search engines to read.

google-76517_640

Why do you need SEO?

While people do find your website through referrals and social media posts, by far most web traffic is driven by major search engines.  Think, how do you find new websites and businesses?  Currently Google is the dominant search engine in North America, channeling around 80% of all searches.  The wonderful thing about searches is that people are already using very specific searches to look for the service or product your business provides.  But it is your responsibility to make sure you show up in those searches.

 

Why do you have to do anything? Can’t the people at Google figure it out?

Google is very smart, the algorithms that it relies on are some of the most advanced in the world.  Many people with PhDs worked very hard creating them.  But the Internet is massive, filled with over a billion active websites.  SEO makes sure that the search engine algorithms know your website exists.  Also, by proper structuring and keyword usage, we can encourage your website to show up higher on the specific searches related to the services your business is most interested in providing.

Understanding How People Interact with Websites

Understanding how people interact with different types of media can be essential to the design process. What many don’t realize is that the way the average person interacts with and reads content on a website is distinctly different than the way they read something printed.
website-interact
The average user only reads 20% of the words on any web page, spends 80% of their time on what is immediately visible, and 69% of their time on the left side of the page.
A prominent eyetracking study in 2006 conducted by the Nielsen Norman Group brought focus to website-user interaction. The study observed that most users followed fairly consistent reading patterns that roughly follow an “F” shape. Users usually read with one strong horizontal movement at the top of the page, another a paragraph or two down, and then skim quickly along the left horizontal edge of the website copy.

The pattern is not precise with every user every time, sometimes they will vary a little, and often a picture will draw heavy attention, but over hundreds of users, a consistent depiction of use arises. This interaction can be termed “detailed scanning”. Users certainly won’t read every word that you write and in general practice scanning or skimming but there are certain points on the page that the majority of readers will read carefully and in detail, consuming entire chunks thoroughly.
IT and marketing professionals learn design and write in ways that best takes advantage of this documented pattern. The first two paragraphs are the most important and should be filled with the most relevant information. The beginning of every paragraph should be as information heavy as possible. The website itself should be design to encourage scanning and reading quickly, without huge sections filled with blocks of information.

Reference: http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content/