St. William

The grounds of St. William the Abbot RC Church in Seaford, NY

St. William the Abbot

Design / HTML, CSS, jQuery / PHP

St. William the Abbot is a a welcoming community of faith, guided by the Holy Spirit and centered in God’s Word and the Eucharist.

St. William the Abbot RC Church logo
St. William the Abbot RC Church home page
St. William the Abbot RC Church Bulletins page
St. William the Abbot RC Church Schedules page

The Beginning

St. William the Abbot’s website before it’s redesign.
St. William the Abbot’s website before it’s redesign.

While working at St. William the Abbot as their Assistant Director of Music, I noticed that their website was… well, poor at best.

St. William the Abbot was looking to attract new members to their community of faith. With a lot of younger families moving into the neighborhood, all of which use the web to find the local churches they want to visit, they decided it was time for a face lift.

The Design

When you walk around the grounds of St. William in the spring and summer, you are engulfed with nature’s colors. On a clear day, you can view the beautiful blue sky over Long Island, the green of the leaves and grass, and the colorful flowers planted throughout the grounds. It gives you such a feeling of peace; a feeling that you are in a good, comfortable, nurturing and welcoming place.

For new members looking for a church home, these are the emotions and feelings that make you want to attend. The blues and greens really pop on the page, and the greys surrounding the content help make the content stand out.

The Content & Layout

On their previous website, it was extremely difficult to find anything that you were looking for. The navigation sidebar had over 45 links, categorized in an illogical order. The easiest solution was to build a sitemap that put all of the links into reasonable categories to help make things easier to find. I also developed a tiered navigation bar, where each tier is a slightly different color. This helps the users know which section of the website they are currently visiting.

I kept the layout simple: content on the right and a sidebar on the left. The sidebar on most pages holds a calendar that informs you of events coming up at St. William. If you are on a page about a specific ministry, the calendar will only show you events for that ministry.

On the home page, we present the user with information that they need immediately. You never have to search around the website for today’s Mass schedule, readings, or current calendar events. The user is also presented with a beautiful photo gallery of recent events that occurred. All of these efforts help encourage visitors to continue to use and trust the website.

The Code

Warning: Techy stuff to follow.

There is a lot of custom PHP MVC code going on here. All of the calendars, schedules, readings and Mass times are hand-coded, and although I don’t consider myself an expert at back-end coding, it was great to get my hands dirty.

There’s also an extensive amount of jQuery to make all of the dropdowns, photo galleries and form inputs working correctly. I like jQuery because it takes the thought out of coding perfect Javascript for all browsers.

Okay: That’s the end of the techy stuff.

The Future

I am currently working to make this website responsive. When I originally designed this website, the responsive movement was just beginning. Making the website responsive would certainly take it to another level.


St. William the Abbot »