Articles in this section

Website Creation Guide

Updated
~ minute read
          Web projects - logo.png

Introduction

A good web design aims to create engaging, visually appealing, and user-friendly websites that effectively communicate information. You can build a website, blog or eportfolio without having to write code. Most of these free tools use simple drag and drop features to make creating a website easy and free! 

What do I need to create a website?

There are several free online tools that provide templates for easily creating a website. In this guide, we recommend the follow tools in order of preference:

  • Google sites - Collaboratively create engaging, high-quality sites for your assignment or project. The sites look great on every screen, from desktop to smartphone. 
  • Wix- a classic template website builder and an AI platform rolled into one. You can choose from over 500 industry-specific templates and make use of its drag-and-drop editor.

How do I plan and organize a website?

Plan your website

Knowing what kind of website you are creating will help you choose a website tool. Successful websites engage, inform and educate visitors. 

Before you begin creating a website consider your goals. What type of website are you creating (what is the purpose)? 

  • promoting a business or service
  • creating an eportfolio
  • publishing a blog
  • providing information about a topic

Spend some time planning the structure of your website. How many pages? What images? Will you be linking to other websites or documents? Map out your plan before you choose a website creation tool.

Organize your website

Before you start adding content to your website, make a plan of what content you will include, and how you will organize it. What are the important pieces of your site? What pages will you have, and what content will appear on each page. How will the pages fit together?

Keep your navigation clear and simple. You want it to be easy for your audience to find information, so make sure the organization of the page is logical. 

Click on the image below to watch a LinkedIn Learning video (5 minutes) describing how to use a technique called card sorting to organize your content.

Web projects - organize.png

Design Your Website

Writing for the web

A website is not an essay, so you can’t simply cover your website in huge blocks of text if you want to reach your audience. Your text should be clear and easy to read. Here are some tips for effective web writing:

  • Keep your intended audience in mind. Know who you are writing for and write at a level that will be meaningful for them. 
  • Chunk your content into manageable sections. Clear headings and subheadings are a good way to tell your audience what to expect in each section.
  • Front-load the important information. Use the journalism model of the "inverted pyramid." Start with the content that is most important to your audience.
  • Use short sentences and paragraphs. Write out your content, go back and remove every word that is not necessary.
  • Use bullets and numbered lists. Bulleted and numbered lists can be a good way to break up your text and highlight information, but only use them when the information is actually a list.

Use the resources shown below for guides and examples on writing concisely.

Images for the web

Do not use Google to search for images. Most of these images have been copyrighted - you can not use them without permission from the owner.

Your images should be of good quality, highlight your topic and be free to use. Use your own images when possible or find free images using one of the resources listed below.

  • Creative Commons Search
    • Find images, videos or music that is licensed for re-use (includes a CC search tool that can be added to your browser).
  • Pixabay
    • ll images are copyright free. Search images by name and filter by orientation (landscape or portrait) and image type (photo, clipart, or vector).
  • Unsplash
    • library of 1 million stock photographs, all available to use for free.

Blogs

Blogs can be created using Wix or Weebly which are website tools with more advanced features than a simple blog. Use these tools if you want to create a custom design and incorporate a blog on your website. See the guides at the top of this page to get started.

Blogging Tools

Blogger
- provides an easy authoring environment with a simple sign-in using your Google account.

Tumblr
- different than other blogging platforms, Tumblr is a microblogging platform with social networking features.

Writing a Blog Post

A blog post typically covers a specific topic or query, is educational in nature, ranges from 600 to 2,000+ words, and contains other media types such as images, videos, infographics, and interactive charts.

Follow these five steps to write a post:

  1. Plan your blog post by choosing a topic, creating an outline, conducting research, and checking facts.
  2. Craft a headline that captures your readers and is informative
  3. Write your post in the draft format first.
  4. Use images to enhance your post and explain complex topics.
  5. Edit your blog post. Make sure to avoid repetition, keep sentences and paragraphs short

 Tips

Writing a Compelling Blog Post (LinkedIn Learning 44 m)

This video is a great place to start before your first blog post! Learn more about writing content, structure, and style strategies that will make your blog posts irresistible and keep readers coming back for more.

10 Elements for a Quality Blog Post

Learn the basics of blogging with these 10 tips for publishing online.

Accessibility

As of January 1, 2021, all websites and web content should be made accessible by conforming with the Web Content Accessibility Guidelines WCAG 2.0 Level AA standard. This page provides information to assist you with making sure that all of the content added to your website meet the required standards.

General Guidelines

  • Use a Web Accessibility Checker to check for AODA issues
  • Use your keyboard to make sure that you can navigate through your guides without a mouse
  • Use a Color Contrast tool to check for contrast issues 
  • Ensure all embedded and linked videos are accessible (closed-captioning and transcripts)
  • Ensure all asset links to PDF, Word Doc, and PowerPoint files include file type at the end of the title
  • Ensure all PDF, Word Doc and PowerPoint documents meet accessibility standards
  • Ensure all links are concise and descriptive

Creating Accessible Documents

Images

When using images on the web, you must provide alternative text (ALT) so that non sighted users using screen readers will hear the purpose and function of the image. 

Guidelines

  • Add ALT text to all images that convey information or a process to the user
  • Avoid using images containing large amounts of text 
  • Avoid flashing or blinking elements

ALT Tags

Images that contain critical information must have ALT text. This is because screen readers can't understand images and instead, read aloud the ALT text assigned to them.

  • Always add ALT tags where necessary
  • Keep ALT descriptions short - under 10 words
  • Avoid using the words "image of" or "picture of" in the ALT description as images on a web page are announced by screen reading programs

Images with Text

It is best to avoid adding images containing large amounts of text as the wording in the image will not be read by screen readers. However, if you must use an image of text, ensure that you provide the user with a description of the image in an accessible format by either describing the image in the body of the page or providing a link to an accessible document describing the image. 

Documents

Accessible documents are documents that can be read by a low vision or non-sighted reader or those who have cognitive impairments. Below are some general guidelines that should be followed when creating any type of document for inclusion on the web, be it a PDF, Excel file or Word doc.

When creating documents for the web:

  • Use ordered headings (heading 1 comes before heading 2 then heading 3 etc.)
  • Use bulleted or numbered lists
  • Keep lots of white space between columns of text 
  • Use a font size of at least 10px or larger
  • Use Verdana, Arial or Helvetica fonts
  • Use descriptive hyperlinks (do not use Click here or More)
  • Add ALT tags to images
  • Avoid flashing or blinking elements
Links

People who use screen readers should hear the context of the link before reaching the link so that they are informed of the link’s content before clicking. As well, people who use screen readers can listen to a list of links on a page in order to determine what is on the page – if the links are labelled “click here”, that is what the user will hear and this will not help them to decide if they want to click on the link. 

  • Use concise and descriptive wording for links
  • Avoid setting links to open in a new window
  • Don't change the link text colour
  • Check your links after adding them to ensure they are working properly

When creating links with a rich-text editor, select the text and insert the link. The selected text should match the title of the page you are linking to or describe the action of the link. Never add the actual URL as a link as screen readers will read every character included in the URL.

Correct format

For more information on this topic view our APA Citation Guide. 

Incorrect Format

For more information on this topic view our APA Citation guide https://library.mohawkcollege.ca/apa-guide.

Videos

To assist with compliance with WCAG 2.0 Level A/AA and to be fully accessible to all users, videos should include both captions and a descriptive transcript. Embedded videos are added to guides using the Media/Wiget asset type. Embedded videos often use iframes to contain the embed code.

The iframe must include a Title tag so that screen readers can announce the title of the video to the user. This information might have to be added in manually.

All content using an <iframe> must include a title tag in order to meet AODA standards. Use the following: title="name of the video".

Example:

<iframe title="The internet's accessibility problem" width="560" height="315" src="https://www.youtube.com/embed/QWPWgaDqbZI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>

.
Accessibility checkers and screen readers

Accessibilty Chekers

Screen Readers

  • NVDA
    A free, open source, globally accessible screen reader for the blind and vision impaired
  • JAWS
    The world’s most popular screen reader, developed for computer users whose vision loss prevents them from seeing screen content or navigating with a mouse
  • Read Aloud
    Read Aloud is a Chrome and Firefox extension that uses text-to-speech technology to convert webpage text to audio

Publish Your Website

Before you publish your website, consider the following.

Visual Design Typography Visual Aids 
Navigation of Information Content Accessibility