Best practices for building your website
When designing a website, you must always keep your main objectives as the top priority. Who is your audience? What are they looking to do? How will they navigate to your page? These questions will guide how you want to design that user journey. However, mapping that journey into a visually aesthetic page can be challenging. Below is a collection of tips to help you name your site, organize your content, select and use modules to keep consistent with the global user experience, and ensure your page is on brand.
Note: Kindly avoid using secondary colours with hyperlinks as they are not AODA compliant but stick to the default blocks and background colours as these have been tested and confirmed AODA complaint.
- Domain Naming: Similar to the proposed navigation York also introduced a new domain naming convention that provides a clear hierarchy to search engines to improve SEO and SERP rankings. The recommended domain naming works as follows.
Main domain
yorku.ca
Area domain name
yorku.ca/[name] – for example: yorku.ca/laps
Sub-areas domain
yorku.ca/[name]/lab/…
yorku.ca/[name]/research/…
yorku.ca/[name]/project/…
yorku.ca/[name]/professor/…
yorku.ca/[name]/department/…
yorku.ca/[name]/department/program
Visit the sitemap strategy to learn more. There are some unique use cases where the above naming convention may not apply, please consult with cpadigit@yorku.ca if you have any questions. - Only use one H1 title at the top of each page – Heading tags do more than change the font size, they aid screen readers in scanning website content. If they are improperly organized, this will confuse the content categorization for those using screen readers and therefore reduce our SEO results.
- H2 = Secondary level headers
- H3 = Third level headers
- Avoid stacking three (3) or four (4) column modules on top of each other – Ensure a balance of blocks, content, page length and width. If you are looking to use a three (3) column block, consider putting it on a full-width module. Keep in mind that the column modules stack on mobile devices, meaning that pages can get very long if multiple three (3) and four (4) column modules are used on a single page.
- Keep total number of modules per page to a maximum of seven (7) – This does not include the header/navigation/footer. While this is just an average estimate based on pages, and not a hard cap, it serves as a valuable resource for planning pages. If your module count per page is way above this total, consider creating a new page and organizing your content into more digestible points and specific topics.
- Less is more – Do not attempt to put all of your content on the home page. This creates a cluttered page and makes it hard to find the main points, especially on a mobile device. Look to simplify your content or break it into sections (or pages) for easier searching and readability.
- Use modules for their specific functional specifications – Do not attempt to customize the modules design or functionality. These were designed to have a consistent user experience from all our web properties. If there is functionality that is missing on the website, do not create it yourself. Instead contact us and we can look at building a new module. This will not only ensure consistency but also help other web managers who are requiring similar functionality.
- Use the grey backgrounds or window backgrounds on any of the modules for a visual break – This background was designed to help group a few modules together or provide a visual break from copy. It should be used sparingly on pages and only for the above-mentioned purposes.
- Use the spacer module to gap content between other modules – Sometimes you want modules to be close because you are connecting together the different pieces of information. However when it is a new section, look to add a spacer (the same process as a module) to add some room between your modules for easy viewing and a division of ideas.
- Photography should reflect the brand – Aim to have your images showcase our institutional values of inspiring, welcoming/friendly, confident and ambitious. Avoid external infographics and stock photography. Not sure where to source photos? There is an image collection that is available to you and updated regularly. This can also include multi-media photos like GIFs.
- Design your content for easy scanning – As showcased on this page, the use of bold, spacing, lists, headings and icons can help direct you to exactly what you are searching for. Some other options for long-form content include anchor links or accordion modules.
- Banner dimensions – The dimensions of the original image you upload to your site can have a big impact on how it displays. For the home page banner, we recommend using images that are between 1642 and 425 pixels wide and 1366 and 400 pixels wide for Secondary pages. Images smaller or larger than the recommended pixels may appear blurry, cropped or pixelated when they stretch to fill the banner container. Other module image dimensions can be found in the Modules Library.
- Banner Media – The banner is required to be a image without or very limited text included, with the above mentioned dimensions. This is to ensure site speed is not compromised (which could also effect SEO relevancy) and that there is a visual hierarchy on our websites. Only the York homepage, campus home pages (Glendon and Markham), and high level institutional campaigns are allowed to use video footage. Before adding this, the video banner must be approved by C&PA.
- Navigation – Please note that in order to optimize navigation for search and mobile the following guidelines have been introduced
- The “Home” button has been eliminated as the page title found on the red bar serves the same purpose
- The new top navigation menu operates on a 7×7 grid where a maximum of 7 tabs across and seven menu items on the dropdown. The CONTACT tab on the right side of the bar does not count as one of the seven allowed tabs on the menu.
- Due to the above mentioned 7×7 grid the system no longer allows for nested menus.
- IMPORTANT – Please note that APPLY and CONTACT do not count as part of the Faculty 7×7 grid as they are already captured in the template.
Navigation for Faculties
As part of the optimization strategy we developed a Faculty specific recommended navigation. The tabs are based on research with audiences and what they felt were the most used / logical areas. The navigation for faculties is based on the 7×7 navigation grid and is comprised of 5 recommended tabs and 2 wildcards to accommodate any Faculty-specific needs. See example below.
Students
Programs
Services
Research
Faculty & Staff
Alumni & Community
About
- Blue/Red Module Variations – When using blue or red background modules it is recommended to only use 1-2 per page and not stacked on top of each other. When using any of these it is also recommended that you view the entire page to ensure that the colour proportionality matches the breakdown listed on the brand guidelines website. See full colour breakdown here (page 2)
- Here is an on-brand example of using blue modules (more than 2 used, blue is dominant colour)
- Here is an off-brand example of using blue modules (only 2 used, and spaced apart so not together)
- Content “Coming Soon” – When creating new content for websites, it is always better to hold on adding the menu item or link to page before the content is complete. Adding “coming soon” text to any page it not an ideal user experience and will result in the user bouncing from your page. If this is constant, it could reduce your SEO website ranking, further impacting your organic traffic. As a best practice, only add pages or sections when content is complete.
For more information or to get more detailed design specs for each module, including recommended character counts, image sizes and much more, visit the Module Library.