Greenview V2

After a year of strategy, design & development, I'm happy to introduce the new Greenview website.

Work on the new website started in December 2010 with a focus on updating the design, reflecting the church membership and making our content more accessible to various platforms including mobile and tablet whilst being able to integrate with social media platforms also.

DESIGN

To kick off the design phase of the project, a series of moodboards were curated to define the typography, navigation styles, page layout and imagery that we saw the new site using.

From there, a series of page wireframes were developed to show the skeletal framework of the site. These help depict the page layout, arrangement of content and interface elements.

With the wireframes complete we explored a number of visual designs in Photoshop. Using the layouts from the wireframes, the designs explored colour options, font choices and image use.

That phase continued through until April 2011.

DEVELOPMENT

The old site was running on ExpressionEngine 1.x and served us well, so moving to ExpressionEngine 2.x was the logical step.

The front-end templates were developed using HTML5 markup and uses a wee bit of CSS3 for some effects that previously would have required JavaScript - like the animations on the utility nav, the transformation on the 'What's Going On at Greenview' on the homepage or the hover effect on the blogger network.

The site uses jQuery as its JavaScript framework for things like the 'Don't click me' slider, the audio cover flow slider and the fade in/out effect on the event listings.

We're making use of a few third-party APIs as well - strangely enough all are utilised in the website footer. Our newsletter signup adds email addresses to our MailChimp mailing list. The wee map hooks into the Google Maps API. Finally, we use the Flickr API to pull in photos from the church Flickr group.

MOBILE STRATEGY

A big part of the new site was to make our content more readily accessible to mobile and tablet users. We had 2 options available to us, a responsive website or a separate mobile website. For me personally, there's no right or wrong answer here. I can see the benefits to both scenarios. We opted for the separate mobile site which ExpressionEngine makes very easy.

THE FUTURE

A website is a living, breathing entity. It's never done. We've got some exciting features on the project backlog that we'll be rolling out incrementally but for now, version 2.0 does what it needs to.

TECHNICAL SPECIFICATIONS

  • HTML5
  • CSS3
  • SASS
  • Git
  • jQuery
  • ExpressionEngine CMS
  • Google Maps API
  • Flickr API
  • MailChimp newsletter API