New Website Design Considerations

Site Development #

• Why/How to Get Approval #

  Before showing designs to clients, be sure to have the design approved by the dev team to make sure it does not include problematic elements that will make the site difficult to develop. Most elements can be tweaked in a minor way so that they become very simple to implement. 

  To do this, create an update @dev in the task where the designer has put the design to ask the dev team member to review and approve the design. When the design is approved, it may be moved to the client gdrive and shared with Peri for her approval/sent to the client.

Starting a New Site #

Create an install #

1. 1. Is the site a current Apis site or a “new to Apis” site? 
   2. Decide if you need to copy the current site or make a clean new site. 
      1. It’s better to make a clean site when appropriate.

• New sites will come with good defaults; plugins, pages, WPMembers for login/logout, Gravity Forms forms (contact and quote requests), supplement pages, and other defaults.

1. 1. If the site is an Apis site, it can be copied from the existing site. Whether to do this will depend on the amount of content on the current site. If it has a lot of media or special plugins or functionality, it may be better to copy the current site. The number of users, posts, or events doesn’t matter because they can be imported and exported. If you aren’t sure, discuss with support.
2. If copying an existing site, discuss copying the site with support. Copying an existing site will require much extra clean up of pages, plugins, settings, etc.
3. Task support to create a staging or dev environment and copy the old site, or create a clean site. 

Adjust the site to start: #

1. 1. Add all content in the Themify Builder sections, not Gutenberg editor.
   2. Plugins may need to be updated, removed or added, see Plugins section
   3. If you want to use a skin (Themify pre-set template), see Using Skins section
   4. Set all typical default settings on the site as in the “Set Site Settings” section
   5. Update the theme and core versions, see Updates Theme/Core section
   6. Follow the rest of the sections for WPMembers settings, page and permalink conventions, adding navigation etc.
   7. Remove unused pages
      1. If not using wpmembers, remove delete, register, profile, password pages
   8. Remove all unused forms
      1. If not using specific quote forms or other forms, delete them
   9. Use Images/Graphics sections for important info on optimizing images for use and SEO/ADA Accessibility best practices.

• NOTE See Custom CSS section for conventions on using custom CSS to style pages and elements

Check for PHP version #

Assign a task to support or dev to update the PHP version of the site.

Set Site Settings #

1. 1. For new sites with skins – some settings are pre-set but follow this list

• Best Practices: For new sites without skins – set all settings in this list

1. For copied sites – check and set settings as necessary

WP General Settings  #

Site Title, Time Zone, Tagline. 

In Themify settings check “”no tagline” if you don’t want to see the tagline, but add it here for SEO and google searches

WP Reading Settings #

Set “For each post in a feed, include” to excerpt

Themify General Settings #

Themify Ultra Child/Themify Settings/General Settings

Set Favicon, 404 Page

Themify Appearance Settings #

Themify Ultra Child/Themify Settings/Theme Settings

In Responsive Design set the following #

By Default Values:
Tablet Landscape: 1024px
Tablet Portrait: 768px
Mobile: 480px
Mobile Menu: 900px | Mobile menu viewport (px), you adjust the value if menu items are wrapping in 2 lines on big screens. 

In Theme Appearance set the following #

Set header design to control default header design, demos https://themify.me/themes/ultra

Check or uncheck site elements

Set header widgets

Set footer design – this might be none if you are using a template footer with hook

Check or uncheck footer elements

Select number of footer widgets

Set footer widget position – typical before footer text

In Footer Text set the following #

1. The client’s compliance language and copyright in Footer 1
2. Designed by Apis in Footer 2
3. If you don’t have content for one of the footer text areas, hide it
4. For how to on 1 and 2, see Site Supplements Section

Themify Performance Settings #

Themify Ultra Child/Themify Settings/Performance

Themify Lazy Load 

By default in the template, “Disable lazy load” is checked, which allows images to load faster. But if the site takes too long to load, we can uncheck “Disable lazy load”.

Development Mode:
Keep it unchecked

Themify Cache:
This option maybe be disable on sites hosted on WP-Engine(which mostly happens with us)

Minified Scripts:
Don’t disable it unless asked/required.

Browser Caching:
No need to enable as WP-Engine caching is on by default

Gzip Scripts:
Don’t enable unless asked/required

Concate CSS:
This should be only done “Clear Concate CSS Cache” after site migration. Leave it for developer.

WebP Image:
This is to convert the images to WebP extension(We need to confirm this with WP-Engine)

jQuery Script:
Use only while troubleshooting

jQuery Migrate:
Use only while troubleshooting

WordPress Emoji:
Don’t use

Themify Default Layouts (Post and Page)

Most settings are ok by default, these should be set:

Default Archive Post Layout

1. Archive Sidebar Option – check no sidebar if not wanted
2. Hide Post Meta – hide author, comment, tag if client not using, hide category is appropriate 
3. Hide Post Date – display as inline

Default Single Post Layout

1. Post Sidebar Option – check no sidebar if not wanted
2. Hide Post Meta – hide author, comment, tag if client not using, hide category is appropriate 
3. Hide Post Date – display as inline
4. Post Comments – disable

Search Result Layout

1. Search Sidebar Option – check no sidebar if not wanted
2. Hide Post Meta – hide author, comment, tag if client not using, hide category is appropriate 
3. Hide Post Date – display as inline

Default Page Layout

1. Page Comments – disable

Themify Social Links

Set the client social icons and links for use in widgets, footers, etc. 

These are stored in Themify Social Links and can be added as a widget to footer or header OR added to a page with Themify Widget element.

Themify Custom Fonts

In the Themify Ultra Child left menu items, choose Custom Fonts. 

Choose the fonts you want to use for the site  from the drop down and import.

You can import multiple fonts.

WP Customize Panel Settings (Appearance/Customize) #

In the Appearance/Customize panel set the following to control default styles on the site:

1. 1. Note in Themify Ultra Child/General/Google Fonts check All Google Fonts to have more options for site fonts 
   2. Body font, font color, font size, weight
   3. Body link color, hover color
   4. Headings 1, 2,3,4,5 font, size, weight.
   5. IMPORTANT NOTE: Do not set the header colors in the customize panel, instead set them in each individual header element. 
   6. Forms button color etc
   7. Header wrap color, fonts, and link colors, controls all header style
   8. Site logo and tagline
   9. Main navigation fonts and colors, controls menu style
   10. Post – all post styling – see post Blogs and Posts for important style considerations
   11. Footer wrap color, font colors, link colors etc – controls footer style
   12. Footer back to top button

• NOTE See Custom CSS section for conventions on using custom CSS to style pages and elements