Building Two Sites at Once; One Public and One Members Only
Web Application Revamp with CSS-Based Design Templates
Client profile
Sierra Bravo rebuilt two websites for our client — both their public-facing marketing site and their members-only site. Our client places high value on the business loyalty of it members and clients, including accounting, tax, and financial services firms. Sierra Bravo showed its knack for gaining an understanding of a business — and then building practical web solutions accordingly.
Objectives
The company wanted to offer their clients more features while still providing services at a lower cost than their competitors. To accomplish this, they needed a functional application for their members-only site in a framework that allows for substantial future enhancement in template design, increased administrative capabilities, and continual feature addition.
With our client’s Pick system, they were no strangers to Sierra Bravo — few technology companies have our on-staff Pick experience in any such abundance. When they were ready to do much more with what they had in place, we were brought in to create a Pick CGI-based web application.
Marketing Site Design Objective
The public-facing website promotes and captures member enrollment. We worked with our client to understand tactics to attract potential members and created design comps conceived with two goals: inform potential members and convert visitors to members.
Member-Only Site System Objective
The member site page generation system used Pick APIs to receive page requests, fetch requested data from the UniData system, and create static HTML pages based on logic embedded in the program. This, however, made front-end site changes time-consuming and needlessly difficult, as small alterations could have material affects on proper site function.
Member Site Templates Objective
For future flexibility, our client wanted members to have access to templates for creating a solid web presence for their business, so developing the first template was a top priority. The goal with member site templates was to have various layouts and visual designs while maintaining a standard HTML structure for all member pages.
Members Area Objective
As the central location that members use to control their site, the members’ area had to convey a sense of simplicity and professionalism, as does the main site. The primary concern of the members area revamp was to maintain current functionality and interoperability while providing an updated visual design and logic layer.
Solutions
Tech tools used: Combo of Pick, PHP, Java, and MySQL
A core feature of the new web pages is valid, semantic HTML markup and Cascading Styles Sheets (CSS)-based layout and design. Among the key solutions for the AFSB member site was the development of a process to add new template skins using CSS — attractive to potential members and value for existing members. Members work in a flexible template to create and alter their own website’s look and feel by changing or adding color, logo and headers.
Templates were implemented as a CSS file, used at presentation time by the browser. Switching which CSS file is used alters the member site layout. The HTML produced for the member site pages is uniform and doesn’t require alterations to support new templates. A template was implemented with CSS layout and styles; this CSS file is responsible for all of the layout, colors, fonts, and graphics to be displayed as a cohesive design on-screen. In effect, the member site template is the CSS file.
To facilitate rapid implementation and maintainability, we converted the member site pages to be created dynamically with PHP. API programs were used to retrieve the relevant information from the UniData database. This data was passed to the PHP script and parsed into a well-formatted HTML page layout.
Sierra Bravo re-implemented this system in a layered and logical approach — separating data, logic, and visual presentation into layers. Changes were made to the Pick APIs to fetch data based on requests, perform some logic and return the resulted data as XML to a PHP-based control layer.
By carrying over afsb.net site changes to the members’ area, members experience a comforting familiarity — with common visual cues, formatting, and layout to make it more enjoyable for them to work on their website.
More value for members
To help members prepare their clients for tax time, we recreated their tax organizer, replacing a large and static PDF document with a truly web-based version in HTML that clients could fill out online. As tax laws change every year, our client can easily modify their new document to match the times and the letter of the law.
We added an online payment process to the site, and gave member sites the capacity to share and transfer files — with private access for security. This tool gives members and clients ample bandwidth and storage to post and share forms. A Googlemaps application was added to members’ “contact us” pages to help them get found.
Our client creates a number of “canned” marketing materials for each of its members to reach their own clients, including a newsletter newly-revamped by Sierra Bravo — branded with each member’s logo and name on it.
The look and feel of the member site is dictated by the member site template. Layout, fonts, colors, and core site graphics are determined by which template a member selects to use. Members leverage proven design and can focus on providing content, tools and service.
Admin interface
We added a reporting function and interface to our client’s admin site so they could track and measure website and disk usage, as well as other key business metrics not previously captured.
Results
“We have many more features than prior to this project in our Web-hosting product,” said our client’s general manager. “We are better able to add style sheets to keep our general look much more refreshed. And we can market our services at a much more competitive level.”
Without replacing their investment in a well-functioning Pick database system, Sierra Bravo brought it up to more modern usability standards through a new web-based user interface. Their data and business logic still lives safe and sound in their Pick system.
On the web, the end result is served dynamically as a semantic HTML, rendered and presented using CSS-based techniques. This methodology is effective, efficient, and easy to manage and alter as needed. It does away with the need to generate and maintain static HTML files for each member sit separating data creation and manipulation from visual presentation. An expansion or change to one layer can be done separately from the rest, allowing for quicker and easier revisions.
Moving forward, our client has the documentation necessary to create and add new templates to its member site. With a focus on aesthetic and semantic page design, the improved member sites are more accessible, more appealing to users, and more easily maintained by both our client and its members.
Individual site visibility on common search engines such as Google is greatly enhanced as a result of this conversion process to CSS-based design. A new content management system allows members to freshen their web content.
New templates can be created by our client based on this CSS template and by utilizing the standard HTML structure returned by the new PHP layer.
The company’s president kept coming up with and adding ideas to the mix throughout development — all made for a better end result. The public-facing marketing site and the member site now have a unified and consistently-branded look. Now featured prominently on the marketing site is the template chooser tool for users to point and click to sample different looks — and build their business.
“Sierra Bravo recognizes the need to listen to customer feedback and respond quickly,” added our client’s general manager. “There have been a number of improvements in overall communication and project tracking. We would recommend Sierra Bravo in the future.”