New Website Quailty Checklist

For those that want to get nerdy...
We use this checklist with all of our custom designed websites.

Checklist flaticon orange e1eb5480e3ce64c1d3f546133a7eafb378aa58af9709b89569a2e45a1123cfaa

    Basic Styling

  • Mobile responsive (not just mobile adaptive)
  • Navigation links are hidden if larger than 3 items
  • Navigation links are visible if only 1 or 2 items
  • Navigation is fixed to the top
  • Hamburger icon does not have a border around it
  • If in-brand, hamburger icon has "Menu" written within the icon
  • Footer is organized into columns, organized by content type
  • Background colors bleed to screen edges when possible
  • There is one main purpose and action on each page throughout the site
  • Buttons are large and obvious
  • Print styling looks nice too
  • Form input fields look visually inviting
  • Form input fields have brand-appropriate border colors
  • Buttons show styling variation when hovered over
  • Button hover transition is gradual and flows well
  • Content fits in content boxes for all screen sizes
  • Quality

  • Text is legible without screen zooming or pinching
  • Logo is legible without zooming in
  • Footer has all links in navigation, and more
  • Logo is replicated in the footer
  • Logo links to home page in the navigation and the footer
  • No text touches the edge of the screen
  • Buttons creatively describe the action that they do
  • Contact Us page is easily available
  • Drop downs work properly and repeatedly
  • Column grid layouts are used instead of tables for responsive design when possible
  • Forms send information to desired location
  • Error pages are stylized within brand
  • Images render the proper size
  • Mobile responsive images crop to target area of image
  • If a map is present, it fits within the width of the page
  • Icons display on all devices and browser sizes
  • Modals have fading in/out transitions
  • Modal information loads properly
  • Modal auto-closes when desired
  • Any auto-scrolling happens gradually
  • All links work, and lead to the appropriate page
  • Data

  • Use tabs, not spaces, when possible
  • HTML5 tags are used (rather than older HTML)
  • HTML is indented according to the DOM tree
  • Key content boxes are closed with informative code comments
  • CSS3 is used, SASS if possible
  • The CSS file is organized first by purpose, then alphabetically
  • Inline CSS is almost never used
  • CSS files are names for their purpose
  • Input fields placeholder text is informative and not too long
  • URLs are custom and named with dashes, not underscores
  • Images have SEO-friendly alt tags
  • Social media icons are present via SVG image, an in-brand color, and are external links to appropriate pages
  • Pages have custom "Tile | Subtitile"
  • Page description is present and accurate
  • Coding company contact info and month of work can be found commented in the stylesheet
  • 404 and other error pages are present
  • Favicon is present
  • Text is proofread for typos and bad grammar
  • Site is submitted to Google search engine crawler
  • Google Analytics code is input for tracking if desired