Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > CSS

  • Print
  • + Share This
Like this article? We recommend

Human Factors

Human factors handles prototyping of ideas and does some of the visual design work for the sites. The team is also the production team when sites are coded and takes care of ongoing maintenance of the sites.

The target audience for this project had already been established, so that was one big job that didn't need addressing. According to Rich Evers of human factors, the main driving force of the change was technical—switching from Java to .NET architecture because of Microsoft's stopping its support for Java. "The architecture of the new sites isn't too far from what we had prior to the redesign," says Evers. "It consists of a handful of 'verticals,' each representing a feature of the site. Pretty standard setup. The main focus for the new sites is the bookstore, followed closely by content (articles and such). Some other common areas are the About section, My Account, and Search. Some sites have additional vertical areas that help make their sites unique. For example, Exam Cram has a section called Practice Exams that's unique to that portal."

Though it's a challenge for many web designers, convincing management to switch to XHTML and CSS wasn't an issue for this team. Evers indicates that a few specific factors helped to foster buy-in from management. The move from Java to .NET architecture required a rewrite, for example, so all the teams (product development, human factors, and development) could look for ways to make things more efficient. "Since many of our sites were very similar structurally, we tossed out to the developers the idea of running them all from the same set of back-end code," he notes. "We would apply styling mostly through CSS, along with a few unique-per-site pieces. The developers liked the idea, since such a setup would reduce their code significantly—one file drives the contents of a page across all sites. Very efficient."

At this point, Evers' team presented the idea to product development. The team demonstrated how it could control the visuals by showing the group the CSS Zen Garden site, which is an excellent example of how CSS can change the presentation of a site without touching XHTML.

Product development had to convince all of the publishing groups that the underlying structure of their sites needed to be the same. To help support the idea, human factors produced content-only prototypes—very basic wireframes of each page of the site (see Figure 1). These prototypes were used as discussion points to reach agreement on the content shown on the page and the approximate placement of each object. Human factors also noted variables to come from the databases and editable regions.

Figure 1Figure 1 A wireframe view of the main bookstore page.

As the publishers and product development fleshed out content for each page, human factors started developing the visuals. For most of the sites, the team launched the new architecture and used then-current designs to influence the new setup. Evers says that this technique saved a lot of time in the approval process, and that only a couple of sites had to go through a complete design makeover.

Each site has relatively the same graphic needs, so the team put together "package" files: image files containing all the necessary graphics for a site. This helped keep inventory very organized and easy to update.

  • + Share This
  • 🔖 Save To Your Account