Portfolio Energy Arts Web Site Energy Arts Web Site
The Brief:
Energy Arts has a stong online following. The high traffic website was created over five years ago, whilst the marketing message is strong, the visual style is dated. The existing site is based on a Content Managment System [CMS] but its is complex and difficult to use. The operators like the ability to modify and add content but are looking for a new system that is easier to use. Energy Arts also wants to build their community and improve the communication with their customers.
The Concept:
The visual style is based upon ancient chinese scroll paintings. The new logo designed by BrandMother reinforces the style by using a brush stroked 'e'. The site uses repeating textured backgrounds to save on bandwidth and provide depth to the design. The home page lwer columns mimic the appearance of scrolls in a manner that will accomodate variable content length. The template uses XHTML and CSS code for Search Engine Optimization [SEO] and a tableless layout for compliance with accesibility standards. The CSS employes relative dimensions so that the layout will scale proportionally to the font size allowing the end user to use modern browser text size settings without destroying the visual appearance.
The Solution:
The home page displays a summary of content items and is mostly dynamically generated. All the content displayed is editable by the website owner and requires minimal technical skill to modify. The top row contains a banner on the left and an image rotator on the right that is linked to various news items. The lower row contains three columns that summarize upcoming events, featured products, and random customer testimonials. End users can also sign up for a free newsletter without having to create an account on the web site.
One of the core requirements of the new sites was to improve the communication between Energy Arts and its customers. One way of improving communication was to use form based data collection. This component allows the web site operators to easily and quickly create complex forms. The data is either emailed to them or stored in a database for later analysis.
Another method to improve communications is to list Frequently Asked Questions [FAQ]. This FAQ system is fully editable, searchable, and included in the site map. It can contain an unlimited number of nested categories and requires no programming knowledge to add or edit content.
Much of the content on the Energy Arts web site is based on Chinese teachings. A normal page typically contains a number of foreign language or little know terms which can be confusing to the reader. To alleviate this situation the site employees a glossary component to display the terms and their definitions. The glossary uses XHTML DT and DD tags for SEO and accessibility.
Having a site glossary is great but the reader still has the chore of looking up the term. One of the excellent features of this glossary component is automatic content highlighting. Before the page is displayed the page text is compared with the glossary and all matching terms are automatically coded with a JavaScript MouseOver Action that displays the definition in a dynamic window.
Another core requirement is the directory listing of Energy Arts instructors. The listing required custom coding to display the instructors sorted by Country and State/Province. This listing is fully dynamic with one column for US instructors and the other for all other countries. The listing will automatically update whenever a new instructor is added.
The instructor browse listing display important information in a business card view. Each instructor can have a picture, contact information, website and email. The email addresses are automatically protected from spam email crawlers.
Instructor detail pages use custom field to display appropriate information about the level of service provided, business hours and contact information. Location information is automatically cross referenced with Google maps to find the latitude and longitude coordinates so that a map can be generated.
Content pages are organized by section and categories. Using this structure any number of summary pages can be automatically generated to display thumbnails and teaser text. The thumbnails are generated by the web site using the PHP GD graphics library and the teaser text is intelligently trimmed to a certain length based on character count and white space detection.
All of the content items employ an easy to use online editor. This editor is similar in appearance and functionality to word processing programs such as Microsoft Word. Using the editor the site operators can easily add new content text, apply styles and add images. The images and text in the content items are modified and resued for the summary pages and modules.
The store is fully searchable, browseable by category or product type, and has additional functionality to display featured, discounted and popular products. Using custom integration all itemized transaction information is passed to Authorize.net for approval using the AIM API. This allows the export of transaction information to QuickBook IIF format capturing all customer and product information.
Product browse pages use automatically generated thumbnail images and customized layout of summary information. Certain product are available for purchase and others link to third party provider web sites.
Product detail pages are extended to use site wide code rewriting to employ features such as Search Engine Friendly [SEF] URLs, glossary highlighting and multimedia integration.
Energy Arts offers various time specific content such as Instructor Training, Workshops and Seminars. To facilitate this requirement a highly modified calendar of events is used. Events are browse able by location, time, and category. A custom script is used to generate efficient SEF URLs for each event.
Each event displays location, time and contact information. All events require a purchase and therefor each one is linked to a product in the online store. The event products allow for multiple levels of purchases from a deposit to full reservation including room and board. All of the options can be edited using the administration back end.
The site feature easy to use multimedia file embedding with automatic file players for most file types. The component can use files stored on the web server or content located on third party multimedia hosting sites such as YouTube. Content is streamed so there is no wait before the file starts to play.
