Skip to content

The Mothership Part 5 (Adding Photos, Video & E-Commerce to your Website)

November 8, 2010

Mothership 5 - Toolbox and MultimediaHello, and welcome to the second last article in a 6 part series I’ve written relating to your Mothership – your website or main online hub! In this series I aim to cover every element of your online home, from setting it up, to updates, design and SEO. (That’s Search Engine Optimization, not to be confused with Sneaky Enigmatic Ostrich – this joke just ain’t getting old! Well, to me anyway…).

Week 1 we looked at what constitutes a ‘Mother Ship’ (here), Week 2 we researched naming and hosting options available to you (here), Week 3 we checked out what your Mothership looks like (here), Week 4 was all about your content – what to include (here) and on this happy Monday morning, I want to give you some ‘Best Practices’ for saving and storing your content as well as streaming video (and other multimedia) and adding e-commerce.

Website Toolbox:
Along with your branding and social networking toolboxes (check out my older posts for these), you should keep a web toolbox of web-friendly content. This includes your logo, images, short and long bios, brand one-liner, and audio and video files – all optimized for use online. I’m also going to cover below the specs and key web technologies that you will need to host your various types of content.

Is your brain already drifting away at the thought of all that….technology!? If you are an absolute novice and need further information, there are any number of books, blogs and websites dedicated to web design and web development. Don’t let fear stop your progress, do some further research to expand your knowledge!

Storage: It’s smart to store your web assets (and all print assets too) on a FTP (File Transfer Protocol) or cloud server. You will then have access anytime and anywhere as long as you have net access. When you are developing your personal website, including an FTP section where you can store files that are password protected and the public can’t see. You can create a folder on your hosting server, and can add files using the hosting providers interface or FTP programs such as ‘Fetch’ or ‘Cyber Duck’.

A portable pen/USB drive is another option. Always, always, always make sure all of your information is saved in multiple locations; take the advice of someone who has lost the contents of two laptops within the last 12 months, neither of which were backed up!

File Naming Protocol: Naming your files with care and accuracy is important as you never know where they’ll end up and in who’s hands. Always name files (images, audio, video) with your (stage) name and then a short description of what the file is. If someone finds your amazing reel movie file or a impressive headshot online, it will be easier to track it back to you. Keep file names free of punctuation and short as this helps to avoid file corruption issues. Don’t use spaces in file names or dots instead substitute with underscores.
Here’s a bad example: Look At Me, Damn you!. logojpeg
Here’s a good example: LookAtMe_logo.jpeg

Images For Web:
Images for use online need to be formatted in a different way than those used in print. You should have both versions on hand for each of your images. The most common file formats for web are JPEG and PNG (PNG allows a translucent background). You can save versions of your images and logo using Photoshop to convert to web specs. You can adjust these settings manually, or utilize the Photoshop ‘Save For Web & Devices’ feature in the File drop-down menu.

Color: There are two types of color indexes for images. CMYK is for printing, and RGB is for use online.

Resolution: There are also two types of standard resolution for images. Images are made up of lots of tiny colored dots and the resolution refers to how many of those dots appear per inch. 300dpi (dots per inch) is the standard for print, and 72dpi is standard for online or digital. The smaller the dpi, the lighter the file weight and the lower quality an image is.

Royalty-Free Images: Pay a one-time fee to use photos, illustrations, videos, audio tracks and Flash animation files on your site. iStockPhoto is the largest library of royalty free content on the web. Getty Images is more expensive than iStock but arguably has a better range, it’s commonly what the professionals use.

Audio For Web:
Just like you should compress images for web, you also need to compress your audio files. Large, heavy files don’t stream without interruption or take an eon to load. The most popular audio file format is the MP3, most people will be able to play these files on their computers or portable devices. You can adjust the level of compression when creating your MP3 files, and you can also add information such as song title, artist name, an image, URLs, and copyright information. These are called ID3 tags, and both iTunes and Window’s media player allow you to add these easily.

For more information regarding the best specs for encoding music for websites, I recommend the book and website: The Indie Band Survival Guide. The site has lots of great reference material too, including this article:
http://www.indieguide.com/howto/view/462451/How_To_Encode_MP3s_For_Maximum_Playability

Audio Players:
There are many audio player options to add to your site. You can add full play lists, or just short demos. Players can be a single button, an audio bar or a full MP3 jukebox.

You can add a ‘player’ with HTML or Flash code. Good free-code HTML player options are Google Reader MP3 player, and Yahoo! MP3 player. Wimpy is a good Flash player alternative: http://wimpyplayer.com/.

Some CMS and WYSIWYG site builders have drag and drop widgets to add audio, which is even easier. Be aware that many free web host providers offers limited storage space for users’ files and you may find that you’re running out of room on your account very quickly, so this might not be the best option for comedians who host large number of live stand-up recordings or if you host a regular podcast (more on podcasts in the Blogging chapter).

Streaming: Streaming is when the music files live on a server and is feed through your site as the file plays. The advantage of streaming your audio files is that you do not need to wait for them to download to listen. You should be aware that slow bandwidth can result in a stuttering playback. Streaming also makes it more difficult for people to download and steal your tracks however it does not completely protect everyone from downloading your files – some tech-savy and persistent folk can find a way.

Downloads: Downloading is allowing people to take a copy of your file from your site to play on their computer or portable device. You can offer a download for a fee either via your own site, or through an online retailer via a link to their store (iTunes, Amazon, etc). You can also give away your audio content for free by offering a link on your site to download.

Video For Web:
You guessed it – you need to compress video for web too. You have probably experienced the brain-numbing boredom associated with waiting for video content to load. Compressing your video helps prevent this. Free programs such as QuickTime have standard settings to save copies of your video files in formats and file sizes (sometimes referred to as file weight) friendly for web and mobile devices. Experiment until you find a size that it small and quick, yet at a quality that you are happy with. Check your content on as many different computers, operating systems (Mac Vs PC) and Internet connection speeds as you have access to, so that you can test quality and appearance.

Quicktime and WMV (Windows) file formats are the most popular, but both require their associated player to be installed on the viewer’s computer to be able to play them, you shouldn’t assume that everyone has either or both You can solve this problem by uploading your video files in both formats.

If you wish to host your videos on your site server, you’ll need to add a video player. You can find free and paid player codes online on both HTML and Flash formats. If you’re using a CMS or WYSIWYG builder there are widgets that make adding a player, a very simple process.

A great alternative to hosting your videos on your site server, is to create a profile and/or channel on a video sharing site such as YouTube or Vimeo. Once your files are hosted and tagged on either of these sites, you can add the embed code and voila, the video will embed into your site. The advantage of this option is that you have you video content available on two online locations simultaneously (your site and the video sharing site) providing more exposure.

E-Commerce, Forms and More…
There are also many resources online to easily add contact forms, mailing list sign-ups, surveys and invitations and even basic e-commerce (check-out functionality to allow visitors to purchase from your site), and you don’t have to be able to write a single line of code.  These sites generate the code for you and you (or your developer) add this to your site. Some are free (like FormSite.com) or have free trial periods and low ongoing fees (such as FormLogix.com and Wufoo.com).

If you’re selling your music or merchandise via your site, there are two main options:
1. You can link to external sites that you make your product available on and the transaction will take place on their site. (Amazon, iTunes, cdbaby.com, etc). Great ‘on-demand’ sites (i.e.: they only produce the items as they’re ordered, limiting upfront costs as no inventory is required) include: Cafepress.com, etsy.com and Zazzle.com.

2. Alternatively if you would like to produce, sell and ship yourself directly, then these are the three most popular, simple payment-processing systems to accept orders via your site:

PayPal Cart: Can accept credit card and PayPal payments, no monthly fees, instead they charge per transaction ($0.30 plus a percentage of sale, 1.9-2.9%)

Google Checkout: Accepts credit card payments, you are required to have a Google ID (a gmail account). If you use AdWords (pay per click advertising from Google), you can receive credit towards their checkout system.

Authorize.net: The transaction fees are lower than Paypal or Google, and you can accept credit card and electronic check payment. The best option if you already have a merchant account in operation as this is a requirement for set-up, if you don’t, be aware that the process of setting one up can be a tricky and time-consuming process.

Phew – that was a whole lotta info! Go rest your brain now…but be back next week when we finally take a look at that Sneaky Enigmatic Ostrich (or SEO). Until then, keep sharing!

“Everybody can stand on his or her own feet. The ideal of helping is to make others independent of you. You help them to become more independent rather than making them addicted to you.”
(Chogyam Trungpa)

Image by Stitch via Flickr, used under a Creative Commons license.

[tweetmeme source=”thedigitalactor” only_single=false]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: