Below are some examples of common mistakes designers make when submitting their site for approval in Conceptboard. Avoiding these mistakes will avoid delays during the approval process.
Fix accessibility errors before submitting your site for approval.
All WVU sites must meet our Accessibility Guidelines. Your site must have zero WCAG A/AA errors before you submit your site for approval. We also strongly encourage you to fix all Siteimprove Accessibility Best Practices and WAI-ARIA Authoring Practices. Submitting your site with lots of accessibility errors requires UR - Digital to spend time suggesting fixes, and cause one or more rounds of revision, as well as cause you to have to re-submit your website.
If your home page has breadcrumbs, get rid of them.
By default, every Home page template is set to use the Frontpage template. More often than not you will want to create a custom template for your Home page, or switch your Home page to use the Super Template. If you switch to the Super Template, this will add a header and breadcrumb links to your Home page. Get rid of them (you can select the Remove Header and Remove Breadcrumb options in your page properties under Custom Data).
Set the correct heading for your components.
Each component that uses a header will have either an <h1> or
an <h2> by default, based on the most common usage. You may
need to update your header settings if you deviate from this usage. For example,
if you use the Hero component to display content further down your page, switch
the heading from <h1> to
<h2> in your page or component properties. Or if you use one
of the Action Heroes as your <main> content block, switch it
from an <h2> to an <h1>. Always make sure
your headers are nested and ordered properly.
Make sure your headings have the correct ID.
If you have any components that aren’t your <main> component, make sure the headers in those components have IDs that match the component’s aria-labelledby attribute.
Change the color of your breadcrumbs.
When you change the color of the first component on a back page, or add a background
image to one of these components, this can cause the breadcrumb links that overlay
the component to become illegible. If this happens, make sure to change the color
of the breadcrumbs to a color that has sufficient contrast against the background.
You can use the wvu-bg-tint class, along with text-white when applying a background image to your component, for example.
Make sure you didn’t delete the default padding on any components.
By default, most components have a padding utility class of py-5. This
helps group elements within the component visually and provides breathing room
for the content. Make sure you keep the py-5 utility class in order
to maintain the default padding. Omitting this class (or using a different padding
utility e.g. py-4) can create unintended visual tension in the component,
making it look as if the content is bumping up against the outer edge of the component
and/or affect the grouping of the elements within the component.
If you change the default typography, change the size as well.
If you change the typography of a component, you may need to change the size of the
element you changed to something other than the default sizing. The typefaces in
our typography palette vary in weight, requiring different font sizes to maintain
the same visual hierarchy. Some common examples include headings that are set to
use the wvu-shout style by default. Because the wvu-shout style uses a condensed font, it requires a larger font size. Changing it to something
else (like iowan-old-style) without reducing the font size will cause
the heading to look much bigger than intended. Conversely, changing a header from
iowan-old-style to wvu-shout will require you to use
a larger heading size.
Good
If you significantly alter the length of content in a component, change the font size.
Our components are designed for a specific number of maximum characters for each chunk of content they contain. We’ve specified these guidelines in the Content Model documentation for each component. However, we realize that it’s not always possible to stay within these limits. If you add content that has more characters than the recommended limit, make sure you adjust the font size accordingly, else these content chunks can skew the visual hierarchy of your content. Headings and paragraphs that are set to use a larger font size by default may require you to use a smaller font size if your content exceeds the recommended character limit.