Building a Website

This article is to outline the basic steps in creating a site in Web Shop Manager (WSM). This step of process comes after the project has finalized the design phase. Prior to that, the sitemap and wireframes have been completed and there is a solid plan on how to build the site.

What Is Needed

Sitemap - this is an all important document that is used to build the site in WSM. It is color coded to match with specific content modules in WSM.
Wireframes - this is also an important document that can be referenced for clarity on specific content pages. Please look closely at this document for specifics on what pages need focus.
PhotoShop (PSD) Files - completely designed PSD files. Included in these files will be the complete design comp that has several folders for each key page or template specifics. Also included will be the catalog-sprite.psd file which is used for the catalog buttons.
Site/ - this directory will have all the basic files to assist in the initial site build. This is a very important directory and will be crucial in building your site properly. Other files in this directory include:
1. files/ - all the basic CSS, JS, and images files you need for the intial build
2. standard-pages/ - some standard pages that will be used for almost every build. Please refer to the sitemap on what pages to use.
3. templates/ - directory w/ the 'Default' template and other files that can be used as templates and called into the Default template. This method allows for simpler implementation and easier maintenance for key ares of the template.

Basic Steps to Building Your Site

The following are the basic steps to building your site in WSM. It is an assumption you are a advanced user and have a solid understanding of XHTML/CSS and have experience working in WSM. There are many intermediate steps and skills you must have developed in order to make an efficient build. Below is the preferred method of building a site in WSM:

Build Sitemap in WSM - the very first step is to build out the sitemap in WSM. Take the sitemap document in your site build package. Have it printed out on paper at your side and use that as your reference document to build out the site in WSM. Review the sitemap carefully as there are many notes and references in it to assist in your build. Complete the following in this step:
1. Create all topics for Pages, News, FAQ's, Resources, Albums, etc.
2. Create ALL sitepages and insert content if content is readily available at this stage. At this early stage the goal is to only put in text and use basic HTML such as as:
  1. h1, h2, h3, p, a, ul, ol, etc.
3. Create any and all major content areas. If there are some areas that cannot be done right now, make note of those for later in the build. There may be times when certain content areas needs to be built later in the process.
4. Create the Why Buy From Us template and the Can't Find template. These are small templates that will be pulled into the default (or other major templates) and will populate sidebar items. Some websites may not employ these templates at all. Your site build package is already fitted with a standard template for each of these which will require minor adjustments.
  1. Please note that smarty code will not automatically read smarty code in child templates. So the default template will not read smarty code inside of the Why Buy From Us template. Save yourself time and edit any smarty commands in these child templates now.
  2. Once you've created these templates, use their IDs and modify the corresponding variable line at the top of the default template.
5. Navigation -Implement the correct navigation into the sitemap.
  1. You'll need minimum, three menu groups for your site. Name them top_menu, about, and cust_service.
  2. We name them this way because this is how they are called in our default templates.
  3. As you create each link within its group, choose the priority of the link according to the final design. Priority is set in increments of 10, descending from 500.
  4. For example, Home = 500, About Us = 490, Products = 480, etc.
  5. The "about" and "cust_service" menu groups appear in the footer of the website. "about" typically contains the same links as the top_menu group..
  6. "cust_service" typically contains FAQ's, Shipping & Returns, Terms & Conditions, My Account (/account.html) and My Orders (/account.html#my-orders).
6. Homepage - do not spend time working on the homepage design. Most sites will have unique homepage designs and you do not want to waste time at this point working on it. Work on the homepage after the template skinning is completed.
Create HTML Template - Now that you have the sitemap built in WSM, you now have topic ids, page ids, album ids, and menu groups defined to help build your template efficiently. In the template there is template logic that references specific albums, topic ids, page ids, and cms zones. Because you have created the sitemap first, you now have these id numbers to insert. Also in this step, you can begin deleting/adding/moving template code to adapt to the features of the specific site build. Take this step to strategically plan your build. You should be actively thinking about how to slice the design while creating your HTML.
1. In the content menu, choose Templates, then choose the Default template.
2. The Default Template contains all of the necessary (and sometimes unnecessary) code for your site to function. It is your duty to strip all of the unnecessary code out. The Default Template may just be a copy of another site’s default template and therefore may contain excess DIV elements that will only complicate the styling process. So get rid of them now so that you don’t have to go back and delete them later.
3. Classes and IDs are typically labeled with “ns_” which stands for Name Space. Change each instance of “ns_” to the appropriate tag for your site.
4. Your default template will also refer to ID numbers of items that should already exist in the site. These numbers can refer to other templates, inquiry forms, photo galleries and FAQ articles. Make sure you've created these ahead of time to avoid jumping back and forth.
Create File Directories - once you have the HTML of the Default template completed, you can upload the base files in the site build package. Create the following directories in theFiles & Images section of WSM, and upload the correlating files in the site build package:
1. css - upload all the CSS files in the site build package. Notice there are going to be some files that never get used but are there in case they are needed.
2. js - upload all files in this directory. Note some of these are not javascript files but are necessary for most builds.
3. images - this step you can choose to do based on the build. The site build package has several images made for the base template. However, most likely this site's template will not use any of these images. It is thus not necessary to flood this directory with images that will not be used for this build. It is now time to move onto the next step of slicing the design.
4. qa - create a QA directory and upload any of the supplied QA content. This will be used for screenshots and provides ease of access to anyone viewing your progress.
Slice The Design - now that you have a polished draft of your HTML template, you can begin slicing your PSD file(s). Best practices to use when creating your slices:
1. Optimized File Types & Size - you must always be conscious of the best use of optimized images. Finds a balance between the proper file type and the smallest files size. Some image guidelines to follow include:
  1. Template Images - the template images altogether should strive to be under 250-350K. This includes large background images, template icons, and other design elements and textures. Try to use transparent pngs sparingly as they are the largest file type. Try to use transparent gifs instead with the proper mask color instead.
  2. Use of Sprites - sprites are very useful when used properly. Make sure to make your sprites as small as possible and avoid using a lot of empty space. The idea of a sprite is to make a compact family of images into one for ease of use and performance.
  3. Graphic Banner Ads - these include banners used on the homepage slideshow and sidebar banners. Homepage banners should not exceed 60-75K . Sidebar banners need to be at a small size as well which is typically 10-20K.
  4. Site Backgrounds - these can be rather large at times. Be creative in using layers and good optimization techniques to create images of respectable size and of a quality that keeps the integrity of the design. Remember that the user is going to focused mostly on the content and not so much the background of the site, thus, if necessary, pixelation is acceptable for these background graphics.
2. Create Sliced PSD files - one common mistake many designers do is by working on the final PSD file and creating their slices from that. You will need to make several PSD files for making efficient sliced files. These can be:
  1. Background file - create a file that only has the site background elements. Duplicate the final PSD file and remove everything but the backgrounds and make slices from this file
  2. Sprites and Images - duplicate the final psd file and reorganize things to place shared icons, background gradients, and other images that can be placed in sprites together. Also this file can have some non-sprited elements if needed
  3. Homepage Slideshow PSD file - create a separate file for the homepage slideshow. Make sure each comprised image is in its own folder. This file will be used to make future slides of the proper size and we will then send this to the client for them to use.
  4. Small Banner Ads - make a psd file for the smaller sidebar ads or other banner ads used in the site design. Again this psd file will be used for later in the process and also be sent to the client for their future use.
Template Skinning - now for the fun part! You have the sitemap built, the XHTML/CSS Default template in place, and your slices and sprites created. Now it's time to skin the template. This process will take the bulk of the time on the build to get things looking as close the the site design as possible. When uploading your files make sure to upload to images/ directory in the Files & Images section of WSM. Here are a couple of notes to make your builds most efficient:
1. File Paths - make sure to use relative paths when referencing images and other files. Because this site is being developed on a dev domain, when the site goes live, the domain will change. Therefore, any files or links referenced to absolute paths will break when the site goes live. So use these for examples:
2. Relative Paths
```
.ns_background {background-image: url(/files/images/backgroundimage.jpg)}
Notice the files directory starts with /files/, this is necessary to call files in the Files and Images section of WSM.
```
3. Style all template elements - this may sound redundant, but it is your responsibility to style all template modules. Begin with Header, then Footer, then left and right sidebar before you style any main content. Working this way, and focusing only on one section at a time will make your process much more efficient:
  1. Header
  2. Footer
  3. Sidebar Menus and Modules - this includes all menus and modules that show in the left and right sidebars on all the pages. There is template logic that changes the content of these sidebars based on the page. Please make sure to review all site pages to make certain all sidebar elements are styled
  4. WSM Modules and Modules Pages - this includes all areas such as:
    1. Site Pages
    2. News Topic View
    3. News Article View
    4. FAQ Page
    5. FAQ Topic View
    6. Gallery Module
    7. Album Views
    8. Calendar - this includes the calendar and event page views
    9. Locator - if applicable to the site package
    10. Store catalog - includes category pages, buttons, navigational elements, product pages, cart, checkout. These are the areas that typically get neglected the most and need to paid attention to during the final steps of the build.
    11. Contact Module
    12. My Account Module
4. Observe Existing File Names - much of the work has already been done for you because the default style.css file calls upon image filenames. wsm_catalog_sprite_lite.gif is commonly used to style out the major buttons of the shopping experience. You may have to re-style this image in photoshop, but if you leave the positions of each button it will skin the site without any additional effort.
Create Homepage - after you have created the template and done your fine tuning. By the time you have the template created, you should have been given clearer instructions on the actual content of the homepage and you will be able to make a more complete page at this stage.
Configuration Settings - In the "System" menu, choose "Configuration" and then select the tab labeled "Catalog" to change the settings so they match the screenshot below. Next choose "Cart" and match it with the second screenshot. Then choose "Images" and match those to the third screenshot. These are settings that we have agreed to adjust uniformly on each new website we built.

Final Testing

Cross Browser Check - Check how the site looks across different browsers. Check browsers such as:
1. Chrome
2. Firefox
3. IE7, IE8, IE9 - We are now checking these versions of internet explorer with the developer tools in IE9. When in IE9, hit F12 to reveal these tools and choose your browser mode.
4. IE6 - functional checks. Make sure the user can do the major functions of the site. It is acceptable to have some design degradation. Unless specified otherwise in the ptrac task, just ensure that a user is able to do core functions such as add items to the cart.
Page Speed Review - Use Page Speed to check the homepage of the dev domain for speed optimization. Take care of all High Priority items. Review with your manager if you have any questions. Enter the domain name here: http://www.pagespeed.googlelabs.com

Building a Website

Contents

What Is Needed

Basic Steps to Building Your Site

Final Testing