Best Practices - adobe/business-website GitHub Wiki

Content

  1. Always start with content first. Don't code and work backwards to content. Figure out the content structure first.
  2. Keep the content simple and obvious. Don't over think too many table cells.
  3. Content structure should be flat. Think in terms of big blocks (Marquee, Z-Pattern, Media Block, etc.). Don't get ultra modular like Dexter.

Sections

Sections allow you to wrap content in a div without any classes. You can use --- in Word or a horizontal rule in Google Docs.

Blocks

Blocks allow you to organize content within a div that has a class. Helpful for specific styling.

Marquee
Changing the world through digital experiences.
Marquee (Small)
Changing the world through digital experiences.
Marquee (Small, Contained)
Changing the world through digital experiences.

Buttons

  • Italic -> Secondary Button
  • Bold -> CTA Button
  • Strikethrough -> Negative / Destructive Button
  • Underline -> Primary Button

JS & CSS

  1. Speed is king. If it's not fast, don't do it.
  2. Avoid chaining modules. Almost everything should be scripts.js -> module.js
  3. Content that will most likely load above the fold should be either put in the main styles.css or should be pre-loaded.
  4. Content that will be on every page (columns, typography) should be put in the main styles.css.
  5. Speed, simplicity, and lightness are preferred over libraries, dependencies, utilities, and tooling.
  6. Prefer evergreen browsers only.

Questions?

#helix-chat Slack channel