On September 14th, 2012, we launched BESH’s completely redesigned website with a fresh new look and clear navigation to all of their content. With this new website, anyone who comes looking for information will be able to find it through the easy navigation at the top or through the search bar on the right. In addition to the portfolio, which is the meat of it all for BESH, visitors can also get up to date information from the blog on the home page or the News & Events pages. All and all, it’s a much needed boost to BESH’s online presence and will serve them well for a long time.

www.besandh.com
Image of www.BESandH.com homepage

The goal of this new design was to put a lot of visual interest into the home page so the viewer is instantly engaged. The imagery and placement of certain keywords was used to give a first time viewer an idea of what BESH does without having to do a lot of reading. In the header, we placed the words “Engineers / Surveyors / Land Planners” along with the logo which has a surveyors compass in it. This explains right away what the company does. We accompanied that with a visually pleasing photograph as the background in addition to the photo rotator at the top of the content which shows some of the completed projects by BESH.

There are several key aspects to navigating the site: main menu at the top with drop down menus, the search bar on the right, and a mini navigation in the footer. The dropdown menu is nice because it shows all sub links in that category in one dropdown as opposed to multiple levels of hovering and hoping you don’t miss and have to start over. It’s simple touches like this that make it easy to navigate.

The search bar is pretty standard, but when it isn’t there, you really notice. In the day of Google searches, it seems everywhere you go you expect to see a search bar. Lastly is the footer navigation. This is an underutilized place to have an additional navigation option. Several pages on BESH’s site are rather long and sometimes you don’t want to have to scroll up, especially if you’re moving to an entirely different part of the website. It’s a nice touch.

 

The last navigation option we added is what we call a breadcrumb navigation. It will look at where you are on the website and allow you to back up to a different level. For example, the top level is the home page. The 2nd level are the main links at the top. 3rd level are the bold links in the dropdown, and the 4th level are the links with the bullets in the dropdown. So you can click back to any of those levels in the order of where you are in the website.

The final design element I want to point out is the footer. The footer is often overlooked but it can be a really great place to tuck some information that you want on every page. In this case, we have the main navigation links, contact information, social media information, and even a fully functional map. Yes, all of this is available on the Contact Us page, but you don’t want the user to have to click any more than they have to to get to it. It’s on every page! Plus, it looks really attractive and adds some interest to the bottom of your website as opposed to it just ending at nothing.

The BESH website was a lot of fun to work on and the folks there were a pleasure to work with.

Project Team
Developer: Chris Ayres
Designer: Paul Long

Technical Stuff:
Wordpress 3.4.2
Plugins:

CSS2/3 and HTML 4.1
Photo Rotator: Based off the jQuery Cycle Plugin