Websites for Health: An Example of Good Design


There are many health-based websites on the Internet; so to make yours stand out a nice, clean design is important. Today we will walk you through a website,, that has incorporated many of the good practices laid out by Mansfield, though we will point out where they can improve.


  1. Logo & color scheme

The organization has a simple logo that adorns each pages’ header, so it is easy to remember what website you are on. The colors in the logo are repeated down below in the simple icons, so there is consistency. If you bring in too many colors, the website starts to look cluttered.


  1. Drop down menus

The menus organize the website into several different topics for easy navigation. On the desktop site, the menus expand when you mouse over them, but the mobile site requires a click to expand the menu options. This shows a responsive design; so that the viewing is optimized for whatever device you access the site from. This is great in today’s Internet when there are so many options for accessing the web.


  1. Use of images

The website does a great job of using images to help keep the website interesting and break up the text.


  1. Readability

The website kept readability as a priority throughout their design. There are buttons to increase the font size in case it is too small; but they also did a good job about using an easy to read font and using dark text on light backgrounds (for the most part). The website also sticks to a two-column layout, which keeps the site neat and organized, making it easy to focus on what you’re reading.


  1. Social Media

Here is where the first piece of constructive criticism I have for this site. While it’s great that they have included ways for people to follow their social media accounts, these buttons should be displayed in a more prominent location. Mansfield recommends they be placed in the top right corner of a page, near where they have the text resizing function. I would definitely make these icons easier to find!


  1. HONcode

Because there are a LOT of health websites out there, HON was founded to help verify the information that websites are displaying. From the HONcode website:

“The HONcode is a code of ethics that guides site managers in setting up a minimum set of mechanisms to provide quality, objective and transparent medical information tailored to the needs of the audience.”

This verification lets the viewers know that this is a site that can be trusted for health information. It may be something for you/your organization to look into if you are going to display health information- which as public health practitioners I imagine you will!


I hope that this example can help you when it comes to your website for public health!


One thought on “Websites for Health: An Example of Good Design

  1. Before this class, building a website seemed impossible for me. However, as you have so clearly mapped out in your post… it really isn’t that bad. Your post presented very clear steps on what a well designed website looks like. It was incredibly helpful to have that picture of the website where you aligned the well designed pieces to the numbers in your post. I also appreciated how you were very clear and succinct. As a reader this is imperative, especially if I am a beginner in developing websites. One thing that would strengthen your post would be to add more hyperlinks, enriching it with more resources that the reader can click on. I also recommend figuring out a way to integrate your own personality into the post. I know that that is difficult but you want to be able to connect with your readers and that is a great way to do that. Heather Mansfield in her book made a point to talk about the importance of the human behind the social media outlet. Overall great work, I enjoyed reading through it and found it to be incredibly helpful.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s