It Starts with the Perfect Deliverables
Design
• Elements grouped where necessary
• Clear mobile design
• Sources included/styled
• Clear mobile design
• Sources included/styled
Assets
• .TTF or .OTF fonts
• 800-by-800 social image
• Non-vector images linked
• PNGs of designs
• 800-by-800 social image
• Non-vector images linked
• PNGs of designs
Notes
• Headings prioritized
• Colors defined
• If possible, list ideas for animation and interaction
• Colors defined
• If possible, list ideas for animation and interaction
The Programs We Use
Illustrator or Photoshop
Terminal
• Setup files
• Save versions to the cloud
• Compile CSS
• Save versions to the cloud
• Compile CSS
Text Editor
• Where we write code
• Color-coded, indented and organized
• Color-coded, indented and organized
Browser
• Make initial folder for project in the cloud
• Edit code and see changes immediately
• Edit code and see changes immediately
Languages We Code
HTML
• How we build the basic, one-column structure
CSS
• How we apply color, fonts, positioning, space, and even some animations
JavaScript
• How we enable and execute interactions, animations, and do math
Our Workflow
1. Fork Repo
• Fork, or make a copy of, the boilerplate code
• The repository, or folder, lives on Bitbucket
• The repository, or folder, lives on Bitbucket
2. Clone Repo
• Download the repository to our computer
• Sets up connection to the cloud, where we save versions
• Sets up connection to the cloud, where we save versions
3. Install Tools
• Add the CSS compiler Gulp to our repository.
• Gulp can also check for poorly written code
• Gulp can also check for poorly written code
4. Fonts, Variables
• Link font files, so that they’re accessible in CSS
• Set colors and other standards as variables
• Set colors and other standards as variables
5. Build Site
• Write HTML, CSS and JavaScript
• Test in Chrome
• Test in Chrome
6. Add Animations
• Ideally, these are powered by CSS
• JavaScript is used to trigger at scroll points
• JavaScript is used to trigger at scroll points
7. Compatibility
• Test the site on mobile and in Firefox, Safari and Edge
8. Compress Images
• Reduce image filesize to improve performance
9. Send for Edits
• QA testing for bugs
• Add social metatags and prepares final files for the client
• Add social metatags and prepares final files for the client