Small town business are at the heart of our client base. When Bippus State Bank, a Huntington-based bank in northeast Indiana, said they needed a refresh, we were excited to work with them! Their long history and commitment to their community in Huntington, Roanoke, and Manchester, Indiana is laudable. In a time when banks merge with each other to gain profits, BSB stays independent and local.

One thing was clear – BSB needed and wanted a content management system so they could be in control of their content. Instead of editing static HTML in Dreamweaver, we upgraded them to ExpressionEngine, a PHP-based CMS complete with CSS styling to promote a consistent, modern look and feel, with beautiful, bold typography.

Beautifully styled tables with easy-to-update rates and product matrices.

Some other great features:

• Special content types for bank and ATM locations, that dynamically interact with Google Maps to provide custom directions. This increases the scalability and longevity of the site, as BSB expands and adds locations and ATMs.
• Specially-styled rate tables that display interest rates, product matrices, and structured information in a consistent and easy-to-read manner.
• A Javascript rotating banner and promotion carousel on the homepage, so BSB can constantly display new and refreshed information.
• A restyled portal to their online banking system — allowing customers to login from the homepage without interrupting their user experience.

We’re glad we can help the great staff at Bippus State Bank take control of their content and stay on the leading edge with their website.

Check out their site at BippusBank.com! And click below to see some additional screenshots from Bippus Bank’s website.

We had the opportunity to help them create their first website. When we built it out in ExpressionEngine, we knew they needed some strong photography, clear messaging and a straightforward navigation. We did just that. With simple, easy language, vivid pictures and bold primary colors, they emanate stability, rationality and friendliness; all the staples of a good insurance agency.

Be sure to find the automatically updated articles posted via Trusted Choice, an authorizing agency for independent insurance agents, and a custom “Meet the Team” page that expands contact information for each of their agents and staff!

Check them out!

Some screengrabs:

That’s why we were thrilled to be featured on EllisLab’s ExpressionEngine showcase this week, of the best new ExpressionEngine-equipped sites on the web! Our newly-launched solution for Ideal Suburban Homes caught their attention, as an example of how many different types of data can interact with each other (see our launch post, here).

A quote pulled by ExpressionEngine from our lead design, Aaron Bushnell:

Having custom content types allows us to ask only for the important information and then display that data on the site in numerous locations automatically. It, simply, allows the client to spend less time in the CMS and more time focused on their business.

Thanks, EllisLabs, for putting us in the spotlight!

Read more about ExpressionEngine here.

The boring, yet needed, introduction

We recently launched a site that utilizes Solspace Super Search and Malsup’s jQuery Form plugin for a handy AJAX filter. The filter simply gathers homes that fit certain parameters such as “number of bedrooms”, “number of bathrooms”, “square footage”, etc.

Luckily, Super Search and Malsup’s Form Plugin takes 99% of the work out of all this and you get to look like you know what you’re doing.

For this tutorial, I’m going to assume a few things:

1. You know your way around ExpressionEngine
2. You have a “Homes” channel setup and some entries with custom fields like “Bedrooms (select dropdown)”, “Bathrooms (select dropdown)”, and “Square Footage (text input)”
3. You know how to setup jQuery plugins on your site
4. You have no clue how to setup AJAX anything (I didn’t when we set this up)

A note: Within Super Search, you need to change your “Square Footage” field to an integer. This will allow you to search the value numerically rather than textually.

So, let’s get started.

The business

Demo: A (more developed) example of the final product.

Your basic template with filter (search/index):

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Search for a Home</title>
    <meta charset="utf-8">
    {!-- jQuery, Malsup's Form Plugin, script for the Form Plugin --}
    <script src="http://code.jquery.com/jquery-1.7.min.js"></script>
    <script src="http://jquery.malsup.com/form/jquery.form.js"></script>
    <script>
        $(document).ready(function() {
            var options = {
                target: '#results',
                beforeSubmit:  showRequest
            };
            $('#filter').ajaxForm(options);
        });
        
        // Show loading message and submit form
        function showRequest(formData, jqForm, options) {
            $('#results').prepend('<span>Searching</span>');    
            return true;
        }
    </script>
</head>
<body>
    <h1>Search for a Home</h1>
    
    {!-- This is where the results of the filter will be placed into. You can insert stuff in here initially, but it will be replaced by results when the form is used. --}
    <div id="results">
        <p>I will be replaced when you search. Sad day.</p>
    </div>
    
    {!-- The form to filter your results. Note the template I am using in the action parameter in the form tag --}
    <form id="filter" method="post" action="{path='search/results'}">
        {exp:super_search:search}
            <label>
                Bedrooms
                <select name="bedrooms-from">
                    <option value="1">1+</option>
                    <option value="2">2+</option>
                    <option value="3">3+</option>
                    <option value="4">4+</option>
                    <option value="5">5+</option>
                    <option value="6">6+</option>
                    <option value="7">7+</option>
                    <option value="8">8+</option>
                    <option value="9">9+</option>
                    <option value="10">10+</option>
                </select>
            </label>
            
            <label>
                Bathrooms
                <select name="bathrooms-from">
                    <option value="1">1+</option>
                    <option value="2">2+</option>
                    <option value="3">3+</option>
                    <option value="4">4+</option>
                    <option value="5">5+</option>
                    <option value="6">6+</option>
                    <option value="7">7+</option>
                    <option value="8">8+</option>
                    <option value="9">9+</option>
                    <option value="10">10+</option>
                </select>
            </label>
                    
            <label>
                Square Footage (Min)
                <select name="square_feet-from">
                    <option value="">All</option>
                    <option value="200">200</option>
                    <option value="400">400</option>
                    <option value="600">600</option>
                    <option value="800">800</option>
                    <option value="1000">1,000</option>
                    <option value="1200">1,200</option>
                    <option value="1400">1,400</option>
                    <option value="1600">1,600</option>
                    <option value="1800">1,800</option>
                    <option value="2000">2,000</option>
                    <option value="2200">2,200</option>
                    <option value="2400">2,400</option>
                    <option value="2600">2,600</option>
                    <option value="2800">2,800</option>
                    <option value="3000">3,000</option>
                </select>
            </label>
            <label>
                Square Footage (Max)
                <select name="square_feet-to">
                    <option value="">All</option>
                    <option value="200">200</option>
                    <option value="400">400</option>
                    <option value="600">600</option>
                    <option value="800">800</option>
                    <option value="1000">1,000</option>
                    <option value="1200">1,200</option>
                    <option value="1400">1,400</option>
                    <option value="1600">1,600</option>
                    <option value="1800">1,800</option>
                    <option value="2000">2,000</option>
                    <option value="2200">2,200</option>
                    <option value="2400">2,400</option>
                    <option value="2600">2,600</option>
                    <option value="2800">2,800</option>
                    <option value="3000">3,000</option>
                </select>
            </label>      
            <input type="submit" name="submit" value="Search" />
        {/exp:super_search:search}
    </form>
</body>
</html>

									

Your results template (search/results):

{exp:super_search:results channel="home"}
    {if super_search_no_results}
        <p>No homes were found for your search. Try being less specific with your filter.</p>
    {/if}
    <div class="result">
        <h3>{title}</h3>
        <p>This home has {bedrooms} bedrooms, {bathrooms} bathrooms, and is {square_feet} square feet.</p>
    </div>
{/exp:super_search:results}
									

The End

So, that’s it. Again, it’s the wonderful developers who make complicated things really easy. Massive props to Solspace and Malsup.

Recently, we were honored with the opportunity to work with Wells County, Indiana’s Chamber of Commerce to redesign their website. The Wells County Economic Development Commission, whose site we’ve done previously, took notice and talked with us about a refresh.

We love Wells County. Not only are they primed to be a regional economic force (being so close to Fort Wayne International Airport) with a diverse and dynamic industry base, but their motto rings true: Where ideas and success converge. So, naturally, we jumped at the chance to get involved!

Check out their site for more information about Wells County. Notice the clean, green, blue and white color scheme. Explore this top-to-bottom customized website, built on a dynamic ExpressionEngine content management system. We truly believe its custom functionality truly reflects the diversity and vibrancy of Wells County.

Check out a few other page designs below, or check out their website!

District 79 State Representative Matt Lehman needed a website to make him more accessible to the general public. We designed a new site for him to discuss his stance on various issues, publicize events, offer volunteer opportunities, and give people the opportunity to learn more about him and his campaign. We also placed the site in ExpressionEngine, so that Matt could easily edit the site himself to stay current with the latest issues and events.

Check out the site.

Sharp Shooter Sports Photography is an exciting and unique business serving the sports communities of Fort Wayne and the surrounding areas.  Sharp Shooter focuses on capturing the action in all sports — inside or out, day or night, rain or shine.  In creating their new website, we focused on an innovative approach to drawing attention to these “action shots” by incorporating a large interactive slideshow on both the home page and galleries pages.  We also made it easy for them to update photos by incorporating ExpressionEngine as a content management system.  The site also features a proofing area for clients to go in and privately view their photos.

Check out the site.

Virtual Umbrella needed a brand new design to help them showcase their professionalism and expertise in virtual machine server environments. We used a simple gray and blue-green palette for the layout. The site boasts news, a member section, and great information about the business. The site is wrapped into ExpressionEngine for easy content management.

Check out the site.

Wells Chamber of Commerce needed a redesign to unify the entire site in a content management system and give them a fresh look. We used rich blues and vivid greens to build a modern site with modern appeal. We used Typekit to create better web fonts throughout the entire site and ExpressionEngine to manage the content.

Check out the site.

The City of Berne wanted a modern website to help them communicate news, events, and other general information to the citizens and visitors. Berne has a rich Swiss history that permeates through the entire city. We modeled the website after this style with wooden textures, embellishments, and more. We wrapped the entire design into ExpressionEngine to help manage content easily and effectively. The site features news, a calendar of events, and much more.

Check out the site.