FrontEnd-Audit-example

Front-end Audit

Site: My Cool Site
URL: http://www.example.com
Browser Support

Google Chrome
Firefox
Safari
Internet Explorer 9
Internet Explorer 10
Features

Responsive down to handheld
Dependency management via Bower
Tools

Bower: http://bower.io/
Headroom.js: http://wicky.nillia.ms/headroom.js/
Iconic: https://useiconic.com/
Icons

Social (Twitter, Facebook, Google+, GitHub)
User
Calendar
Comment
Subscribe
Share
External link
Video
Close
Gear
Check mark
Lock
Search
Menu (hamburger)
CSS Architecture

MVCSS v4
Components

Bucket
Button
Card
Cell
Close
Content
Form
Grid
Icon
List
Row
Thumb
Structures

Block List
Brand
Comment
Header
Icon List
Label
Label List
Footer
Memo
Nav
Tab List
Video
Notes & Ideas

Loading states on buttons
Issues

Repeating too many HTML templates
Using too many magic numbers in the CSS
Log

Used Middleman partials and passing of dynamic variables to DRY up HTML templates

FrontEnd-Audit-Template

Front-end Audit

Use this document as a basis for outlining and planning your front-end build.
You can initially fill this out before the build of your front-end, and then update it as you move through to have an at-a-glance list of information that you can constantly evaluate.

Info

Name, URL, additional site-specific info.
Site: [Site Name]
URL: http://www.example.com
Browser Support

What browsers will the site support?
Features

What specific features do you want? (Is the site responsive?, etc.)
Tools

Any tools or libraries that you want to use or research.
Icons

What icons will you need?
CSS Architecture

How will your CSS be structured? What modules? What framework?
You can build this section out based on looking at the design or wireframes, and then update and document the modules that you actually build. This provides a place for you to evaluate your CSS structure as you build out the front-end. Ultimately, you should move this into a styleguide that exists alongside the project. However, this is a great way to document and evaluate your front-end structure as you go.

Notes & Ideas

Any and all notes or ideas.
Issues

Any front-end issues that you need to document.
Is there an issue with your CSS architecture? Is the site not performant?

Note: If your working on a team, GitHub Issues would be a suitable replacement for this section.

Log

Any sticking points or things that you want to log.
Generally, how did you solve the issues from above. This is a great way to build a case study to retrospectively look at the problems you found and ultimately solved in your front-end build.