Josh specializes in HTML5, CSS3, jQuery, SASS and responsive design. He studied web development at Stark State College and gained experience as a web developer and IT administrator while working in Akron for six years.
Josh took a break from web development and was in the Army as an Infantryman. He was stationed at Ft. Campbell, KY with the 101st Airborne division for three years. Nine months of those three years were spent deployed in Afghanistan on the Pakistan border
“We do our best to produce the best sites on the web, and in order to do that we need quality front end developers. I believe we found one with the recent hiring of Josh Moyers. He is homegrown, has travelled the world serving our country, and has quite a few years of online development experience under his belt,” said David Brown, director of Client Services. “And when he wears a suit, which we normally don’t do around here, he looks like a young James Bond!”
By now, you have likely heard about responsive design.
Responsive design allows users on any device – desktop, smartphone or tablet – to have a good online experience regardless of screen size.
So, the question is, how does responsive design impact online marketing efforts? As marketers, we sometimes focus only on specific tasks, such as creating content, developing email campaigns and updating social media networks. The fact is that if you do not have responsive design in place, all of the online marketing strategies you want to implement will not garner your full potential results.
How much impact does mobile play into content, email, search and social media marketing today? The answer in short – a lot! Here are just a few examples:
51% of emails are now opened on mobile devices
60% of internet access is made on a mobile device
70% of mobile searches lead to action on websites within one hour
60% of social media time is spent on mobile platforms as opposed to desktop browsers
These results mean that mobile has a growing impact on online marketing efforts. People are reading content, opening emails, performing searches and engaging with brands on social media – all from their mobile devices.
Responsive design greatly affects the user experience, ultimately meaning it will support your online marketing efforts in the following ways:
Email Marketing – As many users are reading your emails on a mobile device, naturally you want them to be able to follow the links in your email and have no issues browsing your site on that same device.
Content Marketing – users will be able to read the content from their mobile device, and also be able to use the social sharing buttons to easily share the content.
Social Media Marketing – when users click on a promoted offer on their mobile devices, they’ll be able to purchase the promoted item just as they would on a desktop browser.
Search Marketing – when a user clicks on a link to your website from search results, they will be able to get to your page and consume the information they need, just as they would on a desktop.
If it isn’t already a part of your online marketing strategy, a responsively designed website should be a significant consideration moving forward. Website visitors will be able to learn about your products and services, buy your products and consume your content on any device without issues.
So adding responsive design will not only make your website visitors happy, but it will help you get more results with your online marketing efforts. That’s a win-win in my book.
Do you have a responsive design success story? Share it in the comments!
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.
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.
Designing 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!
You’ve made it through half of the battle (and for some the hardest part): A visitor arrived at your e-commerce website. Now you need to get them to buy. There are a lot of things that go into increasing conversions but design is perhaps the most important.
Most of us would agree that we buy things that look great. Many times the design of a website is the first impression that we receive of a company. Good or bad, the design can influence your subconscious opinion of the product or service you’re considering purchasing. So, how can you ensure that the opinion formed is a good one and how can you use your design to help convert visitors to customers?
Make Sure Your Design Enhances Rather than Distract
Create a clean design with simple lines that does not distract away from the products you are selling. A great example of this is www.restorationhardware.com. You will notice in the image below that the website design is clean and simple. Some would even argue boring. The site design however accentuates the products they are selling.
In contract, the image below is of a complex design that in most cases people would see as a great design. However, it distracts your eye from the products they sell.
Utilize Large Hi-Resolution Images
Apple has implemented this beautifully over the past few years and now other e-commerce retailers have started to follow suite. With that said Apple has a limited number of products so it works. A company that has 10,000 products should not try to display products like apple.com.
Still, even if you have many products, there is something to be learned from Apple’s approach. Apple teaches us that displaying your products using large hi-resolution photos increases audience engagement. Gone are the days when a straight on, blurry shot of your product will do. Your customers want the photography to put them in front of the product. They want to feel an experience. Product photography can often times be over looked in an effort to make a great looking site. Don’t let that happen to you.
Incorporate Testimonials & Trust Factors into Your Design
Along with the need for a clean website that enhances your products. It is important for you to convey the experience and service that sets you apart from your competition. Using testimonials and trust factors such as phone number, business hours, social media icons, customer service guarantees, etc. is an effective way to gain your customers confidence and trust.
Add Value Elements in the Header
These elements are anything that adds value to the customer’s purchase. They can be Promotional Deals, Free Shipping or anything else considered to be a perk or add-on. Even if everything else is right, the promise of something for free or something a little extra, when used strategically and when it’s affordable for your company, can go a long way to helping convert a visitor. Just make sure that this isn’t the only tactic you rely on. Free shipping is only great if, when the product gets there, it’s great too. Otherwise it’s just a gimmick.
What other ideas do you have for improving sales through your e-commerce web design? Tell me in the comments!
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.
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.
Make sure that all menu items are clickable.
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: And this is an example of pagination:
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!
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. Do you know some different category page tips? Let us know in the comments below.
Checkout is one of the most critical components of your e-commerce website’s experience. No matter how well you convince customers to buy your product, when it comes down to it, the checkout process can turn away even the most determined customers if it’s done poorly. Maximizing the checkout process is a HUGE topic, so in order to make this digestible, I’ll focus on one benefit at a time.
Less is More
Have you ever noticed how bland Amazon’s checkout process is from a design perspective? That’s because Amazon, more than anyone, knows that a critical component of a shopping conversion is to keep the customer laser-focused on the task at hand. The task, in this case, is to click the glittering “Process Order” button on the last checkout page. This is what the eCommerce game is all about.
So, what does a bland checkout process have to so with conversion rate? Simple; it removes any distractions that might provoke a customer to stray from completing checkout. But how can we identify those distractions so that we don’t remove something beneficial?
Generally speaking, anything that does not contribute directly to the checkout experience should be removed. Those things might include:
Site Navigation – Don’t tempt customers to click a link that might pull them out of the checkout process. They’ve made it this far so they’re committed to buying. We want them to buy above all else!
Excessive Design Elements – Your company logo, borders around content containers, and consistent global styles (fonts, colors, etc.) are all you really need to brand the checkout experience. We want this to be clean and clear, so declutter any extra images, backgrounds, bright colors, rotating gifs, and unicorns that are currently designed in. The buttons to continue should be far and away the biggest eye-candy on the page.
View Cart Buttons – There’s no reason to give them a link to the shopping cart when they’re already passed the shopping cart step.
Promotions/Coupons – They’ve already committed to purchasing the products in their cart at the current price. Don’t provoke the customer to scour the web looking for a coupon code. Ask for coupons on the shopping cart (but do it with subtlety!)
Legal Jargon – Minimize the legal disclaimers you put in front of a customer. If legally necessary, put all of your legalese in a popup window that the customer must opt-into reading by clicking on a link. We don’t want to frighten customers with a heavy legal hand. We should be seen as protecting the customer, not ourselves.
Links Back to Products – While showing the cart contents to the customer on the review order step, do NOT link those products back to the product detail page. They’ve already learned enough about the product to start the purchasing process, and offering a link back to the product might lose you a customer.
This is just a short list of the many things we all may have in our checkout processes that are doing more harm than good. Share any questions you have about ways to improve your cart in the comments.
Google seems to favor the fast and easy type. We’re talking websites here. Google says fast and optimized pages lead to visitor engagement and conversions. Two things The Karcher Group keeps an eye on when offering professional SEO services as part of our online marketing strategy.
Google offers valuable tools for you to look under the hood of your website and perform necessary analysis and optimization. These include the following options:
PageSpeed Insights will identify performance best practices you can use for your website. The PageSpeed optimization tools look to provide a level of automation to the process.
PageSpeed Insights offers up a lot of recommendations and technical guidance that helps you get a lean and mean website. Things to avoid such as landing page redirects and things to consider such as server response time. All of these things aim to optimize the performance of your website.
All of this is great information to use on your site and help rank higher when someone searches for your product or service. The truth of the matter though is once Google serves up your website a human must look at it and actually use it. That’s where good looks (aka. User Experience Design) and a friendly smile can set you apart from the competition.
Good User Experience Design (UX) helps serve up a good experience when customers find your website. It considers how the website looks and how its content is organized, all for the sake of usability and accessibility. UX aims to present things like a human would want to see them as opposed to how a computer would organize and store data.
So, is your website looking ugly? Or maybe it’s real easy on the eyes but still not making sales? Take a look at Google’s tools and then let me know questions. We can talk about design and search engine optimization.
I’m a long-time reader of articles written by the Nielsen-Norman Group (NNg), an evidence-based website user experience research company operating since 1998. One of their website’s fine authors, Hoa Loranger, (also author of the much-acclaimed book, Prioritizing Web Usability) produced a concise article recently in which only the headline caught my eye out of a list of articles. My choosing to read it was partially induced by my empathy for web accessibility. Fight Against “Right-rail Blindness” is pretty catchy, eh? The other reason is that it further enforces part of a presentation I share while guest lecturing upperclassmen at local high-schools: website visitors naturally steer away from areas that look like advertising.
The first thing to understand is the term “right-rail”. In web development, for a desktop browsing experience, this is the right-most portion or column of the web-page. What often gets put into a right-rail is supplementary bits of information – things that are ancillary to the main content of the page. As a side-note, this would be content that follows after the main content in hierarchy. Depending on the website, this might include additional reading, advertising, and/or site-wide call-to-action (CTA). In trafficked websites like Google and Facebook, having ads placed here is the de-facto standard – hence the “training” of the general public.
Here’s the 4 main tips Loranger mentions and we continue to use to prevent “right-rail blindness”:
Don’t design content to look like banner ads – a clean sidebar design garners trust
“Choose a light-weight, simple visual design for the right column—one that matches the content of the site. People are more likely to trust and click on links that look like valuable content than what appears to be irrelevant advertising.”
These CTAs look too much like external advertisements
Position content away from the banner ads to avoid “guilt by association”
“…people perceive elements that are placed together to be related. It’s fine to feature ads on your site. People are used to it. However, whenever possible, group external and internal promotions separately, and make them look distinct to avoid any confusion.”
The simplified content placed between “ad-like” content still gets ignored
Feature thumbnail images only if they communicate useful information quickly
“Each image requires cognitive effort to discern, especially at small sizes, so choose them wisely. When selecting images, pick ones that supplement the content and are easily discernible in small sizes. Our eyetracking research shows that simple images, that have simple backgrounds and identifiable objects, attract more attention than busy images.”
Thumbnails shown here are too small even with simplified imagery making them useless
Feature content that is relevant and helpful
“Consider when to offer broad or narrow topics. For example, at top-level pages (e.g., homepage and section pages), people are much more open to serendipitous discovery. However, at the article level, people are more topic focused and need highly relevant content.”
This article features additional content that isn’t within the same topic
In the full article Loranger supports these points by mentioning the relevant background research associated. It’s a well thought and insightful article published and read by those closer to the web development spectrum, so I thought it made sense to share with our readers – the potential web design client and current client (using our custom-developed APOXE CMS).
In summation, like all valuable space on your web page, use this information to make careful decisions about the content you’re placing in your “right-rail” so you can effectively see the benefit.
You can read the entire article here and feel free to share your thoughts in the comments.
Not to be confused with Newegg’s abysmal member checkout process (with its 10-year old interface, silly tabbed payment options and an encumbering amount of text inputs), the guest checkout process is something to be modeled. I almost wonder at the decision to keep the old member checkout process when the guest checkout is so clean and familiar to the general e-commerce audience. Perhaps Newegg customers have been so painfully willing to plow through the old system over the years that they can’t function with anything else. Regardless, allow me to point out a few things that I love about the Guest Checkout Process.
First of all, the look is clean and organized. It’s not too cluttered and the inputs are large and easy to see. The flow of required information is easy to follow.
Something more important than the look however, is the logical way in which the checkout steps are constructed. Rather than dividing the steps into Address, Delivery, Payment, Review like many checkout flows are, it’s divided more intuitively into Shipping, Billing, Review. This is a break from traditional thinking as it properly groups like information in the same steps. Everything needed from the customer regarding shipping happens on step 1. Everything needed from the customer for billing happens on step 2. Review to make sure it’s correct. Purchase. Easy-peasy.
The steps also play together nicely, reducing the amount of information you need to enter twice. For example, on step 1 you enter your shipping address. On step 2, your billing address is automatically entered to match the shipping address you entered in step 1. The address doesn’t even appear in input boxes because 9 times out of 10, an order is being shipped to the same place it’s being billed. However if you need to change this, all you have to do is check a box and all of the address fields become editable. Additionally, the cardholder name on step 2 is prefilled with your name from step 1. Convenient!
Let’s not forget the review order step. In addition to the clean layout and usability best-practices, they place the full order details in a large column to the left, with a smaller summary view of the order on the right with a “place order” button. This allows the customer to view all the nitty-gritty about the order such as reviewing their shipping and billing addresses, cart information, product summaries and return policies, and shipping options (that you can change if you want, but they pre-select the free option for you – duh!) . However, the summary view shows you everything you care about at the moment you make the purchase – How much cash am I spending? Neatly laid out before the customer is the product total, tax, shipping and grand total. Did I mention that the summary view scrolls vertically along with you so it’s always in sight? Also, right before making the purchase, the customer can enter a password and have their account created for next time. This is a nice way to sneak in that signup step without being obtrusive.
It’s refreshing to see a quality and conventional checkout process taken just a few steps further to make it an even more intuitive experience. Now if Newegg could only clean up their other checkout process to be so simple!
Back in July, I shared some of the outdated web design trends you should make sure your website is avoiding. So what’s trending now-a-days in the world of website design?
Retro Design Trend
History does repeat itself. The last resurgence of a retro feel in design was around 2005. Retro web design characteristics include:
period color themes (often pale colors)
It’s effective because people, the general populous of which being comprised of an aging demographic of web surfers, have a tendency to associate “value” with old things.
Retro Web Design Examples
Timo’s Air Conditioning and Heating out of Palm Springs, CA, is a nice example of retro design style; however the site is also an example of a site being “over-designed” – weighing in at roughly 2 Megs – whoa momma!
Mighty Mighty Bosstones, the popular ska-punk band based out of Cambridge, MA, is another example of a website employing the retro web design trend by using the period illustration style and color palette along with the classic skewed-rectangle shape for content areas. This design is a good example of not being “over-designed” although it still boasts a significant download size for visitors (and a splash page).
Authentically Digital Design Trend
The authentically digital design trend represents a flat, two dimensional look that heavily relies on solid background color and plenty of white-space, interesting typography and large format imagery that become (as it should be) the focus of the page. It avoids trying to look like any other medium such as print, 3D or photo realism. Delight in the fact this technique can provide a fast online experience.
Authentically Digital Web Design Examples
The following 3 big brands provide great examples of the authentically digital web design trend: