Diamond Spas has been an ongoing client of ours for many years, so we were thrilled to finally get the opportunity to take on their website redesign, and implement a full mobile responsive website design featuring large photos of their installed products to highlight the excellent quality and craftsmanship of their work. This mobile responsive website redesign project had several key components and goals, including reorganizing all their content and site architecture, merging their existing, but separate blog into the main site platform running on WordPress, changing hosting companies, and improving their organic on-site Search Engine Optimization for over 500 individual pages and posts on the new website.
Mobile Responsive Web Design Process & Considerations
At the beginning of this project, it was immediately clear that the product photos needed to dominate the design and mobile responsive design considerations. Diamond Spas has incredible photo assets of their products, and we wanted to immerse site visitors in these photos with simple & effective marketing messages. The designs were based off a 12-column grid structure, with full-width header photos, and persistent navigation on interior site pages. The homepage also features parallax scrolling for many of the images, and subtle effects on page elements as they scroll into view to create an engaging experience on the site. The mobile responsive aspects of this design were a challenge considering the heavy use of images, with text over images, and the various visual enhancements mentioned above.
In the primary navigation, we chose to keep contact info and phone numbers persistent on all pages, as well as click-to-call functionality on mobile phones. Another consideration is how mobile menus work, which are shown in the screen shots below, while tablets inherit the normal site navigation.
WordPress Content Management System (CMS)
For this mobile responsive web design project, we used WordPress as the engine for a robust Content Management System that the client no manages. We built the entire mobile responsive site leveraging built in WordPress functionality, PLUS additional custom post types, custom fields, and other custom functionality that allow for specific control over every photo, content sections, site navigation, labels, contact forms, and even the meta tags for SEO on the site. WordPress is truly an ideal Content Management System to customize and deliver on projects like this one, especially when a robust blog is also part of the project requirements. For this project, we offered training sessions and ongoing support for the client for any questions that come up, and also to show them how to best use the tools we have in place for the new mobile responsive website.
Other aspects of this project include installation and tracking of Google Analytics with custom conversion events for contact forms throughout the website, Google Webmaster Tools integration and monitoring, as well as social media functionality to tie in closely with an already active social media presence, and MOZ analytics integration for in-depth analytics reporting on a weekly and monthly basis.
This project was a great success on all fronts, and has resulted in a significant increase in new business leads generated through the mobile responsive website, as well as a huge improvement in overall branding and online presence for Diamond Spas.