Module 1: HTML 5 and the Design of Web Content

Purpose

After doing this assignment, you should be able to:

  • Build webpages using valid HMTL 5
  • Understand the syntax or rules of HMTL 5
  • Understand some of the components of HMTL 5 and what they do
  • Understand how to FTP HTML files onto a server for storage
  • Begin to understand the web design principle of separating content from style
  • Understand some of the goals and techniques of content strategy

Technologies

On this module, you are encouraged to use any technologies  available to you, including word processors, web browsers, and online applications (e-mail, chat, blogging, productivity, workflow, etc.). We will cover some of these technologies as we go along, but you can use any that you are proficient with or want to experiment with on this module.

You will definitely need access to the following technologies to complete this module:

  1. A working and recently-updated Internet browser (Google Chrome, Firefox, or Safari are recommended)
  2. A word-processing application that allows for the production of HMTL documents in web-standard formats (TextWrangler for Mac  or Notepad++ for PC are recommended)
  3. A reliable email client (Outlook, Apple’s Mail, or Gmail are recommended)
  4. A reliable File Transfer Protocol (FTP) client (Cyberduck for Mac, WinSCP for PC, or FileZilla for all platforms, or FireFTP if you use the Firefox browser, are recommended; Fetch is another alternative for Mac which I personally prefer because of how usable it is, and it is available for $29)

Situation

I have found that the best way to learn design is to jump in and do it, and so your assignment in this module is to think up some content you want to display on the web and to build at least two webpages from scratch using valid HTML 5 that display some of that content. These should not be just any old webpages, however, but the first of many you will build as part of the website you’ll be designing from scratch in this class.

Your first task, as I mention below, is thus to think about the users of the website you will create, what kind of content they want to see from you, and how you will get that content to them.

As I have said many times: “design is easy, content is hard.” Getting high quality content to people that need and want it is always the real task of any web designer worth his or her snuff. Master that and you will serve the world well. Make a wonderful website without mastering this and it will sit on the web where no one will ever see it except by accident.

Deliverables You Must Produce for this Project

The following must be posted to Blackboard by the following date / time:

  • Homework #1 – 5/21/14 by Midnight ET
  • Cover Letter, a link to your webpages, and a draft content strategy guide – 5/26/14 by Midnight ET

The following must be posted to this course website by the following date / time:

  • A link to your webpages – 5/26/14 by Midnight ET
  • An answer to my design question (see below) on the posts of each of your peers – 5/27/14 by Midnight ET

Audiences

The primary audience for your module is myself, an experienced web and UX designer who will assess your webpage for not only its design but also its content (see the grading criteria for this module). Potential users of the website you will build around this page are an important audience to consider as well, however.

To Complete This Project (Workflow)

1) 5/21/14 by Midnight Eastern Time >>

Do Homework #1

2) 5/21/14-5/26/14 >>

As I mentioned above, the key to web design is to begin by thinking about actual users, meaning real, live people who will use the thing you’re building. I do this in the following order:

Come up with a content strategy:

  1. Audience: Who are you trying to reach and where are they? How do they get information? How will they get your information?
  2. Goals: How will content support your overall strategy? What should it accomplish for your organization? For your users?
  3. Resources: How much time and money do you have for your content? What skill sets are on hand?
  4. Key messages: What are the top organizational messages you want content to communicate? What do your users need?
  5. Voice and tone: How does your brand translate to your online presence? What should you sound like?

(via p. 39 of Wattcher-Boettcher)

If you are struggling to come up with answers to the above:

  1. Do you have a professional website that is searchable, well-created, and allows people to find you and your particular brand of expertise?
  2. Look around you: what are local people and organizations in your immediate environment that need help getting content to people? What can you build to help them do so?

Start building reusable content:

  1. Content types: what types of content do I need to create?
  2. Content elements: what specific attributes do actual pieces of content need to have to satisfy users?
  3. Chunks of actual content: do I have any content that I’ve already created laying around that I might mine for reusable content
  4. Content audit: is there already something that has been made that I need to make better, to tear down and redesign, or to better organize?

(see Chapter 3 of Wattcher-Boettcher)

Start building webpages:

Using the Murach book, build a minimum of two webpages in valid HTML 5 with some content in them. I don’t care what the content is, but the webpages should be valid and the content should somehow be in line with the initial strategy you created above.

(see especially Chapter 3 of Murach)

Writing webpages with HTML is easy:

  1. Write valid code in a text editor (one of the ones mentioned above, under Technologies).
  2. Save it as an .HMTL file (in this format: name.html).
  3. FTP your HTML file (again, see Technologies above) to the server at the sub-domain I’ve created for you.
    • To FTP a file, you need three pieces of information: the hostname of the server where the file needs to go, your username for accessing that server, and your password for accessing that server.
    • The hostname of the server is the same as the name of the sub-domain I’ve created for you for this class, which is   http://yourfirstname.guiseppegetto.com, minus the http:// (e.g., mine would be guiseppe.guiseppegetto.com).
    • Your username is your first and last name (e.g., mine would be guiseppegetto).
    • You should have received your password via email.
    • So, download one of the free FTP programs mentioned under Technologies, enter this information, and you should be able to transfer any file to the domain I’ve provided you with.
  4. Once you’ve successfully FTPed a file, go to the address http://yourfirstname.guiseppegetto.com/name.html and your content should appear.

Revise all your documents and hand them in:

  • Cover Letter, a link to your two (or more) webpages, and a copy of your draft content strategy guide are due to Blackboard by Midnight ET
  • Links to your webpages and a copy of your draft content strategy guide are due to this course website by Midnight ET

3) 5/27/13 by Midnight ET >>

Post an answer to the following design question as a comment on the posts of each person’s webpage on this course website.

Each module, I will ask you a design question, which you must post a response to as a comment on the posts of each of your peers. Your design question for this module is the following:

  • Looking at this author’s webpages and initial content strategy guide: who do you think the users are of the website they are starting to build? And more importantly: do you think these webpages are appropriate for these users? Why or why not?

Grading Criteria

Can be found here: grading criteria for this module