Tuesday, February 28, 2012

Web Design 101: 10 Must-Haves For Every Business Website

Whether you have a small business or corporate business, every website needs a number of things to be successful and keep your customers coming back. Sure, you want your website to be beautiful and elaborate, but don't forget the important must-haves every business website needs! Below is my top 10 website must-haves for businesses.

1. Easy to remember domain name

Domain names are just as important as the website itself. For example, EdsTowing.com is easier to remember than WeTowCarsAtEdsTowing.com. You can always have more than one domain for your website if you want.

2. Clear, easy to understand homepage

When a user goes to your website, you want to make sure they understand your business. The homepage needs to answer who, what, and why. Several businesses forget to state what they do on the website's homepage. It sounds silly, but it does happen. For example, on TBH Creative's homepage, it is pretty obvious what the company is about.

TBH Creative makes the "what" obvious by stating "We build websites that are strategic, intuitive and compelling."

3. User friendly navigation

Navigation can get complicated and hard to use. If you know you will have a lot of pages on your website, try to organize them so they make sense. If you have more than two tiers, you may want to think about having a mega drop down menu (see examples in last week's post).

4. Styling that matches your audience

Bright colors appeal to children, neutral colors appeal to adults, etc. Fun graphics may enhance a children's website, but not a retirement home website. Defining your target audience before doing any designing is important. Remember: different styles appeal to different age groups and genders.

Nick Jr. has bright colors and fun graphics to grab the children's attention.

5. Consistent styling throughout

Fonts, colors, and content area sizes need to stay consistent throughout the website. If you have a variety of everything, not only does it look messy, it also can confuse the user and make it hard to follow the information. Also, another web design tip: using more than 3 font faces on a website is usually frowned upon. The simpler, the better.

6. Easily Accessible Contact Information

This seems like a "duh" kind of thing, but I have been to websites where it took me multiple clicks and a couple minutes to find the contact information. If you want to gain customers and sell your product, having your contact information easily accessible can keep the user from getting frustrated and leaving your website (or even going to one of your competitors).

7. Custom 404 pages

Custom "404 Page not found" pages can add a more personal and professional touch to your website. A 404 error page comes up if the page does not exist anymore or it is a broken link. Check out our post on the importance of custom 404 pages.

Frye/Wiles has a very creative 404 page.

8. Calls to action

Calls to action (CTAs) are a great supplement to any business website. They help guide the user around the website as well as helping to point them in a certain direction. You can put CTAs in the footer, side navigation or even up by the title. Placement is endless, but make sure it will not distract the user from the information on the page.

9. Optimized meta descriptions and title tags

META DESCRIPTIONS and TITLE tags are important for search engine optimization of your website. They are an important step not to overlook.


TITLE: This tag appears above the browser window and also as the title of search results.


Tips:

  • Less than 80 characters total.
  • The first few keywords of your TITLE tag are given the heaviest weight by the search engine, so it is important not to dedicate these first few words to your Company Name if your name is not what customers are searching for the most. 


META DESCRIPTION: The text that displays if you come up in search results. This is important to encourage people to click your result over another.


Guideline: 

  • 150 characters will display on most search engine results. Up to 250 on others. Anything else is cut off and not considered.

10. Search bar or sitemap

If your website is complex and contains a lot of information, a search box may be a good idea. Imagine if Amazon did not have a search box. It would be so incredibly difficult to find what you want. However, not every website needs a search box. A sitemap works perfectly for smaller business websites.

Above is an example sitemap from OpenOffice.org.



Tuesday, February 21, 2012

Web Design: Mega Drop Down Menu Tips & Examples

Mega drop down menus are becoming very popular and are surprisingly user friendly. Yes, you read that right: user friendly drop down menus. I never thought complicated drop down menus could be user friendly. This is one of the reasons why I love this industry. Professionals are constantly striving to make websites better and easier to use. I have gathered some tips and examples of mega drop down menus below.

Tips

These mega drop down menus are great for menus with more than two levels. When you have more than two levels, the user can get confused and sometimes lost. I have experienced this before on a few websites (*cough* Bed Bath and Beyond). You finally get to the option you want in the 3rd level, slightly move your mouse, and the menu disappears and you have to start from the beginning. This is so frustrating and not to mention, annoying. These mega drop down menus will solve that problem.

There are several different ways to use mega drop down menus:
  • organizing pages by section
  • organizing blog posts by category/topic
  • displaying contact forms or other modules
  • extra call to action space
  • and more (possibilities are almost endless)

Another important tip is to keep mega drop down menus simple. It can be very easy to get carried away with them. Remember, we are trying to confuse the user less, not more.

Examples

There are several examples of mega drop down menus on the Internet. I picked a few of them to showcase. Each one has a different way of displaying their menu information.

Starbucks Coffee Company uses a mega drop down menu with several CTAs (Call to Actions). They made good use of their space: there is one on the bottom, and two on the right. Great work, Starbucks!

Starbucks Coffee Company's homepage. View the site.

Verizon Wireless uses a very clean and simple approach for their mega drop down menu. It is very clean and organized. They draw attention to the "sign in/register" button for the CTA. They don't need any graphics to get the user's attention in this situation.

Verizon Wireless' homepage. View the site.

FedEx included beautiful graphics in their mega drop down menu. Their sections are also clear and organized. The graphics also help to break up the text.

FedEx's homepage. View the site.

TBH Creative Example

TBH Creative included a mega drop down menu for The Christ Hospital's The Lindner Research Center research options for clinical trials and publications. Providing up-to-date clinical trial information was the purpose of the website, so we wanted to visually highlight this section and make it very easy to find information quickly.

The Lindner Center's homepage. View the site.

Friday, February 17, 2012

Web Design Case Study: Pond2O

Services Provided Include:
We launched a new website for Pond2O today and it can be viewed at http://www.pond2o.com/.

The CISCO Companies came to TBH Creative looking for a micro-website to highlight their product line called Pond2O. We previously created a microsite for Revive My Lawn.

We used the arrangement and main design elements of the main CISCO website; we changed the color scheme and fonts to match the collateral created for labels and brochures of Pond2O. We also set up and implemented a custom blog for the new site.

Pond2O's homepage. View the site.

One of Pond2O's interior pages. View the site.

About Pond2O

The Pond2O line includes beautiful, natural looking blue and black colorants with suspend technology to suppress weed growth with dyes that stay in suspension longer than many other colorants on the market. Also, Pond2O offers Bio with BioStart Technology. This product contains natural occurring bacteria with a food source to jumpstart the bacteria's ability to consume sludge and muck.

Control and clean up algae with Pond2O's Algae Control with Stabitrol Technlogy. This chelated copper is enhanced with Stabitrol to give residual control of algae up to 30 days. The Pond2O line is rounded out with Shoreline Weed Control for weeds such as cattails and Submerged Weed Control that will handle problems such as duckweed and watermeal. The addition of Pond2O Surf, an aquatic surfactant, can be added to any aquatic herbicide to improve its effectiveness.


Thursday, February 16, 2012

Web Design Case Study: DERM - Galderma PreBoard Seminar

Services Provided Include:
We recently launched a new module for DERM to help promote and accept payments for Galderma PreBoard Seminar. It can be viewed within their site pages at http://www.dermedonline.com/pagesroot/pages/Pre-Board_Seminar_2012.aspx.

We have worked with DERM for several years. Dr. Bikowski has been the main presenter in this event for several years as well, but this is the first year they have promoted the event and accepted payments online.

The challenge was the quantity of information to include about the event, so we arranged the page strategically with tabs to best use of the real estate.

DERM Galderma PreBoard Seminar page. View the site.

An interior portion of the DERM: Galderma PreBoard Seminar page. View the site.



About the Galderma PreBoard Seminar

Dr. Joseph Bikowski
The fundamental aim of the Galderma PreBoard Seminar is to present an educationally valuable review of Dermatology. This is a preparatory seminar which approximates as closely as possible the format of the Kodachrome® segment of the Certifying Examination of the American Board of Dermatology.

The registrant will be exposed to over 750 projected images in a simulated exam environment with immediate review by the faculty members. In this way, the participants will be able to identify areas which might require further study. The seminar and webinar may also help alleviate "pre-test anxiety," thus allowing the registrant to perform at an optimum level of competence during the actual examination.

Learn more about Dr. Bikowski and his practice at http://www.bikowskimd.com/.

Wednesday, February 15, 2012

Marketing -- You Don't Need a Big Budget

Guest Blog by Lorraine Ball

Business owners always ask me how big their marketing budgets should be. I usually reply that a successful marketing campaign does not depend on how much money you spend, but how well you spend what you have.

If you want to make good decisions about how much money to spend on marketing (and more importantly where and when to spend), you should begin with a business analysis. Ask yourself:
  • How many existing clients do you have?
  • How many new ones do you want to add?
  • In what time period?
  • What is an individual customer worth?
If you have a solid base of existing clients, marketing funds directed toward loyalty, repurchase incentives and referral programs will be important. If you hope to expand your client list, acquisition activities such as cold calling, direct mail or even advertising might need to be in your budget.

Regardless of your objective, successful marketing is not just a slick campaign, but a well thought-out strategy which brings together the 3Ms: Market, Message and Media

Market:

It doesn’t matter how big your business is, you cannot sell to everyone. Even if you could reach the entire population, the reality is some people are more likely to buy than others. So begin by focusing on a segment of the market. Select a profitable niche and exceed their expectations. Instead of trying to reach every household in their community, a small café grew their business by promoting their location as a haven for moms, a place to come with your friends when the kids are in school. Hosting book clubs, discussion groups and non-profit boards filled the tiny café daily.

Message:

Now that you have identified your customer, what do you say to get their attention? Think about what is important to your customer, what keeps them up at night. Craft a message which addresses their concerns, not what you want to sell. I once had a financial planner tell me what his customer wanted choices. I had a hard time imagining many consumers laying awake at night worrying about not having enough choices. This was an important element to him, but not his clients. What really kept his clients awake were worries about retirement and college tuition. My advice to him was to stop talking about choices until you have their attention!

Media:

In marketing, it is not just what you say, but where you say it. Ask yourself: Where are your customers going for information? Select your media based on its ability to reach a large concentration of your target. It doesn’t matter if the newspaper has cheap ads if your target is consuming their news online.

Once your 3Ms are in alignment, you are ready to start spending money. Go out and spend well!




About the Guest Author
As Creative Director, Lorraine is typically at the center of the managed chaos that is Roundpeg. With more than thirty years as a marketing professional (lie, tell her she doesn’t look that old) Lorraine keeps Roundpeg popping with a never-ending stream of new ideas.

A native New Yorker, Lorraine is a Hoosier by choice, and is committed to fostering growth and entrepreneurship in her adopted city. Recognized by the Indianapolis Business Journal as one of the Most Influential Women in Indianapolis, she is an active member of the local Indianapolis business community.

When not at Roundpeg, Lorraine can be found sharing what she knows in seminars and presentations around the country.  She has a BA from Queens College, City University of NY, and an MBA from the University of Texas at Dallas.

Follow @lorraineball | Connect on LinkedIn

Tuesday, February 14, 2012

Online Marketing: What Social Media Can Do For Your Business

Does your business have a Facebook page? What about a Twitter handle? Google+ profile? If not, you may need to rethink your online marketing strategy. These tools are great ways to reach a wide range of new customers!

Social Commerce Summit Tips & Tricks

Business Insider had this year's Social Commerce Summit in New York on February 7. They have several great articles about the up and coming trends in social commerce and what it can do for your business.

Dave Thomas, director of community and social strategy for Radian6, was at the Social Commerce Summit and gave the following tips for making money with social media:
  • Ideally, you already understand what your business and your goals are. If you establish those goals in advance before you start any campaign, that'll give you a leg up. Tie them to your existing goals.
  • Every part of your business will have its own definition of return-on-investment (ROI). Your sales team will want to close sales, your marketing team will want to drive ROI. Social media ROI means different things for different departments.
  • Break those goals down to campaigns. You can do that by making your campaigns trackable. Set up a landing page, for example, and drive all that traffic to that landing page.
  • You need to understand ROI is a formula, you aren't going to be able to truly calculate that ROI unless you have all the elements of that data. It's gain minus cost divided by cost.
  • Google+ doesn't have nearly the penetration of Facebook, but Google is starting to index more in search. If you're active on Google+, you're more likely to get indexed in search.
In my opinion, the first point is one of the most important parts of online marketing. If you have no goals, your social media plan will be difficult to find and evaluate success. Take the time to develop an online strategy before getting started. Based your plan around your goals. Read the full article for more information.

Google+? What's that?

If you don't know about Google+, you really should explore this new social media site. Several people have said Google+ won't last. Well, if I remember correctly, when Facebook came out, several people (including myself) said it wouldn't last either.
Who knows, Facebook may be dead in a decade or two. However, in today's world, social media profiles and ads on social media sites can dramatically help the success of your business. Social media is hot right now and will not be going away anytime in the near future.


Friday, February 10, 2012

Google Analytics Addition: Tracking Site Speed

With the newest Google Analytics update (November 2011), Google added site speed into the already advanced set of analytics tools. Site speed is very important to users. Sometimes, if your site takes longer than a few second to load, the user will leave. You don't want to risk losing potential customers.

In Website Magazine's article "Google: Site Speed a Ranking Factor", they mentioned site speed is definitely a ranking factor for search engines. It doesn't carry as much weight as keywords or page relevance, but it does affect ratings. Our world is starting to get used to having information right here and right now. If a page takes too long to load, they don't want to waste their time on it. They will try to find another site with relevant information and less load time.

I found the graphics below on Google Analytics' Blog. It is very helpful to see site speed laid out in graphs. If your site speed has a very high average, it may not be the user's Internet connection, but your website. Large graphics and high quality videos are a few things that increase load time. Google also stated that site redirects are factored in page load time.

A Google Analytics graph displaying the page load times in seconds.

Another Google Analytics graph of page load time by percentage.

The map feature in Google Analytics can come in handy if you are trying to reach a specific country or continent. 
Google has several references if you are curious about what Google Analytics has to offer. The Google Analytics Blog, Google Code, and Analytics Help are all helpful resources. Google Analytics is a great supplement to any website.

Tuesday, February 7, 2012

Web Design Case Study: Olympia Stone

We launched a new website for Olympia Stone last week, and it can be viewed at http://www.olympiastoneindy.com/.

TBH Creative was hired by Olympia Stone to make their outdated website more effective and attractive.

They had two primary project goals:

1. Allow easier in-house editing and additional pages/photos.
The new website uses our custom Content Management System which will allow them to add new pages, edit content and even add new photos to their galleries. There is no limit, and they are currently working on additional pages to add.

2. Show off all their great work with a gallery and photos.
We incorporated photos very prominently in their design as a full screen rotation. Large photos are a very popular current web design trend. In addition, we included galleries for major categories of their services (such as kitchens, bars, bathrooms). These galleries are linked in the navigation and right from the main page.
  
Olympia Stone's new homepage. View the site.
One of Olympia Stone's interior pages. View the site.

Before Redesign

Olympia Stone's homepage prior to the redesign. In addition to the outdated graphics and small photos, the coding was very poor and used tables making edits more difficult.

About Olympia Stone

Founded in 2002 by Matt Schuckman, Olympia Stone utilizes the most sophisticated machinery and processes available in the industry—Computer numerically controlled machinery (CNC)—to ensure perfect form and fit, the first time. Olympia Stone's staff of expert craftsmen, artists and professionals is here to help our clients take their design ideas and transform them into centerpieces of enticing beauty and timeless elegance that only real stone can provide.

Change is coming to YouTube Channels

YouTube—the video-sharing giant that hosts everything from scholarly commentaries and "missing cat" commercials—is rolling out a new look and feel for its Channels. These updates are intended to make it easier for users to find and watch content.

Currently account owners can opt into the new Channels design. The new Channels format isn't mandatory. However, all Channels will automatically switch to the new design one month from today on March 7. If you own or operate a YouTube account, now is the perfect time to plan and make your transition to ensure it's as smooth as possible.

Among the changes are different sizes and placements of graphics on Channels. The most noticeable graphics-related change is that the new format no longer allows for a separate banner. When you adopt the new Channels format, you're allowed to select one of four templates to customize in a way that will help you best keep your viewers engaged and coming back.

The new Channels format also gives you many opportunities to optimize your YouTube account for better search engine results. This helpful blog post chronicles some of the things to look out for when you're updating your account. The tutorial includes step-by-step screen grabs with the instructions.


Friday, February 3, 2012

Mobile Web Design Tips & Examples

Mobile web browsing is on the rise. More people are using their smart phones to browse the Internet on the go, which is the reason why your website needs to have mobile compatibility too. Any smart phone can pull up almost every website, however, it could have the user constantly zooming in and out to find what they need. Mobile devices include phones and tablets.

This chart, provided by Device Magazine, shows the increasing mobile device web browser usage.
Some have even predicted that in less than 5 years, mobile browsing will be more popular than desktop browsing. Knowing how fast technology is moving, I don't doubt their predictions.

Below is my list of mobile web design do's and don'ts:

1. Screen Resolution

Screen resolution is important when making your website mobile device compatible. Uxbooth.com created this easy to read chart for the various mobile screen dimensions. You will probably need more than one mobile stylesheet for the website.

Mobile device screen resolutions provided by Uxbooth.com.
As Uxbooth.com noted, there are new devices that come into the market constantly. This list will change year to year.

2. Keep It Simple

You are more limited with space on mobile devices. Don't clutter up the screen with too many links or graphics. Make sure the interface is not confusing to the user. The simpler the better. If you don't have many links (or you want the photographs to be in the spotlight), you can focus on images. Subaru has a very nice example of this:

Subaru's mobile website.
If you have a lot of subcategories in your navigation, simplify them and only include the necessary links on the mobile site. This brings us into the next topic.

3. Options

Some users may want to view the full site on their phone. Maybe they can't find what they are looking for or they don't like the layout of the mobile site. Giving them the option to view the full site really helps usability. If the user has a tablet, it may be easier for them to navigate around the full site they're used to instead of using the mobile site. This link is usually towards the bottom of the website design.

4. Navigation & Links

Only include the necessary links and keep buttons simple. If you have a lot of navigation links, narrow it down or lay it out in a different format. For example, Walmart & Amazon have a lot of navigation and sub navigation on their full website. They simplified it as much as possible so the user would not get lost.

Walmart.com's mobile website.
Amazon's mobile website.

5. User Text Entry

Keep user text entry to a minimum. Make use of checkboxes and drop down menus when possible. The shorter the URL, the better. Remember, these users most likely do not have access to a traditional keyboard and mouse. Some tablet users attach keyboards, however, this is a very small percentage of users.

6. Pop-Ups

This is a definite no-no. On mobile devices, a user can get lost very easily if there are pop up windows and some will not work properly.

7. Flash

Another thing to keep in mind is the fact that Apple mobile devices cannot view Flash based animations or movement. It appears as an icon and big empty space. Many Flash movies can be recreated using HTML5 and Javascript to deliver the same effect while also working on your mobile view. If you can, simplify slideshows and only include one strong image instead of five. Images will drastically affect the website load time.

TBH Creative Client Examples

TBH Creative recommends to develop a mobile version of your website and can help you through the options and process. We recently completed a mobile design project for Wheaton World Wide Moving (under contract by Williams Randall Marketing). The mobile site design has easy to use navigation, minimized text, more spacing between links and buttons for fingers to easily click, and a simple, sleek design. If the full website was viewed on a mobile device, the user could easily get confused. See the difference:

Wheaton's homepage. View the site.


 
The mobile version of Wheaton Worldwide is coming soon.

 

Subscribe to this blog