Driven Communications‘ client Rose Pest Solutions provides residential and commercial pest control services in several states, and the website was a wealth knowledge complete blogs, pest encyclopedia, video, referral programs and other materials that support their customers. As starting point for many new customers, Rose wanted to funnel new prospects to the correct regional office and offer content that was easily accessed via mobile devices. This meant content need to be tailored depending on a persons region. Rose had an investment in a feature rich content management system called Branch, and needed to preserve existing content and data while providing web site conducive to mobile use.
ActiveEngine Software created a new “skin” for the content management system comprised of Bootstrap 3.2.3 CSS and jQuery, producing a mobile responsive site for all content. However, a different goal needed to be fulfilled for mobile users: allow to contact Rose right away, as they have their phone in hand. Click to call is used through out the site as a convenient guide to users.
Given that much of the content has been created with Rose’s expertise, it was vital that the existing content be re-used. Also, because there was a new audience of users, the content creators could not be burdened with extra working create information for a web format and a mobile format. The philosophy of “write once / use many” is repeated through out the site where subject matter expects create new posts and do not have to worry about producing separate content for mobile users. YouTube videos are an important part of Rose Pest Solution information library, and these are also included in the mobile pages.
The mobile format presented a new challenge: drop down menus and navigation tabs for web applications do not work well on the mobile platform. So how items of importance be highlighted, driving site visitors to relevant content? And, what if these items need to change?
A push menu architecture was implemented which create unobtrusive navigation and an “uncluttered” approach. The first goal of the mobile site of present relevant contact choices is preserved while providing a means of navigation that is intuitive. Tap once, the menu appears, tap again to hide.
The elements in the push menu are set by the content creators, so should a new feature need to added, the editors can do so by simply editing a list, and the menu is automatically updated.
On the old site, a user had to enter a zip to get a phone number specific to their region. With geo-location based on IP address, the need for typing is alleviated. When coming to site while on wifi, RoseSolustions.com acquires the users’ IP address, performs a reverse geo lookup and match the users region to the appropriate service center phone number. This process occurs as soon as they user hits the site, and seamlessly provides the information specific to their location.
Mobile presents different challenge in that the IP address cannot be relied upon; instead, reverse geo lookup was perform with Google Maps API. Click once to share location and then the matching service center number is supplied.
14 Oct 2013
Ridgemoor Supply had a product catalog site powered by an extensive database of product and supplier information. A robust CMS application allows Ridgemoor to update their supply catalog, and supply photos. While the site had rich interface comprised on HTML 5 and CSS styling, the SEO standings were being impacted by speed of the server application. Yet, providing a complete client-side solution and REST architecture would hinder the SEO results further.
ActiveEngine Software created a new application that consumed the product data via an API, retaining the current database schema and allowing for a web site launch with zero impact on the content suppliers.
The solution was to create a web service API that provided product data via REST calls. This was accomplished using ASP.Net WebAPI from Microsoft. The underlying components for fetching data remained unchanged.
A separate MVC 4 web application was created to become the face of the new web site. Since the payload from the REST calls was light, server side templating with Razor was selected to create the page content, thus preserving all SEO information. The look and feel was created using Twitter Bootstrap and jQuery. Full text search of the catalog products and suppliers by the site visitors was implemented using the jQuery plug-in DataTables.Net. Since the data resides on the page for the products, the search feature is extremely fast.
An Architecture That Allows For New Features
With a solid process for fetching and displaying data, the next challenge was to create a feature that would allow site visitors to create a quote by visiting each change, clicking and supplying the quantity. While a shopping cart solution may come to mind, this would have required that a more complex feature set be created on the server, with accounts, user profiles and the like. Instead, HTML 5 storage technology was used as the data store for collecting the product and quantity. Each page uses a jQuery framework KnockoutJS to create a simple and effective means of collecting items for a quote. The customer can search, and add the item to the quote from each product page. No additional web service was required other than an end point for submitting the quote and sending a subsequent email.