Wed, Oct 27

HTML+CSS

Today's objectives

  • Review HTML assignment
  • Update on Usability assignment
  • CSS
    • CSS - basic concepts
    • Rules and syntax
    • Selectors
    • Getting help and reference documents

Preparation

  • Have an approved Usability Review topic
  • Uploaded your HTML assignment
  • Have CSS handout open
  • Have viewed basic CSS video

Presentation

usability testing basics

Assignment 6

Add CSS to your web site. Basic text styles are essential; CSS positioning is suggested. Validate and check carefully.

  • Name the folder containing all your file for this assignment YOUURLASTNAME_Assignment6b.

    Compress (make archive on Mac OS) the folder and upload the .zip file to the Brightspace by 6 pm, Due Tue, Nov 02, 6:00 PM.

  • Usability test overview

    You will will play two roles in this assignment - facilitator and participant.

    You will facilitate a usability review of your the web site you chose (and was approved by me). A participant (another student) will be assigned to you. The participant will be the one who actually performs the task. The facilitator will monitor, prompt, make notes and record observations, and then use that information to write the usability report.

    In a real usability study you would have many test users, but in this assignment there will only be one.

    The study will be performed remotely. As a facilitator, you want to make sure that you can see the participant's screen, and ideally, their face. You can use Zoom (the free version is fine), or any other screen-sharing tool.

    To prepare:
    • Contact your participant. Arrange a date and time, and test out the technology you will use. Do not disclose the topic (web site) at this point.
    • If you are going to record the participant's screen or face, ask for permission beforehand. Do not share any recordings, and delete all recorded data after the assignment is done.
    • Write a clear (a few sentences) describing the objective of the test. This is basically what you sent me with your topic. Do not share this with the participant yet.
    During the test: As a facilitator
    • Make sure screen sharing is working.
    • Share the URL of the web site and the objective. Make any clarifications. If the test must end at a certain point (for example, before paying for a service) make that clear.
    • Encourage the participant to verbalize - say what they are thinking as they go through the site.
    • Don't give the participant clues or help unless they are completely stuck.
    • Remember, it's the web site that is being tested, not the participant.
    During the test: As a participant
    • Talk as you go. Say what you are thinking.
    • Remember, it's the web site that is being tested, not you.
    • If you get stuck, try to sort things out on your own. If you can't figure out what to do after trying, ask for help.
    After the test

    Complete this form: https://forms.gle/VpaqB4tWE3ZMQm186

    Problems:

    • If you cannot contact your participant, or for any other reason cannot complete the usability test on time, it is your responsibility as a facilitator to make efforts to solve the situation
    • Contact me if you cannot solve it yourself

    Resources

    Here is a good article about the basics of remote user testing: Remote user testing basics

    Complete by Tue, Nov 09, 6:00 PM.

    Handout

    Basic CSS PDF Handout.

    Examples

    Basic CSS

    See the Pen CSS Scratchpad by Robert Currie (@rcurrie) on CodePen.

    CSS Classes

    See the Pen Class selector example by Robert Currie (@rcurrie) on CodePen.

    CSS Positioning

    See the Pen Divs and positioning by Robert Currie (@rcurrie) on CodePen.

    Resources

    A good CSS tutorial for beginners

    Lots of CSS examples.

    An online tool for previewing text styles.

    Responsive web design is web design that adapts to screen sizes, from phones to desktops.

    https://getbootstrap.com is a framework (like a kit of parts) for building responsive web sites easily.

    A bit advanced, but a useful framework for building CSS-based grids.

    The W3C's CSS validator, similar to its HTML validator.

    Way too many CSS resources.

    CSS Selectors

    selector selector name matches
    h1 type all h1 tags
    .warning class every element with class="warning"
    #temporary id every element with id="warning"
    li a descendant every "a" tag within an "li" element
    * universal everything
    div.warning class every div with class="warning"
    div#temporary id every div with id="warning"
    a#active pseudo-class every a tag in the "active" state - that is, the mouse is hovering over it.

    A good CSS tutorial for beginners

    Lots of CSS examples.

    Centering

    Centering in CSS is, well, odd. You can center text easily enough, but how do you center a div? Here's how:

    #divname {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
    }

    In the example above, the div is given a width of 800px. If you want to center the whole page, wrap all your content in a div and center that.

    Bootstrap

    The Bootstrap framework is a set of CSS components to speed the building of responsive web sites.

    CSS Resets

    CSS Resets. Getting rid of the built-in styles your browser applies.

    Fonts

    Typekit. A service for managing CSS fonts. A free option is available.

    Google Fonts. A free service for embedding fonts - but the range of options and quality is not as good as commercial services.

    CSS Frameworks

    The Pure CSS Framework. Pre-built components for web projects.

    Learning more

    A complete, free course on front end web development.