If you’re not from the Topeka, Kan., area you’ve probably never logged on to CJonline.com, the Web site of The Topeka Capital-Journal.

In that case, you’re missing out on a unique front page and a well-developed site that becomes readily apparent the deeper you dig. But you don’t have to dig very far for the content, thanks to the site’s latest redesign.

The top and center sections of the Topeka Capital-Journal’s Web site, CJOnline.com, feature a unique JavaScript environment that displays a variety of photos and headlines based on what tabs are selected by the user. According to New Media Director Jim Debth, this can provide a greater number of headlines in a smaller, easier-to-navigate space.
Photo: The Topeka Capital-Journal

The Capital-Journal (daily exc. Wednesday, 52,212; Wednesday, 84,998; Sunday, 65,798) is owned by Morris Communications Co., which has historically been very active in developing Web software for its newspapers.

Accordingly, The Capital-Journal’s Web team consists of 14 staff members, five of whom dedicated to content development.

According to Phil Thompson, commercial development manager, the site uses Web publishing software anchored by home-grown app SiteWeaver, developed by Morris Digital works and modified to serve The Capital-Journal.

Front page

The story of the unique and individual front page began shortly after Jim Debth joined the site as director of new media in late 2002.

At that time, the Web site was about to undergo a redesign that would substantially change its look and functionality. Debth said the reasons for the rework were not atypical: The staff wanted the site’s information to be more structured and user-friendly. Prior to the redesign, users who wanted to do something as simple as read the day’s top local stories were forced to navigate a complicated menu bar and drill down through multiple levels.

“We decided that as a group, we would try and find the very best way to present the information,” Debth said. “I was lucky in that coming aboard there wasn’t a lot of disagreement among the staff that we needed to find a new way of navigating (the site).”

To that end, an internal team of five examined rival sites to determine the best way to display and retrieve information. The team exchanged sites and ideas and retreated to their workstations to ponder until a second meeting.

“It was at this point we realized we had no idea of what we wanted to do,” Debth said. “This may have ended up being a good thing, since after that point we went into the redesign with a total clean slate. We knew we wanted some kind of graphic look that would really grab people when they saw it.”

That translated into a CJOnline home page that boasts a prominent photo in the center. The rest of the look, which changes completely when the tabs are moused over, was based on the desire to highlight each special section in a graphic and interactive manner.

Between the news menu and the swappable top links, the main tabbed graphic section of the front page can typically present up to 50 story links in a very compact space. The site is updated throughout the day, with the bulk of new articles and images uploaded by 5 a.m.

Circle remains unbroken

After staff settled on this “circle design” for the front page, other main sections such as entertainment also adopted the technique of using tabs and multiple photos to organize information.

According to Thompson, the site is structured so that non-technical users can update the links on the front page. The page, while very large in the layout application due to the multiple menus and links, gets in effect “flattened” in the publishing system.

This presents the browser with a continuous HTML stream as opposed to accomplishing the same goals with server-side includes (SSI) or other server-based technologies that would require frequent back-and-forth trips to the server for new components.

The HTML design uses a great many DIV tags (a type of HTML tag), and the designers chose not to rely heavily on tables for the layout. The largest images are loaded last, giving viewers on lower-speed connections the flexibility to choose a text link before the page has finished building.

The image swap functions are built using JavaScript and conventional style sheets. Although some automated Adobe Photoshop actions are employed on raw photo files, individual manual tweaking is applied to fine-tune the pictures to suit the desired size and aspect ratio required for the larger front-page presentation.

Getting ad dollars

CJOnline uses Open Ad Stream for ad management and a variety of strategies to generate revenue for the site.

“The Top Jobs section is huge for us,” Debth said of the site’s employment section. “Having that as part of our home page is very important.” Top Jobs data flows automatically from the paper’s classifieds system, as does data from the Top Homes and Top Autos sections - and all launch a separate browser window when activated.

Although Morris Communications requires users to register on some of its newspapers’ Web sites, for now CJOnline isn’t among them. That will likely change, however, Debth said, in order to let The Capital-Journal exploit users’ demographic information.

The paper is tracking visitor traffic using proprietary software developed by Morris. Debth said The Capital-Journal is in the process of adding apps from Omniture Inc. and Tacoda Systems Inc. to obtain more highly detailed historical data on Web visitors and their viewing habits.