To check out and include:
- http://webdevchecklist.com/
- https://asafaweb.com/
- https://www.owasp.org/index.php/XSS_(Cross_Site_Scripting)_Prevention_Cheat_Sheet
- http://jonassebastianohlsson.com/specificity-graph/
A list of elements that needs to be defined for the website to be ready for big action.
- Language
- Metadata
- Opengraph
- Icons
- Roles
- Styles
- Humans
- Futurefriendliness
- Performance
A <html> element at the top of your document should have the language specified. Remember about proper language codes: en-us, pl-pl, etc.
The site needs those in the <head>:
title-- the page title, best if every subpage has it's own (with the order beingPOST -- CATEGORY -- SITE)meta name="keywords"-- a list of,-separated tags that describes the contentmeta name="description"-- a short paragraph describing the content of main site, category or a single postmeta name="author"-- a list of,-separated names of main people involved in the project<link rel="author" href="humans.txt">-- an url leading to thehumans.txtfile<link rel="home" href="http://site.url">-- a link to home root page
Opengraph meta elements -- mainly for facebook link sharing:
<meta property="og:type" content="website">-- the type of document, for the most projects it's "website"<meta property="og:site_name" content="name">-- the name of the site<meta property="og:title" content="title">-- the same as in Metadata<meta property="og:description" content="description">-- the same as in Metadata<meta property="og:url" content="http://site.url">-- the same as in Metadata<meta property="og:image" content="image-200.png"/>-- an image with dimensions at least 200x200 px
<link rel="icon" href="favicon.ico">-- a favicon that should be placed in the root directory<link rel="apple-touch-icon" href="apple-touch-icon.png">-- an image with dimensions of 152*152 px
There is a long list of ARIA roles that exists as a draft. There are some crucial, some useful ones and a bunch of HTML5 tags duplicates. Use the second ones with caution, and don't use the third ones -- if you need them, it means that your markup is probably not semantic enough.
The must:
banner-- the main header element of the page with logo, main navigation, etc.contentinfo-- the main information about the document with meta info, copyright, company name, etc.complementary-- the one<aside>element that corresponds to the main contentmain-- the main content, for example:<section class="page-content" role="main">navigation-- for the main menu (in the header an footer aswell)search-- the primary search form
The useful:
tree-- a multiple-nested list of items that can be collapsed and expandedwidget-- an abstract widget component, with some more-specific cases existing:alert-- a flash message about some event, time-sensitiveprogressbar-- a progress bar time-relatedtimer-- a countdown, or other time-related automatically updating elementtooltip-- a contextual popup with description of an element
There are some things in your CSS stylesheet that must be included and taken into consideration:
- all links should have
:focusstate - the
::selectionselector should be populated with project colors - all links should be recognizable (for text links it is best to underline)
- test color contrast with some online tools
Introduction and being thankful in the humans.txt file.
A README.md with the page maintenace, update and inner workings explained. Don't be very specific -- your HTML markup, SCSS styles and JavaScript scripts should be semantic and well commented instead.
- Run some overall tests:
- Optimize images with ImageOptim on Mac or Kraken.io Web Interface
- Check loading times at GPRS or EDGE speed
- Check accessibility at tiny screens
- Check links and interactive elements for
fat-fingers