How to Create Staff Pages for Your Company

Your potential customers want to get to know the people behind your company. While staff or team pages might not be appropriate for massive corporations, they're still a vital part of small businesses and public organizations. Even among larger enterprise companies, staff pages for each department still put a face to a name, serving as a resource should your website's visitors want to engage more with your company. It gives people an emotional connection if they see who they're doing business with. There's also the added benefit that images keep people on a page longer for the sheer fact of visual engagement. 

At the very least, your department heads or those connecting with your potential clients should have their own "About Me" page. In terms of content, these pages should always include a few key elements: 

1) The employee's name and title 

These elements seem like a no-brainer, but you'd be shocked how many businesses neglect to add the most basic of information. Ensure that each employee page has that person's name spelled correctly and their full title. The title gives website visitor's a better understanding of who they're talking to, and it's particularly helpful if a visitor is looking for someone by department title rather than their name. 

2) Contact information 

Once your website visitors find who they want to talk to, they'll need a way to get in touch. We recommend including your office phone number and a work email on your information page. Whatever contact information you choose to include, make sure that it's a phone number/email that people can definitely reach you. Nothing is more inefficient for your potential customers than calling the same corporate number when they really want to speak to a particular department or person directly. 

3) Description of the employee's duties and role. 

It's very likely that your website visitors have an idea of what they need from your company, but they might not have an idea of what titles handle particular responsibilities. Putting in a brief description of someone's daily responsibilities can give your website visitors a better idea of who exactly they'd need to talk to about an issue or query. 

Here's how you can showcase your own team and prove to your clients that your organization isn't made of robots.

HTML

The HTML is primarily built using default bootstrap classes so that you can take advantage of natural breakpoints within the styling:

CSS

Some custom CSS is needed to add some effects, such as the rounded nature of the image and the borders separating the information:

And with that you have a template to build you all of your staff or team member pages. Want to see how this tutorial could look on your site before you invest the time in coding? Try it out first in the JSFiddle below! Make sure to click on each element to see how the expand/collapse functionality looks.