Categories
CSS HTML

Magazine Assignment Checklist

Please review this checklist before the Magazine assignment due date.

Validation & Semantics

  • did you validate your html?
  • did you validate your css?
  • do your images have correct alt information?
  • are you setting up a hierarchy of meaning with appropriate heading levels?
  • are your sectioning tags (div, article, nav, footer, header) correctly used?

Graphics

  • have you chosen the correct format for your graphics?
  • are your graphic file sizes kept low?
  • are your graphic dimensions appropriate? Find your maximum needed image sizes, and then resize the images in Photoshop or another tool like the very useful XnConvert.
  • if using background graphics, do they hinder readability of text?
  • are file compression artifacts visible?
  • are all your image and text sources accounted for?
  • were good images chosen? do they support the text?
  • is there a variety in image treatments?

Graphic Design

  • does your design illustrate an understanding of the graphic design principles of contrast, alignment, proximity, and repetition?
  • is white space used effectively?
  • are there any cliché aspects to the design? for example, just because you can make a shadow in css doesn’t mean that you should make one.
  • are any design elements overdone? for example, if your heading is already bigger and in a different font, it probably doesn’t need to also be underlined and italicized.

Typography

  • is your text easy to read? This is probably the most important consideration for the project.
  • does your line-length get too long or too short at any point? For paragraph type, try to stay within 45 – 85 characters. At the smallest breakpoints, you likely won’t even hit 45 characters, but definitely try to avoid paragraphs that have only a couple words per line.
  • did you specify “fallback” fonts, even for google-hosted fonts?
  • if using hosted fonts, are you making the user download some that you’re not using?
  • do your typographic heading choices establish an obvious hierarchy of meaning?
  • does the flavor of the fonts you’ve chosen match your content?
  • did you spellcheck and grammar check all your written text?
  • if using wikipedia text, did you remove the footnote markers? ( eg [14] )
  • is there sufficient contrast between type color and the color of the background? For a good color contrast tester, use this excellent tool.

Responsive Design

  • does your design “break” at certain sizes?
  • at any point, does your text get too long or two short?
  • at any point, do you have text (or other elements) sticking out of their containing elements?
  • is text touching the edge of the screen or visible boxes at any point?

Contact Form

  • is your contact form accessible?
  • is your form nicely laid out, with care taken to honor the graphic design principles listed earlier in this checklist?

Pages / Links / Etc

  • did you test every page, and every link, and check that every image is showing up?
  • does your 404 help your user recover from the error?
  • is your navigation logical and consistent?
  • does your navigation include the typical things that would be in a magazine website?

Content

  • is this actually magazine-style content? there’s a difference between a magazine and a business website, for example.
  • is your “teaser” text likely to make someone want to read the article?