Thursday, June 25th, 2009 (updated 18 Nov ’09)

Adam Khan | Brighton, England

http://engaging.net/news/golders-revamp

Irving Design revamps London church site with ExpressionEngine

Username

Password

Forgot your password?

Register

Elsewhere...

Another excellent piece by Andy Rutledge, an admonition/checklist for being a professional designer/developer.

Both the BBC and Fox news web sites have recently been redesigned, with the BBC losing its looks and Fox getting neat and serious.

jQuery diagramming with jsPlumb — cool.

Another wonderful blog post by Walter Russell Mead, this time hoping that the blogosphere find a not-so-distant mirror in 18th-century London.

Google argues that its mobile YouTube site is better than its YouTube iPhone app.

Jakob Nielsen tests reading usability on the iPad and Kindle and reports that they’re almost as good as reading on paper. People didn’t like reading on PCs — it reminded them of work.

Falling out of love with the iPad. None of this surprises me.

Wow, icons made entirely in CSS3 (currently Safari, Chrome only).

Short film created entirely on the iPhone 4.

A day in the early life of an iPhone 4.

A

fter designing the new web site for the Golders Green Parish Church, Mark Irving of Irving Design asked Engaging.net to deploy the site in two steps: first as a static site, then as a content-managed site powered by ExpressionEngine. Wisely, Mark conceived the site to have only two layouts; every page (except the homepage) would conform either to a words-focused or a pictures-focused template. This elegant approach helped reduce the workload and thereby the cost.

The Golders Green Parish Church web site homepage

 

First, we coded the HTML/CSS from comps supplied by Mark. There were only three pages: the homepage, a page about children’s activities using the words-focused template, and a page about the church staff in the pictures template. Thank you “The” Danny Barnes for the HTML/CSS mark-up.

After launching the static site we began the dynamic setup, populating the EE installation with channels and fields. The EE channels were grouped into two types, core and multimedia, where entries in multimedia channels — such as photos, PDF documents and sound files — can be related to any core entries. Thanks again to Yvonne Martinsson of fellow EE Pro Network member Studio.Freewheelin for implementing this build-out so smoothly.

Another way we kept costs down was by relying on jQuery. Many of the site’s design wheels would have taken much longer had clever javascripters not already invented elegant ways to do them.

To wit, in Mark’s design all photos have dropshadows and photo sizes can vary. The jQuery Dropshadow plugin by Larry Stevens handles this nicely.

Mark wanted the homepage intro photo to be a slideshow. For this we recycled the trusty Cycle jQuery plugin by M. Alsup.

For the main menu, the corners of the first and last entries were to be rounded. There are a number of jQuery plugins for this, but I went with David Turnbull and Steven Wittens’s Corners because unlike others it handles transparency, which was required because behind the menu is a gradient background.

The menu itself runs on the Menu jQuery plugin by Marco van Hylckama Vlieg.

And in order to display photos fullsize from the photos layout, we added the Lightbox jQuery plugin by Leandro Vieira Pinho.

With extensive use of jQuery plugins on the client-side, a well-architected ExpressionEngine deployment on the server side, and a fresh and flexible design serving every page, this is an inexpensive yet powerful contemporary web site that the church staff members themselves are now operating.