First off, we know it has not been that long since we launched our last website design. But we just could’nt resist tinkering. I was also never happy with the way it looked on mobile devices. Plus, we were inspired by the look of the new Windows 8 operating system, so we decided to see how far we could push the WordPress framework that our website runs on.
For those of you who find some, or hopefully all, of what we did interesting, I thought I would take this opportunity to not only introduce the new design, but also give you some background on how we created it. Let’s start with the homepage. To the right you can see a static image of our “Metro” theming, if you go to the actual page you will get a better idea of what’s going on.
The blocks on the top and bottom give you more information when you hover over them and are clickable to their respective areas. We are making an assumption that, with so many of our target audience using smartphones, what might have seemed confusing a few years ago, is more intuitive today. We contemplated using “live tiles”, but thought it would be too much going on for the browser version and saved that for the mobile version, which I will talk about in a bit. The six panels in the middle show a portion of a title, which we hope intrigues the visitor to hover over them at which time they slide open to highlight a featured solution or service. We have also placed our social media connector links at the top of this and every page in the site to encourage sharing.
As of this writing, this site has over 70 pages of content, not including the blog, so our challenge was to try and present a lot of information in such a way that a visitor would get neither lost or overwhelmed, at least not too much.
The internal pages all share the same layout to make navigation easier. Across the top are the same main navigation buttons leading the the primary sections of our site. To further aid in navigation, we have a breadcrumb line just above the navigation band so users know where they are at all times.
We also color coded each section. When a visitor is in the Consulting section for example the top of the sidebar reminds them of that, also all of the links and hover effects are in the “Consulting” color, orange. The sidebar also has sublinks to the other main areas of Consulting for the different services we offer. On each of the main page content headers we used a large image of a person or people in a setting that felt appropriate for the area. For the sub-sections we used a color coded header without an image so we did not overuse the image idea. Moving down the sidebar, we are using a quote rotator to flash testimonials throughout the site. The footer, which is on every internal page, shows visitors our most recent posts to the blog which are dynamically updated, we also give them an opportunity to signup for our newsletter asking for no more than an email address, we reiterate our contact information, and lastly we show our upcoming webinar schedule, which is also dynamically populated.
One area where the sidebar is different is on the Verticals subpages. We made the assumption that if you are involved with, for example, Banking, and you clicked on the Banking vertical link, you probably were not interested in the other verticals. So on any vertical subpage, instead of showing links to the other verticals, we instead show links to blog posts and/or case studies that were tagged with “Banking”.
I mentoned that we have over 70 pages on this website, but in addition to a lot of pages, many of these pages also have a lot of content, the banking page is on the verge of having too much text for someone to read at once.
People are funny, if they get to a page with too much information, they will usually click off, but if that information is broken up and served in pieces, they usually will consume it. So we employed a few tricks as you can see in the content body section of the Office 365 page on the left. First off, we broke a large amount of content into collapsable sections. The visitor is only asked to consume a small amount of content, and at the end is presented with a headline for another small section of content. Before you know it, they could have read the Gettysburg Address.
We also linked our marketing and demo videos to icons which launch the videos in frames floating over the content so it feels like less content.
The basic layout is the same as all the other pages, but in the sidebar we added the social connector links and our phone number and info email. The Contact form looks pretty normal, but it’s what happens after someone submits it that gets interesting. First of all, submitting this form does a lot more than just send us an email alert and add them to our mailing list, it also adds them to our Microsoft Dynamics CRM system as a new lead. In our CRM we can create all kinds of workflows that trigger automatically. For example, if our contact form included a dropdown box for people to make a selection for say… their particular industry, CRM could have triggered a workflow to add them to a special list for that industry, and maybe automatically sent them an email with links to any case studies we have on that particular industry, etc. There are all kinds of very granular things that can be done here.
In addition to these CRM capabilities, we also have built into our site some tracking capabilities. Each page of our website contains tracking code, not unlike Google Analytics code, but this code sends data to our CRM. Every visitor to every page of our site is tracked… yes if you are reading this, it’s too late. But not to worry, at this stage all we know is your ip address and what pages you looked at. But if you were to submit the contact form, or even the newsletter form, bammo, all of your viewing history gets connected to your lead record in our system. We can see exactly what pages you looked at and for how long. So don’t even try and act like you don’t know who I am when I call you.
We really liked the way the Windows Phone operating system looked, we recently upgraded all company phones to the new Lumia 900 (which is awesome by the way). The operating system is very intuitive and easy to operate, so we flat-out ripped it off. If you go to our site on any mobile device you can see how it works. We incorporated some of the live tiles, without overdoing it. Very quicky a user can see the 6 main areas we want them to get to on a mobile device. The mobile version of our site has fewer pages and less content on each page understanding that a mobile user usually is just perusing, and if they are really interested will probably go back to our site when they are at their desk for more information. So the whole site is somewhat abbreviated.
Again the interior pages of the mobile site all have the same look and feel and are color coded like the main site. One of the things that you have to think about in designing for mobile is the fact that there are no “hover” effects on a mobile version, so you cannot rely on that technique to guide visitors. There is also not a lot of real estate for a navigation system on the internal pages, so we used a “menu” button which drops the navigation down over the page.
We contemplated making an app, for about a minute, and decide a mobilized website was the better way to go. It only requires one version to be viewed on any device.
So there you go, I hope you like what we have done, if it inspired you at all here is a list of the pieces. Unfortuantely, you cannot simply install all these pieces and have a similar site as we heavily modified everything, but if you are good at HTML and CSS you can probably figure it out, if not, I would not bother trying, instead call us, lol.
Platform: WordPress Version 3.3.2 Free
Base Theme: U-Design $35.00
Related Posts by Category Widget Free
Testimonials Widget Free
WPtouch Pro $49.00
Contact CRM and tracking aspects: Contact Us