Perspective, tips, and insight

Articles to help you improve your digital marketing

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.

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.

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:



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.
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?



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.

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.

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.


Receive articles in your inbox