Hybrid Forge

Connect With Your Customers

Websites are all about connecting with customers. When you strip away all of the Search Engine Optimization, Pay-per-click ads, flash animation, and technology, it is nothing more than an extension of a merchant’s inviting smile welcoming a customer into their store. It is the website’s job to put the customer at ease, offer them answers to their questions, and lead them to make the next step in the buying process.

So many websites out there put the emphasis on visual appeal, yet website look and feel ranks third (16%) in a Webcredible survey of 1300 online shoppers on influencing purchasing decisions. Trust is the number one factor (28%). That is why graphics design isn’t the only factor you should consider when selecting a web design company.

Value Proposition in the Web Design

According to Marketing Experiments, your value proposition is likely the most important factor in establishing a connection with your customers. A value proposition is the statement of your company’s or product’s key differentiator and is the primary reason a prospect should buy from you. It is important to clearly present your value proposition to visitors to reduce friction and anxiety in order to lever their motivation for coming to your website. It doesn’t matter if you are selling products or simply providing information, every website should motivate the customer into a conversion action.

Calls to action in the Web Design

Every page of a website should be designed to sell. For an cCommerce site, this can be an actual sale. For brochure style sites, this could be encouragement to pick up the phone, book an appointment, fill out a contact form, or any other step that would lead the visitor further along the sales process.

One thing to keep in mind about a website: there is only the information on any given page that will cue the visitor to take any action. Often, if a visitor is confused or feels lost they will simply leave your site and return to the comfort of the search engine.

In another study by Marketing Experiments, they state that the website that best relieves the customer of the burden of researching and making the best choice is the site that will beat its competitors. They describe the thought process of the customer as follows:

• Where Am I
• What Can I do Here
• Why should I do it

Answering these questions for customers on every page will increase your chances of converting that customer.

Here is an example of this in action using a web design we completed recently for a local Edmonton company Millennium Windows. There is the initial draw to this page, which is getting information about the types and styles of windows Millennium offers. However, there are strong cues that show the customer they are on the page about windows and window installation, they can fill out a contact form or start a credit application, and why they should do it to take advantage of two discount incentives and a no-payment incentive. Some very strong motivation to take action.

Answering customer’s questions

A good website design starts with a good communication strategy including how you will present your value proposition in the context of every page. Take the confusion out of the layout and content and simplify the choices for the customer so their path is clear. Call us if you need help with your web design.

Do you own, operate or manage an Alberta business, corporation or not-for-profit in a city like Calgary or Edmonton? If you are in the market for professional eCommerce consulting expertise to assist you in surviving the great recession and positioning your business for the eventual recovery, welcome to Hybrid Forge. There are well over a thousand web design companies in Alberta ranging in experience and talent from Critical Mass to your cousin who knows about computers. Contact Hybrid Forge today and we’ll show why your search ends here.

Introducing Magento eCommerce

Hybrid Forge offers web development and consulting services a number of leading eCommerce platforms.  One of our favorites at Hybrid Forge is Magento. Magento is an open source, award-winning, community and corporately supported eCommerce software platform. Magento is the solution to power your business into the future. Developed by Roy Rubin and is his talented team at Varien, Magento is the hottest eCommerce platform on the web. Magento eCommerce software recently surpassed 1,000,000 downloads, confidently affirming its place as the top pick among today’s new eCommerce platforms. There is massive momentum building for this platform and a huge and growing network of 3rd party extensions and services.

If your site is running osCommerce, X-Cart, Zen-Cart, creLoaded, Interspire, Evolution, or one of the hundreds of other eCommerce packages, call Hybrid Forge today for a quote on re-platforming to Magento.

View a Magento Demo Store

In an ocean of eCommerce platforms (aka Shopping Cart software), Magento is head and shoulders above the crowd.  Hybrid Forge identified Magento in 2007 as an important strategic platform for delivering to our clients a solution that is flexible enough to accommodate their needs, scalable enough to grow with them, and powerful enough to thrust them out of eCommerce mediocrity. We’re the Magento experts who embrace the flexibility it provides our clients and guarantee your satisfaction.

Edmonton, Alberta

Magento Site Design

Hybrid Forge delivers creative, engaging designs tailored to your business. Don’t know where to start? The talented Hybrid Forge creative team offers inspiration when you can’t get started and runs with your ideas when the fountain of inspiration explodes. Great looking design is an iterative process and we draw on a number of methods to build the best. Check out our Merchant Forge site for Magento Extensions.

Magento eCommerce Features

Magento is a feature rich eCommerce platform, leap frogging the current open source king, osCommerce. If you’re looking for a demo on Magento’s features and wondering how you can take advantage of capability we offer a suite of professional services around Magento.

Magento Dynamic User Interface and Functionality Enhancements

Whether its Adobe Flash components or javascript enhancements your business needs to improve your customer’s online sales experience we deliver. We can build advanced javascript-driven user interfaces based on the built-in Prototype and Scriptaculous libraries as well as our favorite, the jQuery library.

Magento Extension Development

Improve your staff’s productivity by adding custom extensions like our Retail Pro Import Manager or our Beanstream Payment Gateway.

Magento Search Engine Optimization

As the online market space becomes increasingly crowded and revenue growth curves are flattened, search engine optimization is more important then ever. None of our customers want Amazon or eBay eating their lunch so we provide professional, snake-oil free, SEO strategies for maximizing their eCommerce investment.

According to Johnathan Lister of Google Canada, the average Canadian spends nearly 50 hours a month online. We’re an Alberta-based tech company, Call us today at (780) 634-2979 or toll-free (877) FORGE-66

Certified Google Analytics Consultants

Google’s Enterprise-class Analytics solution allows us to know where your online marketing budget is going. Google Analytics provides incredibly rich reports on traffic sources, ecommerce conversions, keyword effectiveness and ultimately the quantifiable validation of your marketing efforts. Our Google Certified Analytics Consultants provide professional installation, training and analysis to ensure your online efforts are coordinated and benchmarked.

Calgary, Alberta

Hybrid Forge provides professional eCommerce site design services matched by a top-notch, experienced programming team that knows Magento’s Zend-based MVC framework inside and out. Our senior Zend PHP programmers have nearly a decade of hands-on experience in deploying PHP-based solution into virtually all industry verticals.

Hybrid Forge is an Alberta-based tech company providing professional eCommerce services to all Alberta communities including Calgary, Edmonton, Banff, Canmore, Jasper, Lethbridge, Red Deer, Ft. McMurray, Grande Prairie.

Call or contact us today to arrange a complimentary consultation.

Tired of Microsoft Outlook, Exchange and SPAM? We recommend Google Apps for your Business

Visitors to your eCommerce website will enjoy seeing a ‘mini cart’ while they shop around. A minicart is a smaller, stripped down version of their full shopping cart, typically placed on side panels or inside website headers. As a web designer, I am happy to take advantage of the Interprise Suite eCommerce (ISE) Skin Tokens for displaying a minicart inside my custom design skins [i.e., (!MINICART!) ]. But, I like to make some modifications to the default minicart display and I believe you might too.

There are a few CSS and Javascript workarounds I’ll discuss to get around having to edit any C#, because the minicart markup is generated directly by the ISE code-behind, and is not easily accessible without the need to recompile your code-base.

Notes on this example: I assume the reader to have an intermediate skill level for writing valid CSS and also manipulating HTML elements (DOM) with Javascript. In my example, I have used JQuery to traverse, manipulate, and edit some elements because it works great, it’s feature-rich, and appears to have no conflicts with ISE core Javascript libraries. You can use whichever Javascript package you prefer. You may also want to refer to a previous post: Creating Custom Design Skins for Interprise Suite.

The Generated ISE Minicart HTML Markup

By default, the minicart HTML generated by the ISE code-behind comes out looking like this:

And here’s how it ends up looking by default – not ugly, but a tad unattractive, in my opinion:

First the problems, besides the obvious markup errors like mixing “<br/>” with “<br>”:

• We can’t easily make changes to the HTML because it is derived from the C# code-behind;
• The output is in a table, not horrible, but the “align=center” on the table cell will need to be looked at; I like this kind of output to be aligned left or right;
• The “<FONT>” tag… my, oh my; But it will be useful for us, see below;
• There’s no ID or class associated with the minicart for targeting it with CSS;
• When the shopping cart is empty, the minicart doesn’t show anything – no nothing. This may or may not be what you want but in my case, i’d like it to show “Your Shopping Cart is Empty” when there’s nothing there.

Implementing the Interprise Suite Minicart Tweaks

First, you’re going to want to put your minicart Skin Token inside a wrapper in your template files so you can properly target it with CSS:

Here is my snippet of CSS that targets the minicart. Granted, i’m using that <FONT> tag in a way that probably wasn’t imagined originally, however it allows me to do what I need in modern browsers.

Because the table cell align=”center” and table border are both inline, I can’t override it with CSS. So, i’m going to use JQuery. And i’m also going to use JQuery to add some text to the ISE mini-cart when the cart is empty. So, first you’ll need to ensure you include the JQuery libraries in the <head> of your ISE template file:

Then, you can use the following Javascript to target the minicart:

You’ll have to create your own button image (and rollover sprite) for the checkout button. But with a little extra CSS tweaking (like adding an background image to the miniCart div) my minicart now looks something like this and works just great!

For more information on customizing Interprise Suite eCommerce, please feel most welcome to contact the Hybrid Forge design team: info@hybridforge.com.

I recently developed another custom eCommerce design skin for one of our Interprise Suite eCommerce (ISE) clients. While I regularly design custom skins for ISE, each time I begin I realize how few online resources are available to help web designers skin the shopping cart side of ISE. So, I decided to walk through an example of creating a custom design with a different home page design/layout then the design/layout of the inner pages of the site.

Notes on this example: I assume the reader to have a web design mockup file ready (e.g., a Photoshop file), and to have an intermediate skill level for writing valid X/HTML markup and CSS. This example also assumes that Interprise Suite is installed and that the website is up and running in your dev environment.

ISE Skin Basics

Some basic Interprise Suite concepts that will make your custom design skin experience go smoothly:

• You can invoke a different skin through a browser by using the following querystring, where “X” is the unique skin #:
  http://www.my-ecommerce-site.com/?skinid=X
• All skin templates are located in the following directory, which is where you should put your CSS, images, Javascript, and custom XmlPackage files:
  …/my-ecommerce-site/skins/skin_X/
  …/my-ecommerce-site/skins/skin_X/css/
  …/my-ecommerce-site/skins/skin_X/XmlPackages/
  etc.

  (Note: make a backup copy of “…/skin_1/” you’ll need this later, plus just in case anything goes wrong throughout your customization process and you need to revert.)

• Learn to love Skin Tokens, you’ll use these a lot. Skin tokens are snippets of text [e.g., (!SKINTOKEN!)] that you can place in your template files for automatically adding specific ISE information to your template. For example, following are the skin tokens I typically use in my templates. Some of the information generated by these tokens can be setup in the ISE client tool:
  • (!METATITLE!) – page title
  • (!METADESCRIPTION!) – page meta description
  • (!METAKEYWORDS!) – page meta keywords
  • (!JAVASCRIPT_INCLUDES!) – required in your template (ISE Javascript libraries)
  • (!PAGEINFO!) – not required, but very useful for generating page instantiation info
  • (!USERNAME!) – by default, this generates “You’re logged in as: XYZ“
  • (!SKINID!) – the current skin id being used, useful for various path-ing requirements
  • (!SIGNINOUT_TEXT!) – by default, switches between “Login” and “Logout” automatically as necessary
  • (!SIGNINOUT_LINK!) – by default, switches between “signin.aspx” and “signout.aspx”
  • (!MINICART!) – generates a “mini shopping cart” to show items currently added to a visitor’s cart

Creating the Interprise Suite Skin Template Files

Now for the good stuff. Web designers have their own personal process for generating the required X/HTML markup and CSS from a design mockup file (like a Photoshop file). I’m not going to suggest any changes to your process, but here is the general process I use for customizing ISE:

1. Create HTML Template Files and CSS Stylesheets

So, you have a design mockup already – great! In my example I’ve created a different “home” page layout than the “inner” pages of the site. I’m not going to detail how to cut up your design file – there are lots of great resources online that would do more justice to the topic than I. That said, to follow along, get your design cut up into 2 HTML files with the following structure on your local/testing server:

For now, don’t worry about getting any of the String Tokens in place. Focus on the HTML and CSS of the template files themselves and perform the following sanity tests on your design:

• How does font-scaling work +/- 2 font sizes? Does your design hold together?
• Have you used CSS font-families so that visitors without your fancy “minion pro” font still have a good browsing experience? Just a note, while the infamous “Tahoma” looks great in most Windows environments, in Safari (Windows & Mac) it looks chunky – consider using something more Safari friendly in your font-family.
• How does your design work in various versions of Safari, Firefox, Google Chrome, and Internet Explorer (IE)? Litmus can help you determine this. And for the various versions of IE, I’ve been using a handy little tool (still in alpha release at the moment my writing) called IE Tester.
• How does your design look and handle in a mobile browser like Blackberry or IPhone? eCommerce customers shop from all kinds of devices.

2. Create Custom ISE Image Buttons

The buttons i’m referring to are the buttons that come with the default skins included with ISE. For example:

If you like these buttons, use them. If you don’t, get ready for a little Photoshop fun as (from my last count) there are over 100 different image buttons to customize throughout the website. All these buttons can be placed in your images folder:

Be sure to name them properly, else ISE won’t be able to find them. First, make a backup of all default skin buttons that come with ISE (check a default skin directory of ISE “../my-ecommerce-site/skin_1/images/”) and copy them wherever you’re checking your design cuts (“…/ise-template/images/”). Then as you create each new button, simply overwrite the same image button file, ensuring the file name stays the same.

3. Wire-up the Required ISE Components

Now that your basic design is tested and the general ISE image buttons are customized, it’s time to hook up your template with ISE. First things first, copy your “template.htm” file and rename it “template.ascx”; and copy your “home-template.htm” file and rename it “home-template.ascx”. These are the required ASP.net extensions for ISE.

Required ASP.net Components for your template:

1. Take a look at the backup copy of “skin_1″ you made before you started – you did make one, right? Open “skin_1_backup/template.ascx” and copy the first 3 lines of the file into your custom “template.ascx” file. They should begin something like “<%@…” – these are the ASP.net controls and registers.
   1. <%@ Control Language=”c#” AutoEventWireup=. . . %>
   2. <%@ Register TagPrefix=”ComponentArt”. . . %>
   3. <%@ Register TagPrefix=”ise”. . . %>
2. Just inside your <body> tag, place the following line. This line basically translates into your <form> tag which makes all the ISE whiz-bang magic possible:
   1. <body>
   2. <asp:Panel ID=”pnlForm” runat=”server” Visible=”false”  />
3. Inside the “content area” of your templates, place the following ASP.net tag. This tag is where “content” items (such as topics, shopping carts, messages, etc.) will be displayed in your template:
   1. <div id=”content”>
   2. <!– ISE Content Area –>
   3. <asp:PlaceHolder ID=”PageContent” runat=”server”>
   4. </asp:PlaceHolder>
   5. . . .
   6. </div>

Instantiate the Skin Tokens Required:

1. The <head> section of your template files should look something like this:
   1. <head>
   2. <title>(!METATITLE!)</title>
   3. <meta name=”description” content=”(!METADESCRIPTION!)” />
   4. <meta name=”keywords” content=”(!METAKEYWORDS!)” />
   5. <link href=”/skins/Skin_(!SKINID!)/css/default.css”
      rel=”stylesheet” type=”text/css” media=”screen” />
   6. <meta http-equiv=”Content-Type” content=”text/html;
      charset=utf-8″ />
   7. <script src=”/jscripts/core.js” type=”text/javascript”>
      </script>
   8. (!JAVASCRIPT_INCLUDES!)
   9. </head>
2. Include the (!PAGEINFO!) token just below the opening <body> tag and before the previously mentioned ASP.net tag:
   1. <body>
   2. (!PAGEINFO!)
   3. <asp:Panel ID=”pnlForm” runat=”server” Visible=”false” />
3. Include the (!USERNAME!) token wherever your design calls for it, I typically put this information inside the top (or header) section of the design:
   1. <div id=”header”>
   2. <span id=”userName”>(!USERNAME!)</span>
   3. . . .
   4. </div>
4. Breadcrumbs:
   1. <div id=”breadcrumbs”>(!SECTION_TITLE!)</div>
5. My Shopping Cart and Login/Logout links:
   1. <a href=”(!SIGNINOUT_LINK!)” id=”topLogin”>
      (!SIGNINOUT_TEXT!)</a>
   2. . . .
   3. <a href=”/shoppingcart.aspx” id=”topCart”>
      My Shopping Cart ((!NUM_CART_ITEMS!))</a>
6. Mini-cart Display, which I typically use on a side panel.
   1. <div id=”miniCart”>(!MINICART!)</div>

Instantiate your ISE XmlPackages:

1. Call the Search Box XmlPackage:
   1. <div id=”iseSearchBox”>(!XmlPackage
      Name=”skin.search”!)</div>
2. If you want to display your shop categories, call the Categories XmlPackage:
   1. <div id=”catListing”>(!XmlPackage
      Name=”rev.categories”!)</div>

There are several other XmlPackages available to you, depending on your needs and the type of eCommerce website you are creating. Check the ISE documentation for more help on this.

4. Upload your Files & Change ISE Client Configuration Options

Upload your template files (all images, all css, and .ascx files) to the desired skin directory. Typically, I just use Skin_1. Since I’ve already made a back-up of this, there is no harm in having your Skin set as Skin_1 – plus it saves you one step in the ISE client. Overwrite all the existing files with the ones you have created. Leave all the other files there, as-is. There’s no need to mess with them at this point. Now, all your files should now be uploaded to the server in a directory structure similar to this:

Next, open and login into your Interprise Suite client tool. Inside the client, you’ll need to goto the “eCommerce” module (800 eCommerce), and open “Utilities > Setup > Application Configuration”. (In here, make sure if you have multiple websites running, you are working with the correct site.)

Inside the “Application Configuration” select the group name “SITEDISPLAY”. There is an option here called “DefaultSkinID”, make sure this is set to the same Skin_X directory you are using for your skin files. If you are overwriting Skin_1 (as I have suggested) you do not need to change this, typically.

Then, select the group name “SKINS”. There are 2 options here to change. Ensure that “HomeTemplate” is set to the same file name you uploaded to the server (in this example “home-template.ascx”. The “HomeTemplateAsIs” option should be set to “false” if you are allowing users to define content on the home page through the ISE client “Topics” pages. If you set this to value to “true” then ISE will assume that you are providing all content for the home page inside your “home-template.ascx” file itself.

5. Reset the ISE Web Cache

You’ll likely need to reset the ISE web cache for your design to take effect completely. Also, if you make any changes to the template and/or ISE configuration settings you may need to reset it again, so it’s nice to know where to find it in the ISE client tool. One place you can find the “Reset Web Cache” button is under the eCommerce module (800 eCommerce), then select “Tools” > “Web Store”. Once inside the “Web Store” option, at the top of the tool bar you can see the button:

Congratulations – Your ISE Custom Skin Is Now Active!

At this point you should be able to see your custom design skin for Interprise Suite on the front-end of the website. Customizing Interprise Suite eCommerce can be tricky at points, but it’s worth it in the end as ISE is one of the best eBusiness solutions online when you need to manage inventory and provide eCommerce.

I hope i’ve helped you see how you can get around some of the issues of creating a custom ISE skin and that you’ve found this useful. We would love to hear from you if you have other thoughts on the process outlined above. If you have further questions about customizing Interprise Suite we invite you to contact us.