New Website Planning

When building a new website it’s good practice to plan out the build before jumping in. This can help divide the workload and ensure things are done in a progressive matter vs constant revisions and redoing work. Here are some major questions to go over with a co-worker or client.

Theming

  • Color Scheme
    • Dark Mode or Light Mode coloring?
    • Set up 9 GeneratePress/Custom CSS Global Colors for repeat use. Below are examples for a white background site
      • Contrast – Strongest Text Color
      • Contrast 2 – Lighter Text Color
      • Contrast 3 – Lightest Text Color
      • Base – Darkest Background Color – Greyish White
      • Base 2 – Lighter Background Color – Slight off white
      • Base 3 – Lightest Background Color – Pure White
      • Accent – Main Branded Color
      • Accent 2 – Secondary Branded Color
      • Accent 3 – Complimentary Accent Color
  • Inspired by Websites – Try to see if the client has any sites they personally like the look of in terms of layout. Can be our prior work or their competitors, etc.
  • Header
    • Phone or CTA Button in Header
    • Social Media
    • Search/Shopping Cart
    • Logo Position – Center, left, right
      • Secondary Logo – IE tagline, USA Logo, etc. This can be part of the main logo graphic or done via HTML but it will change the aspect ratio none the less
    • Single Line or Multi Line Design
    • Sub-Menu with drop down arrows or none
  • Footer
    • Main Row
      • 3-4+ Column Layout
      • Logo or Company Name
      • Optional short about company paragraph under company name
      • Phone number & Address either under company name or in it’s own column
      • Contact Button under company paragraph or below the company info
      • Rest Should be columns with a H4/H5 title and list of internal pages
      • Social Media icons
    • Copywrite Row
      • PHP script that updates based on current date
      • Social Media links or policy links
  • Homepage Specific
    • Internal Page Links
      • Category Icons/Text, Featured Products, etc
    • Blog Section – Simple 3 Column layout showing the 3 latest posts
    • Geo section – Used for certain clients if they will have geo based location pages
  • Heros
    • Sliders – Fanciest of feature set, but are harder to setup and optimized. Best used only on homepage.
    • Best to have heros as dynamic and either pulling the page title or a custom field for the text
    • Elements to consider for static image/video heros
      • Title – H1
      • Subtitle or short paragraph text – H2
      • CTA button
      • Dividers
    • There are of course many ways to do heros. 2 Columns, full width with centered elements and a background, overlapping elements etc
  • Internal Pages
    • General Content – Mix and match full width, 2 column and 3 column layouts with text
    • Dedicated CTA Rows. IE rows that direct the customer to another page on the site. Contact form, gallery, products.
    • Global Sidebar – Featuring other internal pages and short form
      • This will require use of custom fields or reusable blocks in order to keep things consistent page to page
  • Blogs
    • Disable comments and see associated intranet article

Plugins/Features

  • Forms – Gravity Forms + Google Recaptcha V2
  • Builder – Prefer GenerateBlocks, but this is subject to change. Oxygen is an option on for very advanced sites
    • Advanced Blocks – Getwid Blocks, Stackable, or Genesis custom blocks
  • SEO – The SEO Framework
  • PHP Code Edits – Can be done via a child theme or Code Snippets. Code Snippets allows us to turn certain code on and off and better for debugging issues.
  • Backups – Server side or Duplicator Pro
  • Custom Post Types – Manual PHP for creation then ACF for fields
  • Gallery – Visual Portfolio but is subject to change.
  • Sliders – Smart Slider 3
  • Mailing – Server side or Easy WP SMTP
  • Caching – WP Rocket
  • Shopping Cart – Woocommerce
  • Shopping Cart Addons – Yith Themes as Josh has a subscription