Web Projects 101

Background

Websites are a wonderfully capacious container for class projects. Built on the fundamental building block of the link, and able seamlessly combine writing, visuals and audio, they can accommodate assignments ranging from creating photo essays to building an online exhibit to hosting a video or podcasting project. They can be an opportunity for a class to work collaboratively on a public-facing project, or for students to privately showcase their individual creativity. The final shape of a web project depends entirely on how the site is designed and how its construction is scaffolded.

This is a guide to process of making the important decisions that will structure a web project. It is a supplement to but not a substitute for consulting with your AIA or the DLA team, who will be key partners for building class websites.

Planning

Any time is a good time to consult with us about your project, but earlier is usually better, so we can better help you plan out your project, build the right scaffolding for success and schedule instructional sessions.

We can help you think through any of the subjects covered below–from picking the right tool to thinking about your site’s longevity. So don’t feel like you need your pedagogical goals totally set in order to talk with us about your project.

We’re also more than happy–given enough notice and availability–to help instruct your class on creating a web project. We’re flexible on timing, content, and level of involvement. But we generally recommend at least 2-3 class sessions (of 60 to 90 minutes) to cover enough content and give students some hands-on experience with the tools. Here’s a sample schedule:

Session 1: Websites 101 – Getting to know your platform, reverse engineering example sites, thinking through some basic designs with wireframing exercises.
Session 2: Site Design – How to develop a site’s overall aesthetic and structure. Especially important if each student (or group) makes their own site.
Session 3: Page Authoring – How to build out individual pages.

Pedagogical Goals

Clarity on your general parameters for the assignment will be helpful in making design decisions. A few things to consider:

What’s the most critical outcome? Practice public writing? Experience with multimedia presentation? Technical literacy?
Will students work independently or together? Will everyone work on one site, or will each student make their own? If collaborating, how – in groups, as a whole class, etc?
Who will make design decisions about the overall site? Will the class collectively, will a smaller “design team,” or will the faculty member make most of the decisions?
Will all students do the same work for the project, or will they have different roles?
How will you assess the project?
What will be the ultimate audience for the site? Is it just your class? Macalester? The general public? A specific group or demographic? This may shape not only the writing, but your choice of tool.

Models

Examples can be useful for both you and your students to understand what you want and the possibilities before you.

Macalester Projects

Protest Hacking – A single site designed and authored collaboratively, with students writing their own individual posts.
Once We Arrived – A single site designed and authored collaboratively, with extensive video content and integrated map.
Literary City – A single site designed and authored collaboratively, with students taking varied approaches to their page. A literary anthology put together by two teams: one design, one editorial.

External Projects

The Reactor Room – built by a class at Swarthmore, a good example of how to use a website to integrate lots of different digital tools, from audio to video to annotations and StoryMaps. Also a good example of thematic organization.

Tools

We support several options for web projects. The best choice depends on the particular purpose of your project

WordPress

WordPress is the content management system (CMS) that runs over 40% of the internet. It’s enormously flexible–it can work well for the simplest blog to more complicated multi-sites. We recommend it for any project that is media rich, has a larger number of pages, is intended to have a public audience, or endure longer than one semester. It can be more complicated than some other options, but we will suggest ways to keep the site simple.

Because it often ends up the right choice for larger projects, much of this article will focus on WordPress.

Google Sites

Google offers a simple website creator built into the Google Suite of applications. Like Google Docs or Slideshows, it lives on Google Drive. We recommend it for simpler websites, where ease or speed is priority, or when the site is primarily intended for a smaller or internal audience. (See Audience below for more information on limiting site audience.)

Omeka

These two tools are designed for building online collections or archives. We recommend them for projects with museums or libraries and for making online exhibits, especially with larger numbers of items.

StoryMaps

Esri, the makers of ArcGIS, offer this slick, streamlined product that’s great for making single-page tours and navigable maps. We recommend it for projects centered on geographic stories or data.

Audience

Who the website is for will shape its content (e.g. whether the writing is scholarly, general audience, etc), design (e.g. its structure and aesthetics) and even its level of availability (e.g. who can access the site).

In terms of availability, WordPress sites are generally meant to be public. You do have certain options, though: individual posts or pages can be set to private and password-protected. And you can ask search engines not to index your site.

Google Sites is excellent for sharing web content with a limited audience–for making a site that’s only available to members of the class or to the Macalester community, for instance. Like Google Docs, Sites can be shared with certain individuals, made available to Macalester, or open to the general public.

Omeka has robust privacy features as well. Items, collections and exhibits can be set to public or private. Also, anyone can be added as site users, which can be useful if working with an outside institution or community group.

Accessibility

Accessibility is an important consideration when creating content, especially on the web. Content that meets accessibility standards and guidelines is often easier to browse for all users and ensures access to content for all site visitors. Some of the key considerations as you are building a site are creating accessible headings and writing alt text for images.

Building a Website

Process

For web projects, especially those built in WordPress, someone will need to make decisions about the overall structure and aesthetics of the site. These decision could be made individually (by the faculty member, say, or whoever “owns” the website) or collectively (by the whole class or a smaller subset of students, such as a designated “design team.”) If collaboration is an important part of the process, filling out a project charter (sample project charter)–which can specify roles, responsibilities, deadlines and means of communication–can be a useful tool.

Remember: designing a website takes time, especially when working collaboratively. Looking at example websites that you like can be very helpful during this process. Wireframing – drawing the layout of your site by hand – can be useful for both thinking through decisions and communicating design ideas to your collaborators.

Common Elements

Here are some of the most common website elements to consider:

Structure

Landing page – where will users initially land when they arrive? How is that page laid out? What kind of information is presented there?
Organization and Hierarchy – how is information organized on the site overall? How are pages divided up, categorized, tagged? E.g. displayed by date, topic, etc?
Navigation – how will users navigate to different pages on the site? Will there be a menu? Where is it positioned?
Page design – what’s the default layout for displaying information?
About info– for public sites, how will you identify who you are and what this project is about? Will this information be on its own page, on the landing page, etc?
Header and footer – what kind of information lives at the top and bottom of each page?

Aesthetics

Banner – will the site have an image or text for a title?
Color Scheme – what is the basic color scheme for the site?
Fonts – what fonts will the sites use? Where?

Templates/Themes

Most tools use a templating system that establishes the site’s basic structure and aesthetics – that makes the choices described above for you.

Many aspects of these themes are customizable. WordPress, for example, uses themes as a basis for its look and feel. Recent themes include Full Site Editing, which makes it easier to change most aspects of a site’s design with a visual WYSIWYG editor. Older WordPress themes do not use this; you’ll change aspects of the site through the Customizer (Appearance -> Customize).

Customization can also be overwhelming, especially for those new to a given system. So choosing the right theme will save you lots of time and headaches.

Creating Web Pages

Authoring individual pages on the website is a separate process from designing the overall site where those pages live, especially when using a tool like WordPress. While these tools are increasingly friendly, with more and more WYSIWYG design, some instruction on how to actually add elements and arrange elements may be required.

This is especially true if more complex customizations were introduced to the site design, or if multiple tools are being used together – e.g. a WordPress site is a container for a StoryMaps page or a TimelineJS timeline.

Here is potentially useful documentation on building posts from WordPress:

N.b. that these tutorials are written for WordPress’s hosting service, and may occasionally differ from the version we offer at Mac. (You won’t necessarily see Jetpack on your site, for example.)

Long Term Sustainability

Though things on the internet sometimes appear eternal, websites can actually be quite ephemeral–links die, platforms go defunct, updates break older software. So it’s good to plan for the long-term, and consider the afterlife of your site.

For class websites on our hosting service, we currently offer 5 years of support. We’ll provide ongoing support for research projects or sites that are actively being updated or regularly visited. Support consists of regular updates to the server and supported software, and troubleshooting of maintenance issues. After support ends for your site, it will be backed up, then taken down. More details are available in our hosting memoranda of understanding.

Like other Google Suite documents, Google Sites are easy to move between accounts, which makes them highly portable. But they’re also subject to the whims of Google, which has a history of canceling products. WordPress sites are a little trickier to move, but there are many plugins that can help–just let us know if you

We are also happy to archive a site for you in a static format (i.e. one that relies less on specific platforms) for offline usage or long-term readability.

Information For: