Total Blue System Ecommerce

"Landing page" template eliminated after solving the root problem

For shoppers who arrive at your site referred by a search engine's results page (SERP), you've got just a moment to grab and hold their attention. Total Blue System's Catalog module used to have a special page template intended for this purpose, specific to a product detail page.

Known as the "landing page template," it consisted of a stripped down, minimalist look without all navigation options and without all of the product details and related content. Site owners could link to a product, add a special snippet of code to the end of the URL, and transform the page into using the "landing page template." This was frequently done in the context of search marketing, especially as cost-per-click, click-through landing pages. No more; the feature has been eliminated. Here's why:

First, the new tab orientation of the enhanced product detail page template goes a long way towards solving the problem that the landing page template intended to solve: progressive disclosure. The reason there existed a need for the landing page template in the first place was because, at the time, the product detail page template did too much, showed too much, scrolled too much, all at once. Not anymore. So the landing page template's reason for being has disappeared.

Second, we believe in removing software features. Call it pruning or refactoring or whatever you wish, but we look for reasons to eliminate features or preferences or configurations that, in the end, don't matter. If for some reason we find the landing page template or it's intention to needed again, that's fine. We'll add it back. But over the long-term, the objective of our turn-key e-commerce product is to provide all of the features you need and none that you don't. That means removing features or older code when prudent.

Optimise on-line storefront for wider computer monitors

Total Blue System e-commerce websites are being upgraded to a wider screen size, optimized to be 960 pixels wide in their universal navigation bars.

Now's the time to get ready for the Christmas holiday sales season and make optimal use of your selling space. The industry shift to the wider 1024 x 768 computer monitor screen resolution for web shoppers is well established. The 960 pixel width dimension gives the website enough room to fit without horizontal scrolling inside the 1024 pixel width screen resolution, taking into account vertical scroll bars and browser "chrome."

While we see industry benchmarks showing 14% of on-line users were still using the 800 x 600 screen resolution in early 2007, by August our clients e-commerce website usage reports are showing that percentage dropping to about 5%. As measured by Google Analytics, our clientele of e-commerce merchants shows about 50% of web visitors using the 1024 x 768 screen resolution. The rest of site visitors are using even higher screen resolutions (meaning the 5% at 800 x 600 plus the 50% at 1024 x 768 leaves another 45% to higher resolution screens).

Note that the Recently Viewed bar that floats off to the right, showing which products or product categories the browser has viewed during the present visit to your site, will remain on the right side. The placement will be to the right of the 960 pixel width mark. This means there will be some horizontal scrolling for site visitors using the 1024 x 768 page dimension, but that's okay. The Recently Viewed feature (which can be configured to turn on or off) exists as a nice-to-have feature, not critical to the on-line ordering experience.

Work to implement these changes, specific to your custom website design, will be managed within the online project tracking tool you're already familiar with. It'll be treated as a billable professional service for web design and cascading style sheet work that's unique to your website, once you're agreement to proceed is affirmed.

Show product detail with 'view larger' links

If only shoppers could reach through the screen and feel or smell or taste what's in your website catalog. Until then (wink), bigger, sharper imagery of what the product looks like must suffice. Updates to the "View Larger" photo link from the product detail page will help. Here's a quick summary:

• The "view larger" text link now opens a pop-up window that is larger than before, reflecting the fact that web browsers keep getting wider as computer monitor resolutions increase.
• The pop-up window is now resizable, making it possible to eliminate any horizontal scrolling of the page.
• You can configure what the "view larger" link is called, perhaps preferring "zoom" or some alternative wording.

• If you give the primary photo, or any of the additional photos, a value for the ALT attribute of the IMG tag, that text now appears as the link. So instead of saying "view larger" it may read "Bunk bed with natural wood" as the text of the link. There are benefits here that span accessibility / disability concerns, plus incremental help for search engine optimization efforts.

Here's a final tip:  you can link directly to a larger image of your product by editing the URL of a product detail page. What's linked as a "pop-up" window from the product detail page template can be linked to directly without the pop effect. Here's how:

1. View a product detail page.
2. Add ?template_id=2 to the end of the URL in the browser address window.
3. Hit the enter or return key, to load this new page. You'll see the larger view images displayed in the window. In short, this is it's own page template which you've just linked to directly.

Note: the timing of the release of this template update will coincide with the new tabbed product detail page template.

How to convert CMYK images to sRBG color profile

If product images are not displaying on your website, it could be caused by the images having an embedded CMYK color profile.  Images uploaded to your website should have the standard sRBG color profile.

To convert your CMYK images to sRBG in Photoshop, open your image and select Edit > Convert to Profile from the top menu.

A dialog box will appear prompting you choose a color profile to convert to.  Choose "working sRBG" for the destination space and click Ok.

Re-save your image and ensure that it's estimated filesize will be small enough to display on your site.  (The "Save for Web" command may need to be used.)

How to tell if your images need to be converted

Note:  The color profile of your image will display in the title bar of the image, as shown below.  If you see CMYK, this can help you quickly determine that an image needs to be converted to an sRBG profile.

Easy upload of files, ads, teasers in 1-click within the browser

Now you can place graphics in Teasers on the website with a one-click file upload tool within the Admin Area. Choose the Teasers tab, and select the Upload Teaser Content link. This new web form makes it easy to upload graphic files to the website, placing them within the /misc directory that was previously only accessible to you via SFTP using a software tool like WS_FTP Pro.

When you upload the file, you'll get a confirmation message that repeats back for the file path to the message on your website. That way, you can easily copy and paste the file path into your HTML in the Teaser itself, linking to the image now hosted on your site.

Note: as we tighten our security procedures, moving away from FTP to the newer, secure SFTP method, we want to find more ways of making it easier to add files to the site. This new file upload tool via HTTPS is secure, and easy in that it doesn't require any extra software like an FTP editor. If you'd like to upload more files in a similar manner, say to the /misc directory where free-form HTML documents can reside, please let us know.

Brand the browser with favicons

With the growing installation of Internet Explorer 7, the adoption of the tabbed browser experience becomes widespread. And with each tab in the new browser, you have opportunity to display your logo or brand imagery inside it. Just as visible if not more so, the address window in the browser can also be a place to display your brand imagery. (See the screen shot below that shows an example of this imagery in both the tab and address window; shown inside the Firefox browser that we recommend.)

A new System Update makes it possible for your web designer to update this graphic image directly. Here's how:

1. Create a graphic in the favicon.ico format and specified dimensions. There are many web design tutorials on the Internet that explain how. Here's an explanation of how to create a favicon graphic using Photoshop.
2. Name the file favicon.ico. That file name is important, so make it an exact match.
3. Upload this graphic file to your website, placing it in what we call the Miscellaneous directory. Via SFTP, you can find this in the directory called /incoming-web-files/misc/
4. Close your web browser, to clear the cache, and then reload your website's home page. You ought see the favicon appear in the address window and any tabbed browser windows on every page of your site.

That's it, you're done.

Note: Before you'll see the new browser icon, you need to exit the web browser software you're using for a complete refresh of the browser's cache. Restart your browser, go to your site, and check the address window for your new 'favicon' to appear.

 

If you'd like assistance from E-business Coach's website design team to create and upload this graphic on your behalf, please alert us.

Example showing a favicon in place for three of the six tabbed browser windows on the screen: (Click on the image for a larger view)