Marking Comments Abbreviations – WRMF.ca (Transferred)

Title: For Search Engine Optimization and Bookmark specificity, a best practice is to put the site name in the title, along with something page-specific. A page title like “article”, “contact” or “resume” does not provide a search engine much useful information. Bookmarks with titles like that are pretty much useless.
Validation: Either the HTML or the CSS, or both, did not validate. Remember to always validate your code: making your code as standards-compliant as possible is the best way to make sure it renders properly in as wide a range of browsers as possible.
Proximity: Adjust box model properties like margin and/or padding to bring related content closer together. Group elements so that there is less space between the related content pieces and more space between separate content.
Line-Length: long: If your line-length is too long (typically at Desktop width), the eye can get lost in the jump from the end of one line to the start of the next. Most typographers recommend between approximately 45 and 75 or 80 characters in your average line. Adjust font-size, box-model properties, or other aspects of the layout to maintain line-lengths within this range at all or at least most responsive breakpoints.
Line-length: short.: Conversely, if your line-length is too short (typically at Phone width), it’s harder to read because the eye has to move from the end of one line to the start of the next too often.
Line-height: The longer the line, the greater the line-height needed for the eye to comfortably jump to the next line. However, with shorter lines (as typically found at lower breakpoints), readability is often enhanced by decreasing the line-height.
Contrast: Dark text on a dark background (or light text on a light background) will be difficult for a lot of people to read. It is always better to have too much contrast than too little. Remember also, that we have no control over how bright the monitor a user is seeing your page on. If the monitor is a little bit dark, then reading that text will be even harder.
Spelling or Grammar: There are lots of online spellcheckers and grammar checkers.
Hierarchy: Content structure is not entirely clear.
Underlining: Underlining anything that is not a link is usually not a good idea: people think that text is a link. Consider using borders instead (they will go wider than the underlining, and will therefore be less likely to be confused for links).
Semantics: To ensure SEO and accessibility start at h1 and go through the headings in order. You can always modify sizes via CSS. Do not start at h3 simply because the default size fits your design.
Viewport: You did not include the VIEWPORT meta tag. This tells the browser not to scale the page down. This is important because otherwise the words in most webpages become unreadable.
As well, your media queries typically will not work without the viewport meta tag. The moral: always test your pages on phones and tablets as well as desktop. This problem is immediately visible when you check your work on actual devices. ( Everyone forgets that line of code from time to time … )
Stylesheet Order: If using a reset stylesheet, put it before your own styles. If using a grid stylesheet, put it between those two.
Justification: Be careful with justification in text. The narrower the paragraph, the more dangerous justification can be: it tends to introduce gaps in the text. In print, there are ways to compensate for that (manipulating tracking and kerning), but we do not have the same control on the web. As well, dyslexics apparently have more trouble reading justified text than left-aligned text. At the very least, you can disable justification as the line-length shortens (such as at phone width).
404s: You have broken page links. Check your paths.
Broken Images: You have broken links to images. Check your paths.
ALT: Some or all of your images are missing ALT attributes.
Deprecated Tags: You have used obsolete tags. Tags like CENTER, for example, have been removed from the language. As a rule (although there are exceptions), if a TAG only describes appearance, it is likely to have been deprecated.
Image Sizes: Either your images were not compressed properly, or they have not been sized properly.
Unsafe Fonts: Font or fonts chosen were not part of the standard “web stack” (or not hosted fonts). Consult www.cssfontstack.com for examples of websafe fonts.
Text/Box: Adjust margin or padding values to prevent text from getting too close to the edge of their boxes or to the edge of the browser window.