How to Build a Classroom Website

In this course, you will learn how to (1) choose a website tool or platform that meets your needs, and (2) design an aesthetically pleasing website.

CHOOSING THE RIGHT PLATFORM

Introduction to WYSIWYG Website Builders

Introduction

With a myriad of website building tools available on the Internet, creating a classroom website has never been easier. These tools enable users to build a website without any prerequisite knowledge of coding language. Through a WYSIWYG (what you see is what you get) editing interface, users would add images, text and multimedia to a page in a manner that is very similar to the use of a word processor like Microsoft Word. Hence, anyone who can use Word, can build a website.

Is a website right for you?

A website would enable teachers to organize and upload classroom materials so that all students and parents can easily access them. Assignment datelines and detailed homework instructions can also be provided through the website. This can help students, particularly those with special needs, manage their school work better. A website can also be a way for teachers to communicate with parents to let them know what is going on in the class. Adding a blog to the website, for instance, can engage parents' and students' interest in class events.

If your objective, however, is to manage student assignments, track student learning progress, and provide students with a platform for discussion and collaboration, you may want to consider a learning management system (LMS) instead.  LMSs like Schoology or Google Classroom will help you manage online assignments in a blended or flipped classroom environment.

Tools for building a classroom website

In the next few sections, we will look at four website builders and explore the pros and cons of each.

Weebly

Weebly is a drag-and-drop website builder, and has all the features you need to build a simple website in a couple of hours. It provides a number of templates that can help you get started. Adding new content is also easy. All you would need to do is choose the type of element you need from the left column and drag it onto your page. Another great feature of Weebly is that it allows you to change themes after you have started building your website. This is a feature that is not available on Wix, another very similar website builder.

Weebly for Education was created specifically to enable teachers to manage student website creation efforts. Teachers can set up accounts for up to 40 students and track their progress through the site. This is a feature that appears to be unique to Weebly. Hence, if student website design is an activity that you intend to incorporate in the future, then Weebly is for you.

Recently, Weebly has been making an effort to update their template designs. Websites created using Weebly's old templates had a design reminiscent of the early 2000s. They were text-heavy, with a lot of white space, and few attention-grabbing images. In contrast, the new designs are more on-trend, with less text and more high definition images. At the moment, however, the number of templates that Weebly is offering is still fairly limited compared to other sites like Wix. 

Within Weebly, there is also no easy way to customize the position of elements within the page. While you do have the option of editing the HTML/CSS of the theme page, this would require you to know the coding language. Otherwise, you would have to work within the pre-designed layouts that are provided. This can be an advantage or disadvantage, depending on your needs. If you want to be able to control exactly how your page looks, you may find Weebly frustrating to use. However, if you prefer spending as little time as possible aligning elements and adjusting their position, then this limited functionality of Weebly would actually work in your favor.

Wix

Wix is currently the most popular website builder, with 90 million users as of February 2017. Of all the website builders, it provides the most extensive range of template designs. It even has an array of education-related templates that Weebly, surprisingly lacks.

Like Weebly, Wix relies on a drag and drop interface, and is very easy to use. It does, however, gives users more flexibility in terms of the positioning of elements on the page than Weebly. Wix also has a unique feature that allows users to animate text and other elements, thus adding some dynamism to the page. 

Wix also allows you to incorporate different tools and applications to your website through the App Market. These apps were developed by third-party developers for the Wix platform. Currently, there are more than 270 apps available on the App Market. They include design tools that allow you to create a visual timeline, flipbook or portfolio, as well as social tools that lets you connect with your readers through Facebook, Pinterest and Twitter. The ability to integrate external tools to your website with just one-click is arguably Wix's most outstanding feature, and is something that other website builders currently do not offer.

Google Sites

Google Sites is extremely easy to set up, especially if you are already familiar with with the use of other Google apps like Docs and Slides. The greatest advantage of using Google Sites is the ability to embed content from your Google Drive. You can easily share documents, charts and slides on the site and invite others to collaborate. Like many other Google apps, you can also add others to edit the site, making the website creation process a collaborative effort. This feature distinguishes Google Sites from the other website building tools.

Template designs, however, are very limited in Google Sites. To be fair though, Google Sites was never meant to be a website builder. It was more for people who wanted to create an intranet to share information and resources within a group or organization. It has no blogging feature, and no form builder (a feature used for creating contact forms, online surveys or event registration). If your school is already heavily reliant on G suite, then Google Sites is a great tool to organize and consolidate artifacts that your class has created. If you are not a heavy user of Google apps, then a conventional website builder like Weebly or Wix may serve your needs better.

WordPress.com

WordPress.com

WordPress.com is a web hosting service that runs on the open source WordPress.org software. It was created as a way to allow bloggers with limited technical know-how to set up a website quickly without having to pay for a web hosting service. (Read Wordpress.org vs Wordpress.com if you want to find out more about the differences between the two.)

WordPress.com offers more than a hundred free themes that you can customize from. Like Weebly, it also allows you to change the theme easily midway through the creation process. There is also a variety of widgets available on WordPress.com that can add interest and functionality to your page. Incorporating an Instagram widget, for instance, will allow visitors on your site see the pictures you have posted on Instagram. Widgets are similar to some of the apps available on the Wix App Market. The difference is that there are fewer widgets available on WordPress.com and they can only be installed in the sidebar of the page. 

WordPress.com provides a WYSIWYG editor, but unlike the other three website builders mentioned previously, it lacks a drag-and-drop visual interface. This means that you will often find yourself having to create content through the page editor, and then previewing the page to see those changes. This can make the process rather abstract and tedious. 

The best thing about WordPress.com, however, is that you can easily access the HTML code through the page editor. Using shortcodes, a highly simplified and shortened version of HTML that is specific to WordPress, you can easily embed different files or objects on your page. WordPress.com gives you more control over the content of your website than the other website builders, but would take more effort to learn how to use.

Assignment 1

Discussion

  1. Which website builder would you use to create a website for your class? Give specific reasons why you think it would meet your needs.
  2. Explore the website builder of your choice (create an account, explore the themes, and make modifications to it). What do you like/dislike about it? 

WEBSITE DESIGN

Website design and why it matters

A significant portion of time in the website creation process is often devoted to managing the aesthetics of your site. This can involve changing the font size, color of the text, ensuring that objects are aligned, finding the right image, resizing objects and so on. The entire process can be very tedious and frustrating, so you may start to wonder what is the point of all that. Is the look of a website really that important?

A number of studies have shown that aesthetics actually matter a lot. We decide within 50 milliseconds whether to stay on a website or not based on its design. We also associate aesthetics with usability—perceiving what looks good as being easier to use. In one study, participants of an online course also reported that the aesthetics of the site motivated them to engage and persist in web-based learning. As educators, aesthetics and design is a way of drawing your audience in and supporting their learning. Changing small aspects of your design can make a huge difference in terms of readability and ease of use for your readers. To dismiss design as mere eye candy is to do your learners a huge disservice.

In this section, we will concentrate on the use of fonts and colors on a website, while keeping in mind the four basic principles of design as illustrated in the poster below.

Image source: Digital Art Education (view larger version here)

Typography

What is typography? 

Typography is the art and technique of arranging type to make written text legible, readable and appealing (Wikipedia). If you are using a website builder to create your website, the template you have chosen will come with a set of pre-selected fonts that best match the look and feel of the theme. In this section, we will explore why typeface and font size matters, and examine when you should and should not deviate from the themed text.

Picture showing themed text on Wix.

Why typeface and font size matters

Typeface and font size are important for two main reasons: (1) to enhance readability and (2) to establish a visual hierarchy. 

(1)  Readability

According to Vogels, O'Grady and Williams, how easy it is to read the text on your website depends on both the font's design, as well as your own design choices (font size, spacing and color).  

Font design

There are many types of font design, but the two most commonly used fonts are either serif or sans serif. Serifs refer to the small lines extending from the edge of letters. In printed format, serif fonts are easier to read as the serif makes individual letters more distinctive. But on computer monitors, due to the lower resolution, sans serif fonts are better. (Check out the Serif vs Sans: The Final Battle infographic for more details.) (Top image source)

Font size

Fonts that are too small make reading incredibly difficult. In web design, font sizes are denoted in pixels (px) instead of points (pt). As a general rule of thumb, you should avoid text smaller than 16 px (equivalent to 12 pt). For younger readers, a larger font size is more appealing, so the main bulk of your text should be at least 19 px.


Spacing

Line spacing refers to the vertical distance between lines of text. Lines of text that are spaced too close together or too far apart can negatively affect readability. The optimal line spacing is generally between 120% and 145%. Note that not all website builders allow you to change the line spacing. 

Color

Modern website designs often overlay text on images. In order to improve legibility, ensure that there is enough contrast between the background and the text. Increasing the size of the text, and choosing a bolder font can also help.

(2) Visual hierarchy

Visual hierarchy is the arrangement and presentation of elements to visually signal importance. Bigger and bolder elements are perceived to be more important than smaller and fainter ones. Having a clear hierarchy lets your reader see at a glance what is most important. Pick up any newspaper, and you will see the use of visual hierarchy at play. (Newspaper image source)

Always ensure that you use the same font size and font type for each typographic level. Using different sized fonts or font types within the same typographic level can confuse your reader and give your graphic a messy, inconsistent look.

When to deviate from themed text 

Using the themed text that comes with your template helps to ensure consistency, giving your website a professional look. As far as possible, you should stick to the pre-selected size and type. The only reason why you would change the font size is if the recommended text size for the paragraph text is too small. Templates often prioritize aesthetics over functionality so use your judgement to customize your site for your audience. When necessary, make adjustments to the spacing and color to enhance legibility and readability.

Colors, Images, Layout

Colors

Wix provides users with elements (box, button, strip) that are designed using colors that match the theme. But other website builders like Weebly do not. To ensure a consistent look throughout your website, you need to adhere to a strict color palette instead of picking colors at random. Choose just three to four main colors for your palette as too many different colors can be distracting. 

Image of themed colors in Wix.

There are two main ways in which you can go about creating a color palette. You can (1) use colors from an image that you like, or (2) use online tools to find colors that look good together.

Image source: Image Color Picker

(1) Use colors from an image

To use colors from an image, you can make use of a tool like Image Color Picker or HTML Color Codes. Find the colors you need and note down the HEX value (or HTML color code) of each color.

Image source: Paletton

(2) Use online tools to create color scheme

Adobe Kuler, Paletton and Coolors are all tools that can help you find colors that look good together. You can also explore color palettes that others have created to find something that suits your needs.

Images

Using images is a great way to break up text and personalize your site. Wix and Weebly both provide a collection of photos that you can use. There is also a list of other sites where you can obtain high quality images.

Layout

Many website designers rely on a grid-based layout to give their website a neat and balanced appearance. A grid-based layout involves aligning elements vertically and horizontally in columns and sections. Weebly automatically inserts elements in horizontal sections. With Wix, however, there is more flexibility. Make use of the pink lines that appear on the page, or the alignment tool, to ensure that elements are lined up. 

Image source: Wix

Assignment 2

Discussion 

The two educational game websites below are both directed at children. Explore the two websites and answer the following questions.

  1. Which website do you prefer?  Based on what you have learned about website design, note down as many reasons as possible why you prefer one over the other. 
  2. Now look closely at the site that you prefer. What else can you do to improve its design?