NASA develops style sheets, tools for Web sites

Last year, NASA decreed that its many Web sites should sport a common look and feel. Now the space agency has introduced a variety of tools to help NASA Web managers meet this goal.

Bryan Stephenson, a Web developer at the Goddard Space Flight Center in Greenbelt, Md., has developed a set of style sheets that comply with the NASA format. Although originally designed for a Goddard Web site, other NASA agencies’ Web managers can slip their Web content into these style sheets as well. Stephenson used the World Wide Web Consortium’s Cascading Style Sheets format.

In addition to the style sheets, Goddard also offers an image generator that can produce navigational boxes and section headers with the correct color, sizes and fonts. Designed by Emma Antunes, Web manager for Goddard, this service is offered online through a Web site accessible for users from the .gov and .mil domains.

“If you don’t have graphics design expertise, this really helps ensure you meet style guidelines without having to go through any extra effort,” Antunes said. She spoke at the Website Evaluation conference held recently in Washington by the Digital Government Institute LLC of Bethesda, Md.

NASA headquarters has also set up a site to help its managers get with the new look. The site includes common image files and metadata tags, as well as CSS templates that developers can easily download and modify for their own sites.

These prefabricated style sheets and images may come in handy for NASA researchers and program managers, many of whom post their own Web pages but may not have the in-house expertise to design the pages to NASA’s new specifications.

NASA operates as a federated model, with different NASA centers working together to undertake agency missions. As a result, a vast number of different Web sites have sprung up dedicated to different programs and areas of research—with wildly diverging styles.

To help unify the appearance these pages, NASA headquarters released a guidebook in 2004 that defined how content should be placed and formatted on Web sites. Although the specifications detailed what Web sites should look like, NASA Web managers still had to translate them into operational code. This current crop of aids can help in this task.

Stephenson’s files set background colors, behaviors of the buttons, fonts and positions of the text on the Web page. The zipped stylesheet packages come in formats for designing one-, two- or three-column pages. Depending on how their pages are delivered to the user, Web managers can use a basic HTML package, a server-side package or a PHP package. Additional templates are also provided for supporting older browsers, handheld computers and printing.

The CSS-based design of the style sheets takes up very little space, Stephenson said, because the approach does not require any images. When a user calls up a Web page, a note in that page refers the browser to an accompanying style sheet, which has instructions on how to render the page. This textual coding of the style elements also ensures that the pages are Section 508-compliant, he said.

Rendering a CSS-styled Web page requires a browser that is CSS capable. Brian Dunbar, Internet services manager for NASA’s Office of Public Affairs, said that the Affinity templates have been in place for some time now but until only recently have been only of limited use, since NASA still officially supported Netscape 4.7—the last major browser release that did not fully support CSS. Since most NASA users have upgraded to a newer version of that browser or some other browser, NASA can now make full use of CSS.

Although the CSS style sheets can render navigational boxes and section headers, they require at least some expertise in working with HTML code. Antunes designed the image generator to be even easier to work with than CSS sheets.

For this application, an administrator enters the text and the proportions of the navigational box needed and the application returns an image file with the text in the correct font, color and rollover capabilities. Users can then download the resulting images and supporting JavaScript. Antunes wrote the graphics generator in Adobe ColdFusion, using the ImageFlare custom tag from Efflare Systems of Acworth, Ga.

The image generator output is easier to use, but resulting files demand more bandwidth to download and make the source file of Web pages more complicated, Antunes said.

About the Author

Connect with the GCN staff on Twitter @GCNtech.


  • Government Innovation Awards
    Government Innovation Awards -

    Congratulations to the 2021 Rising Stars

    These early-career leaders already are having an outsized impact on government IT.

  • Acquisition
    Shutterstock ID 169474442 By Maxx-Studio

    The growing importance of GWACs

    One of the government's most popular methods for buying emerging technologies and critical IT services faces significant challenges in an ever-changing marketplace

Stay Connected