Small web team uses CSS to develop big-time magazine site

Note: This article first appeared in the Edge newsletter.

Harris Publications is one of the largest special interest magazine publishers in the United States, with more than 70 titles. XXL magazine, billed as "hip-hop on a higher level," is one of our best-selling titles.

In fact, it is the best-selling music publication on newsstands and is widely considered the most respected voice in hip-hop. But you would never know it by looking at our old site. It was brochure-ware updated monthly with only teaser articles for the current issue.

This development article is about how the small web team at Harris Publications used CSS and Dreamweaver 8 to transform XXLmag.com from a static brochure-ware site (see Figure 1) into the dynamicpublishing platform and relevant brand extension that it is today (see Figure 2).

First things first…

Our first job was to establish a feature set for launch so that we could then develop an appropriate website architecture. Through meetings with the editorial, marketing, advertising, and publishing departments at Harris we narrowed the initial feature set to the following:

• Up-to-the-minute news
• Regular columnists (blogs)
• Exclusive features
• Reviews
• Audio and video releases
• Contests
• Magazine articles/teasers
• Subscription services
• Community features

Next, we researched and assessed technology solutions that would best support the feature set.

Early in the assessment phase, we decided to use cascading style sheets (CSS). With CSS,we could create lighter and easier-to-manage web pages. By separating site design from sitecontent, we could lock down the design, but allow non-technical users to update content areas.Additionally, pages created with CSS are standards-based and offer greater accessibilityfor all users, including persons with disabilities, and allow pixel-level control over layoutfor designers. Plus, CSS allows us to target specific platforms like screens, printers,and PDAs.

Next, we had to decide which content management system (CMS) to use. We knew CMS was essentialbecause of the planned frequency of site updates. Multiple writers and editors would needto post and edit stories several times a day, every day. Plus, we knew the columnists (withtheir blogs) would be a big part of the new site. These bloggers are (or would become) majorpersonalities in the hop-hop journalism world—many of them already had their own Internetfollowings. Since this would be a central part of the redesign, blogging software becamea major consideration when evaluating CMS solutions.

After much consideration, we chose WordPress forour CMS. WordPress is a popular, open source, PHP-based blogging tool that has been aroundfor a while. In addition to allowing multiple bloggers to post, and users to comment on theposts, it offered many other features we were looking for "out of the box," such as talkbacks,RSS feeds, template systems, and, most importantly, an active developer community with hundredsof easily implemented plug-ins. These plug-ins quickly enabled essential features, includingFlash video, Send to a Friend links, automatic relevant post links, and intelligent caching.

As designers, we were also attracted to WordPress's template selection hierarchy. We setit up so that when WordPress looks for a category page, it looks for category-(number).php,in which "number" is the number of the category. If it does not find a specific categorypage, it goes a step more generic and looks for the category.php template. If it cannot findthat file it goes even more generic and looks for the archive.php file:

1. category-6.php
2. category.php
3. archive.php
4. index.php

In this way, a designer can customize as much or as little of the site as he or she wishes.Each of the sections can look entirely different. So in our case we have:

1. category-3.php
2. category.php
3. index.php

This tiered system of templates allows XXLmag.com to have different layouts for different sections while keeping the numbers of files that need to be managed to a minimum.

Creating and integrating CSS

Lastly, we needed a tool that would help us create CSS and integrate CSS and WordPress together. We selected Adobe's Macromedia Dreamweaver 8.

Dreamweaver is one of our favorite development tools at Harris Publications. Our web team manages 11 sites and another 32 subscription/order mini-sites, which add up to tens of thousands of static HTML pages. We have to design, code, update, and manage them on a day-to-day basis while at the same time creating new sites and redesigning old ones. It is no exaggeration to say Dreamweaver doesn't just make it easy, Dreamweaver makes it possible.

In fact, Dreamweaver's code hinting feature, which auto-completes the code as you type, saves us 10-15 seconds for each line of code we write: multiply that by hundreds of lines of code a day and thousands per week, and you'll quickly see that this one feature saves us weeks of time over a year.

In addition to code hints, Dreamweaver features like templates, plug-ins, the integrated CSS palette, the ability to record repetitive tasks, find-and-replace functionality, background FTP, and code views, save us even more time. Seriously, without these Dreamweaver features, we'd have to add another two to three producers to our team in order to maintain our site.

Implementation

Once we determined our feature set and had the technology in place, we were ready to design and implement the new XXLmag.com site. I've broken the design process down into four steps: Do the math, Design, Deconstruct, and Dreamweaver. We'll go into detail on each below.

Do the math

I always start by sketching the site design out on paper. What may look like a step left over from art school is actually an essential tool in understanding the site (see Figure 3). CSS is all about simple math.

At its most basic, CSS is about defining an area, like the header or footer, and defining that area's height and width, then adding margins, paddings, and borders. This process is widely referred to as the CSS box method. The more math you work out ahead of time, the easier writing the CSS will be.

For XXLmag.com, we knew we had to accommodate standard industry ad sizes like the medium rectangle (300 x 250), leaderboard (728 x 90), banner (468 x 60), and wide skyscraper (160 x 600). A three-column grid on the home page and a second three-column grid on the interior pages worked best for our ads and content. We wanted to keep the width of the site at 800 pixel, so it would fit comfortably in the largest number of screens possible, but because of our ads, we ended up with an 808-pixel-wide site.

Design

Once we worked out the math and structured our site layout, we began the design process by applying graphics, color, fonts, and content in Adobe Illustrator CS2. We use Illustrator to lay out the sites because it allows us to quickly work with blocks of text, color, and images and makes duplicating sections and moving elements around on the page a painless experience. Image masks, layers, and the small size of vector-based files also aid in the quick development of site designs.

After the site design has been finalized we move the entire site into Adobe Photoshop CS2 to deconstruct it. This means we break the entire site down into the fewest number of graphics at the smallest file size possible. For example, the headline section on the left of the site only needs the top “XXL Headlines” tab with a small corner of green because the rest of the section with the green background and light green border can easily be recreated in Dreamweaver with CSS borders and background styles (see Figure 4).

Dreamweaver

With the design done, the math worked out, and our image building blocks ready to go, we now get to put it all back together with CSS using Dreamweaver 8. CSS can be internal in the HTML or saved as an external CSS file. For development purposes, I prefer internal CSS, which I then export to an external CSS file for the entire site to use once testing has been completed. Having a single external CSS file for the site makes making global changes to the site quick and easy.

When creating the actual CSS of CSS-based design, we like to work from the outside in (see Figure 5).

Working from the outside of the site, the CSS for the XXL home page looks like this:

1. <body>
2. wrapper
3. header
4. siteBody
5. footer

We use ID selectors for these sections because they are overall positioning of major site elements and only occur once per page. Generally, class selectors are used more for multiply occurring elements and for styling elements than for positioning elements.

The HTML looks like this:

The CSS for these sections is easy to create because we already know the math for our elements. The wrapper div is 808 pixels wide and will contain the entire site. This div will also center our page on the user's screen. To do this, we'll first apply some CSS styles to the body tag, which is above our wrapper div in the site's hierarchy:

By aligning the text to center, I'm causing my wrapper div (and all elements contained within it) to be centered; therefore, I need to realign all the elements within my wrapper div to the left:

The left and right auto margins are used to ensure the wrapper div is centered in more recent CSS-compliant browsers like Firefox, while the align-center style on the body tag centers the wrapper div on older browsers like Internet Explorer 5.

The header and siteBody div do not have any actual styles and exist only to divide and hold the content that I'll place inside. The footer div gets some margins and different default text color:

After the basic framework is in place, we begin at the top and work our way down, filling in more detailed positioning:

The CSS for topLeaderboard id selector could not be easier. The section's width is 808 pixels, which is defined by our wrapper so we didn't need to add that again. The height is 110 pixels, which is the height of the background gradient we want to add. Using the Dreamweaver CSS panel, I add the background image with a horizontal repeat.

I'll add some padding so our ad banner, which is 90 pixels high, does not bump against the top of the browser, and I'll align the banner in the center.

The CSS looks like this:

The only addition to the HTML is our ad systems code placed within the topLeaderboard div tag.

For the subscribeNav and siteNav sections, we're going to use ordered lists to hold the links. This method is considered a best practice for navigation. An ordered list can be displayed horizontally or vertically, it provides several tags to apply styles to, and it downgrades well in non-CSS environments—a bulleted list of links still works well as an understandable navigation:

With both the subscribeNav and siteNav lists we need to first remove the bullets, padding, and vertical listing that unordered lists have by default. This is accomplished quickly and easily with CSS. Once that is done, I use the <li> tag to display the links horizontally and the <a> tag to style the navigation. In the case of the XXLmag.com siteNav, I used images instead of text links to retain a typographical connection to the brand.

The CSS for subscribeNav looks like this:

I used floats to position the subscribeNav and XXLsearch sections on the left. Floats take the section out of the normal flow of HTML, which gives me more flexibility in how they are positioned. I can align one with the top of the XXLmag.com logo and the other at the bottom.

The siteNav CSS looks much the same as the subscribeNav with some additional design elements added. The black background, green border, and white corner tab effect are all added in CSS:

Now that the top section is complete, let's take a closer look at our main section, siteBody. Working from the inside out I separated the content within the siteBody into several smaller sections. Each of these sections contains a specific type of content, and each will hold several more smaller sections within it.

Our site structure now looks like this:

Each of these subsections of siteBody is further broken down into smaller divs based on the position or style requirements. For example, the XXLnow div within the features div floats the column to the right, so I needed to create another div, XXLnavTitle for my title graphic that loads the title as a background graphic and creates the black horizontal rule on the bottom.

The complex positioning of elements in the update section required even more internal divs for positioning than the features section. However, systematically breaking it down top-to-bottom makes it easy to create. This is why planning everything out before you sit down to write the CSS is so important.

The final section of the XXLmag.com is the top 10 list that we pull in from iTunes. I've taken an RSS feed of the top 10 hip-hop albums and the top 10 hip-hop songs. This list is up-to-the-minute accurate with what is selling on iTunes. I used CSS to style the incoming RSS feed to look like it comes from iTunes to ensure users know it is not XXL saying these songs and albums are the best.

With the CSS in place and the home page of the new XXL site created, I just had the final step of integrating the design and CSS with our WordPress back-end CMS. I wanted the home page to live outside the normal WordPress file structure but still post data from the WordPress content, so I couldn't start with an existing template page as I did for the interior pages of XXLmag.com. WordPress's flexible architecture makes this task simple. WordPress works with what it refers to as “the loop," which is used to display each of the posts. The loop formats each post based on specified criteria within the loop. Also, any HTML placed within the loop will be displayed with each post. To add the loop to any page on your site, the page just needs to be a .php file and know where the wp-blog-header.php file resides in relation to the page you want to add the loop to.

For the XXL homepage I added:

Next I added an HTML list item tag so each of the seven headlines goes on its own line and displays the graphic bullet I previously defined in the CSS. I also inserted a WordPress permalink tag so the headlines would link back to the appropriate news story (see Figure 6):

Creating the PHP calls that form the WordPress loop was made easier by the Dreamweaver extension TAGStention. This extension adds a toolbar to Dreamweaver that provides drag-and-drop basic loops and insert headers. It also has wizards for tags with parameters and Help buttons that refer you to WordPress extensive codex.

The results of the XXLmag.com redesign have exceeded our projections. Page views have more than tripled, unique visitors have doubled, and repeat traffic has soared. Users are going deeper into the site and are directly interacting with the content. Advertisers have seen increases in ad views and improved response rates. Furthermore, major advertisers who have never been interested in the magazine before have now begun advertising on the site.

As for the web team, we did it all without increasing headcount, which clearly demonstrates that careful planning along with selecting the right tools and technology, can turn a small web team into a powerful production force.