Rubric

[jgagne]

Article Rework

Rubric Task List

20 tasks (5 points each) with 2 extra credit tasks.

Markup & Style

45 points

• [x] Use of lowercase alphabet for all markup, style, and file/folder names (also class, id, and file/folder names should not include spaces, instead use a hyphen - or an underscore _ in place of a space).
  • For example: <section id="section-1"> instead of <section id="Section 1">; main.css instead of Main.CSS
• [x] Use of semantic section (header, nav, section, etc.) and semantic text-level elements (strong, em, time, etc.)
  • See HTML5 Doctor’s HTML5 Element Index
• [x] Use of <link> element for external style sheets and canonical content
  • <link rel="stylesheet" href="css/main.css"> to link an external style sheet
  • <link rel="canonical" href="http://…"> for search engines to index the original source of content
• [x] Use of accessible colors contrast ratios with a cohesive color palette throughout the page, from artwork to links
• [x] Use of :hover, :focus, and :active interactive state styles for all links
• [x] Use of basic typographic and box model layout (focusing on padding, border, and margin) styles
• [x] Use of web safe fonts
  • See CSS font stacks for fallback replacements
• [x] Use of similar font-size for paragraphs (<p>) and navigation list items (<li>) for readability
• [x] Use of fluid, flexible, responsive images CSS
  • For example:

    img {
    width: auto;
    max-width: 100%;
    height: auto;
    }

Artwork

20 points

• [x] Create vector-based artwork (Illustrator, Sketch, etc.) with a 2:3 (4:6) aspect ratio
  • For example: 1920 x 1280

• [x] Save artwork as PNG and SVG

  • Save as PNG; (PNG-128) at 1920 x 1280, but no larger than 2048 x 1365
  • Export and Save for Web (Legacy…)

    
  • Save as SVG
  • Save As…

    

• [x] Optimize PNG with ImageOptim

  • Enable these settings in ImageOptim > Preferences…

  

• [x] Use of <img> element with the following attributes:
  • alt defines meaningful alternative text (alt text)
  • See When writing alt text, ask yourself this question
  • src defines the default image (or fallback image when the srcset attribute is also in use)
  • For example: PNG has wide browser support
  • srcset defines the set of images we will allow the browser to choose between and what size each image is
  • For example: SVG has partial browser support and should not be used as a default image format
  • width and height defines the intrinsic width and height of an image
  • See Setting Height And Width On Images Is Important Again

SVG

10 points

• [x] Optimize with SVGOMG

  • Use these settings:

  

  • tl;dr: Enable all options, then disable these 6 options:
  • Compare gzipped
  • Remove xlmns
  • Remove viewBox
  • Sort children of <defs>
  • Remove <title>
  • Remove <desc>
  • Note: Feel free to adjust the Precision slider from 0 to 8; 8 being the best quality
• [x] Post production for better accessibility
  • See Accessible SVGs and production SVG markup for details
  • Add ARIA role="img"
  • Remove width and height attributes; use viewBox attribute instead
  • Add viewBox attribute; viewBox="min-x, min-y, width, height"
    • For example: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1280" role="img">
  • Add <title>Illustration by…</title> element
  • Add <desc>Alternative text…</desc> element

Validation

15 points

• [x] Validate HTML (No errors; warnings are ok, but try to resolve)
  • URLs that end with ? followed by parameter values; the query string can be removed for validation
  • For example: https://www.nytimes.com/newsletters/smarter-living?module=inline becomes https://www.nytimes.com/newsletters/smarter-living
• [x] Validate CSS (No errors; warnings are ok, but try to resolve)
• [x] Test My Site (Score a 100 in both the Performance and Accessibility categories)

GitHub

10 points

Remember to use lowercase naming…

• [x] Repo should contain only essential files:
  • index.html
  • css (folder containing an external stylesheet)
  • For example: main.css
  • img (folder containing images)
  • For example: headshot-tim-herrera.jpg
  • wip (optional folder containing work in progress files, from original artwork to test pages)
  • For example: 9780762494125_TimHerrera_EarlWilson.psd
  • README.md
  • Update this file with a proper heading (title) and paragraph (description)
  • Markdown basics and dingus
• [x] Add a description and URLl to your GitHub repo
  • Example description: Rework of the New York Times article 8 Ways to Work Smarter in 2020.
  • Example URL: https://github.com/jgagne/article-rework

Extra Credit

10 points

• [ ] Use of mixing font-weight, font-style, and text-transform with one or more fonts for headings, paragraphs, captions, etc.
  • See Mixing Fonts
• [x] Use of jump (skip) links to the <main> content, at top and bottom, of the page
  • See Anchors OK? Re-Assessing In-Page Links

[jgagne]

Please review and update the sizing of your navigation's list items compared to your paragraphs and the color contrast ratio of your links for better readability.

• [ ] Use of similar font-size for paragraphs (<p>) and navigation list items (<li>) for readability
• [ ] Use of accessible colors contrast ratios for link colors