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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
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. <\/p>\n\n\n\n
We can help you think through any of the subjects covered below\u2013from picking the right tool to thinking about your site\u2019s longevity. So don\u2019t feel like you need your pedagogical goals totally set in order to talk with us about your project.<\/p>\n\n\n\n
We\u2019re also more than happy\u2013given enough notice and availability\u2013to help instruct your class on creating a web project. We\u2019re 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\u2019s a sample schedule:<\/p>\n\n\n\n
Clarity on your general parameters for the assignment will be helpful in making design decisions. A few things to consider:<\/p>\n\n\n\n
Examples can be useful for both you and your students to understand what you want and the possibilities before you.<\/p>\n\n\n\n
Macalester Projects<\/strong><\/p>\n\n\n\n External Projects<\/strong><\/p>\n\n\n\n We support several options for web projects. The best choice depends on the particular purpose of your project<\/p>\n\n\n\n WordPress<\/strong><\/p>\n\n\n\n WordPress is the content management system (CMS) that runs over 40% of the internet. It\u2019s enormously flexible\u2013it can work well for the simplest blog to more complicated multi-sites. We recommend it for any project that is media rich<\/strong>, has a larger number of pages<\/strong>, is intended to have a public audience<\/strong>, 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.<\/p>\n\n\n\n Because it often ends up the right choice for larger projects, much of this article will focus on WordPress.<\/p>\n\n\n\n Google Sites<\/strong><\/p>\n\n\n\n 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.)<\/p>\n\n\n\n Omeka<\/strong><\/p>\n\n\n\n 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.<\/p>\n\n\n\n StoryMaps<\/strong><\/p>\n\n\n\n Esri, the makers of ArcGIS, offer this slick, streamlined product that\u2019s great for making single-page tours and navigable maps. We recommend it for projects centered on geographic stories or data.<\/p>\n\n\n\n Who the website is for will shape its content<\/strong> (e.g. whether the writing is scholarly, general audience, etc), design<\/strong> (e.g. its structure and aesthetics) and even its level of availability <\/strong>(e.g. who can access the site).<\/p>\n\n\n\n In terms of availability<\/em>, WordPress<\/strong> 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.<\/p>\n\n\n\n Google Sites<\/strong> is excellent for sharing web content with a limited audience\u2013for 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.<\/p>\n\n\n\n Omeka<\/strong> 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.<\/p>\n\n\n\n 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<\/a> and writing alt text<\/a> for images.<\/p>\n\n\n\n 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 \u201cowns\u201d the website) or collectively (by the whole class or a smaller subset of students, such as a designated \u201cdesign team.\u201d) If collaboration is an important part of the process, filling out a project charter (sample project charter<\/a>)\u2013which can specify roles, responsibilities, deadlines and means of communication\u2013can be a useful tool.<\/p>\n\n\n\n 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 \u2013 drawing the layout of your site by hand \u2013 can be useful for both thinking through decisions and communicating design ideas to your collaborators. <\/p>\n\n\n\n Here are some of the most common website elements to consider:<\/p>\n\n\n\n Most tools use a templating system that establishes the site\u2019s basic structure and aesthetics \u2013 that makes the choices described above for you<\/em>. <\/p>\n\n\n\n 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\u2019s design with a visual WYSIWYG editor. Older WordPress themes do not use this; you\u2019ll change aspects of the site through the Customizer (Appearance -> Customize). <\/p>\n\n\n\n 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. <\/p>\n\n\n\n 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. <\/p>\n\n\n\n This is especially true if more complex customizations were introduced to the site design, or if multiple tools are being used together \u2013 e.g. a WordPress site is a container for a StoryMaps page or a TimelineJS timeline.<\/p>\n\n\n\n If you would like to request free web hosting (for Macalester faculty, staff and students), please use this form: ATS Web Hosting Request<\/a>.<\/p>\n\n\n\n Here is potentially useful documentation on building posts from WordPress:<\/p>\n\n\n\n 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.)<\/p>\n\n\n\n Though things on the internet sometimes appear eternal, websites can actually be quite ephemeral\u2013links die, platforms go defunct, updates break older software. So it\u2019s good to plan for the long-term, and consider the afterlife of your site.<\/p>\n\n\n\n For class websites on our hosting service, we currently offer 5 years of support. We\u2019ll 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. <\/p>\n\n\n\n Like other Google Suite documents, Google Sites are easy to move between accounts, which makes them highly portable. But they\u2019re 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\u2013just let us know if you <\/p>\n\n\n\n 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.<\/p>","protected":false},"excerpt":{"rendered":" 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 […]<\/p>","protected":false},"author":441,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-113","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.macalester.edu\/dla\/wp-json\/wp\/v2\/pages\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.macalester.edu\/dla\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.macalester.edu\/dla\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.macalester.edu\/dla\/wp-json\/wp\/v2\/users\/441"}],"replies":[{"embeddable":true,"href":"https:\/\/www.macalester.edu\/dla\/wp-json\/wp\/v2\/comments?post=113"}],"version-history":[{"count":15,"href":"https:\/\/www.macalester.edu\/dla\/wp-json\/wp\/v2\/pages\/113\/revisions"}],"predecessor-version":[{"id":907,"href":"https:\/\/www.macalester.edu\/dla\/wp-json\/wp\/v2\/pages\/113\/revisions\/907"}],"wp:attachment":[{"href":"https:\/\/www.macalester.edu\/dla\/wp-json\/wp\/v2\/media?parent=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\n
Tools<\/h2>\n\n\n\n
Audience<\/h2>\n\n\n\n
Accessibility<\/h2>\n\n\n\n
Building a Website<\/h2>\n\n\n\n
Process<\/h4>\n\n\n\n
Common Elements<\/h3>\n\n\n\n
Structure<\/h3>\n\n\n\n
\n
Aesthetics<\/h3>\n\n\n\n
\n
Templates\/Themes<\/h3>\n\n\n\n
Creating Web Pages<\/h2>\n\n\n\n
\n
Long Term Sustainability<\/h2>\n\n\n\n