Web Presence

Guide to Website Development

This post provides a series of instructions on how to develop a website. The instructions are tailored for individuals or small organizations providing philanthropic, client-based services. While we assume a basic understanding of internet navigation, no coding experience is required. You can pause at any stage and return later.

Our approach has four steps: 1) Set-up, 2) Structure, 3) Content, and 4) Maintenance. You will find instructions for each of these phases below, followed by a set of frequently asked questions (FAQs).

Table of Contents

Step 1. Set-up

This step focuses on your website’s infrastructure. Unless you’re a web developer, this most often means engaging a web hosting company and purchasing a domain name. See the steps below for more specific instructions.

1A. Choose your web hosting company.

There are hundreds of companies that provide web hosting services. Some of the more popular options are Google Sites, Wix, Squarespace, and WordPress. We are happy to troubleshoot and/or discuss pros and cons of these companies.

1B. Select & register your domain name.

For others to access your website, you will need an address or website name (e.g., www.elletechnology.org).

When selecting the name of your website, you will likely pick the name of your business or your own name. When selecting your domain extension, keep in mind that .com is generally used for for-profit businesses. On the other hand, .org is most often used by non-profit organizations.

There are many ways to see if your domain name is available, and it’s often easiest to purchase it through your web hosting company. For example, if you are using Google Sites, you can check if your domain name is available at https://domains.google.com/registrar. Another common choice is https://www.godaddy.com/domains.


Pro Tip: Make sure you register the site using YOUR name (regardless of the domain name). It can be challenging to transfer "ownership" of the domain name if, for example, you have a volunteer or employee leave the company and lose contact.

Step 2. Structure

While it may be tempting to immediately start building your site, it’s helpful to think through the intent and structure first. Below are some tips on how to do that, as well as industry best practices to make your site as easy to use as possible. And finally, you get to create those pages!

2A. Identify the purpose of your site.

The primary purpose of your site is (most likely) to build business. And if you’re in the business of wellbeing, you likely want to do this in an ethical way. This means being very intentional in how you describe your services (with further tips in step three).

However, you may have another primary purpose or perhaps several secondary purposes. Here are a few examples:

  1. Primary Purpose: Attract and book clients.

  2. Secondary Purpose(s):

    1. Provide resources for people to self-educate on a specific issue.

    2. Raise awareness of a specific issue.

Make sure you know the purpose of your site and write it down.

2B. Document the primary sections.

Once you have determined the purpose of your website, you can identify the sections you will include. These are often called pages or sub-pages and will form your navigation bar. This is where we will start focusing on usability; in other words, we want to make sure that your visitors can quickly and easily achieve their goals.

It’s helpful to be conventional here. This means using phrases and categories that people are used to seeing on the internet. This makes your website easier to navigate and establishes trustworthiness. As such, I’ve outlined a few foundational elements (designated with *) that I recommend including, as well as several others for consideration.

  • About. * This is where you establish your credibility (e.g., XYZ years in XYZ field with XYZ education and training). This is also where you briefly explain what services you provide and what your philosophy and/or approach is to these services.

  • Services. * You may use this section to outline specific offerings, such as one-to-one therapy, family therapy, specific assessments, witness testimony, school liaison, etc. You may also explain your pricing, billing, insurance management, etc. You may have subpages here.

  • Resources. You may consider linking to guides, uploading articles, and/or providing information on other services (e.g., National Suicide Prevention Lifeline).

  • Location. If you have a physical office, you want to make sure it’s easy to find the address. You may also indicate whether you have virtual services here.

  • Contact. * This should provide a quick and easy explanation on how to engage your services or ask you questions.

2C. Develop a visual hierarchy.

People are coming to your site to complete some action, or to find some specific piece of information. Therefore, unnecessary elements (i.e., those which serve no functional purpose) will only overwhelm and make it more difficult for visitors to accomplish what they're trying to accomplish.

Given this advice, look at the sections you’ve written down. Do they promote your primary purpose? If not, strike it out.

Next, you will create a chart with your website elements. The intent is to help your visitors gravitate to the most important elements. You can draw this with pen and paper or, for example, create an organization chart in PowerPoint. (See example to the left.)

Try making a basic wireframe map of all your site pages arranged like a pyramid: your homepage is at the top, and each linked page from the previous forms the next layer. In most cases, it’s best to keep your map no more than three levels deep.

2D. Create a basic style guide.

Simplicity is your friend. You will likely want a color scheme; however, only select a few (or even just one). Your typeface should be highly legible so avoid artsy fonts. Your text color should have a high contrast to your background, as well (e.g., black on white).

We will discuss graphics in step three; however, again, they should be minimal and serve a purpose.

Pro Tip: Don’t overthink it! You can easily change this later.

2E. Build the structure.

Ideally, a visitor should land on your site and not have to think extensively about where to click next. Keep the structure of your primary navigation simple (and near the top of your page). Then go ahead and create the structure! This process will vary slightly depending on the hosting company you choose.

Step 3. Content

Depending on the maturity of your practice, this phase may vary widely in how long it takes to complete. For example, you may already have language to describe your services. Alternatively, this may be the impetus to take the time to carefully think through your target clients and your unique approach and driving principles.

3A. Write your content.

Now that you have your structure, you will develop your content. I recommend you write and edit your content in a Word document or similar application before adding it to the site. Aim to keep each section short and to the point and keep your purpose in mind.

One of the best methods to improve your credibility is to be clear and honest about the product or service you're selling. Be up-front on your homepage and explain the value of what you do.

Pro Tip: Have a pricing page, also linked on the homepage. Rather than force people to contact you to learn more about pricing, list your approach clearly on your site. This makes your business appear more trustworthy and legitimate. We strongly encourage healthcare professionals to be fully transparent about how they handle insurance.

3B. Edit your text.

Look over your content and make sure you include the approaches you use (e.g., cognitive behavioral therapy) and a brief explanation of what that means. Use straightforward language and avoid jargon and acronyms. You may consider linking to further explanations.

If possible, ask a friend or coworker for help. Tell them the purpose of your site and ask them to skim your content to make sure it makes sense. Ask if they can do a quick edit, too.

If no one is available, take a break from what you wrote. Return to it a few days later and edit it yourself. If you’re stuck, you can look at websites of practitioners that you admire and respect. Skim their content to get ideas.

3C. Add content to your site.

At this point, you should be able to copy and paste your content into your website structure. This may involve adding text boxes, etc.

You may consider adding graphics. If you do not have your own pictures, you can try open sources options such as https://unsplash.com/. Make sure you give credit!

In addition to keeping your navigation consistent, the overall look and feel of your site should be similar across your site's pages. Backgrounds, color schemes, font, and even the tone of your writing should be in the same style.

3D. Publish your site.

Now you can launch your site! Remember that you can iterate on it, so it does not need to be perfect.

Step 4. Maintenance

Once your site is published, I recommend reviewing and testing it. I’ve included some tips on how to do this below. It’s helpful to set a calendar reminder to refresh your content on regular basis, as well.

4A. Update your content.

You should consider regularly reviewing your website to make sure the content is up to date. At the very least, attempt to refresh once a year. For example, you may adjust your services, update your office location, add resources, or post a more recent photo of yourself.

4B. Test across devices.

I recommend that you review your website displays on various mobile devices. While many web hosting companies will automatically re-size and adjust the lay-out for different screen sizes, it’s important to double check.

Alongside mobile-friendliness, it’s worthwhile to test your website’s cross-browser compatibility. Likely, you’ve only viewed your site on one web browser, be it Google Chrome, Safari, Firefox, or something else. Try viewing it across several.

4C. Improve accessibility.

The goal of web accessibility is to make a website that anyone can use, including people with disabilities or limitations that affect their browsing experience.

The Web Content Accessibility Guidelines (WCAG) set the guidelines for web accessibility at https://www.w3.org/WAI/WCAG21/quickref/. While this can get complex, there are helpful recommendations on how to make your website more useable to everyone. Consider your target audience and do some research on how you might best design your site to help them.

Conclusion

While it may seem daunting at first, this process can be completed in just a day or two. The most time-consuming portion is often writing content that is concise yet representative of your services. I often recommend that folks iterate on their websites, as well. You can start small and grow over time! For example, you may begin with basic structure and text and gradually add sections, including pictures, videos, forms, etc.

Best of luck, and please feel free to contact us if you need help!

Frequently Asked Question (FAQs)

What is web hosting?

Web hosting is the place where all the files of your website live. Web hosting companies offer the facilities required for individuals and organizations to create a site and make it accessible on the World Wide Web. They often require little to no coding, although you can typically use custom code (i.e., code you write) to adjust your website if you are experienced and/or feel like doing a little research.

What is a domain name?

A domain name is the address of your website that people type in their web browser to visit your website. In other words, if your website was a house, then your domain name will be its address. You most often see .com, .org, or .net as domain name extensions. However, there are many more options available.

What is a navigation bar?

A navigation bar is a set of buttons or images in a row or column that link the user to sections on a website. These are almost always represented by short phrases and typically run along the top or side of a webpage.

What is visual hierarchy?

Visual hierarchy is the principle of arranging elements to show their order of importance. In English language, for example, we read from left to right and top to bottom so typically the most important section of a navigation bar is on the left at the top. However, there are exceptions; for example, most websites have contact information on the far right of the navigation bar, so conventionality takes precedence here. You will typically place that at the end.

What is usability?

Usability is a component of user experience. A design’s usability depends on how well its features accommodate users’ needs and contexts. In a website, this typically means ensuring presentation of information and choices are clear and concise, and that content works on various devices and browsers. (See step four for further information on website responsiveness, or how well your website works on different devices.)

What is conventionality?

After years of similar styles, web users have certain expectations when they land on a website. These elements are often visual shortcuts, capable of conveying complex meanings with simple visual information. They might be colors, shapes, layouts, icons, placement – any pattern that is quickly identifiable (e.g., placing a logo at the top left or center of a page; making the logo clickable, so it always brings a visitor back to the homepage).

What is responsivity?

To provide a truly great user experience, your site should be compatible with different devices. In the tech world, this is known as responsive design.

Responsive design means investing in a highly flexible website structure. On a responsive site, content is automatically resized and reshuffled to fit the dimensions of whichever device a visitor happens to be using.

What is accessibility?

Web accessibility is the inclusive practice of ensuring there are no barriers that prevent interaction with, or access to, websites on the World Wide Web by people with physical disabilities, situational disabilities, and socio-economic restrictions on bandwidth and speed.