A client recently launched a new Web site that had been designed by a volunteer agency, but has asked me to stay involved to help with technical issues. The new site looks and works fine, except for some poor front-page communication, but under the surface…

The other guys put a different Google Analytics code into their page template. So that means when the new site launched, Google stopped tracking visits in the one stats account, and started tracking stats in the new account.

Now the client’s stats are split into two. If they want to know how many site visits there were in 2010, they’ll have to look at two separate reports and add the numbers. Likewise, if they want to do any before/after comparisons, they’ll have to export the data from two accounts and crunch their own numbers.

I spoke with the client and it’s not a big deal to them, which is good news. But it illustrates the kind of short-sighted thinking some designers have — trash everything and start over, even if we lose some good stuff in the process.

I wrote a message like the one below to one of my clients today, whose Web site is about to launch. I’ve written about SEO before (see my fledgling SEO category), but this seemed worth sharing. My contract with this client does not include any serious Search Engine Optimization (SEO) for the new site, except that all pages will be search engine friendly (which they are: descriptive page titles, use of valid HTML, friendly links and URLs).

…

Within a month of site launch, Google, Yahoo and other search crawlers will start to find the new site and index the content (except any private content, which they cannot get to). Based on the found content and each search engine’s own secret algorithms, the site will begin to be included in various searches… although it may land far down in the results, depending on what’s being searched for.

The most obvious search would be for [business name], and before long, I’d expect your site to be at or near the top of a results page for that search query.

But… you really want people to find your site when they’re searching for more abstract things, like “Orange County Business Park” or “Santa Ana Office Space” (for example). These are referred to in SEO as “keywords” (even though they’re really key phrases).

If these keywords are not found on your site, Google will not make the connection and therefore your site will not show up in the results for that search. So, when rewriting the Home Page text, I included some additional phrases in the text for SEO purposes.

It’s possible that the SEO-friendly setup will get you enough traffic to be happy. If not…

A serious SEO project would take a list of keywords and make sure that the site includes them in critical places, such as page titles, image placeholders, subject headings and meta tags. We would monitor your site’s rankings in various keyword searches and adjust the SEO strategy depending on how well the site is performing over time.

Since incoming links to your site matter, SEO specialists often work to request incoming links from related sites or the media. You can help. Try to include your Web address as a link wherever possible — in media articles, news releases, Chamber of Commerce listings, business directories, and so on. All those little incoming links add up to better SEO placement.

Increasingly, SEO specialists are also helping out with social media (Facebook and Twitter) and including social media in their strategies.

SEO is related to, and often confused with, Search Engine Marketing (paid ads on search results pages). With SEM, you can guarantee prominent placement on results pages. But you have to pay for that placement, and the cost depends on how competitive the keywords are. In my opinion, smart businesses use paid SEM only in specific niches or for specific campaigns.

There’s a lot more to it, but those are the basics.

A friend/colleague sent me email recently, asking about programs for creating Web site graphics. Basically, he’s working on a low-budget labor-of-love Web site and needs something better than MS Paint. Don’t we all?

Sure, the pros use Photoshop and Fireworks, but the cost is steep and the learning curve is steeper. So what’s a weekend Web warrior to do?

My response:

Recently, I posted on WordPress setups, and since then I’ve set up a couple of Joomla sites. Same problem — I have to remember all the steps. In the ongoing spirit of sharing, here’s the setup checklist but for Joomla this time.

I’m assuming you know how to set up a domain and install Joomla. If not, my recommendation is to use Bluehost and their Simplescripts automatic installer for Joomla. FYI, other hosts also have automatic installers, but some, such as GoDaddy’s, are hard to find.

1. After installing Joomla, log in to admin and set the global configurations, such as SEO URLs and session lifetime.
2. Install the basic components (“components,” “modules” or “plugins”). I use JCE (an advanced content editor), eXtplorer (file manager), JoomlaPack (backups), JForms (forms) and CQI (admin control panel icon manager).
3. Install any necessary components for the site. This might include Community Builder (memberships), JEvent (event calendars), Kunena (forums), or any of the gazillion other plugins found at the Joomla Extensions Directory.
4. Install the US English Language Pack, if needed (downloadable from the JED, FTP into the languages folder). The default Joomla language is English-GB, which is fine for most things. However, date and time display is the biggest difference.
5. Installing and/or customizing your templates is next, but you’ll need some content for testing. If you installed the sample content, skip ahead. If not, you’ll need to create some pages. (“Articles” in the Joomla parlance. Use Lorem Ipsum if needed as placeholder text.) At this time, it’s probably a good idea to create sections and categories, especially for News and Promos if you are using these categories to display latest news or promo items on the Home Page. Note: if you do use the sample data, remember to delete it all before you go live.
6. Now for the templates… There are a gazillion templates out there, some free and some not. Many of the commercial ones also include additional plugins and may have their own installers. Otherwise, you just FTP the entire template folder into the “templates” folder on your site, then enable that template in Admin > Extensions > Template Manager.
7. Customizing the templates is a multistep process and depends on the template. You’ll probably be uploading replacement images to the images folder for that template, and editing the CSS file(s), either through FTP or in the Template Manager. You might also be modifying the basic HTML through FTP or the template manager. Hint: to find out where the named template areas are, use http://yoursitename/index.php?tp=1
8. … hours later…
9. Set up any modules you’ll need, including turning off those that are not needed. I almost always add a custom footer, footer menu and sidebars at least for the Home Page. In addition, customize the settings for modules you’ll be keeping, such as the member login, breadcrumbs, main menu and any modules associated with components you’ve added.
10. Create menu items and organize them into submenus as needed. I try to do this all at once, since I otherwise seem to miss a menu item and have to add it later. If needed, use placeholder pages until the real thing is ready — just keep a checklist of missing items. I use “TBD” in any placeholder pages, then run a search for it before launch just to see if I’ve missed anything.

There’s more to do before the site is ready. Create the rest of the content, create and test forms, upload your membership lists, and — of course — testing, testing, testing. But the hard work of setting up Joomla is done.

In the past few months, I’ve been working a lot in Joomla and WordPress content management systems for various clients. I’m not quite ready to call myself an expert (yet), but it’s getting to be that way.

Recently, a couple of my clients have either a) asked me to convert their current sites to a CMS, or b) asked me to add some extra feature to their static site that in my opinion might have been easier to do if their site were CMS-driven. So it got me thinking: what’s the difference? Why not make all Websites into CMS-driven sites?

The short answer is, pretty soon that’ll be the case. But we’re not quite there yet, and even when we are, the decision points will still apply (needs, timeline, and budget versus available features of each product or method). Both static HTML and CMS sites can use design/layout templates to easily manage the overall look and feel of the site. Both can work with scripting and programming code (although differently). Both can manage traditional content (text, photos, media, etc.) as well as more active items (slideshows, dynamically generated items, etc.)

So what’s the diff?

CMS Advantages and Disadvantages

• Back-end editing of content is entirely web-based – no separate licenses, nothing else to install.
• Most CMS products now work with plugins, which add specific functionality to the basic product. For many open-source CMS products including Joomla and WordPress, hundreds of plugins are available. Some are very specific and others are vast and complex.
• Many cool features become available out of the box or with little programming with CMS systems. It varies, but in addition to Web-based editing, I’ve used: dynamic event calendars, slideshows, dynamic content (latest news), scheduled content (publish on or remove on dates), dynamic membership lists, featured stories, blogs, easy photo galleries, and more.
• Sites are fully dependent on the CMS that runs them. Inherent programming limitations of the CMS are yours to deal with. Your site content is probably woven into the CMS, making it much harder to get out if you change your Web site strategy. Likewise, when plugins are used to add specific functionality, the site becomes dependent on the quality and stability of each plugin.
• Upgrades to the CMS and all plugins must be considered. Will you always upgrade, only upgrade when there’s a critical security risk, or only perform major version upgrades? Remember that any upgrades can break things on your site, so plan for complete testing before and after every upgrade.
• The template system can be fairly rigid – your template defines the outer design elements of your page, while the CMS handles the content in the center. Works great for sites with consistent layouts, but it can be a problem if you occasionally need to break outside that template.
• Oftentimes, CMS products lean heavily on the site navigation; crosslinking between various pages on your site can be difficult, and if content is edited or moved, the other links usually break.
• You must plan your SEO strategy from the beginning: since many CMS URLs are not search engine friendly, newer CMS versions have SEO options available (rewriting the URLS and usually adding per-page meta/keyword options). These systems work pretty well as long as you plan for them.

All those extra features are cool… but they also add complexity. For simpler sites, you can do it all yourself, but you might also need to have a Web dude in your back pocket for those times when the simple stuff ends up not being so simple.

On the other hand, you can build a pretty awesome non-CMS Web site using HTML, Dreamweaver templates and CSS, custom coded scripts where needed to accomplish specific advanced functionality such as calendars and so on. Once built, with a little advanced training, you can manage it all through Dreamweaver and live a long and happy life. So while the CMS offers a number of advantages, I don’t think it’s (yet) the answer to all Web site needs.

Two separate customer service issues today… both drove me a little nuts.

Rant #1: Endless voice prompts. Called PayPal in regards to a transaction. After entering my account info, I get dumped into the voice prompting system — “you can say, ‘payments,’ ‘account issues,’ or ‘refunds.’”

Aha… I’ve been in this trap before, and I know to say, “agent.” But the automated voice is ready for me: “Ok. Before I transfer you, I need to know a little more about your request. You can say, ‘payments,’ ‘account issues,’ or ‘refunds.’”

You should have heard me, shouting “agent agent agent” into the phone. Then when I get connected, the agent says, “can you please verify your account info?”

You mean the account info I entered already, at the beginning of the phone call? I already entered it. Why are you asking for it again?

Dear PayPal agents (and all other call center agents): I’m sorry I sound angry when I’m calling. It’s not you. It’s your voice prompt system. It is not helpful. Bad start to a customer service contact.

Rant #2: Live Chat (Not Really). I had a quick question for Bluehost, my preferred Web hosting provider. So instead of calling, I thought I’d try the big LIVE CHAT button they have on their Home Page. It looks friendly, and I’ve used it before.

So I click on it and a window pops up, asking for the nature of my request. Of course none of the choices match my (really rather simple) question, and there’s no other option, so I choose the closest choice: Support, then the subcategory “Scripting Questions.” The box dynamically changes to request my name and question. So far, so good.

So I compose my question. It’s a simple one — basically a yes or no question about whether I can self-install something in the hosting account. So I figure I’ll just write it out and send, then get a short answer and be on my way.

Really? You let me write out the question, then refuse to answer it? If you’re dynamically updating the chat window, you could have hit me with this as soon as I chose the Scripting subcategory. I’d be less annoyed.

I actually had to call to get the answer. Five minutes on hold, 30 seconds with an agent.

Dear BlueHost agents (and all other call center agents): I’m sorry I sound angry when I’m calling. It’s not you. It’s your so-called live chat system. It is not helpful. Bad start to a customer service contact.

In my work as a consultant, it’s important for me to adjust to the speed of the client. If I go too fast, problems appear.

Sometimes I lose them in concepts that seem pretty basic to me, but are new to them. Then later, I have to back up and go over the concepts again. Or I assume that I know where we’re heading, start building technologies, and then get thrown a curveball.

That’s what happened yesterday. A client had been very excited about using a rotating background image on their new site (every page load would pull a new image from a gallery of 3-6 images). Although I’m generally not a fan of distracting backgrounds, we had discussed how to make it work, and it had been a feature of the design since the earliest discussions.

So I jumped ahead… and set up the effect in a WordPress template (using a random image PHP effect added to the CSS, not a plugin). It took some research to find and test the effect, but it worked great.

Meantime, the client had been reviewing design samples that included one background image… and they like it. A lot, as it turns out. So now they want to just use the single background image.

No problem… I can easily remove the random effect. The new site is going to look great. The time I spent on the effect isn’t really wasted (it’s education — except that if I ever need that trick again, I won’t remember how I did it).

In this case, it wasn’t a huge problem… but it does illustrate the balance between being out front and getting too far ahead.

I hope I’m not being snarky here, but even the big guys have Web problems sometimes.

Here's the T-mobile Home Page. I tried to log in to my account.

Oops!

For those who care, the error is a Windows server error, probably from an asp.net application that they’re upgrading (or recently upgraded) and some essential bit of code is missing.

It happens, but we’ll see how long it takes for them to fix it.

Among the first things young photographers are told is get close to your subject and fill up the frame. Good advice for framing photos to hang on your wall, bad advice for Web/design usage.

The new rules, when shooting for general Web site usage: group your main subject, but shoot wider shots with plenty of photo material at the edges, and use your highest resolution with little compression.

With these rules, you’ll get photos with a lot of cropping flexibility. That way, depending on your design needs, you can shape the photo to fit. Here’s one example:

Here's the original image (from a visit to the San Diego Wild Animal Park, ©Brian Wold)

The giraffe is my main target, but with all that extra photo material to work with, I have choices.

A wide crop -- great for banners and header images

A tall crop -- for vertical pages or sidebars

A square crop -- like you learned in Photography 101. Useful for accent photos, inserting inside text-heavy articles, and hanging on your wall.

Even though you’re shooting wide shots, keep the main subject matter simple. At the low screen resolutions your Web site will be viewed with, coupled with the small pixel sizes you might use, detailed and complex photos will get lost. Also remember that in most cases you’ll be zooming way into the photo, so keep your focus as sharp as possible (use a tripod!).

I’m making a lot of WordPress sites right now for small clients, and every time I set one up, I have to remember all the steps. So, this post has a selfish goal: I need to create a list anyway, and figured I might as well share.

I’m assuming you know how to set up a domain and install WordPress. If not, my recommendation is to use Bluehost and their Simplescripts automatic installer for WP.I’m also assuming that this is a Web site, not a blog site (although you might have a blog in there somewhere).

1. After installing WP, log in to admin and set some basic variables…
   • Create a Posts page (new page, name it “posts,” no content inside it. This will be the Blog posts page.
   • Create a Home Page (new page, any name… although Home or Home Page makes sense).
   • Under Settings, adjust the title, tagline, timezone, etc.
   • Under Settings > Reading, set the Front Page to the Home Page you just created, and set the Posts page to “Posts.”
   • Set Permalinks to custom structure: /%postname%/
   • Set the Media settings as desired (I use 250/500/1024)
   • Change the default category name to “General” and the default link category name to “Links.”
   • Under Plugins, activate Akismet
2. If you know you’ll need plugins, now’s a good time to add them. I’ve been routinely using Contact Form 7, TinyMCE Advanced, and ShareThis.
3. Now for the templates (themes)… Under Appearance, click Add New Themes. I’m currently very keen on Suffusion, which has more options built in than most sites would ever need. However, I’ll be customizing further… and will not detail all that in this post (maybe in the future…) After activating Suffusion as the current theme, the settings are available as Suffusion Theme Options in the menu. I set width, basic colors, nav menu options and a bazillion more settings here, before going off to customize the stylesheet and site graphics.
4. … hours later…
5. If you’re using them, add and configure widgets.
6. In most cases, your pages would not include comments. You could set this at the bottom of each page when you’re editing, but WP by default includes text saying that comments are not allowed on this page. Annoying… so we make it go away. Click Appearance > Editor, then find Page Template (page.php). Click to edit, then look for “< ?php comments_template(); ?>” Since I never want comments on pages, I remove this line entirely.

There’s more to do before the site is ready. Create the rest of the pages, create contact forms, add image galleries, and test everything in various browsers. But the hard work of setting up WP is done, and the rest is more straightforward.