How to Add a Contact Sidebar to Your Website Department Pages

Back in the old brick-and-mortar retail world, department stores were an institution. They made the whole shopping experience a delight.

Sure, there was a huge convenience factor with having lots of different products in one gigantic warehouse the size of a football field. I mean, who doesn't want to try on a new pair of acid-washed jeans while picking up parts for your garbage disposal?

All kidding aside, what really made a store like a Macy's or Sears work was the organization of the experience. By segmenting everything in the right manner, shoppers could consult a directory and quickly find an escalator to reach sporting goods or apparel. Along the way, they were exposed to other departments.

A lot has changed in the retail world. But even as everything shifts to a digital floorplan, the notion of "departments" is still relevant across websites. In fact, department pages can be a vital part of an organization's digital experience. This makes a lot of sense when it comes to eCommerce websites that organize goods around the customer. Consider Best Buy: even in a world where every brand can have a shopping cart on their site, they offer convenience, cross-selling, and merchandising in a way that evokes the classic browsing of a brick-and-mortar store.

But what about public sector agencies? They have departments, too – but instead of "cosmetics" or "toys," they feature sections like "Utilities" or "Parks and Recreation." In these cases, visitors are most likely searching for details like office hours or how to pay a bill. Still, there's an opportunity to package a department as an entity, so visitors can get a sense of what it offers and potentially solve more of their problems in the future.

So what makes a great department page?

For eCommerce websites, it's all about the buy flow, so clarity around categories and moving to a quick purchase is key (the fewer steps, the better). If a customer wants to engage with the head of a department about an order or even to lodge a complaint, it might make sense to have relevant information on your department page to help direct their inquiries.

Public sector departments are a little different. The transactions might be more complex, like resolving a tax lien or updating a DMV record. But most times, it's just about answering a question – and that's why you should make it easy for users to connect with the right people.

On your department pages, you can also include details about managers or officials, as well as the individual department's direct contact information (this helps avoid pushing calls from the main switchboard or front office). This can include phone, email, directions, and even social media channels. Sometimes, a featured biography and photo of a department head can put a face to the mission and improve your engagement. 

Here are a few more things you might want to include on your department pages:

1) Mission Statement

While every organization has a high-level mission, each department might also have its own charter to an audience or a local community. Including this on your department page can help reinforce your goals for serving customers or constituents. It doesn't have to be very long; a couple of paragraphs is enough. 

2) Leadership Information

Showcasing a department's leadership with a short biography and image can help reinforce a connection with your audience. Pick a photo that best portrays your department manager and consider making them consistent across all department pages, using similar backgrounds and style treatments. Aim to keep the bio short and relevant, between 100-150 words.

3) Contact Information

Remember: your visitors are looking for answers, so don't get in the way. Offer them access to an FAQ page to help streamline the process, but give them choices for calling, emailing, or even chatting with representatives. This is what a good customer or citizen experience is all about.

Having a dedicated sidebar can be a great place to feature your contact information. Below, we'll show you how to do that – and you won't need an escalator to get there. 

Getting Started

Since we're using Bootstrap to build our section, go ahead and copy and paste the links below in the head section of your project's HTML file:

HTML

The HTML code below is built with default Bootstrap classes so it's responsive – and doesn't require too much CSS layout customization.

The code features two main sections: the main content and an aside section where the contact information is displayed. In the content section, the department information and the featured bio are inside an article tag, cleanly separated by a horizontal line. The contact information is inside an aside tag and includes a contact e-mail address, phone number, the full address with a link to Google Maps, office hours, and social media links.

You can add or delete the contact information and customize it for your needs:

CSS

The CSS code below includes basic styling such as colors, typography, and spacing. Feel free to change them to match your site's branding. We also separated and labeled each section such as the breadcrumbs; if you don't wish to include the breadcrumbs section in your project, you can skip the styling section:

And there it is! A cool template for your department pages that can be styled and repeated across your website.

If you want to see how it looks before you invest the time in coding, check out the JSFiddle below. You can hover over the links and click on them to see how they respond: