Kirk's Pet Peeves; do these things if you want a lower grade
Links
- "Click Here", this isn't the 90's anymore
- having underlined style links with spaces at the beginning or end of the link (underlining spaces looks silly)
- email addresses - always create a mailto link when displaying an email address - like this: hopkinks@miamioh.edu
- links that open improperly - if the link takes the user away from your site or menu system you need to use a target="_blank" to open the link in a new tab/window (governed by the user's browser)
- broken links - bad, bad, bad (see broken images common problems)
Images, Audio, and Video
- broken images - bad, bad, bad (common problems)
- using something like file://Users/KirkHopkins/Desktop/FabulousPicture.jpg won't work
- using something like https://www.netdisk.miamioh.edu/apps/display_file.php ?path=windows%3A%2FMyFiles%2FH%hopkinks%2FPUBLIC.WWW%2FIMS222%2Fimages%2F YouProbablyCantSeeThis.jpg&nocache=0123456789 won't work for anyone but me if I'm logged in
- using something like /MyFiles/H/hopkinks/PUBLIC.WWW/IMS222/images/AnotherFabulousPicture.jpg probably won't work either
- animated GIF's
- automatically playing audio/video on page load
- stretched photos
- images without an "alt" tag
- videos without closed-captions
- background images - be careful, it's easy to mess up a page with them
- images that are huge and can take a while for the page to load, a general rule of thumb can be that images should be smaller than 1024 wide and less than .5MB
- other people's images - don't use their's, use your own - this includes glyphicons - don't use "free" ones either - make your own - with the exception of facebook, linked in, and twitter type icons
Aesthetics
- marquee (sliding text or pictures) - don't use it
- blink - don't use it
- seizure causing image/background changes - don't do it
- designs and/or images that don't scale (i.e. not responsive)
- designs that are too busy
- designs that change on the website (i.e. different from one page to another)
- illegible text (usually on a background that makes it difficult to read)
- using someone elses graphics, color schemes, and styles (with little to no changes)
- have a peer/friend review your page on their computer and with multiple devices and browsers, how does it look to them?
More Technical
- flash (doesn't work on iOS, thankfully)
- bad grammar
- poor spelling
- inappropriate amount of content
- pop-ups - they are annoying and often blocked by the browser
- underlining - don't use underlines unless it is part of a link
- don't use images and pdf's in place of a web page; saving a resume as an image or pdf and including it on a web page does NOT count as a web page, build the page as HTML
- web version for a pdf - indicate pdf documents with "pdf" - web content and pdf content (not necessarily styling) should match
- inconsistency - grrrr - be consistent with your whole web site (menu system, color scheme and styling)
- poor communication - the user doesn't have you there to explain things, your pages need to explain things on their own
- messy mark-up/code - your HTML and CSS should follow a pattern with indenting and be the same throughout your site; random spaces and tags with typo's also drive me crazy
- unnecessary HTML and CSS - including things that are not used just makes your site more difficult to maintain
- font tags - use CSS instead
- bad semantics - don't go from h1 to h2 without an h1 between them
- testing - view your pages with multiple browsers, at different sizes, and have a peer/friend look at it to see what they think, your pages need to function properly everywhere for everyone