UI Feature Checklist

The UI feature Checklist provides a list of functionality that may be added to a site or application. This checklist is great to review during a project to determine if any key features where missed and get ideas for future enhancements.

	Feature	Example
Setup
	Create a beta site and production site
	Review the UI/UX Checklist	http://www.desaraev.com/2016/06/uiux-checklist.html#top
	Pattern Library
	Sitemap
Content Management System
	Blogger
	Wordpress
	Magento
	Joomla
	Drupal
	Liferay
Framework
	Polymer
	Bootstrap
	99Lime
	Vaadin
	CMS Assets
Pre-processor
	SASS/SCSS	Tools: Prepros/Compass
	HAML/LESS
HTML5 Layout
	<header>
	<nav >
	<section >
	<article >	self-contained article
	<aside >
	<footer >
	<details >	additional details
	<summary >	Defines a heading for the details
HTML5 Elements
	<figcaption >	Figure Caption
	<figure >
	<main >	main content
	<mark >	marked or highlighted text
	<time >
Media
	Video
	Audio
	Transcript
	Animations
	eBook
APIs
	Geolocation
	Drag and Drop
	Local storage
Messages
	<noscript>Sorry, your browser does not support JavaScript!</noscript>
	Warning
	Success
	JavaScript Notifications	Before leaving a page
	Error
	Information
	Responsive message
Elements
	<abbr>	Abbreviations
	<address> </address>	Address
	<cite>	citation
Characters
	© ©	Copyright
Attributes
	Sprites	Can be automated with SASS
	Create variables	Great for colors that may change
	html lang="en-US"	Important for accessibility/search engines
	img alt=""	Important for accessibility/search engines
Tags
	hr	Separate content
Meta Data Meta data is in the head of html and is not displayed.
	title	title of page
	keywords
	description
	author
	character	<meta charset="UTF-8">
Microformats/Microdata
	Resource Microformats
	Schema
Navigation
	Primary Navigation	Top/Left/Right
	Dropdowns	DO NOT USE jQuery or Hover ONLY
	Secondary	Aside, sidebar, under a horizontal nav, toggle from side nav
	Pagination
	Back to Top
	Keyboard only cheatsheet
	Breadcrumbs
	Bookmark	<h2 id="tips"><a href="#tips">
Lists
	Add type attribute (numbers)	type="1"
	Add type attribute (uppercase letters)	type="A"
	Add type attribute (lowercase letters)	type="a"
	Add type attribute (uppercase roman numbers)	type="I"
	Add type attribute (lowercase roman numbers)	type="i"
desclist	Description lists	<dl> <dt> term <dd> description
	Remove list style
Tool tips
	Help documentation
	Form descriptions
	Title tags
	Hover/focus help text
Fonts
	Web Fonts
	Glyphicons
	Font Awesome
	Google Fonts
Background/ BG Images
	Backstretch (JS)
	CSS3 Bg Image stretch
Colors
	Adobe Kuler
	Noise Texture Generator
	Subtle Patterns
	Paletton
Social Media Sharing
	Facebook
	Twitter
	Reddit
	Pinterest
	Dzone
	Auto posting
	Delicious
	Repost to a blogger/tumblr/wordpress page
	IFTTT integration
Comments
	Gravatar Integration
	Disquis
RSS
	Email Subscription
	Feedly
	Feedburner
Email Newsletter
	Link
	MailChimp
	Constant Contact
	MyEmma
Affiliates
	Links
Alternate Stylesheets
	Extra Themes
	Projection
	Print
	Responsive
Tables
	Responsive
Final Review
	Clean up excess or hidden code	Can be done with preprocessors
	Minify Code/Create Sprites out of common icons/images	Can be done with preprocessors
	Responsive testing
	Browser Testing
	Mobile testing
	Integrate Analytics
	Test Readability
	Eye Tracking Study
	GTmetrix Speed test
	W3C Validator
Resources for Inspiration
	GitHub
	Codepen
	Breadcrumbs
	Smashing Magazine
	w3 Accessibility

Note: This checklist only includes elements that I might overlook and tasks that I am capable of on my own. It is not a comprehensive checklist for application development.