Version: 1.1
Last Updated: 02/01/2022
Required Assets
- Site Tagline
- A short sentence, tagline or slogan summarizing the business or website. This will appear after the name of the site on the homepage. Default: Empty
- Social Media Links, where available:
- Instagram
- Facebook
- Twitter
- LinkedIn
- Full contact details for main/head office, including:
- Organization / Company Name
- City
- State/Province
- Postal/Zip Code
- Primary Telephone
- Primary Email Address, if available
favicon.png- Used in browser tabs and bookmarks
- 512 x 512 px, PNG format
screenshot.png- A preview of the website used in the WordPress Theme Manager
- 1200 x 900 px, PNG format
- Fonts
- Adobe Fonts / Typekit links – preferred
- Hosted web font links (i.e. Google Fonts) – preferred
- WOFF/TTF font files – last resort
- All fonts must be licensed for web use
- Image Assets
- All photos must be in JPG format. PNG file sizes are much too big for larger images.
- Icons and logos must be in PNG (or SVG) format
- SVGs can only be used in templates (i.e. SVG for a navbar logo is fine, but an SVG logo for a “logo farm” within page content is not). The WordPress Media Library will not accept SVG files, as they can sometimes introduce security risks. Any vector artwork that will be added to the Media Library should be converted to PNG format.
- Images should be sized for web publishing:
- Maximum 2560px width for full-width usage
- No more than 1.5x wider than intended largest published size – this is the recommended sizing for small and midsize images.
- No less than 1x intended largest published size – this is the recommended resolution for large (i.e. full screen) images.
- Colors
- A list of all colors that should appear in the default WordPress block options. This allows customers to make on-brand choices when developing their own content.
Required Templates
At a minimum, the following templates should be accounted for:
- Default Page Template – This is the base layout for a WordPress Page. Pages are typically used for all static content (home page, contact page, product and service pages, etc.).
- Default Post Template – This is the base layout for a WordPress Post. Posts are typically used for blog entries or news articles. Even if the design does not utilize this content type, we should still provision template. In many cases, it can be an exact copy of the Page template.
- Default “Archive” Template – This template shows a list of matching Posts for the selected Category or Tag. Even if the design does not utilize Tags or Categories, the template should still be provisioned. It includes a list of matching results, along with pagination tools.
- Search Results Template – Even if the design does not utilize search, this template should still be provisioned. In many cases, it can be an exact copy of the Default Archive Template, as it contains essentially the same type of content: a list of matching results, along with pagination tools.
- 404 Page Not Found Template – A page to show visitors who’ve landed on a page that does not exist. It may be desirable to show a search box on this template.
- Custom Post Type Detail Templates – A detail template should exist for each custom post type, even if the design does not utilize them directly. Often it will be a simple variant of the Page or Post template, but may include additional content fields that are specific to that post type.
- Custom Post Type Archive Templates – An archive template should be created for each custom post type, even if the design does not utilize them directly.
Best Practices
Composability
The customer will be best served with a collection of content building blocks that can be mixed and matched in different ways. Highly stylized, ambitious layouts have their place – particularly on the home page – but it should be possible for the customer to create good looking content from a rich collection of on-brand components.
- Wherever possible, leverage built-in WordPress blocks.
- Use highly stylized blocks or “sections” strategically and sparingly.
- These tend to have poor reusability value.
- Consider requesting these sections be hard-coded, particularly if the section contains content that isn’t likely to change. This will reduce cost while also making sophisticated layouts possible in strategic places.
Consistency
- Recommended XD template widths are as follows:
- Desktop: 1920px
- Regular Container Size: 1110px + 15px margin each side (Total: 1140px, breakpoint at 1200px)
- XL Container Size: 1510px + 15px margin each side (Total: 1540px)
- Tablet Portrait: 768px
- Container Size: 690px + 15px margin each side (Total: 720px)
- Mobile: 360px
- Container Size: 100% Viewport Width + 15px margin each side
- Note: Containers can be modified to suit design requirements, but there should be no more than (3) breakpoints required to achieve desired layout.
- Sizing, scaling and positioning behavior of all blocks must be clearly specified at all breakpoints, and consistent between all instances of that block.
- For simpler layouts, particularly those using the built-in WordPress Column Block, it is not necessary to design for every breakpoint. As long as the breakpoint behavior is clear (i.e. these columns will stack) then the development team is capable of “filling in the blanks” at each breakpoint.
- Container sizes should be consistent across all templates.
- One exception may be the Home Page, which often utilizes a wider layout.
- If a block’s layout should ignore or extend beyond container boundaries, the layout rules should be clear and consistently applied across all breakpoints.
- Content order must be consistent between breakpoints.
- Example: In a 2 column layout, with the left column containing a photo, and the right column containing several blocks (a heading, a byline, some text, and two buttons) the breakpoint behavior happens at the column level. On smaller screens, it’s possible to place the photo above the text/button blocks, or place the photo below the text/button blocks, but the photo cannot be placed in between two of the text blocks.
- Image cropping and resizing
- Images are cropped and resized in various templates. For example, an image might be cropped to a wide panoramic size for a single Post template, but cropped nearly square on an Archive template. It may even be cropped portrait style in some circumstances.
- We can define the cropping rules for each breakpoint, but the rules must be consistently applied in all instances.
- Example: On wide panoramic views, center the image horizontally and vertically, and crop the top and bottom. On archive templates, crop the image square, left align the image horizontally and center it vertically. On mobile screens, crop the image portrait-style, right align the image horizontally and align it vertically to the top. All of these are possible, as long as the rule is consistently applied for all instances of the template.
- Fonts
- Recommend maximum of 6 font variations for best performance. Example: 3 different fonts with 2 styles of each (regular, bold) equals 6 font variations. Or 2 different fonts with 3 styles of each (regular, bold, italic) also equals 6 font variations.
Compliance
Accessibility
- Colors
- Minimum contrast ratio for all colors is 4.5:1.
- Use contrast-ratio.com to check color compliance.
- Be careful with text on top of images. The customer should be able to choose photos with low contrast without compromising accessibility. Use darkening overlays or drop shadows on the bolder side.
- Color should not be used exclusively to convey important information. Combine color with icons or text where necessary.
- Fonts
- Headings
- One H1 per page, comprising the page title.
- Headings must follow proper structure: H2’s are the top level for page content, H3’s are placed below H2’s, H4’s are placed below H3’s, etc.
- Buttons and Links
- Clearly visible focus states are required for all buttons and links. Browsers have some default focus states – typically a classic “hyperlink blue” border surrounding the element. If focus states are not explicitly defined in supplied prototypes, default browser states will be used.
- Video and Audio
- Accessible-compliant captions must be present for all video, or the video must be accompanied by a transcript placed beneath it.
- Embedded Audio must be accompanied by a transcript placed beneath it.
- Documents
- PDF and Word documents are not, in general, accessible. While these formats can be uploaded to the website, the customer should be made aware that these formats are not accessible.
- All video assets must be hosted with a dedicated video service such as YouTube or Vimeo, and may not be served directly from the website.
- Cloud storage and bandwidth is extremely expensive, and not suitable for video delivery.
- If the customer wants an ad-free video experience and the ability to have a brand-themed video player, we recommend Vimeo Pro, which offers these features.
- Videos will not auto-play on some devices and browser configurations. When using embedded video as part of a slider/carousel or hero banner, a static placeholder image is also required.
Plugin-Specific Theming
- When using the Free Edition of the Ninja Forms plugin:
- Theme customization is not available
- Advanced layouts are not possible:
- One field per line
- No control of label placement
- With a Ninja Forms Personal Edition license, the Layout & Styles Add-On is available, which opens up a variety of theme customization options.
- If a Ninja Forms Personal Edition license was provisioned as part of the project, we will configure the Layout & Styles Add-On with (1) global theme configuration to match designer-provided specifications.
- All customization work is limited to the features and options available in the Layout & Styles Add-On, but the available options are quite extensive:
- For each “form element” (defined below), the following customization options are generally available:
- Background Color (hex)
- Border Width (px) -each side can be independently set
- Border Style (solid, dashed, dotted)
- Border Color (hex)
- Border Radius (px)
- Text Color (hex)
- Height (px)
- Width (px)
- Font Size (px)
- Margin (px) – each side can be independently set
- Padding (px) – each side can be independently set
- The following form elements can be styled using any of the above styling parameters:
- Form Level: Form Container, Title Styles, Required Message Styles, Row Styles, Odd Row Styles, Success Response Message Styles
- Default Fields: Wrap Styles, Label Styles, Element Styles
- Specific Field Types (i.e. Address, Email Address): Wrap Styles, Label Styles, Element Styles
- Error Styles: Main Error Message Wrap Styles, Error Field Wrap Styles, Error Label Styles, Error Element Styles, Error Message Styles
- DatePicker Styles: DatePicker Container, DatePicker Header, DatePicker Week Days, DatePicker Days, DatePicker Day Hover, DatePicker Today, DatePicker Selected, DatePicker Previous Link, DatePicker Next Link
- Additional form-specific theming is also possible, and is available at an additional cost.
The Events Calendar
- The standard theming solution for this plugin is to customize fonts, colors, and border styles for all layouts. This goes surprisingly far in providing a clean, on-brand experience for this plugin.
- For projects with advanced requirements, all layouts and styles can be customized and extended to a very high degree. There are well over 100 templates and sub-templates used to deliver the overall events experience, and our team is familiar with modifying them to suit just about any requirement. Determining the cost of advanced customization is based on a review of supplied wireframes.
WooCommerce
- The standard theming solution for this plugin is to customize fonts, colors and border styles for all layouts. This goes surprisingly far in providing a clean, on-brand experience for this plugin.
- For projects with advanced requirements, all layouts and styles can be customized and extended to a very high degree. There are several hundred templates and sub-templates used to deliver the overall WooCommerce experience, and our team is familiar with modifying them to suit just about any requirement. Determining the cost of advanced customization is based on a review of supplied wireframes.
Change Log
- Version 1.1 – 02/01/2022
- Added Change Log
- Added site tagline to Required Assets
- Added social media links to Required Assets
- Added customer head office contact details to Required Assets
- Added recommended XD template sizes and combined these with container recommendations.
