Category Archives: Web Development

Maximizing E-Commerce Checkout: How to Handle Guests

E-Commerce checkout presents customers with many decisions.  The more decisions that exist in the checkout experience, the more you’ll find customers either abandoning the checkout or calling in to place their orders.  Neither situation is particularly desired.  If we’re doing our jobs right, we’ve eliminated as many extra decisions as possible.  Studies show that providing fewer options to customers generally leads to a happier and more confident customer after they’ve made their decisions. Paradox of Choice

If we are doing our job correctly, we’ve eliminated as many options from our store’s checkout process as possible.  And if we’ve left any options on the table, we make assumptions for the customer based on data, then allow them to change that assumption if they need something different.

So what do I mean when I talk about options?  Here’s one of the checkout decisions typically presented to customers:  Should I create an account?

The step of asking a customer to log in can be a confusing one with more options than necessary.  What I often see are these questions:

  • Have an account?  Sign In
  • Don’t have an account? Sign up
  • Don’t want an account? Checkout as a guest

When a new customer sees these three options they’re going to hesitate.  Do I want an account?  Will I ever shop here again?  Do I get anything special for having an account?  Will this store spam me with promotions I won’t use?  Will it take much longer to sign up?

Meanwhile, we as store owners are chanting in the background “Siiign UP! Siiign UP! Siiign UP!”  But more important than wanting a customer to sign up, we should want our customers to enjoy the purchase experience and feel confident in what they’ve bought.  If these things are done well, the customer will prefer to create an account.

So while this step is extremely important to the checkout process, a less stressful way of proposing the question might be this:

  • Have an account?  Sign in
  • Don’t have an account?  Checkout Now  (If you want, you can create an account after you purchase)

Oh good, my decision is made for me – I don’t have an account so there’s nothing else to choose!  Continue on to checkout!

Now we’ve driven our customer right into checkout without a hitch.  But what do we do to finally create an account for our new customer?

One of the better ways I’ve seen to convert a guest into an account is to use a simple checkbox on the order review step.  The box can be titled something to the effect of “I want to create an account” and placed directly above the “Place Order” button.  Customers will be more likely to create an account at this point because they’ve enjoyed checkout (haven’t abandoned), and they know there aren’t any more steps to prolong the whole process.  We’ve already got all their information, so why not?  A customer then clicks the box and two password fields appear.  I know, I know – there’s no easy way to avoid requiring a password short of choosing a password for the customer, sending an authorization email to the email on file, and having the customer create a new password after clicking the link.  I can’t say which solution is less painful.  But look on the bright side – the customer not only placed an order but also created an account!  And the decision was pretty much made for them.  A win on both sides.

How does your store handle guests in checkout?

5 Things that Drive Shoppers Crazy on E-Commerce Sites

As a web development firm with some rather rabid online shoppers among us, we’ve learned a thing or two about what drives shoppers crazy when it comes to purchasing online. And we know that those things that drive shoppers crazy ultimately leads to less sales, so it’s important to know what they are and how to fix them. Great e-commerce web design makes a big difference when it comes to making an online sale. It’s not just about looking pretty (although that’s always nice to see), it’s about making it as easy as possible for customers to purchase your product online.

So without further ado, here are the top five worst e-commerce web design mistakes we’ve seen over and over again:

Poor product images.
Don’t you hate it when you want to make a purchase but can’t see product clearly? And then you find out that there isn’t even a good way to enlarge the image? Maddening. Why stay on a website that isn’t going to be helpful? Excellent product photos with a well designed interface for seeing them enlarged can make a world of difference for a potential customer. Don’t settle for good enough.

Buy now! buy now
Having a button that says “Buy” sounds simple enough. But believe it or not, a button that says “Buy” can be perceived as misleading and even have a negative connotation for shoppers and deter them from continuing.

add to cartDesigning the button to say “Add to cart” seems a lot less final to the buyer. A customer who isn’t quite sure yet likely won’t click on the “Buy” button, but is more likely to hit the “Add to Cart” button. “Add to Cart” tends to convert more browsers into buyers – and also allows them to purchase more. Adding one thing to your virtual shopping cart suggests that you might add more things to the cart. This seemingly small e-commerce design hint can make a big difference in your sales.

Going old school.
OK, so now that you have an “Add to Cart” button, what should it do? It used to be standard in e-commerce web design to have the cart button take a visitor directly to the cart every time it was clicked. This can still vary by site, but largely, you want to be able to keep your visitors shopping, rather than going straight to the checkout. Don’t make your site’s structure interfere with what the customer wants to do. The cart should be designed to allow your customers to decide if they want to continue with the purchase quickly or do some additional shopping.

Don’t display total charges.
Have you ever tried to check out of an e-commerce site that asked for your payment information before the total charges have been displayed? This is where a lot of sites lose customers who want to know exactly what they are spending before offering up their funds. Customers should have access to their total bill, including shipping and taxes, prior to giving payment information. It’s a simple fix in your e-commerce web design that can translate to more sales and happier customers.

So many choices.
However well-intended, too many categories to choose from will likely just overwhelm customers. This can become cumbersome and can be frustrating to online shoppers and make them stop browsing. They might not know exactly what they are searching for and just want to see what is available. Best practice is to show seven or fewer top-level categories and three or fewer secondary categories. Keep it simple and easy to navigate – that will always turn into more sales.

So those are some of the e-commerce web design things mistakes we see pretty regularly. What are your least favorite things about e-commerce sites? Do you have an online shopping horror story to share? We’d love to hear about it in the comments section!

5 Tips for Making Great Product Category Pages

We’ve all been to sites where it is nearly impossible to find the product you are looking for. Often times the main cause of dis-organization on e-commerce sites are the product category pages. With so much potential information to display, it can feel hard to do it in a way that says everything you need to say and lead visitors to click and purchase. But, it’s not impossible! Use these tips to ensure that your product categories are properly setup to provide your customers with a great user experience – and you with repeat customers.

Organize Your Product Categories

Deciding the proper amount of categories and where those categories will be in the navigation menu can be complicated. Below are a few tips for organizing product categories.

  1. Avoid creating too many categories. Too many categories can pigeon hole your customer and prevent them from viewing a broader array of products that may work for them. By the same token, don’t have too few categories. Sites with just a small handful of categories and no organization can be just as cumbersome as sites with too many.
  2. Make sure that all menu items are clickable.
  3. Make sure that the menu does not take up too much real-estate on the site

Utilize Pagination and Breadcrumbs

Breadcrumbs and Pagination are links that allow customers to navigate deeper into the product categories or return to a previous page. These two items play a crucial role in creating a positive user experience for your customers.

Here is an example of breadcrumbs:
Breadcrumb ExampleAnd this is an example of pagination:
Pagination Example

Use Related Product Calls to Action

Related products not only help encourage multiple product orders but they improve the user experience. For example: I go to eBay to search for a new case for my iPhone 5s. I think I have found what I want but when I get to the product page it is not exactly what I am looking for. Below the product there is a banner that contains similar products. From this I find up to 7 different products that are similar to the one I want. From there I am able to narrow my search.

Use Images on Main Category Pages

In the example below we see that on apple.com when you click into their main navigation items such as “Mac” you come to a page that houses all of the “Mac” computers. Under that main navigation menu there is a sub-menu that pops up. It has images along with each menu item. This will help educate potential customers who are less familiar with your product as well as motivate educated shoppers. Images sell, so use them!

Use Images on Main Category Pages
Create Galleries of Similar Products

You have more than likely seen clothing brick and mortar stores do this on their manikins. They will hand pick selections and pairings and display them in prominent locations such as the front of the store. Do the same with product galleries in your online store. In the image below you can see that bonanza.com has created a gallery with all types of green products.
5.	Create Galleries of Similar ProductsDo you know some different category page tips? Let us know in the comments below.

Parallax Scrolling & SEO

It is always good to make your site as attractive as possible; however, it’s important that you consider the internet marketing implications and affects on SEO efforts when implementing the latest trends. Here are a few suggestions if you want to implement parallax scrolling.

  • Utilize it on one page of your site that has sub-pages that are not likely to be landing pages.
  • Make sure to have ample text content under each section.
  • Make sure that the page you are using parallax on is not too long. I recommend only having 2-4 sub-pages on a parallax page.
  • Optimize images so that they are web ready
  • Use alt tags on all images so that Google can recognize the images.

Use as a Supplement to Your Standard Website

There are also very rare instances where an established brand will launch a featured product that they want to highlight. It can be very effective to utilize parallax scrolling on these sites. This is effective because the person has already most likely came to the parent company’s site and they are already interested in the featured product. This means that grabbing the attention of the viewer is the primary online marketing goal instead of getting organic traffic for that featured product. Take a look at this example.

Mercedes Benz Parallax Scrolling

In this example, we know that Mercedes Benz is the parent company of this particular semi-truck. Their main site also contains information about this particular truck that is presented in a way that can be beneficial to search rankings. They are primarily using this site as a brochure that will grab the attention of potential customers after they are already interested in Mercedes Benz.

Both of these scenarios are good ways to implement parallax scrolling. We look for more methods and scenarios to arise in the coming months as Parallax scrolling continues to pick up more steam. Share your experience in the comments…

Does Parallax Scrolling Affect Online Marketing Efforts?

Have you ever visited a site such as Spotify where the background appears to be moving? The Spotify site along with others have started using a method called Parallax scrolling to add more visual appeal to their pages. In this article I hope to explain some of the effects that Parallax scrolling has on SEO efforts.

What Is Parallax Scrolling?
Parallax scrolling is an effect that is produced by using a script to tell the background image to scroll at a slower rate than the page content. Parallax scrolling has become more and more popular over the past few years and for good reason; if done correctly, it can add depth and dimension to your site. While this method of development is very eye catching, we as an online marketing agency have had some questions about the affect that it has on Search Engine Optimization.

Using Spotify as my example, I’ve explored five fundamentals of optimization and how Parallax affects each one.

Parallax Scrolling Example

Page URLs
Page URLs are an important place to insert keywords relating to that page. It is important that these URLs are different for every page of your site. You will notice that when you click here to view the upgrade page on Spotify.com, that the URL remains the same as the homepage. This means that Google recognizes this site as containing only one page. With that said Spotify has a robust help section located at http://support.spotify.com. The pages that are part of this support section all have separate URLs but since the domain is http://support.spotify.com the actual domain of http://spotify.com is not getting credit for those pages. That is STRIKE ONE!

Header Tags (H1 Tags)
Header Tags like URLs are a place to add keywords that help the viewer to understand what content that given page will contain. The current best practice is that each page should only use one H1 tag. As discussed above in the URLs section we know that Google only recognizes this site as one page. That means that this single page contains 7x H1 tags. STRIKE TWO!

Page Titles
Page titles are an integral element in an effective SEO strategy. Like URLs, page titles should contain keywords pertaining to the content on that given page. If we look at the Spotify example we see that Google recognizes the entire http://spotify.com website as being one page. This means that Spotify only has space to create one page title. It also means that there is only one page that can show up in organic search results. This is STRIKE THREE!

Meta Descriptions
We have already given this development method three strikes however we have to finish this analysis. Meta descriptions are the last piece of this test. Meta descriptions, also known as page descriptions show up under the page title in organic search results. While Meta descriptions arguably have little effect in organic search rankings they are still important to have. They are important because they provide the potential site visitor with information about what the page is about. At TKG we also like to add a call to action in the description as well. Like the other three fundamental elements of SEO that we looked at above, we recognize that Spotify.com can only have one page description for the entire site due to Google viewing the site as one page. That’s STRIKE FOUR!

Content
Perhaps the most important part of your site is the content that is actually on the page. This content can be in the form of images and text. The current trend is to make eye catching image driven websites that contain little text elements. While eye catching this presents and issue for SEO. Google cannot crawl images unless there is text associated with them. So therefore if a site is primarily images Google does not recognize most of the content on the site.

The other issue that often arises is that sites that are primarily image based take a long time to load. In most instances Google robots will time out before they reach all of the content on your site because they have to wait for it to load. STRIKE FIVE, alright I think we have to say you’re out now.

Conclusion?
Parallax scrolling is a gorgeous effect that is becoming more and more popular. However, building a site using parallax prevents the site from being optimized using five of the most fundamental methods of optimization. As parallax scrolling becomes more and more popular, we expect there to be more ways to optimize the content.

Next week I tackle the question: Is it ever OK to use parallax scrolling on your site?

The 411 on 200, 301, 404, 500

You may hear us throw around these numbers during meetings and sit there and nod and look thoughtful as you wonder to yourself “What the heck are they talking about”  Fortunately a small understanding of just a few numbers will vastly improve your knowledge of how the web works and you’ll have a great conversation starter at your next party.  Ok, not really, but you will appear smarter to your friends.

The web is built around a request/response model. When you type in www.tkg.com and hit enter, you begin the request process. That request travels the Internet and lands on our webserver.  The server then responds to that request and the loading of the webpage begins. Since there are so many variables between you and the webserver Tim Berners-Lee (the father of the web) devised this numeric code to keep both you and the server in sync to what’s actually happening.

The numbers are actually sort of a family of similar meanings with each hundreds place defining the family.

A 2xx response is a Successful response. When the server responds with a 200, its telling your browser everything is A-OK and here comes the webpage. Other 2xx codes also mean success, but vary on the conditions.

The 3xx family begins the redirection family. A 301 response tells the browser (or search engine) that what you requested has gone away, and all future requests should be directed to the specific URL. An example of this may be changing the URL www.tkg.com/danhall to www.tkg.com/dan-hall  The server will see the “danhall” request and tell the requester go to “dan-hall” instead. This is very important when dealing with SEO strategy because a search engine will transfer any ranking it built for ‘danhall’ to ‘dan-hall’.

A single webpage can make many, many, requests back to the server to load graphics, styling, and javascript needed to render the page. Transferring the same resources over and over again puts a substantial amount data on the network. Browsers have a caching mechanism built in that saves these resources locally once downloaded. Wouldn’t it make sense to use what’s just been downloaded instead of waiting for it to download again? That’s where a 304 response comes in. Its basically the server telling the client “You already have this, just use that instead”  This message is a lot smaller and quicker to get to the client instead of downloading a 1MB image for the 5th time during a web visit.

Next up is the 4xx family.  Sorry, but this group basically indicates you did something wrong.  Say you try to go to www.site.com/restricted-area A server would respond with a 401 code which means you simply aren’t allowed because you’re not authorized.  This would trigger the browser to prompt you for a user name/password which in turn the server authorizes and you get in.   Another common 4xx family member is the dreaded 404. This simply indicates that what was requested couldn’t be found.  Sites sometimes take this response and give back a sitemap, or a friendly message prompting the user to check the URL and try again.

TKG.com 404 Error PageFinally, we have the 5xx family.  Remember the web is a request/response model, right? We handled errors in the request side with the 4xx family, so the 5xx family handles errors in the response side. 500 is a generic response that something crazy happened on the server, but not additional details are available. 503 will be given back if the server is unavailable.  This may be that it is overloaded, or down for maintenance.

There you have it, a small break down of some common codes used on the web.  Next time you see a broken image, or get a picture of a broken robot instead of the latest news you’ll know you just encountered a 404 error. If you load www.facebook.com and scroll through the latest memes you can say “thank goodness for 200 responses” Well, maybe not, but hopefully this little guide has helped you demystify a small section of how the web works.

Getting SASSy

I recently got acquainted with SASS and I’m a big fan! SASS stands for “Syntactically Awesome Stylesheets” and its purpose is to simplify writing CSS and compiling everything into as few of stylesheets as possible. Overall it was not a very difficult transition into the new syntax that comes along with SASS. After all, it still requires developers to use CSS, it just spices it up a little bit. A few things that SASS adds to CSS that isn’t there normally:

  • Functions to dynamically write CSSSass
  • Easy way to minify the code (compresses all of the code into one line to decrease file size and the amount of connections the website has to make to the server)
  • Allows selector nesting rather than typing out long selectors for specific items
  • Grants the capability to copy the styles of another item without re-typing them

Another feature takes a bit of explaining. With SASS, developers can use the “%” sign to create dummy-classes. And what I mean by that is you can create a set of styles with no intention of adding that specific class to your markup. This is great for two reasons, the greater of which being that there is now no need for multiple classes on an element just to get the right styles going. Instead you can create a selector for the element and extend (@extend) the styles of one of those dummy classes to apply those general styles without adding a class to the markup. It cleans up the code and provides the same functionality.  The other great part is that they function just like a class. You can apply those styles and then add to them as you see fit in your stylesheet.

SASS runs in the background while you’re writing your code. There are two ways that it works, either by command line, or downloading a program to do it for you. I personally have been running with command line but that is mainly because I feel comfortable doing so. In command line I type “compass watch” in the directory for the site and it does everything else. If you choose to use a program to do it for you, the program typically runs in the background and will even automatically refresh your web browser to see your changes in real time. Every time you hit “save” on a SASS file, either the command line or the program will run the code necessary to compile the file and save it as a CSS file to be used on the website.

When I was developing with SASS I was working on responsive websites. To help with that I used two frameworks. The first is Susy, which is a responsive framework that provides grid functionality and a very simple way to write media queries. Susy relies on Compass, which is the other framework I used, which adds in ways to easily write CSS3 styles with all of the different vendor prefixes.

Like learning any new set of frameworks, it does take time to become efficient with the new workflow and the formatting of the stylesheets. With more experience it becomes easier, and truly speeds up the markup process. Would I recommend it for other developers? The answer is yes. The more I use SASS the more I am finding that I enjoy coding more that way. It makes more sense and in the end decreases the page weight that is downloaded from the server.

Have experience using SASS? Share with me in the comments!

One Size Doesn’t Fit All

Being with TKG for almost 14 years, I’m still amazed at how many people we talk to are fascinated at our approach of 1 size doesn’t fit all when it comes to building a quality site. I guess after seeing boxes like WordPress, Drupal, SiteCore, Sharepoint, and so many others that want you to change the way you work in order to work with them, an initial reaction to TKG’s “What are your needs” approach can easily be met with a “Yeah right”.  Did you notice that first sentence?  Being with TKG for 14 years means TKG has been around long enough to prove this strategy works.Content Management Systems

One of our primary goals when we developed Apoxe was to identify what I call the 80%. Every CMS needs to add/edit/delete data in a database, and also apply a look to it on the front end.  So, we built intelligence to handle that core functionality as our platform, but we didn’t stop there.  No two companies have exactly the same data, so to keep the cost of customizing our solution to your needs down, Apoxe was built to figure out the data that is in the database and change itself to match that.  How we do that is super top secret and to show you what we mean, you’ll need to stop by for a demo (hint hint)!

An example of how we can build off that 80% starting point would be our great clients at Malley’s Chocolates. The goal of their website is to sell chocolate.  Founded in 1935, they obviously had business procedures and flow of data in place when they came to us to take them to the next level online.   The initial meetings revealed that not only will they need our product module tweaked a bit, but they’d need entirely new modules built to handle their busy spring fundraising season. Malley's Chocolates

Working closely with the malleys.com team, we were able to integrate their MAS500 system to the site and allow 2 way flow of customer data, web order data, and product pricing and inventory data.  To handle fundraising season, and give individuals an e-commerce platform all their own, we constructed a robust campaign / organization / participant  back end that tracks Suzie, who is selling for ABC School, has sold $500 on her personalized Malleys.com site. Try doing all of that with WordPress.

Those boxed solutions either cram ecommerce down your budget or they provide no intuitive way to showcase products.  Harrisbattery.com was in need of making their catalog of products discoverable, but didn’t need ecommerce.  Again, the flexibility of our CMS was utilized to build a filtering system that showcased items without breaking the budget and starting from the ground up.  Harris Battery

Our approach of fitting to what you want to do online is a big reason why TKG has become a leader when it comes to building an online presence.  It’s the reason that our customers stick with us project after project because they’ve seen that TKG really does have their best interests in mind and can execute a complete strategy to back that up.

photo credit

Target Proves All Commerce is E-Commerce

For years, we’ve had clients and prospects steer clear of e-commerce because of fears about online transactions.

For years we’ve told our clients that 9 times out of 10, banking behind the scenes is done online.  In other words, you are doing e-commerce whether you want to or not, so you may as well enjoy the sales opportunity it provides.

The up-side of this security fiasco at Target is that it demonstrates this point clearly.

TargetMy wife loves Target.  Of course she shops there online, but she’s also more than a regular at our local Target.  Really, what busy Mom could resist it?  Starbucks right at the front door combined with the ability to cover so many quick items all in one spot. I understand it. That puts us right in the middle of their security fiasco because of course she’s got a “Red” debit card.

Obviously, the security breach at Target is a huge problem and to date I’m not a huge fan of how Target is handling the issue. However, to the small retail business owners out there, if you’re still using security as the reason excuse not to move to e-commerce, Target just took that away from you.

Even though issues like these happen, there are still several strategies to put in place to limit a security breach, so be sure to use a professional e-commerce web design shop to build your site.

Were you affected by the Target data breach? Share your story in the comments…

photo credit

 

Great Design & SEO Are Nothing Without Return On Investment

After working with a different array of clients over the years, and especially after fielding inquiries from business owners and company managers who are shopping web marketing/web development services, I have come to one important conclusion: not everyone who claims to offer web development or web marketing services has the customer’s best interest in mind. I mean, in the world of “website creating and promoting,” I’m not sure if very many companies are speaking the same language at all. And the result of this discombobulation has created confusion among businesses who truly need the services we provide.

So, let’s clear the air and set a path for those who are looking for answers to how they should use the web to promote their business – just some basics to get you on solid footing…

My Website Sucks
OK – you’ve established that your site is not working for your business. It’s old. It’s not catering to the growing web audience who are looking for goods and services on their mobile phones. What should you do? First off, you need a website that will work very well no matter what device accesses it, be it a phone, a tablet, a desktop or laptop. You need what’s known as “responsive design.” A site built with the ability to become 3 websites in one, essentially, will put your company on the path to be able to reach all potential customers with a website that functions well. You get what you pay for, and the best websites cater to visitors with optimum user experience. If you are shopping website quotes by sending out a development RFP, and if it is not including responsive design, your new website will be outdated before it ever goes live.

But, that’s not all – there’s more…

Internet Marketing
Just because you spent some hard-earned cash to create an awesome, well-designed website does not mean customers are going to flock to it or that your company is going to do more business online. You need web marketing expertise. Listen to me – you need to hear this. There are many web marketers out there who offer flim-flam pricing, but their methods, I am finding, do not work. There’s no plan. They typically seem to offer a “one shoe fits all” approach. Ugh.

What to look for? You’ll want a web marketing company that will listen to your company’s goals, first; then, establish a strategy to grow your business. Some things you should think about when considering web marketing agencies are questions like what I have noted, below. If a list like this is foreign to them – run. Do not look back.

  • Who is my potential customer and how can I reach them?
  • Are my potential customers local or national?
  • What is the primary (and maybe the secondary) demographic of my potential customers (e.g. male, female, age, etc.)?
  • Who do I want to sell my products are services to?
  • What is most important to my company?
  • Are my potential customers using social media?
  • Are my potential customers using print or e-mail?
  • What percentage of my potential customers are using smartphones?
  • What are my potential customers actually searching for when they access the web?
  • How do I convert potential customers to leads, sales, once they come to my website?

ROISEO: The Dirty Buzz Word
The acronym SEO (search engine optimization) has become filthy in its use. Yes, SEO is important (and something we do well), but it has come to mean so many different things due to the false promises and claims heralded from fly-by-night companies who do not know true web marketing. Many have spent quick money on SEO for results that never came in. SEO should be but a part of an ongoing, much broader web marketing strategy. It is a component of several approaches – never an end all.

And last, but not least – this is very important:

Website ROI
Our philosophy is that we live and die by ROI at The Karcher Group. We believe we cannot be successful unless we grow our clients’ businesses – we are committed to accomplishing this and will do whatever is industry best practice, honest and necessary to ensure success. So, to us, ROI and relationship is everything.

When shopping for marketing services, you should consider if the web company candidates are going to provide provable results, a measuring stick to ensure your company is getting ROI (return on investment). If there is not a plan in place for your web marketer to provide regular reporting to your company on the progress and growth that has been made through their efforts, then your business is most likely not going to benefit. If they are the real deal, they should be able to provide you with case studies and testimonies from clients whom they have helped.

May web marketing strategy and ROI be your guide – your company’s keys to online success.