Skip to main content
  • Home
  • Blog
  • Launch Your Site Faster by Following These Tips

Launch Your Site Faster by Following These Tips


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.

Screenshot of illegible breadcrumbs
Screenshot of legible breadcrumbs

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.

Screenshot of bad whitespace in a component
Screenshot of good whitespace in a 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.

Screenshot showing bad typography


Screenshot showing good typography

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.

Screenshot showing big heading (bad)
Screenshot showing small heading (good)