Audio: 3 Tips for Getting Started

When it comes to incorporating multimedia into your website, most people start with reliable methods like video and slideshows, but adding audio clips and podcast series are other interactive ways to add extra value for your customers when appropriate.

#1—Capturing

Whether the job is cutting a tomato or checking your tire pressure, it's always easier to do work when you have the right tools. If you are getting started and only experimenting with audio recording, you can get away with capturing your first audio clips using your computer's microphone. However, if you want to elevate your results and get something a little more professional, consider investing in a reliable digital voice recorder. They can range in price from $50 for a basic recorder to $250 or more for really sophisticated models. You may also consider getting an accessory to allow you to record phone conversations and a "sock" to buffer out wind noise from being captured when recording outside.

Hint: Writers and journalists often use digital voice recorders to capture interviews. If you have a friend who already works regularly with audio, consider borrowing their recorder to get familiar with how they work and what features are most important to you.

#2—Editing

It's hard to capture audio that's ready to "publish" online without doing a little polishing. The easiest way to use to reduce white noise, balance sound, and make other types of audio editing tweaks is by installing and using Audacity, a free and open source cross-platform software. The program's developers continue to evolve and improve Audacity, so I recommend bookmarking the website to check for updates. The second version was released only one month ago.

Hint: To keep your computer moving smoothly, you may also want to consider buying a supplemental hard drive devoted to storing your sound files. Like video files, audio files take up a lot of space.

#3—Integrating

The ways to add audio strategically to your website are endless. Many companies have photos-only slideshows of products. An easy audio enhancement for your website might be to add narrated captions to help your customers better understand the value of your offerings.

Sometimes written examples of your company's services are all you need, but maybe you want to enhance them? If you offer translation services, audio clips might be used to compliment your portfolio to show samples of your skills in action. If there are cases when video is too much but written copy doesn't quite get you there, audio might be your solution.

A e-newsletter is great when your company has many updates to share, but what if your main news is that you continue to do good work and solve problems for your customers? If you provide a service where your expertise is valued, a podcast series might allow you to showcase the depth of your knowledge and your personality at the same time. There are many different formats you could consider, including one in which you field questions from your customers in the spirit of Click and Clack at Car Talk, one of the Web's most downloaded podcast series.

Hint: For more inspiration on how you might effectively incorporate audio into your website and online marketing strategy, don't just look at your competition's website. Look in unexpected places for ideas. For instance, the New York Times is always pushing boundaries with how they incorporate interactivity into their story-telling. Their engaging audio slideshow about Ansel Adams' photography is one of my favorite examples of their effective uses of audio to enhance their website.

Interested in adding audio clips or a podcast series to your website? TBH Creative can help review your marketing plan and find out what would be the best ways for audio to add value to your website. Schedule a web consultation.

Web Development: Print Stylesheets & Why They're Important

Not every website needs a print stylesheet, but it wouldn't hurt to have one.

What is a print stylesheet? This special stylesheet that specifies what to print from the website page. Setting up this stylesheet is easy. Make sure you link your html to the stylesheet: <link rel="stylesheet" href="print.css" type="text/css" media="print" />. The browser can't automatically detect that it's on the server.

Get rid of anything that is "unnecessary"

Navigation is safe to get rid of for the print stylesheet because the user cannot "click" on printed paper. It's silly for them to print out something that isn't useful and uses up their printer ink. Do they really need that logo and random picture of your cat, too?

The main question you need to ask is: will the user really want this information printed out? If the answer is no, it's best to leave that information off of the print stylesheet.

Display link destinations

Users obviously cannot click on links on a printed page. Displaying the link destinations on printed pages will help the user out significantly. Line 25's article "Handy Tips for Creating a Print CSS Stylesheet" shows the code needed to display the link destinations on printed pages.

By supplying the link destinations, the user can print out the page without worrying about where the links were pointing to. It makes it easy for them to go back and reference items.

Widen the content area

Widening your content area for printing helps to conserve the user's paper. Don't have whitespace included in the print stylesheet unless it's absolutely necessary.

Some websites have very skinny content areas from forced width dimensions--these can transfer to the print stylesheet. It is very simple to condense a five page printed website into two pages.

TBH Creative Example

RJE Knoll Business Furniture by TBH Creative

RJE Furniture's web version.

RJE Furniture's print version.

Your print stylesheet doesn't need to be beautiful or highly 'designed'. The goal is to keep it as simple as possible without confusing the user. Saving trees and using less color ink is also suggested.

Want to make sure your business' website is printer friendly? TBH Creative can help to create a print stylesheet for your website and help to decide what should stay (or be taken off) of the printed website. Schedule a web consultation.

Web Design: Interactivity with jQuery

As a followup to my last post about Flash and mobility issues, I thought it would be a good time to discuss (and show) exactly what jQuery can do for websites. If you are thinking about adding a little bit of interactivity and animation to your website and don't want to use Flash--jQuery is the perfect solution.

Navigation:

Charlie Gentle uses jQuery for the navigation throughout his portfolio website. His website is small; this type of navigation works very well. You would not want to have this animation for a website larger than five pages (unless you want your user to get frustrated and leave your site). The sliding effect between pages was coded using jQuery.

Charlie Gentle's website shows a great use for jQuery in websites with simple navigation.

Tympanus has a changing image in the background when the user hovers over a main menu item. This is another website where you should have minimum navigation. This style allows for sub navigation, which will help with simplicity as well. The movement is constructed with jQuery technology.

Tympanus also has another navigation example which uses "bubbles". This is a unique style of navigation. It is definitely a neat touch if you are looking for a little something to separate your website from the rest. Again, constructed using jQuery coding for the movement.

Photo Galleries

Below is another jQuery interactive movement from Tympanus. They have an example of a sliding image carousel. They show five different sizes. This can be useful on a wide variety of websites, and jQuery makes maintenance of such gallery very easy.

I feel like I've seen this jQuery photo gallery from Imageflow everywhere. As is, it's not very unique, but with a little customization, you can make your photo gallery stand out! One negative thing about this slideshow: when you click on an image, it opens in the same window. It would be interesting to see if a lightbox popup could work with this. Both features and the customization options are via jQuery development.

The AviaSlider has eight different examples of jQuery slideshows. The wide variety of animations make it easy to customize this slider. This slideshow is best used for a banner or small slideshow. You never want to have more than a handful of images: the user probably won't be staying on your page for longer than 30 seconds. This and the above gallery examples are far superior from Flash galleries -- they are equally impressive in the way they look, easier to maintain, more compatible with mobile devices, and lightweight markup.

Want a little variety in the background of your website? Macrofolio shows how you can do just that with jQuery. Each background image can have a different caption as well (or the same if you wish)!

Other Advanced Effects:

I've actually never seen anything like this effect before and it is constructed using JQuery. Jacak Galanciak has a "quick sand" jQuery demo. After seeing it, I immediately began to wonder what you could use this for: sorting staff members, pets for adoption, folders, albums, and much more!

Build Internet has a nice demo of sliding caption boxes. This is a unique way to add captions to your images. There are a wide variety of caption options to choose from. This jQuery technique might also be nice for "gateway" or "call to action" boxes on landing pages.

Professor Cloud displays a sleek image zoom feature. I have seen this used  before on several e-commerce websites. It is definitely a nice touch and allows the user to easily see details! This is also similar to jQuery map zoom features most users are familiar with.

Basically, the movement and heavy coding that used to be necessary with Flash are now possible with better technology called JQuery. As a business, adding a touch of movement and interactivity will help make your website stand out from others.

Other TBH Creative blog posts with jQuery tips & tricks:

• 6 Secret Weapon jQuery Tricks
• Subtle Web Design Changes That Make A Big Difference

Want to make sure your website is mobile friendly across all devices? Contact TBH Creative to schedule a web consultation about mobile web design and ideas for incorporating movement with jQuery technology.

Flash: Website Mobility Issues

Apple's mobile devices do not work well with Flash websites and applications. Apple and Flash do not get along. If your website is offered only in Flash, you will miss this large percent of mobile users.

W3Schools has collected data on mobile device usage since January of 2011. As you can see, mobile device usage has dramatically increased over the last year:

For example, Saab's Change Perspective website looks like this on a desktop computer and iPhone:

Saab's Change Perspective website. View the desktop version.

Saab's Change Perspective website on an iPhone.

How can developers get around this issue?

1) JQuery
Today, you can find hundreds of tutorials about jQuery on the internet. About 5 years or so ago, Flash was the only way to make elaborate slideshows and photo galleries. jQuery makes it easier to create dynamic and interactive pieces on websites without the use of Flash.

Dynamic WP wrote an article called "Top 20+ jQuery Slideshow and Image Gallery Tutorials." There are several great tutorials listed. jQuery is compatible with mobile devices, therefore switching your Flash slideshows to jQuery is a great solution.


2) Separate mobile friendly version
You could always have your website made into a web or native application. Web and native applications are basically a condensed, cleaner version of your website. This makes navigating through your website easier for the user.

Toys R Us' desktop website.

Toys R Us' mobile friendly site.

While working on my senior project, I knew I would need to make a mobile friendly version. The desktop version was strictly Flash; I knew it would not work at all on iPhones and iPads. The mobile version is easy to navigate and shouldn't create any headaches for the user.

Subject Matters' desktop site.

Subject Matters' mobile friendly site.

Need more examples?

• 15 Beautiful Examples of Mobile Website Design Done Right
• Mobile Design Trends for 2011
• 42 Vivid Examples of Mobile Website Design
• In February, I wrote a couple posts about Mobile Design
• Mobile Web Design Tips & Examples and another
• Find out Why Mobile Web Design is Good (and Necessary) for your Business
• Last year, Shannon created a post on three different ways to develop a mobile website.

3) Upgraded Flash software
If you purchase an upgraded version of Flash software, you can create an 'app' that will run Flash. This seems like the best solution, but will not help the general browser experience. Adobe's Flash Platform Blog explains the Packager for iPhone. It is my recommendation that jQuery and/or a separate mobile site will be the best solution for this issue. Upgrading the Flash software is a solution, but may not be the best option for mobile compatibility.

If you think using Packager for iPhone is the best option, Flash Mobile Blog put together an article with example websites that use the Packager for iPhone.

Want to make sure your website is mobile friendly across all devices? Contact TBH Creative to schedule a web consultation about mobile web design.

QR Codes: Fad or here to stay?

An example QR Code.

What is a QR Code?

QR Codes (Quick Response Codes) have been around since 1994, believe it or not. The Toyota subsidiary Denso Wave used QR Codes to track vehicles during the manufacturing process. During the past few years, they have become popular among advertisements and marketing campaigns.

What do you do with a QR Code?

If you have a smartphone (or iPod touch with a camera), you can download a QR Code reader application for your phone. There are several free ones out there is you do a search.

When you see a QR Code on an advertisement, you open the QR Code reader application, scan the code, and the application will give you a link to either a website, image, or phone number.

Creating a QR Code

QR Code creation is very simple. You can do a search for "QR Code Generator" and Google will give you several websites where you can make your own. Do you want to make your QR Code more interesting and a little less black and white? Content Developer has put together a nice article on how to create a QR Code with your brands identity. Below are a few examples of custom QR Code designs:

Using QR Codes Appropriately
See also "15 beautiful and Creative QR Code" by Mashable

Using QR Codes correctly on advertisements is very, very important. QR Codes are not meant to be used on websites. If you are viewing the website on your smart phone, my question is: how on earth are you supposed to scan the QR code? If you do not know much about QR Codes, please don't hesitate to ask a professional or do a little research on Google.

There are other terrible ways to use QR Codes: on the outside of a bus or other moving vehicle, on top of a building, on websites, or on tombstones (yes, seriously). This website has several examples on what not to do with QR Codes.

Fad or here to stay?

After conducting a survey on 34 random individuals, I learned that the majority know what QR codes are but have not scanned one in the last 30 days.

The questions I asked on the survey were:

1. How old are you?
2. Have you scanned a QR Code in the last 30 days?
3. Do you have a smartphone?
4. Does your smartphone have a QR Code reader application installed?

The last two questions were optional. I was mainly interested in how many people used QR codes on a regular basis. The results? I actually wasn't too surprised.

How old are you? Half of my survey responders were between the ages of 18 and 25. The second largest age group was 50+. I'm pleased I received such a wide array of responses.

Results of a random survey with 24 individuals: Have you scanned a QR Code in the last 30 days?

Have you scanned a QR Code in the last 30 days? Only a handful of people had scanned a QR Code in the last 30 days. Almost 1/4 of the responders didn't even know what a QR Code was. That's a rather large number. Seeing the comparison between how many people use QR Codes vs. those who don't is pretty large.

Results of a random survey with 24 individuals: Have you scanned a QR Code in the last 30 days?

In my opinion, even though QR Codes are a good idea, they won't catch on. I would suggest to just provide the link or URL; if you use a QR code then provide both. A link may be less confusing and takes less time to figure out in today's world. I predict QR Codes are a fad in marketing that won't be sticking around much longer.

What is your opinion? Do you think QR Codes are a fad or here to stay? Leave comments below. I'd love to hear your opinion!

Not sure if your business could benefit from the use of QR Codes? Contact TBH Creative! Our team can help you make the right decision on appropriate use of QR Codes for your brochures, business cards, and more!

Pinterest for profit

For the uninitiated, Pinterest—at first glance—can seem like a simple place for pretty things. It's definitely a good resource for a new recipe or kitchen renovation idea, but if used strategically, it can also be part of a business's strategic social media marketing plan to raise brand awareness.

Pinterest is a free, visual bookmarking service that allows its users to create online bulletin boards. Each pinned item must include an image. You can also add a description, link, and price to each individual pinned item, making it ideal for companies to use Pinterest to promote their products. For example, Kate Spade's team does a "colorful" job promoting their brand messaging through pins that reinforce their line's aesthetic.

Your company may already be on Pinterest, but you don't even know it. Here's how you can check to see if content from your website is already being pinned on Pinterest.

PR Daily recently published a story detailing how big name companies, including Nordstrom, West Elm, Bergdorf Goodman, Whole Foods, Real Simple Magazine, and more, are reaching customers through Pinterest. Consistency to their other branding efforts is one of the keys to their success using Pinterest.

Just as you incorporate sharing buttons on your website content, consider making it easier for idea hunters to pin your products to Pinterest. The "Pin It" button can be added to pages featuring products, articles, tutorials, and more. If it has sharing relevance, consider adding a "Pin It" button to drive more visitors back to your website.

Not all companies have physical products to sell. If your business is based on services and your brand is all about your company's position as experts in the field, Pinterest can be a useful tool in your online marketing strategy. Create a board acts as an authority board. Fill it with pins so that the board showcases your work and what your company does well. Think of the board as an online portfolio of your successes. The board will act as a great way to drive traffic to your website based on your company's specializations.

If you want to understand what customers want next from your company, you can create a board to do informal market research. Pin ideas to the board based on what products or services you are thinking about adding to your company's portfolio. Ideas that might be worth pursuing may be the ones that get the most comments and repins.

In the same way that you should be careful when writing content for your main website, concentrate on SEO when choosing your username and writing your company's description. Use keyword rich descriptions and make sure to include your website URL to make it easier for customers to find your Pinterest account. Also be sure to add links to your other social networking accounts, too.

Pinterest is still invitation-only. You must request an invitation from the Pinterest website. The best way to get in promptly is to ask a friend who uses the website to invite you.

For a case study on Pinterest, read our blog entry about how one company, Kitchens.com, uses the popular social bookmarking service to extend their online marketing efforts.

TBH Creative is a web design company located in Indianapolis, Indiana. We specialize in effective web design for businesses. Contact us today to schedule a web consultation.