A recurring question about working with Miva Merchant is how to use on-page anchor links without the entire page reloading. Don’t know what I mean by an on-page anchor link? Click here.

Because Miva Merchant pages by default are built using a base href tag that loads all content relative to the Miva Merchant directory, using anchor links is problematic. Typically, if you wanted to link to a section of the page that you have identified with the id “more-details,” you would write your link as follows: <a href=”#more-details”>Click here for more details</a>

Unfortunately, because of that pesky base href tag, clicking a link written like the one above will take the visitor to http://www.domain.com/mm5/#more-info, which typically resolves to the site’s storefront or SFNT page. Not exactly the desired effect.

The alternative is to write out the full link to the page (I’m assuming here that you are not using short links, but all of the links used in this post can easily be adapted to short link styles) like so: <a href=”http://www.domain.com/mm5/merchant.mvc?Screen=PROD&Product_Code=mycode#more-details>. This method will work, at least so far as it will take the site visitor to the
desired section of the page, but it will also cause the entire page to reload. This can be an unnecessary drain on server resources, as well as being annoying to the site visitor.

So what’s a store owner to do?

The answer lies in my nemesis…javascript. A tiny snippet of javascript is all it takes to cause the browser to jump to the desired content. And if it’s written correctly, the link will still work just fine for visitors who don’t have javascript enabled.

<a href="http://www.domain.com/mm5/merchant.mvc?Screen=PROD&Product_Code=mycode#more-details" onclick="javascript:window.location.hash='more-details'; return false;">

This clever little trick works in all the browsers I’ve tested it in (Firefox, IE, Google Chrome, Safari & Opera). Adding return false to the onclick action means that browsers with javascript enabled won’t follow the link, they’ll just jump to the desired section of the page. Including the full url link means that browsers without javascript enabled will still be able to use the link, although the page will reload for them. A small compromise for an oft requested functionality if you ask me.

What is an anchor link?

If you clicked the link above, your browser jumped to this part of the page. (If you didn’t click the link, and know what an anchor link is, you can skip this part.) The link that brought you here is known as an anchor link, and can be used both within the same page and from an external page to send the site visitor to a specific part of a page. Anchor links are created by using a hash mark and an id keyword that identifies a specific tag in the source code, like so: <a href=”#thishere”>
Click here to go back to where you were.

According to the article, effectively designing a web page “requires putting aside your own corporate and personal needs — instead considering everything from the perspective of your site visitors.”

In other words…your web site isn’t about you.

It doesn’t matter what you like, and it doesn’t matter what the latest craze in fancy web effects happens to be. Web sites that sell are the ones that tell visitors in simple terms how they can meet the visitor’s needs, and then make it very clear what the visitor needs to do next to get those needs met.

In other words:

1. Avoid the flashy (literally) stuff that you think looks cool but that distracts from your message
2. Tell the visitor in short and simple terms how you meet their need
3. Focus the visitor on what to do to get you to meet that need
4. Keep the layout simple and uncluttered — focus the visitor’s eye on that call to action
5. Sit back and watch the pennies roll in

Ok, so maybe it’s not quite so easy as putting up a simple page with a big fat “click me” button, but carefully thought out page design that focuses on what your customer needs can go a long way toward improving conversions on your site. Perhaps it’s time to take a more critical look at your site, and seriously consider whether your site suits you…or your all-important customers.

I always like to start the New Year with a little cleaning and organizing of my browser bookmarks. The fresh clean New Year seems like the perfect time to go in and review all those handy links I just knew I needed, but didn’t take the time to properly categorize or describe.

I’ve spent several hours this morning going through my bookmarks, clicking each link to make sure it was still live, and sorting them into proper categories. As I do each year, I came across some fun and useful things I had forgotten I had, and I thought I would share a few of them with you. I tried not to include too many of the links that, while good quality, can be found easily enough on your own with a quick search, but some were just too good to leave out.

CSS Stuff

Based on the number of links I had on the subject, I seem to have an obsession with 3 column layouts, although frankly I don’t design many sites that use them, so I can’t imagine why I’m so interested. Here are some of the better resources on the subject.

• CSS layout techniques: 3 columns, the holy grail
• CSS-P 3 Column Layout
• A List Apart: In Search of the Holy Grail

The quest for equal height columns creates another CSS layout issue that plagues developers. The best, most elegant solution I’ve found (I used it in the layout for this site) is one laid out in a Sitepoint forum post by Dan Schulz. His passing last year was a tragic loss; this layout technique is just one of the many gifts he gave the online community.

• Sitepoint Forum: Equal Height Columns by Dan Schulz
• Projectseven.com – Tutorials: CSS Equal Height Columns
• Position is Everything: Equal Height Columns

CSS and Browser Compatability

Every web designer who uses css-based layouts has spent many an hour tearing their hair out over trying to get their layout to work properly in all browsers. Here are a few handy references, and one interesting idea for managing browser issues using .htaccess.

• Sitepoint: An Introduction to Browser Specific Hacks
• Hack Free CSS for IE
• Web Browser Standards Support
• Miva Merchant Forum: Serving Targeted Browser Stylesheets via .htaccess

PHP and MySQL

These resources are bits and pieces I’ve picked up in my travels as I’ve expanded my php skills. They are mostly aimed at php beginners, and are in no particular order.

• PHP/MySQL Tutorial (good beginner’s tutorial)
• Bytes: Understanding PHP Sessions
• roScripts: Understanding PHP Security
• PHP-based .pdf Generator (for use on servers that don’t have PDFlib)

Javascript

I confess. I hate javascript. I have a lot of respect for its ability to expand and enhance the user experience on the web, but working with it makes me crazy. Nevertheless, I have, over the years, found some nifty uses for it, a couple of which appear below.

• Diller Design: Javascript Library for PNG Transparency Support in IE6
• JQuery Cycle Plugin
• Replacing <noscript> for accessible javascript

Bits & Pieces

• Apache Rewrite Cheatsheet
• List of Free Photo and Image Editing Software
• Create Your Own Web 2.0 Buttons
• Bulk Rename Utility

And finally, because no one should work all the time, one of my favorite brain squish breaks: Mr. Picassohead.

A quick preview in IE6 revealed the dreaded select z-index bug. For those of you who aren’t familiar with this plague of the web developer, the gist of this bug is that in IE6, select and text area inputs ignore normal z-index positioning, which means that instead of tucking neatly behind absolutely-positioned elements with a higher z-index, they pop their little selves right out front and center, as shown below.

Clearly, this was not what the site owner intended. So, I went poking about for a decent workaround. I found plenty of references to iframes, but I wanted something cleaner that didn’t involve messing with the markup. Finally, I stumbled upon the brilliant suggestion of using a javascript show/hide function to hide the select element when it wasn’t wanted, and pop it back into view when it was.

The following simple function, added to the head tag, and called when the popup is called, solved the problem nicely.

function hide_select(myelement){
var select = document.getElementById('myelement');
if(select.style.visibility == "hidden")
{
select.style.visibility="visible"
}else{
select.style.visibility="hidden";
}
}

Simply replace YourIDHere in the code below with the id of the select element you need to cover up (you may have to add one if it doesn’t already exist) and then call the javascript function with your call to load the popup. In the case of my example, the popup loads from a body onload call, as follows:

<body onload="javascript:loadpopup();hide_select('YourIDHere');">

The result is a dhtml popup with no pesky select box poking its nose where it doesn’t belong.

Finally, to restore the select box to visible when the popup was closed, I added the hide_select function to the link to close the popup, like so:

<a href='javascript:closeMyPopup();hide_select();'>X</a>

For those of you who aren’t familiar with Blog i360, it’s a hosted platform based on WordPress that’s geared toward industries that commonly use squeeze pages and the like for marketing purposes.

I was disappointed to see that most of the results that came up for my search terms were affiliate sites that were understandably enthusiastic about the platform (you’re sort of expected to say, ‘Rah Rah’ when you’re selling stuff, after all). I did come across one blog post from a fellow developer expressing some reservations about the platform, but it was an awfully lonely voice in a sea of rave reviews. So, for whatever it’s worth, now that I’ve had a chance to live the Blog i360 experience, I’d like to add my own lonely little voice to the mix.

I should start by saying that I was impressed with the efforts of the Blog i360 staff to deliver quality customer support. I opened several support tickets during the building of my client’s site. All of them were answered promptly, and although I didn’t always get the answers I wanted, the support staff could not be faulted in any way.

That said, if I had the choice myself to build a site using Blog i360 versus a regular WordPress installation, I’d choose good old WordPress every time. Here are some of my reasons.

Search Engine Optimization

I was amazed to discover that Blog i360 doesn’t have any sort of SEO plugin enabled. There are some great WP SEO plugins out there that make adding custom title and meta tags to your site a snap. But you won’t find any of them on the Blog i360 platform.

Further, the Blog i360 system appears to use a single template that is then skinned to achieve something like the layout you’re looking for. Because some skins need hooks for creating curved corners or other similar aesthetic effects, the number of nested divs is simply astronomical, making the page code-heavy and slow to load.

Customization

The proponents of Blog i360 are quick to point out how easy it is to customize, but for anyone familiar with a regular WordPress installation, trying to customize Blog i360 quickly becomes an exercise in frustration.

1. Custom Themes If you have a custom design or want a fully custom theme for your site, your only option is to pay Blog i360 to develop it for you, or to settle for working with the existing skins to create something less than what you had in mind.
2. Page vs. Post There is no separate template for pages versus posts, which means that you can’t customize your pages to remove things like date stamps, related posts, meta information and so forth.
3. No ID-Based Classes In a regular WordPress template, template developers can add classes to the site templates that incorporate the page or post id, allowing the site owner to target specific pages or posts with particular stylings or features. Unfortunately, the main Blog i360 template lacks this core functionality.
4. Poor Integration of Home Page While the Blog i360 platform does allow you to choose between a static page or a blog page for your home page, if you choose the static page option, you must use a template specially designated by them for the home page. This template allows you to incorporate your blog headers and footers, but does not allow you to incorporate the sidebar. Any sidebar content has to be manually updated after changes are made to any of the blog pages.
5. I will point out that the Blog i360 system does provide hooks that allow you to add custom html in a number of places throughout the template. This is great for people who know and understand html, but is not exactly what I’d call “easy customization.”

No Development Platform

As a hosted system, Blog i360 requires you to point your domain name servers to their servers in order to take your site live. Unfortunately, there are no provisions for setting up a development environment if, as in my client’s case, you have an existing site that you don’t want to have publicly mucked up while you’re working on it. The system is not inexpensive, and it would seem reasonable for Blog i360 to provide a development environment, even just for 30 days, that could then be moved to the site owner’s domain when development was complete. Instead, they recommend that if you don’t want to disrupt your current site, you purchase another domain name for your Blog i360 site. Of course, they neglect to mention that by doing so, you are likely to suffer a complete loss of search engine positioning, and create brand and customer confusion.

No FTP Access

Although Blog i360 sites are provided with a control panel for setting up email, etc, all ftp functions have been disabled. This is promoted as being more secure (and it is) but it is extremely disabling for anyone who wants to truly create a custom site.

1. No .htaccess This means that if you do use Blog i360 on an existing live domain, you have no recourse to .htaccess files for setting up redirects from old pages to new.
2. No Contact Form Script Blog i360 does not have an integrated contact form plugin, and since you have no ftp access, you can’t implement any sort of custom solution either.
3. No Custom Scripting That kinda says it all.
4. No Custom Upgrades The Blog i360 system, at the time of this writing, is using WP version 2.5. The current version of WP is 2.8, and the upgrades contain some important bug fixes that a site owner should have the freedom to implement.

Plugins

Of course, no ftp access also means no ability to install custom WP plugins to achieve the functionality you’d like in your site. That would be fine if Blog i360 weren’t lacking in some core functionality such as search engine optimization and contact form plugins.

Summary

The bottom line is this. If you want to build a quality web site that you control and that’s easy to use with little to no technical knowledge, you’re better off finding a decent web host and putting up your own WordPress site. If you’re not comfortable doing your own customization, hire a competent developer to get you up and running. In the end, it will cost you less, you’ll be happier with the result, and you’ll have a better web site.

In this particular instance, the site owner wanted a horizontal navigation system, with an extended tab on the currently active page. Easy enough to do, except that the navigation items were also divided by a small graphic image (in this case a paw print). In order for the drop-down tab not to bisect the paw prints, the tab needed to be wider than the menu item. To further complicate things, the site is built using the content management system Joomla!, which means that simply styling each page differently wasn’t an easy option. I’d have to come up with something that could be controlled by the Joomla! template.

I first tried styling the navigation bar with different background images assigned to the various elements. But I quickly ran into problems with the width of the list items. I just couldn’t add the dropdown tab without messing up the pawprints.

What to do?

This morning I finally had a brainwave. I decided to create six different background images, with the tab spanning the pawprints. So, I fired up my image editor and set about lining things up. Or at least trying to. Let’s see, the nav bar was 868 pixels wide, and there were 7 paw prints to add, evenly spaced out, and I needed to indent the paw prints on the ends a little, and take into account the width of the paw prints … oy! Out came the calculator, and several not so successful attempts…until I got the idea to add different colored bars above the image to represent each of the navigation items. Once I did that, it became much easier to see where my calculations were off, and in short order I had my six background images.

The next task was to code the Joomla! template to assign the appropriate background image to each page. I named my images navbg-1.jpg, navbg-2.jpg, etc, where the number represents the matching page id in Joomla!

In the Joomla! template, I started by adding the following code to the top of the page (above the DOCTYPE):

$page_itemid = JRequest::getVar(‘Itemid’, ”);

Then the head tag section, I added a css styling as follows:

<?php if($page_itemid < '7') : ?>
<style type="text/css">
div.moduletable_menu {
  background:url(../images/navbg-<?php echo $page_itemid ?>.jpg) top left no-repeat
}
</style>
<?php endif; ?>

And the final result?

The only remaining detail was to add a css image preload to the bottom of the pages so that the background images would load quickly as the user navigates from page to page. I did this by creating a div at the bottom of the template that contains all of the navigation images, and setting its style to display:none.

It’s not a perfect solution, obviously, but it’s at least workable for now, and heaps better than the mess I had created before. If anyone has a better recommendation, I’d love to hear it.

Today, though, things are different. There’s a plethora of photo editing packages out there, from expensive to free, all of which, to varying degrees, can take a not-quite-right photo, and turn it into a zinger.

I’m currently working on some ideas for a new project, and had a very specific image in mind as to what I wanted. A woman, dressed in white, in a meditative pose, with candles and a warm background. A stock photo search didn’t turn up the exact picture I had in mind, but gave me a photo that was pretty close.

We had the woman in white, the meditative pose, and the candles, but the green edging on the bamboo mat didn’t fit my color scheme; nor did the red vase filled with grasses. To top it off, the woman, while attractive, looked just a little too perky for what I had in mind, and the white background was overly stark.

Step in my photo editing software. First, I replaced the green edging with a warm rust tone taken from the candle on the left. Next, I removed the red vase with the grasses, and cropped the picture to eliminate the too-upbeat facial expression. Finally, I added a warm-toned background, designed to look like flooring and a wall, to replace the stark white. The colors for the background are taken from the bamboo matting.

The result? A photo that conveys exactly the warm tones and relaxing impression I had in mind:

I’ve put several hours into this project so far, but I’ve yet to fire up my computer. Like any well-executed database project, this one is starting with pencil and paper. What is the purpose of the database? What kind of information do people want to be able to extract from it? How do the bits of information relate to each other, and what links need to be created among them? Scribbling, and highlighting, and scratching out, and most of all thinking. Planning.

Just as this planning process is vital to the success of this project, the same is true of a website. Before worrying about graphics and design, before picking colors and deciding on a theme, you need to sit down and hash out a plan for your site.

• What is its goal?
• Who will it serve?
• What will it consist of?
• How will the pages relate to each other?
• Which content is primary and should be part of top-level navigation?
• Which is secondary, and should flow from the primary content?
• How will it be structured?
• What tools will you need to achieve the site’s goal?
• How will you measure achievement of your goal?

So if you’re starting a new website, or even if you’re just looking at revamping an existing one, do yourself a favor, and turn off your computer. Put away the color swatches, and get out a pencil and a piece of paper, and start thinking about your site. It’s not the most fun step in building a good website. But it is the most critical one.

One of the best things you can do to help your company compete on the web is to be informed about the hows and whys and ways your shoppers think, act and react to web sites.

In their recent newsletter, Practical Ecommerce highlighted an article containing some excellent reads to help you re-think your web site, and the way you approach your online business.

Even if you only snag one of the books on Mat Greenfield’s list, you’re bound to be a better web site owner as a result, with plenty of ideas for ways to improve conversions and increase sales.

So this year, when your friends and family ask you what you want Santa to bring, point them to these “Great resources that can alter how you think about the web“

Although I’m having trouble getting some of my software to function properly on the new machine, I am comforted by the knowledge that I have a full backup of all of my files, and more importantly, my clients’ files. While my current problems are a bit frustrating, once I get things up and running, I’ll be safely on my way because all of my data is safe and sound, including the files for my own web site.

So how long has it been since you backed up your web site? I know what you may be thinking…”I don’t need to back up my site, because my host does it for me.” But let me ask you this…what if your host goes out of business and takes your web site files with them? Or what if your host’s most recent backup is from a week ago, during which time you’ve made major changes to your site, and they want to charge you $50 to restore the site after a disaster? (Both true stories, I’m sorry to say.)

You need to protect your web site data the same way you protect your other important documents. Doing a backup isn’t hard, and for most web sites, it isn’t even particularly time consuming. And when something goes wrong, having a recent copy of all of your web data will more than make up for the minor inconvenience involved in creating regular backups.