Combined Efforts Theater Website Design by Greg Johnson

The Combined Efforts Theatre website was created several years ago, and it has grown since it’s original launch. My goal in transitioning the site over to was to create a website that could be easily managed by several people. By distributing the work of keeping the site updated, no individual person is pressured to be the only webmaster. What encourages me about the Combined Efforts Theatre (CET) website is how the site has really become a combined effort!

Site Redesign. Over a year after switching to, still using the same theme, the site was due for some remodeling. Over the past month, I’ve had the privilege of working with Creativity Engineer, Andrea Chapman Day.

Website Header. We had some great creative brainstorming sessions with Mary Vasey (CET Board Member) and during one session the three of us came up with the current series of page headers for the site. The entire header was designed using Apple Keynote. I really enjoy using Keynote for basic graphic design. For more intricate work, I use Adobe Illustrator. I like the header because it gives the site a very unique and creative first impression.

The hands concept was something that Andi came up with, and the photos are hers, as well as the color scheme and the Combined font design.

I’d recently been working with some designs using varied opacity and transparency with layering of paper-like backgrounds. It was an effect that I thought would work well with the header we were designing. The effect you see on the site was created by drawing a rectangle, moving it behind the text (Arrange > Send Back), and then adjusting the opacity. The torn edge is found under the Picture Frame option.

Easy Page Design. Something I started doing with this site that I’d not done before is a hybrid method of updating the site content. Most website Content Management Systems (CMS) don’t offer much in the way of fancy fonts and graphic editing capabilities. For this site, I wanted to combine the power and ease of use that Apple Keynote offers with the easy management that provides. I’ve been using Keynote for years to do graphic design of certain website elements, but hadn’t suggested it as a content contribution system in the past. Yet, using Keynote gives powerful, yet simple, design capabilities to anyone contributing to the site. All I need to do is drag and drop the content provided to me. This way, beginners wouldn’t even need to learn WordPress to contribute content. So, I created a Keynote presentation of 590 pixels wide (to fit the fixed page width) and set it at 800 pixels high. Then shared that with site contributors. For some pages, I had to lengthen the format of the presentation to 1200 pixels so everything would fit. The Keynote presentation page adjustment is found on the first tab of the Inspector, and you can enter custom sizes. When you export the slides as JPG images, they are easily imported as web pages — with all the fonts and graphics you desire.

Accessibility. Like all the sites I design, I wanted this one to be accessible by screen readers (or text to voice devices like the iPhone). I enjoy listening to websites being read to me by my iPhone, and I know that blind people use similar readers to read websites. With the pages designed as graphic images (as described above), the content wouldn’t be readable by a computer. So, to fix this, I added the descriptive text from the original Keynote file. It shows up when you hover with your mouse. This is required by Federal Law for state and government agencies, and it’s something others do to be more accessible.

Search Engine Friendly. As described above, the page images aren’t analyzed by search engines. Yet, by using descriptive text, the pages are easily searchable.

Social Networking. As with all the sites I create, I’ve integrated social networking and helped launch a Facebook page to correspond with the site. The subscription feature is built-in as a widget.

Iowa Theatre Blog. There’s a great local theatre blog that I thought would be nice to feature, so I used the RSS Feed widget to include recent stories from that blog at the bottom of the CET website.

Learn More. There are some other aspects of the website I enjoy. To find out more, visit the site by clicking the image below.

One thought on “Combined Efforts Theater Website Design by Greg Johnson

  1. Pingback: Website Designers | CombinedEfforts Theatre

Comments are closed.