How to Create a Team Directory on Your Website
A Team Directory makes it easier for customers to find the right people in your organization, especially if you have multiple divisions or departments. Using Bootstrap's table structure, you can create a well-organized directory with contact information such as names, phone numbers, emails and more.
The Yellow Pages directory was an institution for generations. At least once a year, the phone company would publish a massive tome with all the names, addresses, and phone numbers in specific area codes, making it relatively easy to find the contact information of specific people or businesses.
Of course, that information was stale the moment a new edition was printed and dropped on your doorstep. If someone moved, it could be months before their data was updated – and there was always some guesswork when it came to duplicate names (how many John Smiths were in your city?).
In the modern digital era, websites have all but eliminated the fuss with maintaining directories, not to mention saving a few trees in the process. For businesses, this means you can feature important contact details about your team, so your customers can search for exactly the right person. That's why it's important to organize your information in a clean, intuitive manner.
Adding a Team Directory page on your website can help improve your customer experience, especially if your organization has different departments or divisions. If your customer can self-qualify their need or problem, why send them to a general email box or main office number? Providing a well-structured directory makes their quest for answers both seamless and convenient, which can impact sentiment and enhance loyalty to your brand or organization.
Finally, let's not forget the value of SEO, and how tagging and structuring your content the right way can make it faster for people to find the right team member's information.
Teamwork makes the dream work – and in this tutorial, we'll be helping you build a team directory that's simple, elegant, and easy to manage. You'll get the code and guidance for how to list your people, their job titles, and their contact information (such as phone numbers and e-mail addresses) all using Bootstrap. Once you've got it down, feel free to improvise on the details.
Oh, and let your fingers do the walking. Or in this case, typing.
Getting Started
Since we're using Bootstrap to build the navigation menu, go ahead and insert the Bootstrap links below in the head section of your project's HTML file:
HTML
The HTML takes advantage of tables, specifically Bootstrap's table component. Bootstrap provides us with a built-in table structure so it becomes very easy to insert data and add more table rows if needed. The responsive layout for the tables is also taken care of by Bootstrap's stylesheets.
When you have a long list of items, tables come in very handy as they're perfect for displaying a grid of data. We create a table by using the table element. The table element is made up of columns and rows. Each table row is defined by the tr tag and each table header is defined by the th tag. We'll insert people's names and contact information inside the th tags. If you'd like to copy a row to add more people, you can simply copy the entire tr row and add the names:
Here's the complete HTML for the directory:
CSS
As we mentioned before, since Bootstrap's stylesheets already take care of the layout, we only added a couple of lines to change the color of the links and added customization for smaller device screens. Feel free to add your own font styling and colors to match your website's style:
And there it is! Check out the JSFiddle example below to see how it looks before committing to its use:
Paris Tuzun
Contributions Editor here at Solodev. Want to be featured on the Solodev Blog? Get in touch.
Follow me on Twitter
