Today we rolled out a new design for the Go Worship Network.  It is a responsive design that uses the Twitter Bootstrap 3 framework with buttons and icons from Font Awesome.  After receiving the artwork and the overall vision, we worked diligently to create a professional, functional, and modern website that would render beautifully on desktops, tablets, and mobiles alike.

Design and Development

The first step was to prototype the homepage and general layout.  For the fonts, we chose Merriweather for the headings with a slight text shadow and standard sans-serif family(Arial, Helvetica, sans-serif) for the body text. Once the mock up was complete to the customer’s liking, we began adding features.

An image slider from the previous site was removed in favor of a custom slider with a fixed height to keep the page from shifting as the slider progressed. We were given an image that was to be used for the main content area of the homepage.  As delivered, the colors didn’t follow the scheme for the rest of the site, so we converted the image to a semi-transparent png via Gimp.  Using the -webkit-background-size:cover CSS element style,  the newly transparent image was used to cover the main content area.

It was requested that we add 3 link sections to the footer that would link to pages for third party sponsors and participants.  The footer uses a dark background, so we went with a slightly lighter background color for the links section and set the opacity of the headers to .3 to allow for the use of a standard color without it being too overbearing on the darker background.

As with most of the sites we design, we used the toplink jQuery plugin.  The implementation of this plugin is extremely simple, and by using a large font size and the icon-angle-up icon from Font Awesome, the topLink was complete in a matter of minutes.

Next, we pulled out the prod and added our branding.

Deployment

As with most wordpress themes, deployment is a breeze.  The theme directory was copied to the production server and then activated through the wordpress admin.

The site was already flush with content, and we had already identified the content areas that would have to be modified to work with the new theme.  Most of these changes were removing HTML tables(yuck) and replacing them with the Bootstrap 3 grid rows and columns.  The main sidebar was modified to include the blog categories to make browsing the site easier for users and search engines.  We also added cross links to several pages to make traversing related pages easier.

Conclusion

The overall project was a success and the end result is something that both TechANYWHERE and Go Worship can be proud of.  As with all development projects, the open line of communication with the customer is crucial.  It is impossible to capture all requirements on the front end, so every project should be flexible enough to allow for changes at any time during development.