Category Archives: Web Design

Parallax Web Design: What I Think

parralax scrollingThe other day I was chatting with one of my buddies and he asked me, “hey Andrew – as a web guy, what do you think of the moving scrolly stuff that sites are doing now?”  He was speaking of the emerging design technique called Parallax scrolling as seen on some new highly visible websites such as Spotify, Sony, and dare I say, Google?  So I gave him my 2 cents and thought, “I should write that down.”  So here I am, writing it down!

Generally speaking, I like Parallax Scrolling.  I believe it’s taking web design to the next level and raising the bar, forcing agencies to rethink their “best-practices” and to continue innovating with the web.  However, I also believe there are right and wrong situations to use Parallax Scrolling.

First, let me speak to the technical side of this new technique.  It uses HTML5 and javascript to achieve a vertical, scrolling, storytelling experience.  Usually, content is presented to the visitor in a linear fashion displaying one topic at a time and in the order that’s the most intuitive depending on the subject matter.  HTML5 is key here in maintaining search engine credibility as it allows content to be separated into <section> tags, each section allowing their own <h1>’s to head each topic.  This allows search engines to take into account each section as a relevant topic of content that this web page covers.  It’s almost as if HTML5 were built for this kind of content presentation!  What this also does is keep a very consistent experience on any device.  Mobile devices work best when scrolling top to bottom, so this allows desktops to adopt the same usability and presentation via the “mobile first” design trend.

So from a technical standpoint, there aren’t any hangups in my book.  This brings us to the question, “when should Parallax Scrolling be used?”  I find it to be most effective under several circumstances:

  1. When content is more important than functionality
  2. When controlling the order by which content presented is of particular importance
  3. When there’s a definitive conversion required at the end of the presentation

Put simply, Parallax Scrolling is best used when the page is dedicated to telling a story of some kind.  If we look to our examples above, we see just that.  Sony is telling the story of their new “Be Moved” campaign.  A visitor may not know anything about it at the start, so Sony can safely present the information one topic at a time to fully explain the story bit by bit, without confusion.  Similarly, the Google Nexus 5 page tells the story of their new Nexus 5 smartphone and what makes it stand out from the crowd.  Google highlights each point of the new phone starting with the basics, then getting into each aspect of the phone that consumers are looking for, ordered by importance. Lastly, Spotify – if a visitor doesn’t know what Spotify is or how it works (for shame!) they can simply scroll down to learn all of the bullets that make it great without being overwhelmed with blocks of text and competing elements.

So when should we NOT use Parallax Scrolling?

  1. When functionality is essential.  I suspect that you won’t be seeing any workable Parallax user interfaces for some time.
  2. When several different topics need to be presented at once.  I don’t believe you’ll see any popular news website benefit from this technique.
  3. When ads need to have a home.  Parallax is so clean, ads just muck up the whole idea.

I’m certain that there are more reasons pro and against using Parallax in certain situations, but these should cover the biggest areas for concern.

So, back to my conversation with my buddy.  As I relayed this information to him, he was unimpressed and is thoroughly set on hating Parallax scrolling in any incarnation.  Ah well, not everyone can be convinced!  Let me know what you think about Parallax scrolling in the comments below.

Image Source

Spotlight On The City of Green, Ohio

City of Green Responsive Website

The City of Green, Ohio (CoG) identified a need to refresh and redesign their old website (http://www.cityofgreen.org) that was originally designed and hosted by TKG.

Green has changed pretty dramatically since the former site was created. It is now a bustling suburban community with more than 25,000 residents. Some small farms still dot the landscape, amid 530-acres of city-owned parkland, homes and subdivisions, office parks, businesses and recreation facilities.

Their website served the community well, but a lack of updating meant that it couldn’t be viewed on some devices, specifically mobile. More than 80% of traffic to their website were returning visitors on a weekly or monthly basis, so it was important that they have a site that could be viewed on the go.

At the same time, and most importantly, the website needed a review and restructuring of the existing content to improve relevance and improve findability (it’s a word, look it up!).

Valerie Wolford - City of Green

For the pivotal task of reviewing and restructuring existing content, we were introduced to Valerie Wolford, Communications Coordinator, as the lead of the project. We have worked with only a few project leads that can compare to Valerie. Her attention to detail and realistic outlook on seeing a project of this magnitude through to the end were invaluable and a joy to see in action. We know it will probably be awhile until we get the opportunity to work with Valerie again, but until then we will be looking forward to it.

Valerie lifted the heavy weight in the beginning of the project by rounding up a staggering amount of factual data from the current website. She polled and interviewed actual visitors and employees alike in an attempt to uncover the true areas to be improved. Out of this research, we determined three core objectives of this project:

  1. Create a responsive design to quickly engage visitors by focusing content to their demographic and interest(s)
  2. Provide CoG with a higher level of stability and content flexibility using APOXE 7, TKG’s latest content management platform
  3. Assist CoG to improve site structure and usability

In order to facilitate the objectives, TKG employed these administrative sections behind the update of the website’s aesthetic design of 17 unique layouts:

 

  • Page Content
  • Community Events (with community submissions)
  • News Articles
  • Real Estate Listings
  • Citizen Alerts
  • Contact Forms
  • Image & Document Directories

This project has come to completion and, for all parties involved, it was a huge success. The City of Green, Ohio will continue to be a progressive, technology-friendly city by improving its web presence by utilizing tools such as search engine optimization, content reorganization and other continued strategies to focus the navigation, tone and user experience on the website.

TKG would like to again extend a thank you to The City of Green, Ohio for the opportunity to work on the project. Congrats on a great site!

 

3 SEO Benefits of Responsive Design

With more and more users accessing the internet on their smartphones and tablets, it has become increasingly important to create websites that work across a variety of devices. Because of its flexible and adaptive qualities, responsive design has quickly become the industry standard for website development.

Responsive design is not only a tool for device adaptability though; there are significant SEO benefits that result from a switch to responsive design. Here are three of the big ones:

responsive

Google likes responsive sites
Google typically favors mobile-optimized sites, especially when those mobile users are searching for local goods and services. Because Google is the world’s largest search engine, and other search engines typically follow Google’s lead, it is a good idea to pay attention to what Google likes.

One website with one URL
From an SEO perspective, responsive sites consistently outperform separate desktop and mobile sites. With a single URL, responsive sites help reduce content duplication issues and improve SEO performance.

Reduces bounce rates
A mobile website can suffer from high bounce rates if users are unable to easily read and interact with the content. Users often get frustrated when sites are not mobile-optimized, so they leave. Responsive designs allow users to enjoy their online experience on any device, which helps reduce bounce rates.

If you would like more information about responsive design, contact the development experts at TKG . And make sure you sign up for our Breakfast Bootcamp on Oct. 16, where we’ll discuss even more SEO benefits of responsive design.

Important Responsive Design Tips

PrintEvery responsive site is a fluid and dynamic creation, so it can be difficult to get a handle on even the basics of responsive design. Luckily, there are a few general tips and techniques that serve as the foundation for nearly every responsive project.

Follow these important responsive design tips and you will be on your way to developing mobile and tablet-friendly websites:

Mobile First
A mobile-first approach to responsive design allows you to prioritize content for mobile devices and work your way up to larger desktop displays. This mobile-first approach ensures that your audience sees the most important content first, no matter what device they’re using.

Content Strategy
The goal of responsive design is to offer the best user experience possible, on all devices. A website redesign is the perfect time to rework your content and make it more readable, valuable and accessible. This emphasis on content strategy shifts the focus of your website development back to the needs of the user and their unique online behaviors.

Initial Design
Once you have a content strategy in place, begin crafting a rough website design on a responsive sketch sheet. The various screen sizes, resolutions and device capabilities available today mean more layouts to plan for. By using a tool designed specifically for responsive design, you can refine your ideas and lay your site’s framework before you begin the actual site development.

Framework
While choosing a CSS framework is mainly a matter of individual preference, incorporating one into your responsive design process offers a number of benefits. A framework can help speed up the development process, reduce browser compatibility issues and streamline your responsive design.

Breakpoints
Once you’ve selected a framework for your site, you must set breakpoints to signal the transition between devices. Some developers set breakpoints based on common screen sizes, but that practice does not totally embrace the flexible and adaptable potential of responsive design. Explore your design to find natural breaks in your content. That’s where you should set your website’s breakpoints.

Scalable images
Images present serious challenges for responsive designs because they need to be fluid enough to adapt to a website’s viewports and text sizes. Resources like adaptive images, CSS sprites and jQuery plugins are available to scale images and interactive media, so you don’t have to worry about warped or disproportionate assets.

If you would like more information about responsive design strategies, contact the development experts at TKG. And don’t miss out on our Breakfast Bootcamp on Oct. 16, where we’ll discuss even more tips and techniques for responsive design.

5 Business Advantages of Responsive Design

responsive design

In online marketing, there has been a serious behavior shift toward mobile and tablet browsing. With readers increasingly accessing websites on their smartphones, tablets and computers, responsive design has become an important part of the online user’s digital experience.

Check out our list of the 5 major business advantages you can achieve by switching to a responsive website design:

Builds tablet and mobile audiences

Traditionally, when mobile audiences would access a website, they would be re-directed to a device-specific site. But with responsive design, one site can be developed and implemented across all devices. As tablet and mobile sales continue to grow, responsive design will become increasingly important for reaching these growing audiences.

Enhances user experiences

Responsive design allows site owners to deliver quality content to audiences across multiple devices. On responsive sites, pictures are proportional, text is readable and buttons are large enough to click – no matter what device your visitor is using.

Improves SEO

When you switch to a responsive site, all of your efforts can be focused on a single set of hypertext links and a single SEO strategy. Consolidating your efforts will save you time, money and make your site more popular among major search engines.

Increases sales and conversion rates 

As your audience becomes familiar with your site’s navigation, the improved user experience could positively impact your conversion rates. Responsive design removes some of the functionality and performance issues that multiple sites can create, so users are more likely to see their conversions all the way through.

Streamlines development and site management

Developing a single responsive site takes a lot less time and effort than creating a traditional site and a standalone mobile site. But responsive design is not only a time saver in the development phase; it also makes sites easier and more cost effective for clients to manage on the back-end.

Interested in responsive design, but don’t have the tools to develop a responsive site yourself? Don’t worry. Contact the development experts at TKG, and see how we can help you achieve your business goals.

And don’t miss our Breakfast Bootcamp on Oct. 16, where we will talk in depth about the benefits of responsive design.

Meet Josh Moyers, our new Front End Developer at TKG

Josh Moyers Bio ImageJosh 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!”

Welcome to the team, Josh!

How Responsive Design Can Impact Online Marketing Efforts – in a Good Way!

this-is-the-webBy 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!

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!

4 E-Commerce Web Design Tips to Increase Sales

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.

Clean Design Example

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.

Busy Design Example

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.

Apple Design Example

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.

customer testimonial

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.

musicians friend

What other ideas do you have for improving sales through your e-commerce web design? Tell me in the comments!

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.