Skip to main content

Web Unit Workshop

Texts to have read
  • Any remaining tutorials from the scheduled assignments
  • Any tutorials or documentation you find on your own to help you achieve your design vision
Work to have achieved
  • a solid attempt at a complete website portfolio, ideally meeting baseline criteria. Rough edges are still welcome.

Please make sure your files are all committed and pushed to GitHub, and indicate at the top of your README file where to find your landing page! In absence of reasons not to, go with ~/docs/index.html.

Relatedly, if you're using Jekyll or React or something like it, please give instructions on how to load your most current rendered website, e.g. a link to the published GitHub Pages site. In that case, partners, you may want to View Source on the final rendered page.

Plan for the day:

  1. Update the workshop cycle for our unit (3 times 15-20 min)
    • Describe what you see in the HTML, then in the browser
    • Evaluate using our shared criteria
    • Suggest ways to level up
    • Post comments on the latest commit
  2. Identify your partners
  3. Work through the cycle (and reflect)
  4. EXT homework: forum on consolidation unit

1. Update the workshop cycle for this unit

Like the last two times, I’d like you to use a workflow that, first and foremost, helps you see what’s already happening.

It takes practice! Please do try: it helps make your comments more concrete and actionable, for both your partner and yourself. It’s great to like something, but if you can’t say what you liked, the creator can’t build on that knowledge as effectively… and you may not be learning as much as you could by naming what you value.

A good test is whether you can tell, just from reading your comment, what you were reacting to.

1a. Describe what you see

Begin by saying back what’s there, so your partner knows whether their intentions are being understood. NB: For this unit, in which display is a separate – and often challenging – concern, I’m going to ask you to use a two-step description:

  • First look at the HTML, and say back what you see there. What seem to be the major content areas? What’s given top-level focus? (e.g. what kind of things are getting their own pages, or what’s at <h1> status within a page?) What’s next in the hierarchy?
  • Once you’ve done that, turn to the browser and repeat the process for the display. What’s given visual weight? What falls “above the fold”? Where are you invited to go next?

1b. Evaluate using our shared criteria

Review the baseline criteria and aspirational goals we set last week, which I’ll paste below for convenience.

  • Is your partner’s draft meeting baseline criteria? If not, where not?
  • Where is your partner’s draft going beyond baseline? Is the draft already meeting any particular aspirations?
  • Does the hierarchy of the display correspond to the hierarchy implied by the HTML? If not, describe where they differ.

NB: This is still a form of description, not a judgment of anyone’s ability. We’re all still learning here!

Baseline For a minimum grade of B, all projects for this unit must…
  • Use arrangement, size, color, visual rhythm, and/or contrast to focus viewers' attention.
  • Include at least 3 navigable html locations (separate pages or distinct scrolling locations on the same page)
  • Include a sitewide CSS stylesheet (i.e. an organized visual theme)
  • Link internally from all pages (no dead ends)
  • Include at least one licensed or fair-use image, with alt text
  • Credit all assets correctly on the site itself (or link to credits in the repo), including Title, Author, Source, and License
  • Successfully load all elements in a web browser, at least locally (i.e. file paths should work on any computer)
  • Use meaningful commit messages that say what’s changing (or even why)
Aspirational

To target (but not guarantee) a grade above a B, the best projects for this unit may do some (but probably not all!) of the following:

  • Dynamism
    • Use responsive design (e.g. @media queries, flex-wrap, auto-fill, etc) to dynamically resize elements based on viewport width
    • Animate HTML elements via CSS or JavaScript (e.g. image carousel, @keyframes, :hover / :focus events, etc)
    • Swap in/out content via JavaScript (e.g. on-click events / functions)
    • Use JavaScript file to help construct the web page (e.g. dynamically load images from a folder)
  • Coding
    • Validate your HTML
    • Use Flexbox or Grid layouts
    • Use classes shared across multiple elements to minimze repetition in your CSS
    • Use Jekyll to minimize repetition in your HTML through templates and variables
    • Use CSS preprocessors (e.g. SASS, LESS) or custom properties to minimize repetition in your stylesheets
    • Add comments, whitespace, and other formatting to code to make it more readable
  • Audience Engagement
    • Use non-default fonts, drawing on visual unit knowledge
    • Use best practices for accessible design (see W3's Four Principles and the WAVE web accessibility evaluation tool)
      • These include, but are not limited to, using semantic HTML elements like <section> and <nav> instead of <div>
    • Use breadcrumbs or other cues (e.g. sticky / static nav) to help readers locate themselves within the site, no matter where they begin
    • Optimize image filetypes, resolutions, and file sizes for faster loading
    • Load site publicly over the internet (e.g. with GitHub Pages)
  • Reflection (not due yet!)
    • Make a clear argument in your reflection as to why you met enough of the aspirational criteria to be stretching the abilities you came in with: e.g. clarify what skills you came in with, and what was new
    • Justify the website's structure for its intended purpose / audience
    • (For all of the above, clarify your compositional choices and goals (e.g. design hierarchy)
    • Refer to specific tutorials or reference materials that helped you in your design
    • Discuss what you would do if you had more time, and why you didn't have time now

1c. Suggest ways to level up

  • Is the draft almost meeting any particular aspirational goals? Which would you suggest trying next?
  • Any other ways to improve that you can suggest, based on the readings and advice we’ve discussed in this class?
  • If there was a mismatch between the hierarchies in the presentation and the content, which of these would you suggest changing, given what you think the intention was? (Commit messages may be helpful in figuring this out, if you have time.)

1d. Post comments on the latest commit

Finally, make sure you post all these comments – in respectful language you’d be comfortable sharing publicly – on the latest commit on the project’s GitHub website.

As a reminder, here's how and where to leave / find comments on GitHub.

Just...

  1. click through to the history of commits (the clock button);
  2. click on the _commit hash_, the set of random-seeming numbers and letters almost at the end of the top row (i.e., for the most recent commit); and
  3. scroll to the bottom of the _diff view_ that appears. You'll see a comment box there:
    screencast of the three steps just described

2. Identify your partners

As usual, you’ll want to click through to the next three people in your row, wrapping around when you hit the end.

Go ahead and click through to first your partner’s repo, and either clone or download the zip file by clicking on the green code button. The latter will be a faster download than cloning, with just the latest snapshot. (But if you want to see revision history, the zip means you’d have to do it on the web.)

Show me
Code button to clone repo; also includes the URL to use with the command line.
What to do if your partner's draft is missing
  • If one of your partners hasn't turned in a draft, first check with them to see if they need help getting their files onto GitHub.
  • If they're not yet ready to post, skip to the next person in your row.
  • If by skipping you've wrapped all the way around, BUT you've left at least one comment, you can reclaim the rest of the time for studio.
  • If you've wrapped all the way around and still don't have even a single a draft to respond to, jump down to the next row so you can give at least one comment today. It's to your benefit, too! Look for someone who's absent, and write one of the reviews they were assigned.

3. Work through the cycle (and reflect)

Repeat the steps above for three partners. On subsequent loops, note that after viewing the project first, you may also want to read and/or refer to the previous comments.

But this is not just a way of ensuring that you get feedback from three partners; workshop is also a way of training your eyes, and of realizing new possibilities. As we head into Thursday’s studio class, think about what you’ve seen that you’d like to try. What suggestions would you give yourself, now that you’ve given suggestions to others?

EXT / Homework: Thinking ahead

  • Continue to save, commit, and push toward your project, incorporating feedback from partners.
    • If you didn’t get feedback from three partners, please let me know asap! I’ll prioritize you for my own feedback.
    • Likewise, if you haven’t finished giving feedback, please do so asap, and no later than noon on Wednesday for full credit.
  • Next class will be a web designers’ studio: bring whatever you need to work towards finalizing your website portfolio, including headphones if you prefer sonic isolation while you work.
    • The final-for-now draft is targeted for end-of-day on Sunday, with a reflection due by noon on Monday; see the assignment prompt for further details.
    • This will let us preserve the last few weeks of class for consolidation / integration, which might look like continued revision of any project so far, or (if you’re happy with your earlier products) one more quick project cycle, possibly in collaboration with partners.
  • Toward that latter end, as I did at the same point in the audio and visual units, I’m inviting you to think forward into the final unit: what further possibilities of digital composition might you want to explore? How might your earlier projects fit into a larger context or series? See the issue queue for more details.
    • There is no minimum length for this post, but this is a good time to start gears turning about potential collaborations…

Oh, and one more thing! We’ll be joined on Wednesday by one of my colleagues, Dr. Alexandra Hidalgo. We’re visiting each other’s classes to provide teacherly feedback in much the same way you’re visiting each other’s websites to provide design feedback. Let’s please make her welcome!