iBlog

Kitt Peak Public Observing Programs

In my day job I am the Web Designer for the National Optical Astronomy Observatory. We run several telescopes in observatories around the world, including Kitt Peak National Observatory about 40 miles south west of Tucson, AZ. Last week I pointed you to a project that I did for the Education Outreach department. Another project that has been keeping me busy lately are a couple of related sites for some public outreach programs run by the Kitt Peak Visitor Center.

There are two programs, one is called the Nightly Observing Program (NOP). This is a program that allows up to 36 people to spend about 3 hours in a dome on Kitt Peak, using some fairly large reflecting telescopes to view the night sky in a way they probably have never experienced it before.

The Advanced Observing Program (AOP) is similar to the NOP except it is limited to two participants, and they spend the night on the mountain, similar to the way a professional astronomer would. They also save the images via a CCD Camera and keep digital copies of them.

The sites were started and maintained by one of the observing techs as a way of providing information about and promoting the programs. As the program has been expanded, and attracts a large audience, I was asked to take over and redesign the site.

The site used to look like this. There was much spaghetti markup, and the design was a bit amateurish. No slight intended to the original designer, as his job is primarily to run the two programs and spend his time with the public and getting great images. He still maintains the AOP Image Gallery, which has some very nice images, many of which have been featured as the Space.com Image of the day, such as this recent one.

The AOP pages take advantage of the beautiful images available, using Todd Dominy’s Flash slide show (via the Flash Satay method) as the header of the page. The navigation menu is a PHP include (as are the header and footer) and uses a somewhat complex bit of CSS to turn a nested list into what you see on the site.

I also recreated Collylogic’s navigation ticks as I put together the navigation. I say recreated because I remembered seeing them somewhere, but I couldn’t remember where. Of course once I had everything figured out I was finally able to track down where I had seen it; I basically do exactly what he describes to swap the images out.

I’ve added some other ideas, such as hiding the fact that you can click on the “here” state of the navigation button by suppressing the hover effect and keeping the cursor from turning to a hand. Additionally, clicking “Preparation” reveals a subnav under that button, which is hidden via CSS until needed.

There are subtle gradients in several places, and even a drop shadow or three thrown in for good measure. The gradient behind the navigation combines with the bottom border of the list items to create the illusion of the borders fading into the background. (The nested list items use the top border).

Perhaps I’ll do a write up on how I accomplished all this, if there is enough interest.

The NOP site works essentially the same way as the AOP, but without the Flash slide show. The headers on those pages are images that relate in some way to the page they are on. Since this is a PHP include the image that is displayed is controlled by CSS via the id on the BODY. The image is in the background of the H1. I use a variant of the LIR to serve the different images. Both sites share the same layout, with slightly different color schemes. The gradients and drop shadows find their way to the NOP pages as well as the star field background, which is an evolutionary change from the background of the old pages.

Of course everything validates…

I hope you like them!