Anatomy of a Professional Website [Infographic]

Anatomy of a Business Website

For many of us, the new year brings an opportunity for a new enterprise—be it a business, non-profit, or personal project. And most likely, you’ve realized that a website is an essential part of that vision.

But somewhere between the vision and the final result, there can be a few false starts. Personally, the sheer number of templates to choose from was enough to trip me up when I built my own site. Start throwing in photos, widgets, and text…and before you know it, your homepage feels like a jumble of different elements.

As an editor, I always recommend that people create an outline before they start to write, and the same is true for your website. Just like a good essay has a thesis, an introduction, and a conclusion, a good website has certain elements.

Jimdo website Marks & Hemment, based in Spain, provides a great example for us to walk through. Using the template Zurich, the website clearly lays out what the company is, what they do, and where you as a customer should go next to explore their site. See how they do it in the infographic below:

Jimdo infographic website

Of course, there’s no one way to do things—in fact, part of the fun of building a professional website is the ability to be creative. But if you’re feeling stuck, I really encourage you to try out this model and see if it works for you and your users.



1. Header

Not to overstate its importance or anything, but your header is going to be the first thing that visitors see, and also appear on every single page of your site. Fortunately, simple headers are often the most effective. Choose an eye-catching image (here are a few resources for finding good ones) and pair it with a logo, if you have one, and your site title (most likely your brand/company name) in the font and color of your choice.

Note: If you don’t have a logo, there are some low-cost options available. We recommend using 99designs, where you can sponsor a logo competition and get entries from many different designers. If you need something right away, you can also purchase a pre-made logo from their logo shop and have it customized within 24 hours.


2. Navigation

A lot of people get tripped up with what to put in their navigation bar, often taking a “kitchen sink” approach and just listing every page they have. But navigation menus work best when they are clear, straightforward, and only take up one line. Not only do clean, simple navigation bars look better, they also help with your search engine optimization (SEO).

Some templates, like Rio, are perfect for showcasing a large background image, logo, and simple, clean navigation.
Some templates, like Rio, are perfect for showcasing a large background image, logo, and simple, clean navigation. For more examples, check out our post on the Hottest Website Trends.


In some cases (like for an online store), you may want to use more specific subpages that are nestled under your main navigation, and some templates offer drop-down menus that can help. But rather than just trying to cram as many pages into your navigation as will fit, take the time to really think about the most necessary parts of your website. Only include the essentials in your top navigation.


3. Products & Services

Every website is different, but if you offer a few main products or services, you should describe them clearly and succinctly in the top part of your content area where they are the most visible. If you have an online store, you likely won’t be able to display every product right on the homepage. By choosing your most popular items or your most important categories, you can highlight your main strengths and make your customers want to learn more.

Let’s say you’re not an online store, but rather a professional or freelancer. You won’t display products here, but you can talk about your main services offered or your main strengths. Just like with an elevator pitch, you only have a few seconds to describe your value proposition. So if you have one chance to impress or interest visitors, this is where you would do that. With only a few seconds, what would you choose to feature?

Jane Doe Photography website after redesign
Here’s another sample website showing a clear header, navigation, and additional services. Explore the entire website here.

4. Call To Action

Most people leave a website within 10-20 seconds. Your goal is to get them to stay longer and explore. That’s where a good “call to action” can help. Once you’ve piqued someone’s interest with your header, products, and services, you want them to click in to your website and keep learning more about you. A link or button here with an engaging, active direction (“learn more” or “I want one”) will make it clear to people exactly where they should go to reach the next step. Here are some other good tips on creating effective calls-to-action.


5. Additional Information

As much as you want to focus on the most essential information, there’s always going to be a little bit more you want to say. So, if necessary, you can put more details further down on your homepage. You can also use this space to include photos that help set the tone for your site.

Keep in mind that most visitors won’t scroll down this far and if they do they will most likely be skimming. Just because you have the space doesn’t mean you have to use it—simple, compact homepages can often be very effective.


6. Testimonials

Just as social networks thrive on personal recommendations, so too do businesses. Customer testimonials lend legitimacy to your website, and can also help by letting other people talk about your strengths so that you don’t have to.

Extra credit if you can include photos—either of the people saying nice things about you, or of your product in action. According to B2B marketing company Pardot, “one of the most persuasive pieces of content that a consumer will view is a testimonial or a review by an another product user.”



7. Social Media

It was once common for social media information to be hidden on an About or Contact page, but no more. Now it’s standard to give it a prominent place on your homepage. There are many ways to do so, and even some widgets you can use if you’re looking for different styles. Whatever you choose, just make sure they are visible so that people can easily connect with you. This is an area where it doesn’t pay to be too original—people are clued in to the “standard” social media buttons that you see on most websites, so it’s wise not to stray too far from those.


8. Footer

Last but not least, the footer helps tie everything together. Often considered the “table of contents” for your website, this is a good place to put your contact information, privacy or refund policy, or any other information that is important, but maybe not as compelling as what you’ve placed further up on your homepage.

Even so, don’t treat the footer like a dumping ground for all the information you didn’t want to put elsewhere. Stay choosy about what makes the cut, since your footer will also appear on every page of your website.

Don’t forget! When you’re ready to take the plunge, your business should really have its own custom domain name and email address. Set these up quickly and easily with a JimdoPro or JimdoBusiness upgrade.

And there you have it, a breakdown of the essential elements of a successful business website. Again, there are many ways to put a site together, but this is a good model to start with. Anything missing from this list that you would add? We always love to hear from you in the comments.

Maggie Biroscak
Maggie is a writer and editor for Jimdo. In her previous work, she edited for organizations covering the environment, cities, and sustainable business. When she’s not adding serial commas, you can find her camping, cooking, or reading science magazines.