Mona Hersey, the proprietor of To Do! Ta Done√, a personal assistant/home organizing business, hired me to do an overhaul of a site that had started out as a hosting company generated template. 
Since Mona’s business is all about helping people to clear the clutter and confusion out of their lives, it made sense to use a cleanly organized theme such as Corporate Globe by Rankerz SEO Services. I was able to develop a new template via CSS that used the To Do! Ta Done√ colors of light green and violet and also incorporated hints of orange from the original theme. The end result is a site that is organized, colorful, easy to use and that showcases a great local business!

Last year Carrie Stack of the Say Yes Institute and a certified Life Coach, asked me about helping her to launch a s site for her new project entitled EO.  EO stands for Emotional Orgasm which is a term she and her business partner Michele Lazcano came up with to describe a moment when you connect with another person and the both of you realize that the connection has moved both of you forward to living your life fully.

I have to say I had a few EO’s of my own with this project.  In collaborating with Katharine Navins of Tallow Studio for the visual aspects of the site, I came to realize that the “splash page”, long considered a no-no among designers, can actually be a very effective tool in focusing the user’s attention on the site’s various sections before they dive right into the content.  Katharine’s use of the gentle blue and white gradient tile in the background and the clean look of the EO logo makes for a very soothing inital impression and prepares the viewer for a relaxing enjoyable time spent reading about Carrie and Michele’s vision of how we can all connect with each other and live our lives more fully.

One thing that was a fun challenge in developing the site was finding a way to display the beautiful navigational buttons Katharine designed without having to resort to javascript or tables.  I found that giving the unordered list that contained the navigation its own id and then using relative positioning to place it on the page, then allowed me to style all of the links with some universal styles, such as visibility, borders, margins, padding and line-height (to fool IE into expanding the clickable area to cover the entire button).  Then, giving each list item its own id gave me precise control over where the link was displayed via absolute positioning and also allowed me to display a different background (the various buttons) for each link.

Social networking, by its very nature, is also a big part of EOyourlife’s focus.  In addition to the text links to Twitter and Facebook at the bottom of each page, I also installed the Add-to-Any plugin so users can easily share the site with friends.  Also in use are the plugins; MailChimp/Analytics 360 to help maintain the newsletter email list and monitor site traffic, Cforms, for the site’s contact forms and All-in-One SEO pack to enhance the use of page titles and optimize the site’s content.

Check out EOyourlife.com and share the good vibes!

Here are 4 steps to getting ready to create a site that will reflect what you do and help your business to grow.

Step 1. Get your site name (URL, domain name).
To get set up with a domain name, it’s a good idea to start by finding a hosting company with a good reputation that’s inexpensive and will also give you a way to reserve the domain name as well as host your future site. Yes, reserving a domain name is a separate service than hosting your site. Registering a domain name is staking your claim on the url to make sure a competitor can’t use it. Hosting a site is renting server space that the hosting company maintains, thereby giving your site a virtual home on the internet.
Here’s a pretty good list of hosting companies to start with.
When you go to a hosting provider’s home page, look for a domain check service, either on the home page itself, or as a link such as “domains” or “domain check”.

Oh no! The domain name that I wanted is taken already!

If yourcompanysname.com is taken, don’t fear. I’ve had a few clients that this happened with and they used yourcompanysname.net as an alternative. .Net and.com endings for commercial sites are pretty much interchangeable, but .org is for non-profit organizations. .Biz and .info aren’t used very often and so a lot of spammers use them and therefore, you should investigate alternative domain names. Your guiding mantra is “Easy to find, easy to remember”. Search engines will “grab” a site to display in search results based on a number of factors, but the site’s name is a big one.

For example, you might have been building a graphic design business based on friends and word of mouth and now you want to “hang your shingle” on the web and drum up some more business. You have been using the name Designs by Jane for a while, but when you go to reserve the name designsbyjane.com it’s already taken. Don’t panic and register designsbyjane.biz or designs-by-jane.com. People are conditioned to hear .com at the end of a site name and the .biz may confuse them. And people don’t like hyphens when they are typing a url into their browser’s address bar. Is designsbyjane.net taken? If not, that’s a good alternative. It still has a familiar sound to web users. Or, if .net is also taken or you have your heart set on a .com, try using your name: janedoe.com or, janedoedesign.com.

It really helps to have a name based on something people are highly likely to use when looking you up in a search engine. Someone who has heard your name will find you quickly if they simply type your name into a search or if they are looking for the service you provide, or the topic your site deals with, it really helps to include that in your web site’s url.

Step 2. Set up your site’s hosting.
A while back I wrote a guide to choosing a hosting company for people to learn about how to decipher all the bells and whistles that the hosting companies out there offer. Over the years I’ve seen some companies that seem to offer great deals and the site owner ends up tearing their hair out when they want to do anything to their site, and some good ones that offer an easy way to find help when it’s needed and packages that don’t force you to sacrifice services for a good bargain.

Rather than repeat the info in the guide, here’s a few FAQ’s that have come up over the years.

Q. I registered my url with a hosting company, but I want to host the site somewhere else. Can I do that?

A. Yes you can. When you have chosen a company to host your site, look for a way to transfer a domain. Otherwise, when you try to set up the url you want hosted, they will tell you it’s not available. The hosting company’s web site ideally has information on how this process will be handled. It usually involves changing the Domain Name Server (DNS for short) on the registrar’s end of things to point to the hosting company’s DNS.

Q. Can I have an email address that reflects my url without having to check on a different email address than my regular one all the time?

A. I have yet to come across a hosting company’s email account dashboard that doesn’t let you forward you@yourcompany.com to you@yourhomeemail.com.

Q. The hosting company I want to go with offers these templates for putting my site up quickly and cheaply. Should I just try to go with that?

A. Well, this is a tricky one ethically. As someone who makes a living creating web sites for clients, I can honestly say this: Some template systems are better than others. I have actually recommended this service to someone who was getting a lot of good word of mouth business via online listing services, but was so busy running their business that they knew they didn’t have time for a full-on website just yet. Then again, I recently met with someone who had done their web site through a major hosting company and we both almost lost our sanity trying to figure out what had happened to her template site’s dashboard. Since the template service was free, her site was not backed up by the hosting company and she realized that in order to make the slightest change, she needed to re-do her entire site’s template.

In the end though, everyone I know who’s tried hosting company templates always ends up running smack into the template’s limitations sooner or later.

Step 3. Think about what your site needs to do for your audience.
What is the main reason someone needs to go to your site? To hire you? To learn more about what you do? To buy what you are selling? Whatever that reason is, build your site around that. If you are going to have products for sale, you need to determine how you are going to implement a shopping cart. If you are going to provide information, you need to have a way for people to find it easily. If you are going to provide services for a potential client, they need a way to easily find out what those services are.

Step 4. Look at some sites that you want to emulate.
Sometimes they are your competitors’ sites, other times it’s sites you find really useful or, maybe it’s just sites that you and your friends/clients/colleagues rave about. Look at a few and make notes. What makes those sites effective? You can create an absolutely stunning site visually but if it’s not efficient for the user, they could click away before your fabulous flashy splash page even loads. If you can go to the site and find what you are looking for in less than a minute and a half, that’s a good site. Visuals count though. What’s my pet peeve? Sites that make you click in 4 different places to do what you most likely landed there to do. Good site design doesn’t beat around the bush.

Step 1: Find your Flickr upload email address.

This can be done by signing into your Flickr account. Then, click on You in the top left toolbar and then scroll down to Your Account. Once you’ve clicked on that, you will see a tab on the next page for Email. Click that and then on the next page you will see next to Your Flickr upload email, the address for sending photos that will appear in your Photostream.

Finding your upload email address

Step 2: Find your Facebook mobile uploads email address.

Sign into Facebook and go to your profile by clicking on your name in the top right corner. Then, go to the Your Photos tab, select an album and then click on Edit Album, then, Add More. Then, you will see an option below, “Got a camera phone?”. Click on “Upload photos straight from your phone.”, and you will be shown your upload email address in the top half of the next page.

Finding your Facebook uploads address

Step 3: Add the two email addresses to your phone.

This can be done by adding 2 new contacts, calling them Flickr and Facebook and then adding their respective email addresses.

Step 4: Take a picture!

Once you have a photo you want to send to both Flickr and Facebook, or, either one, simply select the email option in your camera phone and begin to type the email address. Once it appears as a suggestion, select it and then add the other as a CC if you wish.

Et voilà!

A camera phone photo uploaded to Facebook

Uploaded photo on your Flickr photostream page

Once you have downloaded, installed and activated the NextGen Gallery Plugin, when you go to your WP dashboard, it appears at the bottom left like so:

NextGen's Location in the WP Dashboard

Clicking next to the plugin’s name will open a list of tools and settings for NextGen:

NextGen Gallery Tools and Settings

Here’s a quick guide to the various areas of the NextGen toolbox:
1: Overview
2: Add Gallery/Images
3: Manage Gallery
4: Album
5: Tags
6: Options
7: Style
8: Set Up
9: Roles
10: About

1: Overview

Opens a page that contains general info about Next Gen. You can see a count of your albums, galleries and images, the names of recent donors to the plugin’s author (some nice exposure in exchange for a little support-these things don’t write themselves), updates from Alex Rabe’s blog, related plugins (good to check out for ways to extend Next Gen) and your Graphic Library settings.

Step 1. Click on Upload Images

2: Add Gallery/Images

Fairly self-explanatory, this is where you would go to create a new gallery or add images to an existing gallery. Click on “browse” to select an image from your computer. Then, select the gallery they will be uploaded to.

Step 2. Select your images

3. Manage Gallery

This brings you to a list of all your galleries. Click one of your galleries to edit the following settings:

Title: The title your gallery will have when it’s displayed on a page.

Description: A brief summary of the gallery’s content

Path: The file path for your gallery.

Page Link To: When the gallery is displayed as the content of an Album, choosing a page here will create a linked image and title that can be clicked on to go directly to that gallery’s page.

Preview Image: Lets you choose which image will be displayed when the gallery is shown in an Album.

Author: Lets you show the Gallery’s author.

Create Page: This feature allows you to create a page for the Gallery if you need to.

Below those options is a dropdown menu of Actions. If you need to make changes to several or all the images at once, this will save you time:

No Action: the default

Set Watermark: Allows you to embed text onto the image to mark it as yours.

Create New Thumbnails: This is what you need to use if you have changed your Thumbnails settings under Options (see below).

Re-size Images: You may need to re-size images to fit your site’s style.

Delete Images: Allows you to perform a batch delete on selected images.

Import Metadata: Allows you to import metadata (e.g. EXIF, IPTC, or XMP data) from images and set it in the alternate title text field. (Thanks Dave!)

Rotate Images Clockwise/Counter-Clockwise: Fairly self-explanatory.

Copy To: Lets you copy the selected images to a different gallery.

Move To: Lets you move the images from one gallery to another.

Add/Delete/Overwrite Tags: Allows you to batch-edit tags-keywords associated with the images that can enable the images to be selected by keyword-based searches.

If you have selected one of these actions, just click on Apply to put the changes in effect. You can also choose to Sort the Gallery which takes you to a page where you can re-arrange your images. To return to the Gallery editing window, just click Return to Previous Page on the far right. Also, if you did change anything, make sure you click “Save Changes” to put all your edits into effect.

The bottom of the Manage Gallery page contains a list of all that Gallery’s images. If you just need to edit one image, or, if each image needs individual editing, you can do that here.

4. Album

If you need to sort your Galleries into categories, then you need to create Albums. The analogy at work here is that you can have a family album entitled “Vacations” and perhaps another entitled “Weddings” and into those albums you would put collections of photos (or galleries) called “Disneyworld09″ and “Phyllis & Mike”.

Click and drag an album from the right window to place it in the left window for editing.

Once you have selected which album you want to edit, just drag it over to the far left window to add galleries via the drag and drop method.

Click Update to place the Galleries into the Album selected.

5. Tags

This allows you to edit existing tags, re-name tags, delete tags and also edit the tags’ slug (the way it will be written into the page’s URL). For example: if you had tagged an image as “Family Vacations”, the slug could be specified as family-vacations. Choosing your slugs wisely makes you site more “search friendly”.

This makes the image likely to show up in a search for the terms "home" AND "interior".

6. Options:

This is where you go to control the following settings:
General: set the gallery path, delete image files (check to remove the images from the database when you remove a gallery, activate permalinks, select a graphic library, activate an rss feed for your images and activate some Javascript effects for your galleries to create certain displays of images. Another feature you can edit here is how your images can be attached to posts that shares certain search terms, either by categories or tags.

Thumbnails: Here you can set the dimensions and the quality of your galleries’ thumbnails. Just be sure to go to Manage Galleries > Select a gallery > Actions and select “Create New Thumbnails” after you do this.

Images: Here you can edit your images’ size, quality, enable caching of images when someone browses a gallery and also clear the cache folder in case you change certain image settings.

Gallery: You can set a large array of options for your galleries here. Deactivate a gallery page’s link, set the number of images per page, set the number of image columns, integrate Slideshow settings, choose to show either a slideshow or a list of thumbnails, simply show the imagebrowser, add hidden images, enable Ajax pagination and choose Sort options.

Effects: This is where you can set the way images will be displayed once their thumbnails in a Gallery are clicked. Note: the only two options that will work automatically are Thick Box (which displays the image with a thick white border over a sheer gray background) and Shutter (similar display but with no border). Highslide and Lightbox effects can only be generated when certain javascript is inserted into your content folder. For an example of the Highslide effect, click here and then click one of the images under Galleries.
To see what the Lightbox effect is go here and select one of the images.

Watermark: Here you can edit your settings for displaying watermarks such as whether yo want to use an image or text to protect your images from theft.

Slideshow: Set your slideshows’ appearance. Note: you will need to download an auxiliary plugin named JW Image Rotator to get the slideshows to function.

7. Style:

Style allows you to choose from 7 different stylesheets for your Album and Gallery displays as well as customize the CSS to suit your site’s look and layout. The available readymade styles aren’t radically different from each other, but here is a series of screenshots with the various choices in effect.

Gallery displaying the default style

Black Minimalism Theme

DKret 3 Theme

Hovereffect Styles

K2 Theme

Shadow Effect

Shadow Effect with Description Text

Not stunningly different in appearance I know, but, look at things this way. You can select a style, customize it any way you like via CSS and then, if things get hairy, you can always select another style to revert your design to something similar to its original state.

8. Set Up:

This page gets a little lost in translation for me. One would expect it to contain info about folders and ports and such but this is actually where you go to fully remove any images/galleries/album info from your database. That first line you see:
“You don’t like NextGEN Gallery ?” always reminds me that awkward moment when you have to tell your mother-in-law “No thanks” when offered a helping of her special “Spam ‘n Cheezwiz Surprise”. I wish this section was called “Uninstall” instead.

9. Roles:

This is a nice touch. If you run a site that has several administrators/editors/contributors (the basic Wordpress roles), this is where you can assign different levels of access to the NextGen galleries for different people.

10. About:

Here’s where the credits roll. If you are burning with desire to see who contributed to this plugin’s development and/or economic survival, then this is the section for you. And, if you find NextGen so fabulous that you want to throw some cash their way, there’s a “Make a Donation” button right under the heading “How to Support?”.

Related Links:

Hungry for more? Here’s a list of links to other NextGen-related articles that I have gathered in the course of working with the NextGen plugin:

Vuthy.com: Guide to Using NextGen’s Albums and Galleries

Scotproof’s: Inserting a NextGen gallery or slideshow in a custom field

Narasopa Media’s: Adding Title and Description to NextGen Gallery Thumbnails

And stay tuned for the next article in my NextGen series: “Customizing Your Gallery”!