Perspective, tips, and insight

Articles to help you improve your digital marketing

Web Design Trends for 2012: Social Media Integration

We are doing a series of 2012 web design trends, and our sixth prediction for web design trends in 2012 is social media integration.

Social media is everywhere. It's on our computers, phones, televisions and even in our cars. Social media integration will not be going away any time soon (at least not in the next few years).

My favorite websites with social media integration are from local designers (located in central Indiana). When I began this blog topic, I knew exactly which three websites I would showcase:

Our website (TBH Creative) puts an emphasis on social media integration linked from the bottom of each page as well as the left sidebar on interior pages. We link to our client's social media pages as well under our portfolio. Custom social media icons that match your website design are an excellent option. They blend in well with the design and don't look like they were just thrown in there.

TBH Creative's home page. Visit the site for the full experience.

Kevin Thornbloom's website has very unique social media integration. You will need to visit the site to get the full experience. When you click on the buttons, it changes the title accordingly. Kevin uses kthornbloom as his username on every social media site, so it makes it very easy to use this technique!

Kevin Thornbloom's home page. Visit the site for the full experience.

The Basement's contact page is very entertaining. The social media birds hop around on the telephone wire as you're on the contact page. They also have custom social media icons, which makes the website flow together very well.

The Basement's home page. Visit the site for the full experience.

Social media integration is key in web development this year. Now, more than ever, people are spending more time on social media sites than any other site on the web. For example, four out of the seven tabs on my browser are social media sites. News stories, friend updates, funny pictures: you name it, you can probably find it on a social media site.

Web Design Trends for 2012: Large High Quality Photograph Backgrounds

We are doing a series of 2012 web design trends, and our fifth prediction for web design trends in 2012 is large high quality photograph backgrounds.

Large, high quality photograph backgrounds can add a lot to a company's website. It is important that they are high quality images. You do not want a large, pixelated background; it is not enjoyable for the user. Just a tip from graphic and web designers everywhere: never enlarge a photograph. Be sure to only size images down. If your picture is not large enough to use as a background for a webpage, then don't use it. Below are a few websites that use the large, high quality photograph technique for their backgrounds:

Smoking Takes Lives features a story of Mick Roberts (whose life was changed by smoking). This large photograph will help to grab the user and have them watch the video before accessing any other part of the website.

Smoking Takes Lives' homepage. Visit the site.

Simon & Comet's website features his motorsport photography. After translating the webpage to English, I noticed that he also is a web designer. He has a passion for motorsports. It is a great way to combine the two things he is passionate about.

Simon & Comet's homepage. Visit the site.

Poco People's homepage has a very nice "pop" of color. Your eyes are immediately drawn to Travis and Kelly (the owners) in the middle. Just a simple red scarf and red jacket are all they needed to attract the user.

Poco People's homepage. Visit the site.

Just remember, not every website will look great with a large photograph background. When in doubt, ask a web or graphic designer. A company that sells kitchen knives will probably lose customers if there is a very large butcher knife pictured on their homepage. What looks great to you might not look great to the user.

Web Design Case Study: Franciscan Alliance Foundation

We launched a new website for the Franciscan Alliance Foundation today and it can be viewed at

TBH Creative worked with the Franciscan Alliance Foundation this Fall to help with their new website. The purpose of the website is to serve a 'home' for all Franciscan Alliance Foundations and receive support through donations.
We proposed a clean design that was very similar to the new Franciscan Alliance brand and complimentary to the Ceommunity Benefits website graphics and arrangement. We build the HTML framework to work with their Content management system and including some custom JQuery for rotation of stories, main ideas, and pop up window for donations. The application work was completed by their IS department with our support for graphics and arrangement.

Web Design Trends for 2012: Typography

We are doing a series of 2012 web design trends, and our fourth prediction for web design trends in 2012 is typography.

Typography is probably my favorite trend in web design (if I had to choose just one). I could spend hours looking at beautiful typography on the Internet. There are several examples out there; Google gave me 31,200,000 results for "typography web design". I found it incredibly difficult to only pick three websites to showcase.

Web Design Case Study: Anne Reese Photography

We launched a new website for Anne Reese Photography today and it can be viewed at

TBH Creative worked with Anne Reese Photography this Fall to help with her new website.

Anne hired TBH Creative after consulting with another firm for 1 1/2 years and not seeing results. We were able to reuse the basic design ideas as a starting point. From there, we coded and paid special attention to browser compatiblity which was very important to Anne. We included some JQuery to re-scale photos based on screen size, allow for scrolling and pop up window for a larger view. We also developed a custom application to help her manage her photos into categories and random display. With her software, she can upload photos that will resize and arrange as she specifies into the front-end design.

Anne Reese Photography's homepage. View the site.

Here is an interior page from Anne Reese Photography's website. View the site.

About the Anne Reese Photography

After receiving a Bachelor's Degree in Photography from The Columbus College of Art & Design, Anne moved to New York to master the techniques used by the very best in the field. For a few years she assisted, prop styled, and retouched her way around New York City working for high-end photographers and food stylists. Ultimately, she realized that just taking a great photo would not be enough to set her apart from the rest of the food shooters.

Anne spent the next three years working full-time as the Digital Asset Manager and Photographer for The Culinary Institute of America (CIA) in Hyde Park, New York. Along the way, Anne was fortunate enough to have met and photographed some of the best chefs in the world. She took full advantage of her opportunities at the CIA and left New York with greater understanding and mastery of her two true passions-food and photography.

Web Design Case Study: Indy Connect

We launched a website for Indy Connect today, and it can be viewed at
TBH Creative worked with Indy Connect this December to help build their new website.

Phase 1 of this project was completed very quickly and included recoding for up-to-date markup (removing a lot of tables, image maps and OLD coding techniques that made maintenance very difficult) and applying with our Content Management System software for easy future changes and additions. In the old static version of their website, changes had to be made on every page of the website and all text titles were graphics. We added font replace technology to eliminate the need for so many graphics.

Web Design Trends for 2012: Responsive Web Design/Fluid Grids

We are doing a series of 2012 web design trends, and our third prediction for web design trends in 2012 is responsive web design/fluid grids.

Responsive web design and fluid grids are important in this mobile world. There are more tablets and smart phones in the hands of consumers (New Study Predicts that Mobile Web will Rule by 2015). Unlimited data packages have made smart phones even more appealing. As a business owner, it is very important to make sure your website is up to date and looks great on any platform.

Web Design Trends for 2012: Design Below the Fold

Our first prediction for web design trends in 2012 is design below the fold. We are doing a series of 2012 web design trends.

Designs below the fold, also known as large footers, are becoming a very common trend in web design. Footers are no longer a boring place at the bottom of a website. Just the copyright and a handful of links are not cutting it anymore. There are several ways to spruce up your footers: beautiful graphics, extra navigation (sometimes the entire sitemap), contact forms, videos, social media icons and more!

2012's best Web-focused conferences

2012's best Web-focused conferences

Training recommendations for learning the latest news and information about interactive design, online content strategy, and web development

C.R. Lawton once said, "Unless you try to do something beyond what you have mastered, you will never grow." Growth is easy to talk about as a goal, but it's much harder to actually make a priority to work toward as a goal when deadlines and other day-to-day demands occupy your thoughts. To make sure you make time for you next year, why not plan ahead and get your 2012 professional development scheduled now? To help get you started, here's a round-up—sorted by focus—of options to consider:

Web Design Case Study: CareerXroads

We launched a new website for CareerXroads today.

TBH Creative was hired by CareerXroads to conduct a site audit. We went page by page and provided a detailed report of suggestions with priority for upgrades and fixes. The suggestions presented led to many upgrades on various pages throughout the website including a revised and more intuitive sitemap.

The most notable change was a home page and template redesign. We added more interactivity on the homepage with custom built content sliders using JQuery technology. The footer is also interactive on the homepage and each interior page to highlight their social media without taking up a significant amount of page real estate.

Web Design Trends for 2012: HTML5 & CSS3

Our first prediction for web design trends in 2012 is HTML5 & CSS3. We are doing a series of 2012 web design trends.


HTML5 is becoming more and more popular within web development. However, it is still in development, so it does not work in all browsers yet. I predict 2012 will bring many improvements and enhancements to what is available and supported.

Uses for HTML5
Currently, HTML 5 is mostly being used for videos, audio and animations. This is why several people are questioning if HTML5 will “kill” Flash. HTML5 is also great for placeholders, auto focusing and much more!

This is by far my favorite HTML5 website (as of right now). The Wilderness Downtown is an interactive website/music video for Arcade Fire’s song “We Used to Wait”. Users are asked to enter the address of childhood home. The site uses Google Maps and HTML5 to create a one of a kind personalized music video.

The Wilderness Downtown homepage uses HTML5. Visit the site.

There are several other great examples of HTML5 on the web. Agent 008 Ball uses HTML5’s canvas and allows users to play a game of Billiards.

Agent 008 Ball homepage uses HTML5.

Hungry for more HTML5 websites? HTML5 Gallery has several examples to look through!


CSS3 has made styling much easier for web developers everywhere! CSS3 offers border-radius, embedded fonts, transparency, rotation, gradient backgrounds and more. Like HTML5, CSS3 is not compatible in all browsers just yet. For example, the radius corners do not work in IE, so corners are boxed.

The @font-face is probably my most favorite CSS3 style! Creativity is endless when it comes to fonts. You can use the Font Squirrel generator to create your own (or you can use the premade ones)! Mobilezr uses the @font-face CSS3 style with their website.

The Mobilezr homepage uses CSS3. Visit the site.

When will HTML5 & CSS3 be compatible with every browser?

HTML5 Readiness has a beautiful interactive graphic showing the progress with browser compatibility since 2008. Google Chrome is currently the only browser that is compatible with everything. When do you think every browser will be ready? One year? Two years?

Web Design Trends for 2012

Web Design Trends for 2012
Seeing as 2011 is starting to come to a close, I thought it would be a good idea to talk about what I see as being hot trends in web design for 2012. Last year, Shannon posted her predicted trends for 2011. There are several similarities between last year and this year’s predictions but some new ideas as well.

Web design graphics: Constructing an effective infographic

Web design graphics: Constructing an effective infographic
Infographics, or information graphics, have been all over the Internet lately. Infographics can be effective on your website to add appeal, uniqueness, professionalism and overall interest. What is an infographic, exactly? You've probably seen one before, but had no idea it was called an infographic.

Below is an example from Daily Infographic. This is a great example. They can be serious, or silly. Possibilities are endless, really. Be careful not to add too much information to the infographic. It is easy to make an infographic very cluttered and hard to read. Adding sources to your infographic is always a must. Users like to see where the statistics and information came from. The sources like to get credit for having their information on the infographic as well.

A little thing that counts

Making sure a favicon, or favorites icon, is associated with your website is an integral part of extending your brand online and improving usability.

But, what's a favicon? And, furthermore, where is it located?

A favicon is the petite 16 × 16 pixel image shown in browser navigation bars and in browser bookmarks. Look at the top of this browser, and you will see a teeny yellow "TBH" next the the URL for this blog entry. That's the favicon we have associated with this blog.

When you bookmark the TBH Creative blog, your browser will also use that graphic to help assist in visual identification of this website from all of the other saved pages, aiding and increasing usability.

Have more than one tab open in your browser? A favicon associated, if it exists, will also appear along with a truncated portion of the page title to help you distinguish between all of the pages open.

Why are favicons important?

Strategic web design plans often includes discussions about marketing goals (e.g., converting visitors to customers and sharing case studies), content needs (e.g., creating graphics, links, forms, and copy) and development steps (e.g., planning the site architecture and navigation and customizing a CMS solution).

While thinking about these big picture items, small details—like creating a favicon—are sometimes overlooked. Pay attention next time you browse a website that has misspellings, broken links, and error messages. When website developers and designers aren't at the top of their game or too busy, the attention they'll pay to the smallest details is often revealing. You can usually trust that the more important details—such as website load time and security certificates—are carefully taken care of and maintained for quality when the little things are done properly, too.

Using your wordmark or logo is often best choice for your favicon image. If you need ideas, this website with lots of samples from popular websites will help you get brainstorming for a solution. Once you're ready to go, read our "how-to" blog post that shares how to integrate a favicon into your website.

Brand identity & why it's important

Is your company in need of a branding makeover?

The business dictionary states that brand identity is “the visible elements of a brand (such as colors, design, logotype, name, symbol) that together identify and distinguish the brand in the consumers' mind.”
Let’s face it. The first thing customers are probably going to see is your logo. Your logo is the face of your company. You want it to look nice, and make sense . . . right? 

There are several different items that contribute to identity; logos are not the only thing your company needs.

Web Design Case Study: Imaging Office Systems

We launched a new website for Imaging Office Systems today and it can be viewed at

TBH Creative was hired by Imaging Office Systems this Spring to help with their new website and online strategy. The previous website was created in-house, and it was time to take things up a notch in terms of design, ease of maintenance and results.

Web Design
We proposed a fresh design. We brought in complimentary and bright colors to their brand for interest and appeal, as well as professional details throughout the graphics and style.
One primary goal of the new website was to communicate to visitors that they offered more services than typically thought of -- more than just scanning and document management. They also offer custom professional services and storage. We emphasized this throughout the website and with a clear navigation structure and calls to action.

Content Management System
Our services went beyond design with our easy to use Content Management System and custom module to manage resources. IOS is also just beginning in social media and is now participating in visit the newly designed website to see more. Some featured pages include Meet the TeamLocations and Directions, and Resources.

Imaging Office Systems' new homepage. Check it out!
We used JQuery technology for the screen rotation at the top and also the logo slider across the bottom.

Resources page 

“After I sent a request to TBH Creative for pricing on a new company website, they were quick to respond and to understand what was driving the desire for a new site and what we wanted to accomplish. The presentation and proposal then addressed all of our requirements. Out of all the proposals we received for this project, TBH Creative's was the only one that made me confident that they understood what we wanted to do, had addressed how they would satisfy our requirements, had a process in place to control the project, and would be good to work with.

The site design process and the end product definitely lived up to our expectations; and TBH Creative were great to work with. The site is exactly what we needed and we have gotten a lot of very positive feedback from our customers and business partners. I have no doubt we made the right decision."

~ Angela Childs, Director, Professional Services

About Imaging Office Systems

Imaging Office Systems (IOS) was founded in 1972. They began building its expertise on document management systems that included tools such as moveable filing cabinets and offsite paper storage. These were low tech solutions by today’s standards, but they solved a very real need.  It is now an industry that is significantly more high-tech including scanning, document management, storage and professional services.

Is Usability Testing Really Necessary?

Is Usability Testing Really Necessary?

Absolutely! Anything from websites to software programs need usability testing.

This usability blog posted several tools that are very helpful while usability testing. My personal favorite is starting out with pencil and paper (free!), and then creating more refined digital mockups for testing. In my opinion, you can never do too much usability testing.

Amazon’s Newest Kindle Lineup

Is Amazon Fire the biggest competitor for iPad?

This week, Amazon released the newest generation of Kindles. The traditional Kindle is $79. There are two brand new touch Kindles: $99 for the WiFi version and $149 for the 3G version. The Kindle Fire is only $199.
Kindle Touch:

Kindle Fire:

The Kindle Fire is the most talked about Kindle this week. It is the first full color Kindle for magazines, books, movies, web browsing, and more.  It is very similar to the iPad, but not identical. The Kindle Fire is significantly smaller and cheaper than the iPad, which may make more users choose Kindle over iPad. Amazon has worked hard the past few years. They now have online movie streaming, music, ebooks, magazines, and more. Amazon has made it easy to literally have everything at your fingertips.

Amazon also has a great tool on every Kindle order page. You can compare every Kindle they are currently selling. This is a very user-friendly tool if you are indecisive about which Kindle to get. I have the last generation Kindle. I’m still not too sure how I feel about the new color and touch Kindles. I like the e-Ink versus a backlit screen. It is difficult for me to read for extended periods of time on a backlit screen. However, everyone is different!  Most people do not like change. I remember just a few years ago, I stated I would NEVER get a touch screen cell phone. I currently have a Droid X. It’s funny how technology becomes less scary as years pass.

How do you feel about the new Kindle lineup? Competition for the iPad or just another e-reader?

Web Design Case Study: Resista-Temps, Inc.

We launched a new website for Resista-Temps, Inc. today.

Resista-Temps came to TBH Creative with the need to add a new product line with equal emphasis to their existing temps products.

Our first step was to revisit the site organization and assist with the wording for the new pages while enhancing a few of the older pages. Once that was established, we redesigned the homepage and template elements including the banner and footer.

Five ways to take better website photos

Five ways to take better website photos
No photo budget? No problem. We have five easy-to-learn tricks to help make your pictures better.

Yesterday, in an attempt to start a conversation about their lenses, Nikon's social media team posted a status message to its Facebook page and created a controversy among its amateur and professional photographers followers. The post read:
"A photographer is only as good as the equipment he uses, and a good lens is essential to taking good pictures!"

Android’s Ice Cream Sandwich Update

What does this mean for developers? More headaches now, less later? Maybe.

Google is set to release the latest Android update in October or November. This update has been named Ice Cream Sandwich. Wait. Hold on. Didn’t Android mobile devices just get the Gingerbread update this summer? Technology never slows down.

Web Design Case Study: Franciscan Alliance Community Benefits Report 2010

We launched a Community Benefits website for Franciscan Alliance today. We handled web design, HTML and CSS build, and managed the overall project.
In 2008, the Franciscan Alliance came to TBH Creative with the need to display their community giving total through a website. The website serves as a report of annual community giving. We prepared the website in  and 2009. For 2010, we wanted to add some new elements and stronger impact. Part of the enhancements were JQuery pie charts to add a little interactivity. We also redesigned the home page to emphasize and show off the amount they give to the community over years. In 2010, they gave a total of $444,756,036.

Why wireframing matters

Proper planning in web development includes wireframing

Architects wouldn't build a new house without a blueprint, and likewise web designers rely on wireframes to create websites. An essential, time-saving part of the web development process, detailed wireframes communicate the bigger goals of the website project, focusing specifically on information, interface, navigation, prioritization, and functionality. Through the wireframing process, web developers work with clients to plan and document the website project's objectives and requirements.

It requires knowledge of information architecture, user experience design, and user interface design to develop relevant and useful wireframes. During the planning process, web developers use wireframes to present clear mockups, removing the need for costly back-and-forth and making it possible to deliver precisely what clients want.

Thoughtful, rich wireframes reduce interactive project rework while increasing profits because they lead to greater understanding and allow for better feedback during brainstorming and planning. Wireframes, unlike fully flushed out designs, are easy to update because of their simple, straight-forward nature. Wireframes make it easier to iterate changes quickly, saving both time and money and they give web developers an opportunity to figure out which details might have been overlooked and what features had not been considered.

Adobe Edge: Is it the end of Flash?

Animation on the web is easier than ever!

Adobe has always been on top of new emerging technology. HTML5 and CSS3 are still new programming languages. They are both currently under development. Not all browsers support every aspect of HTML5 and CSS3 yet.

Adobe Edge makes it easier for designers (and even non-designers) to create interactive websites without the use of Adobe Flash. Some professionals believe Edge will be the end of Flash. Personally, I do not think that is an accurate assumption. HTML5 makes animating items on the web a lot easier, but it does not do everything Flash can do. Flash is such a complex program; I believe it would be impossible to include everything in HTML5. Or is it?

Below is a screenshot of what the interface for Edge looks like:

For those of you who have created things in Flash, the interface looks similar doesn’t it? Adobe always does such a great job making the interfaces of their programs look similar. This makes it easier for developers to move from one program to another with very little training.
Here are some of the features of Adobe Edge (from Adobe):
  • intuitive user interface
  • visually author animated content
  • add motion to existing HTML content
  • import web graphics files
  • standards-based output
  • reliable content on desktops and devices
If you are more of a visual person, you can watch this video to get a better idea of some things you can do with Edge:

You can also download the most recent Adobe Edge Preview via Adobe.

As stated before, HTML5 and CSS3 are still in the development stage. This also means that Edge is still not 100% complete. Who knows how advanced it will become in the next year. Do you think Edge will be the end of Flash?

Ready to add some motion to your next project? Let TBH Creative do the job for you!

To use stock or not to use stock

Should you use stock photography and illustration for web design projects when you're on a budget?

When your web design project has a tight budget, the line item associated with imagery can be the first one cut, or drastically trimmed. When chosen carefully, compelling illustration and photography paired with great copy are the key to successful content. If a man from Mars can't figure out what your website is about in five seconds, you're failing. Great, non-generic imagery can help you communicate your brand and goals faster, which is why it's important to invest in your website's imagery and choose it wisely.

Shannon shared tips before for how to enhance stock photography. It's a great guide if you've already made the decision to use stock imagery, but what if you aren't sure which way to go with your web design project? Here are some questions to ask yourself when deciding whether to use stock:

How long will it take you to find the perfect image?

"90% of the time I opt for a more expensive stockhouse over iStockphoto," says Chicago-area art director Sharlene King. "It's the sloppiness of keyword loading. Time equals money."

Because users submit their own tags, inexpensive stock photography websites are notoriously awful when it comes to tagging. If you're looking for a straight-forward image, like a red ball, you should find relatively accurate results; however, if you search for something even slightly subjective, get ready to spend some time digging through ridiculous results.

"Average woman"

Why does a search for an "average woman" display
a lady posing with a huge gun?
(Screengrab courtesy of Sharlene King)

"Vegetarian food"

Why does a search for "vegetarian food" include a photo
of meat fondue? (Screengrab courtesy of Sharlene King)

How long will it take you to make a not-quite-right image work?

Ask yourself: If you made the budgetary decision to save money by paying for an inexpensive stock image but ended up spending a few hours in Photoshop to make it work, was it really worth the initial savings?

How many other people might be using this image?

Is the stock image you're thinking about using popular? If it's been downloaded many times, does the risk that other websites—including your competition—make a difference to you?

Is this a prominent image or a tiny spot?

Is the stock image front and center as a key communicator of your brand? How important is authenticity in your project?

Strategically Social: The British Monarchy & Flickr

Launched in early 2004, Flickr is one of the earliest—and most successful—social networks. Focused on being the best destination online for simple sharing of videos and pictures, Flickr continues to grow its core services by integrating new features for its free and paid users. Some of the more popular features Flickr offers include easy-to-understand image licensing with Getty Images and user-friendly online editing tools available via Picnik.

Enhance your website design with picture perfect backgrounds

When it comes to designing modern-looking websites, one of the latest trends is to focus—literally—on the big picture. Tiled texture backgrounds, once a standard for website background imagery, are becoming rare as more and more designers incorporate relevant photography as part of their website interfaces. Faster download speeds and the flexibility provided by cascading style sheets have allowed this technique to thrive.

Here are some examples of sharply executed big picture backgrounds in action:


NASA goes the traditional route and uses a huge photo as a background for its
straight-forward, more traditional based design. Using an outer space image
for the the background extends their brand and adds more pop
to their layout than a simple color or texture.


WeTransfer sets itself apart from the competition, like YouSendIt and SendSpace,
by giving its users a clean,easy-to-use interface on top of a single, full-screen
image-based advertisement.

Yahoo! Mail

Yahoo! Mail, like WeTransfer, uses the background area of its interface for logging into
its mail service to present attention-getting full screen advertisements.


Ford takes advantage of a big picture background image to show-off its line of cars
through an eye-catching poster-like presentation.


MIT displays captivating news photos as the canvas for their interface
directing its visitors to stories and information about the university.


HBO promotes it programming by making stills from the movies and shows
airing on its premium cable channel fullscreen big picture backgrounds.


Coach presents an attractive carousel of product imagery
as background images to promote their products.

Laurel Hall

TBH Creative is in the process of launching a redesign for Laurel Hall
that integrates a fullscreen big picture motif. Laurel Hall's elegant new look
will go live online soon. Watch for our announcement.

Improving your website's user experience for the color blind

One in twelve kids have food allergies. One in twelve people worldwide live with either chronic hepatitis B or C. One in twelve fans drive drunk from the ballpark.
Though those statistics are worrisome, there is nothing you can do to improve the user experience of your website for these groups of people. However, for the one in twelve people in the U.S.—mostly men—who suffer from a form of color blindness, there is something you can do when developing your website. In addition to better serving your users, your efforts to make your website more user friendly will pay off in other ways. For example, accessible websites are more likely than inaccessible websites to be ranked well in search engines.
Designers do not need to limit their palette to take into consideration the needs of colorblind users. Follow these simple tips to improve accessibility and create a website can be usable by those who are color blind.
  1. Watch how you combine colors.
    Avoid combining red and green. This is especially important in navigational text (such as menus, heads, and subheads). High contrast pairings, like black and white, are ideal for these kinds of important, essential pieces of copy.
  2. Avoid using color coding exclusively.
    Relying only on colors for indicators in your design can mean big trouble. Incorporate other cues (underlining, symbols, bold, and more) to help make designations of change.
  3. Test your page.
    To quickly simulate readability and informally test to see if your website uses high contrasting colors, take a screen grab and convert it to grayscale to desaturate your image. The free, online utility called Colorblind Web Page Filter is another useful tool for analyzing the usability of your website. (Note: the Colorblind Web Page Filter destroys web fonts and some uses CSS in its simulations. Be prepared to view a jumbled-layout version of your website. This tool is good for color simulation, but it doesn't handle designs particularly well.)
  4. Think about your copy.
    If you have directional copy on your website, it's best not to use cues like, "Click on the green button" which may not appear to be green to all users.
  5. Encourage feedback from your users.
    Make sure you have a contact form on your website to collect ideas from your users. You can't fix accessibility problems if you aren't aware they exist.

Why grid-based web designs are better

The backbone of most visually appealing websites is a well-thought out grid system. A grid is best thought of as a plan for your website. It holds the designs together, outlines what its structure is, and provides a blueprint for where page elements can go.

Like well-planned neighborhoods with blocks that follow a logical layout, websites built around grid-based designs provide structures that keep content orderly and help users find what they're looking for when visiting. Grid-based designs incorporate the best aspects of predictability and clear navigation.

More and more developers favor grid-based designs because, after the initial preparatory math and planning, using them speeds up and simplifies production by enabling them to leverage the defined configurations.

A combination of common measurements and CSS makes designing websites using a grid-based design useful for rapid prototyping during the development workflow. Grid-based designs even facilitate easy adjustments once the website is live by providing flexibility that is useful for easily accommodating changing advertising and promotion needs.

Web designers can work wonders with even the most rigid grid-based design systems. Used creatively, grid-based designs provide a basis for uniformity and consistency. Web designers use grid-based designs to present website content in unique and exciting ways that leverage carefully considered padding and white space, among other elements, without creating cluttered, structureless websites.

Suspect a website was built using a grid-based design? Add the free Firefox plugin GridFox to your browser to take a sneak peek the structure behind its layout. It's like having Superman powers for web development nerds. It's our kind of x-ray vision.

Web Design Case Study: Lindner Center for Research and Education at The Christ Hospital

TBH Creative was hired via Ten Adams to work on the first website featuring clinical trials for The Christ Hospital's Lindner Center of Research. TBH Creative lead the website project from start to finish including a custom and high end design to attract other physicians and encourage participation in trials. We did the basic coding, applied our Content Management for easy maintenance, and developed a custom application to manage the clinical trials. In addition to the website work, TBH Creative created a custom blog and worked on the design and coding for their first email newsletter. The project has been well received by the hospital and physicians.

Web Design Case Study: Northpoint Pediatrics

We launched a new website for Northpoint Pediatrics today and it can be viewed at

TBH Creative was responsible for interface and home page redesign around a pre-developed Content Management System, Expression Engine. TBH Creative worked with the application to upgrade the website performance and continues to assist with further additions and custom needs.

Northpoint Pediatrics' homepage. The home page features a rotation of events and news across the top, and a slider bar to highlight their physician videos as well as three areas of important topics above the fold.

One of Northpoint Pediatrics' interior pages. The upgraded interface is clean and simple. There were significant usability improvements in the navigation structure, active states, and use of white space as well as special attention on specific landing pages. We incorporated a 'big footer' that offers location information and quick links on every page.

It has been a pleasure working with TBH Creative. They have worked closely with us to give our website a fresh new look with increased functionality. TBH is detailed oriented, conscientious and an excellent listener and communicator. I highly recommend TBH as a trusted web strategist.
~ Linda Kortanek, Executive Director

About Northpoint Pediatrics

Northpoint Pediatrics' mission is to make a difference every day in the lives of children and their parents by giving quality healthcare and helpful advice. Celebrating 23 years of caring for kids, Northpoint Pediatrics has three convenient offices, all located in the northeast quadrant of Indianapolis, Indiana. The Northpoint team consists of nine pediatricians and a skilled team of nurse practitioners, nurses, front office assistants and patient account professionals.

Strategically Social: Tumblr & The Atlantic

If you're hunting for the latest Internet phenomenon, chances are good that you'll be directed to Tumblr. The free, easy-to-use microblogging and social networking hybrid website has been home to memes and more since 2007. Although its primary users are individuals, some businesses and organizations—like the editors of the news and analysis magazine the Atlantic—are doing a great job using Tumblr in creative ways to extend their brand and curate fresh and relevant content to their readership. Some other Tumblr pages run by publications whose editorial staffs are doing a good job editorially include the Reader, Vanity Fair, and New York Time's T Magazine.

Microblogging and editorial storytelling

Tumblr allows users to share multiple kinds of media (polls, photos, words, quotes, links, video, and more) on personal blogs. Tumblr blog homes can be customized using assorted pre-made—yet, modifiable—templates layout themes. Tumblr registration is quick and easy. To sign-up, users only have to provide three bits of information: their name, e-mail, and desired password.
Editorial staffs make up one niche pocket of Tumblr users who are utilizing the format to extend their storytelling and add more content to supplement what they're doing through blog entries and printed publications. The Atlantic's editors post original videos, teaser excerpts from their stories, photography, and more as stories break. As a monthly publication, Tumblr's instant click-to-publish format allows the editors to add reactions to stories as they happen. This week, for instance, they've been able to share assorted, relevant bits of content and links regarding the riots in London as they are created.
Does your marketing plan include reaching out to your clients on an informal, frequent basis? Are you working to build a community around your brand? Used strategically, Tumblr can support your existing efforts.

Some ideas for implementation:

  • If you have a landscaping company, use Tumblr to post photos of finished projects and how-to videos for sharing tips for maintaining professionally designed gardens.
  • If you have a catering business, use Tumblr to share sample menus and photos from events.
  • If you have an auto repair shop, use Tumblr to answer questions and run polls.

Let's get started

You might also like:

The 411 on Google+ for businesses and organizations

Though Facebook gets more traffic that Google now, that's not stopping the innovators at Google from trying to imagine up new services and products to bring back the users they lost and reclaim the title as most used website. One of Google's strategies is their latest foray into social networking—Google+. You probably noticed the companion component of the website—the Google+ buttonappear as part of Google's search results at the start of June.

Strategically Social: Starbucks & Instagram

Strategically Social: Starbucks & Instagram
If you scan technology news headlines, it takes seconds to see that Google+ is the social network currently getting the most buzz. How businesses will use this new service as part of their online marketing strategy is still yet to be seen. On the other hand, Instagram—a free app for taking and sharing photos—is quietly making waves and steadily growing its user base. As of May 2011, over four million individuals and businesses downloaded and installed Instagram on their Apple iOS devices.

Four Must-Haves for E-Newsletters

Looking for ideas on how to stand-out in your customers' inboxes? Want to know how to make the most of your email marketing, increase your open rate and clicks, and lower unsubcribes?

Review our checklist of four must-haves for all e-newsletters to amplify your messaging and get a greater ROI.

Strategically Social: & Pinterest

Strategically Social: & Pinterest
Facebook, Twitter, and YouTube. Most of the time when companies and organizations think about diving into social networking as part of their online marketing strategy, it's these three big names that often come up first.

"Strategically Social" is TBH Creative's new series of reoccurring social media case studies. We'll look at groups successfully implementing smart social technology strategies in unique ways. Though some ventures into social media fail—like Mashable being banned from using question-and-answer website Quora, we're going to highlight success stories.

Adding value to your website with video tutorials

People connect to people. It's why simple instructional videos for everything from how to put your hair up in a messy bun to how to change a bicycle tire are so popular.

What's your expertise? Identify the areas where you are a pro and create video tutorials to drive traffic to your website and engage your audience. Well-done video tutorials strengthen personal connections by providing useful information and training. Unlike sales pitch videos, helpful video tutorials connect you and your company—as an authoritative, friendly mentor—to your clients and customers informally.

When planning videos and developing scripts, identify what topics are of the most interest to your audience. A good starting point for this brainstorming is to review your FAQ and consult customer service staff. Thorough preparations and attention to details pay off. Good advance planning will help you appear calm on camera. Keep the medium in mind, though, and plan each video to focus on one key lesson. To keep your audience's attention, try to limit each tutorial's run-time to between three to seven minutes, any longer and your video becomes more of a lecture than a quick guide.

The same rules for making a good news report apply for developing your video tutorial. Journalist Donna Davis gives her seven hints for using powerful storytelling in videos. For more advice read xTrain teacher Jeremy Vest's tips for making video tutorials.

Google's +1 button: What you should know about the latest in social search

Google's +1 button
Last Wednesday Google launched its version of Facebook "like" button. Called the +1 button, this new guide to help you self-curate richer, more relevant content based on recommendations from friends, family, and colleagues. The idea is that users will "+1" something as an instant, online endorsement if a link is worth checking out.

You may have already noticed these public stamps of approval peppering your Google search results. Some websites, including industry leader Mashable, have incorporated Google's +1 button onto its stories.

How viral videos can help reinforce your brand

Videos don't have to feature cute hugging cats or giggling babies in order to go viral. If you know your niche and your brand, you can make a clever video that will be popular with your audience.
For inspiration view these examples of recent, popular YouTube videos made by staff at universities for their niche audiences:

New alumni send-off
As a tribute to 2011's graduating class, Oberlin's President Marvin Krislov and other administrators playfully recreate Rebecca Black's video for her earworm "Friday."

Student recruitment tool
What's not to like about this feel good video? Purdue University's video about the "Compliment Guys" who shout out nice things to students passing by took off when it was posted to YouTube.

Online pep rally, part one
This Notre Dame anthem, created for a student-athlete awards banquet, was so well-received by alumni, students, and other members of the Fighting Irish family that its view count is over 300,000 and growing.

Online pep rally, part two
To bolster excitement for the basketball team, Indiana University fans Brice Fox and Daniel Weber express their school spirit with song and exciting archival game footage.

Nostalgic virtual tour
Combining stop-motion and colorful narration, the University of Chicago's Dean of the College John Boyer helps alumni revisit campus in this short, atmospheric video.

Improving the user experience with content strategy

It's getting close to your launch deadline. Lorem ipsum placeholder text that filled out the wireframes and comps are the only content in your CMS. You don't have a copywriter, but you have a tentative plan to convert some old brochures' text to create web content.

We've all been there. Your new website is up and running, and now you're thinking about the content.

When working with tight turnarounds and small budgets, content can be treated as a last thought, especially if your design and development team doesn't have content strategy expertise. The web has different content needs than print projects. The words you use to tell your company's story online—and how they're presented—need regular review and strategic improvements. Content is often the hardest part of any website project.

In her book Content Strategy for the Web, expert Kristina Halvorson points out that "content is not a feature." When content revision and creation is treated as an afterthought in the web design puzzle, its execution can make or break your website's success. If your website's content isn't well thought-out, the users can always tell. Most people visit websites to get information. If your website makes it difficult for users to get what they need, they'll end up frustrated, or they may go elsewhere.

Here are two ways you can start to make content strategy a part of your website's creation, redesign process, or ongoing maintenance to ensure a better user experience and bigger ROI on your investment having an online presence:

Never stop auditing.
There is no such thing as postlaunch when it comes to content. Keep an inventory of what you post and analyze where there are gaps. Review regularly and revise as appropriate. Use management tools (an Excel spreadsheet is a good place to start) to keep track of your content. Don't forget to measure the success of your content in terms of its findability and impact on your business. Do people come to your website and leave right away? Create personas to understand your users' needs, motivations, concerns, and goals. Make sure your content addresses how your company's products and services will solve your users' problems.

Curation is key.
Unify your content management process and focus on the user experience. Figure out what you want to do and then pick your tool to help you do it. Define the purpose and value of the content you choose to share on your website. Make sure your content reflects the characteristics of your company's brand. Develop an editorial calendar and establish processes. Create standards, including a style guide with content specifications and workflow with archiving and updating plans.

Receive articles in your inbox