Langara Outlines

Marking Comments Abbreviations

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.
Standard