Working Inside the Design Instead of With the Client

Some web design professionals run through the same mundane steps they are accustomed to in their own special way, and they never once inform the client about what they are planning to do and what they have or have not done.  So how does their client know what to expect?  How does the website owner know what stage of the process they are in?

Will the website ever actually get done?

The Web Design Process

To establish good project management you must start with a basic plan, a blue print of what is about to happen.  For our customers, we offer a flow chart of the general phases they can expect to occur during the project.  For example, the first phase is mock up designs.  Based on the scope and desires of the customer, we give them an idea of the timeline for that phase and when the next phase should begin.

This gives the customer some peace of mind in that early stage when they are not yet familiar with us, and it helps them to plan their own tasks as well, like when to deliver their next batch of content to us.

Good Tools

Not all customers are alike, so not every one of them will want to use my preferred tool.  But in most cases I invite them to our project management software system, so they can login to a special area to see notes, communication, and files related to their project.  I always have at least one customer who prefers basic email communication or even phone calls over the website system, but we still use the system for our internal staff.

With our project management software, all of our staff can track notes and progress for a project, create task lists and check off items when they are completed, track milestones, and share important files such as programming documentation and mock up designs.

Steamlining & Succeeding

It’s a shame to hear stories from website owners who are disenchanted with the web design industry because they had a poor experience previously.  A great deal of those stories could have been prevented with some basic project management.  Unfortunately, a great designer without quality project management might feel just as overwhelmed and lost as the customer who is wondering what the status of their website is and why it hasn’t launched months after they originally planned.

Whenever you have an email address blatantly published on your web page, even if it is not linked, you are at risk for receiving a lot of spam. Often, automated programs crawl websites throughout the Internet grabbing up email addresses and adding them to spam mailing lists.  They may also use those email addresses to forge the “from” address when they send out their spam messages to thousands of annoyed people.

Spam is a problem that is difficult to completely snuff out but there are ways to minimize the amount of spam you receive, and help keep your sanity!  By using a quality web form, you can hide the email address from the public eye.  By going further and adding something like captcha to the form (those funny codes you have to type in), you narrow down the abuse activity coming from robots (automated programs).

2. You can track your web leads.

A solid analytics program is great if you want high quality tracking of your website traffic, but that won’t guarantee that you can track all the emails and phone calls you received from folks visiting your website.  By creating a form, you have a new way to track visitors’ interest.  You can set up special reports in Google Analytics to track a certain form confirmation page, or set up a unique email account that receives all the requests from that form.

3. You can build your mailing list.

A brief request form can ask a few simple questions, or even just Name and Email Address.  By gathering this info from the opt-in requester, you can build up your mailing list.  At minimum, you can do one good email follow up with that person, and maybe close the sale.  Even better, you can run a regular email marketing campaign to your list of opt-in contacts, reminding them each quarter or perhaps each month about your business and offering the latest promotion.

Meaning, I believe that people can succeed selling a product or service online.  In fact, I have seen in work – even for products that were invented in garages.

But I also know that having a successful e-commerce venture requires a lot of preparation on the part of the merchant.

You can have a spectacular product – so mind blowing that people are knocking down your door to buy it – but if your website isn’t working and your business isn’t streamlined, you will struggle.  You know that phrase “Don’t put the cart before the horse?” It resonates when you are planning an online store.

So let’s put our business hats on and go through a checklist of some things you need to think about before launching your new e-commerce website.

1. Your e-commerce website will be a new leg of your business.

If you are running a retail store front, you are used to certain processes, certain payment systems, certain vendor situations, certain employee tasks.  All of this is reinvented when you start talking about the Web.  For example, you probably can’t use that POS system (point of sale) you are using, or the old cash register in the store to run credit card transactions from the web.  Sometimes these decisions are easy, and sometimes they require more planning.  Make a list of all the vendors you use that relate to your normal store operations and order fulfillment; mention those to your web development provider and be ready to have discussions with some of those vendors also.

2. Who is responsible and who will fulfilling orders.

If your employees are busy stocking shelves or waiting on customers, who is going to check and fulfill the online orders? Sometimes you can reposition an employee to handle online orders along with their normal every day tasks, but if you expect a high volume of online sales you might need a dedicated customer service person to handle that.  The accounting department needs to understand the new invoice and order payment structure so their books stay clean, while your shipping and receiving department needs to receive a copy of the order that they can understand and fulfill.

3. Shipping providers and rates.

If you use a dedicated shipping provider such as UPS or FedEx, or even US Postal Service (USPS), you are probably setup with an account and able to manage shipping rates through a desktop software or local representative.

When it comes to reporting shipping rates with a website, there are some different requirements.  Providers like UPS require that you sign up with their “online tools” program – a basic extension of your UPS account that authorizes you to pull rates from their online servers.  Your local UPS account rep can help you get the online account started. Once they do, connect them with your web developer or forward your web developer the UPS account information you were provided.  That information needs to be integrated with your shopping cart software (the software used to build and operate your e-commerce website).  When working properly, that will allow the website to “talk” to your shipping provider (in this case UPS) to query shipping rates based on weight and zip code (or area).

3.b. By the way – did you weigh your products?

There are many different ways to charge shipping.  But if you plan to use a real time accurate shipping rate from a provider like USPS or UPS, you will need to enter weight values for each product in your website.  These providers base their quotes on weight (as well as shipping region).  If you are selling virtual products or services that do not need shipping, those can be handled in a different way.  Discuss these options with your web developer.

4. Online credit card payments.

If your business has never taken credit cards before, you will need to seek a Merchant Service Provider -  basically a company that specializes in offering credit card transaction services, both offline and online.  I recommend that you interview at least a couple to compare rates and services and ask people you trust for referrals – don’t just ask your bank because they are your bank. There are many quality providers, both large and small.  Be sure to inform them that you will need to accept online payments for the new website.

If you are an established merchant who has been accepting credit cards, try consulting your current merchant service provider first and see what it takes to extend your account with an online gateway.  The “payment gateway” is basically a communication tool that delivers transaction info from your website to the processor and tells the website if the charge is successful or declined.  Consult with your website developer about preferred gateways that are easy to work with or compatible with your shopping cart solution.  Authorize.net is a popular choice because it is the leading provider and supported by most institutions; it is also commonly compatible with most e-commerce software.

5. Give yourself time to compile your product information.

At some point during the set up of your online store, your products will need to be entered or imported into the website.  Each product includes many fields (maybe more than you realized) and you might need time to gather all that info.

I usually recommend preparing a spreadsheet and entering all of your products there, so they can eventually be imported into the database.  When I develop e-commerce websites, I usually give my client a sample spreadsheet format, based on a file exported from the shopping cart’s standard database.  This helps them input the information in a format that is compatible with the shopping cart database.

The minimum fields you can expect are: product name, short description (teaser), long description, the main product image, sometimes an additional thumbnail image, the sell price, and SKU (product code).  There are several more fields but most of the time they have been defaulted to a common setting or they are optional.

Your SKU is typically quite important, because today’s e-commerce software usually relies on this number (or alphanumeric code) to identify each product in the database as a unique item.  So even if you do not use a SKU system in your retail shop, you still need to come up with some kind of unique code to represent each item on your web shop.  This actually comes in handy later – because it helps you easily search for products in the website, on orders, and replace a product during an import update.

6. Plan to test, and test….and test.

During the development process you will be involved in at least one or 2 test orders.  This may go excellently the first time because all of the pieces are still in “test” mode.  But as soon as you enable the payment gateway in production (live) mode, or you are gearing up to be ready for a launch in 2 days, you need to run some real-world tests, too.

Be prepared to work closely with your e-commerce web developer to perform at least 1 test using a real credit card on the production-ready system.  I typically setup a special test product for a small amount like $1.00 for this purpose.  The client can run 1 or 2 successful test to confirm things are working and save themselves a headache with an actual customer later.

If you can, invite some friends or customers to test the site as well.  As long as you are not hitting the website excessively or ringing up charges with a payment system (be sure you are in test mode), it’s great to have more eyes.

If there is an error, your web develop will help you to investigate and fix that.  Sometimes it is easy to determine the problem by checking error logs generated by a payment gateway, but sometimes the error actually resides somewhere else.  (I have experienced 2 cases on former projects where the actual merchant service account was set up incorrectly with the wrong “account type” and therefore it caused all transactions to decline; it can happen, but there is a process of elimination you can go through with your development team.)

Once the website is fully tested and things are looking just peachy – the website is ready to be scheduled for launch.

Do the questions stop there?  No, of course not.  You may discover some quirky issue that only one blue moon customer finds, or you might just forget how to change the price of a product.   Keep a good relationship with your web development team so you have that resource to turn to.  I typically invite my clients to contact me for about the next month after a launch, because I know they will likely have a challenge or question in those first few weeks.

As a web hosting company, our tech support staff has had a fair share of calls about all sorts of IT problems outside of our control – but we understand.  A good business owner just needs good information, and they need a good network of people to rely on for various issues that challenge them.   You can’t expect the owner of a restaurant to learn the ins and outs of server technology.

What a Web Host Is Responsible For

Your web host is providing you with server space and resources to store your website and allow it to be accessible via the Internet.  On a typical shared web hosting plan, your website is hosted on a server along with several other websites, and you are sharing resources with those other customers.  Your web host’s staff monitor the health of their server and network, and you save money by not needing to purchase a sophisticated data center and servers, and by not needing to hire an IT manager to maintain that server.

If there is a problem with the server or network that your web host operates, you will contact them for support.

What a Web Developer Is Responsible For

Your web developer is the web design/programming professional who built your website.  They can help you to maintain features in the website, and troubleshoot problems with coding errors.  In some cases, they team up with other graphic designers, database programmers, or marketing professionals to turn around your complete website project.

If there is a coding error with your website or its back-end software, you should usually talk to your web developer.

When a Website is Hacked

There are 2 ways that a “hacker” or their abusive program can possibly compromise your website:

1. They could get in through a vulnerability in your website’s code.

2. They could get in through a vulnerability/infection on the server where your website is hosted.

In our experience over the last 15 years, number 1 is the most common.  Number 2 tends to be more likely for servers running Windows, since so many viruses and malware issues target the Windows platform (WEBii uses mostly Unix servers).  They are also more likely to happen to a web host who does not have a good security protocol in place, such as the reliable intrusion detection systems and firewalls at WEBii.

If your website breaks because of a problem with the software you are using or a coding error, you should consult your webmaster or web developer first to troubleshoot the issue.  They will be more familiar with the make-up of your website and where to look for causes and solutions.

If your web host’s server has been compromised by an infection, it would then be their responsibility to investigate and resolve that.

Local IT Problems

Sometimes issues can also happen to your local computer systems, email programs, and related software at your office.  We may help you to troubleshoot an email issue and realize that something has disturbed your actual email program on that computer, rather than our email server.  When you do not have a full time IT manager to rely on at your office, it is a great idea to hire a professional Managed IT Services company.  These firms usually handle everything from streamlining your office network to cleaning up viruses on your computers and troubleshooting computer problems.

Beyond the Basics

There are even more special scenarios we have dealt with that can throw an extra wrench in a technical question.  But your peace of mind comes in knowing that it is possible to solve your tech problems, when you establish a solid network of professionals in a variety of technical areas.

Magento comes with an easy way to create several product “types” including “simple” products, which are the mainstream items you might guess – like a t-shirt.  You will set up the t-shirt with a certain price and sell it as a product that is packed up and shipped to the customer.

But what if I want to sell 10 products in one quick swoop – on one page?

Welcome to bundles and groups.  Bundled products or Grouped products can be created with standard titles and descriptions, but they are associated with other products (simple or downloadable) to make a sort of one-stop list.

With the typical Bundled product setup, you can set the price field to “dynamic” and as the customer selects different items in the list, Magento will automatically calculate the subtotal price on the page.

Grouped products do not incorporate a price field by default, they just display a simple message about “starting at” with the minimal price (amount of the lowest priced item) to give you a range.  But with this option you can also select multiple items on the page and proceed to your cart quickly.  I have also successfully customized Grouped product templates to add more fields such as the product image and link (for each item) and display special messaging to further promote a certain “series” of items.

Other shopping carts like Zen Cart offer customization options for the category page (product list) to include quantity fields and an ‘add all selections to the cart’ type of button. This can really come in handy.  However, it is important to note that if one of the items has optional attributes (eg: colors, sizes) it cannot work in this manner, since the customer must first visit that item’s detail page and make their choices.  Zen Cart by default will display a “more” link instead of the add to cart function, for any product in the list that does have attributes.

Ubercart 2 can also be themed to list products from a category (or taxonomy or class) on a page complete with quantity and add to cart fields.  You can even include the attributes on that same page and configure the cart preferences to keep the user on that same page after adding an item to their cart.  So this is a sort of work around to the multi-add selling – the visitor in this case still adds one product at a time, but since they do not have to leave the page to “view the cart” they can keep adding more items quickly.

(If you do setup Ubercart this way, remember to keep your Cart and Checkout links/buttons very accessible so the shopper can easily proceed there when they are ready.)

A house, but not a very good house.

Probably a building, maybe with 4 walls, but probably in danger of falling down and made of foil and Lincoln Logs.

Knowing the importance of good shelter for my family, I will refrain from building my house.  Instead I will trust quality construction and real estate experts. Because, that is their profession.

Web development is a profession, too.  It is a neat one, and rather trendy, which is why so many folks like to try their hands at it.  But just like building dwellings, it takes experience and on-the-job training to build a quality website.

Is it important to get your website online? Absolutely.  Do you have access to do-it-yourself tools? Probably.  But if building websites and learning “clean” coding techniques is not how you spend most of your time, your website is likely to look like a result of “spare time”.

Here are just a few reasons to hire a good professional web designer like WEBii:

• We won’t put your website project on the back-burner, behind all of your clients
• We will probably code your website using seo-friendly techniques
• Your website won’t be a replica of the 100 other websites that used “that template”
• Your website will be an efficiency tool for your business, instead of an excuse
• You won’t avoid printing your website address on your business card

If you have started your website because you know it is important to have one, kudos.  But before you get in too deep and start making excuses, consider the importance of a website that was made professionally.

Some people might tell you that certain dynamic website technologies make your website “bad for SEO”.  But, languages like PHP can actually make your website more efficient and easier to manage – which is good for SEO.

It is the way you build your website overall, strategically and with visible content, that makes your website search-engine-friendly. Quality content is the foundation of your SEO worthiness.  PHP is just one of many technologies used to build websites in a dynamic way – to pull and display content from a database-driven application, for example.

Sometimes, the url (or “path”) of a page will look a bit lengthy and unattractive. Such as: www.webii.net/blog/12345?=123.php

This is not quite as SEO-friendly as we would like.  But there are simple ways to improve the urls of your website, by using either a built-in custom url option inside of your software (like WordPress or Joomla) or by adding an SEO-friendly URL module to your software (such as with Drupal and Path Auto), or by using mod_rewrite features of the web server and modifying .htaccess files.

Sometimes this URL issue alone is what causes people to panic and say “PHP is not seo-friendly”.  This is simply untrue.  In fact, many other languages like ASP any other database applications can have numerical or forumla looking url structures, and they too can be modified with some work.  There are some challenges if the web hosting server does not support the ability to modify the urls (if the server does not support mod_rewrite), so in some cases you need to work with your web host to accommodate this.

Styling this link is quite easy with a little CSS.

Add the following style class to your stylesheet (in your theme):

.cart .totals .checkout-types li {/*my awesome styles go in here*/ }

In one Magento Setup, I created a graphic button background similar to that “big orange checkout button” and included it in this style class.  (Of course you would only want to do this if you are not using one-page checkout, because then you just have 2 duplicate looking buttons on top of each other.) If preferred, you can include the text label on your button graphic and disguise the default text label (which is quite long) with your CSS.

A simple dress-up without modifying any core Magento files.

Magento is one of the many feature-rich shopping cart softwares that WEBii works with to develop customized e-commerce websites for small and medium-sized businesses.  Learn more about our e-commerce services.

This can be done with a little bit of template editing and some unique pages.  The suggestions below will help you establish an alternative navigation menu, display an alternative header, and create content with a unique template.  All of these steps are supported with the latest WordPress (3.x) so no plugin necessary!

Create some new pages.

Testing your new section will be much easier if you have some pages to populate the menu first.  Create at least one page in your language.  Be careful not to use accents or other special characters in the url (if you have one in the title you will need to edit the url).  The url structure should be basic letters and dashes to prevent breaking the ability to view that page.  You can Publish these new pages, assuming you did not include them in the menu of your live website (English version) – so they are still behind the scenes for now.

Make a new menu.

Under Appearance > Menus, you should have a listing of your current menus.  Click on the “add” tab (a plus sign) to create a new menu for your language section.  In my case, I will call it menu Spanish.

Add the pages you created earlier to this menu and Save the changes.

Now, we need to find out the menu id number. An easy way to do this is to click the tab for your menu and notice the url in the top, which will end in an id number like this:

wp-admin/nav-menus.php?action=edit&menu=71

So, my menu id is 71.  Jot this number down for reference.

Create a new header file.

In your wp-content folder, you should have a standard file header.php. I am assuming you have a basic understanding of the file structure of a typical WordPress website.  Make a copy of this file named appropriately for your section, such as header-spanish.php. Now make some small edits to the file to replace English words with your language (maybe a slogan or other text displayed in this header).

Toward the end of this file, there is probably a reference to your navigation menu.  For example it might look like this:

<?php wp_nav_menu( array( ‘container’ => ”,’menu_id’=>’suckerfishnav’, ‘menu_class’ => ‘sf-menu sf-js-enabled’, ‘menu’ => ‘menu’,  ) ); ?>

This one is a little more elaborate because I added some dropdown menus and classes.  At the end, notice it just has ‘menu’ as the identifier.  WordPress looks for the first, default menu.  Change this value to your id number instead.  So my line in the new header file becomes:

<?php wp_nav_menu( array( ‘container’ => ”,’menu_id’=>’suckerfishnav’, ‘menu_class’ => ‘sf-menu sf-js-enabled’, ‘menu’ => ’71′,  ) ); ?>

Save and upload your header file to the server.

Create a page template.

Make a copy of your default page.php file.  Put a template name in the heading of this file.

In the top of this file, you should notice a line to include the default header. The parenthesis within it are blank.  Include the name of your new header file, enclosed in single quotes inside this parenthesis, such as:

<? get_header(‘spanish’);?>

You might decide to change other things in your page template, but this will at least include your custom header (along with the custom menu) into this layout.

Assign your template to the page.

Now go back and edit your pages for this special language section, and update the Template to your new custom template.  You should see the name of it in the dropdown choices.  Update/Publish the page to reflect this change.  The next time you preview the page, you should see your updated header information and your translated menu loading instead of the default.

And lastly, once all your pages and menu items are complete and your new section is satisfactory, add some links to it on your main index page or your default menu so your visitors will be able to locate it.

Situation:

Solution: You don’t need to be a PHP expert – just some comfort with the WordPress structure can help you accomplish this in a few easy steps.

1. Make a new sidebar file.
2. Add the sidebar to your functions.
3. Create a new template file.
4. Edit the template to include your new sidebar.
5. Add widgets to your new sidebar.
6. Assign a Page to your Template.

Step 1: Make a new sidebar file. There should be a file called sidebar.php or maybe leftbar.php in your theme folder.  Make a copy of this file and name it something intuitive, such as sidebar-about.php.  You should revise the code reflect a suitable name for the sidebar, for example:

!dynamic_sidebar('About Sidebar')

Step 2: Add the sidebar to your functions. Locate your theme folder’s functions.php file.  Below your existing sidebars, you need to add something to recognize your new sidebar.  Such as:

register_sidebar(array('name'=>'About Sidebar',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'after_title' => '</div>', '<h3>',
 'after_title' => '</h3>',
 ));

Step 3:  Create a new template file. When creating a new layout for a Page in WordPress, start with making a copy of your default page.php file and naming it to something intuitive, such as page-about.php. Next you need to notate the name of this template in the top description comments of the file:

* Template Name: About
*/

Step 4: Edit the template to include your new sidebar. You should reference your new sidebar for this page so it will be included:

<? include('leftbar-about.php'); ?>

You might completely replace the default sidebar with this new one, or you might just append this so you have more than one set of widgets showing up on this Page layout.  Upload your final template file to the server so it is ready to use.

Step 5: Add widgets to your new sidebar. Login to your WordPress Admin interface and visit Appearance > Widgets.  Your new sidebar should appear in the options at the far right.  Drag widgets you desire into this new sidebar and save any changes you make to them.  In the case of a sub-menu, you might use the Custom Menu widget to insert a Menu you created.

Step 6: Assign a Page to the Template. So now your sidebar is ready but nothing is displaying it.  Visit a page that you want to use the new template variation you created, with this new sidebar, in my case the About page.  At the right side under the Parent navigation settings, you will see a Template dropdown option.  Select the new template name (eg: About) and Update (publish).

And finally – visit your website and refresh the browser to check out the new layout.  My customized About page now sports a completely different sidebar than other pages in my website or blog.