Planning and Site Design
This chapter uses a fictitious site, EktronStore.com, to demonstrate how to set up, build, and deploy an online marketplace using Ektron. EktronStore.com sells furniture and accessories and leverages many eCommerce features.
Before starting to build EktronStore.com, consider the goals of your online marketplace. Do you want to simply sell as many products as possible? Or, do you see your store as a value-added component designed to enhance the customer (site visitor) experience?
When considering store design and functionality, what you intend to sell plays a significant role in this endeavor. For example, are you selling durable goods? Subscriptions? Access to premium content? All of the above? Make sure you consider this when planning the layout of the store.
Shipping options, payment methods, taxation, and the general look-and-feel of your store also need to be determined. Make sure you address the general workflow of your store — that is, how shoppers are guided through the entire shopping experience.
Sitemap
It all starts by planning the basic architecture of the store. This is called a “sitemap,” depicts the architecture of the Web site. It can be either a document used as a planning tool for Web design, or a Web page that lists the pages on a Web site, typically organized in hierarchical fashion.
Essentially, the sitemap identifies the major pages, sections, sub-sections, and shared elements of the site.
Wireframes
Next, plan and scope out the major pages in your store. Using pencil and paper or software, sketch the basic architecture and components of individual store pages. This visual guide is referred to as a “wireframe”.
Mockups
The wireframe helps inform visual design. Typically, a graphic artist creates mockups (or visual preview) of store pages for stakeholders to see without actually building Web pages.
Callouts
Callouts help identify functional areas on store pages. Using the mockups, identify navigation areas, locations for promotional information, header and footer details, and the location of Ektron controls.
Images in eCommerce
When using eCommerce, a customer sees images that represent products or services for sale. The following table shows each image that appears on an eCommerce Web site, and its source.
|
Where Image Appears |
Example |
Image Location in Workarea |
|
Product Server Control, main image |
Image on Product control |
On the catalog entry’s Content tab NOTE: The sample catalog entries are based on Product Types whose XML Smart Form includes an Image field. As a result, the product description, (which appears at the top of the Product Server control) includes an image. This is not required, merely a suggested implementation. |
|
Thumbnails on lower portion of Product control NOTE: To control the thumbnail display, use the XSLT files generated by the Product, Product List, Product Search, and Recommendation server controls. |
On the catalog entry’s Media screen. If an image’s Gallery Display field is set to Yes, its smallest thumbnail appears on the Product server control, below the content area. (This assumes you are using the control’s default XSLT.) When a customer clicks a thumbnail, the corresponding full image appears. Because the Media screen can have several images, several thumbnails can appear. They appear left to right reflecting their sequence (top to bottom) on the Media screen. See Also: Determining Thumbnail Size |
|
|
Product List, Product Search, and Recommendation server controls |
Image on Product List control |
On the catalog entry’s Media tab, the image designated as Product Icon See Also: Entering a Catalog Entry’s Media |
