Website Structure, Content & Media Guidelines

Site architecture refers to the way a website is organized and structured—how its pages are arranged, connected, and labeled so visitors can easily find information.

There are several levels of website navigation:

• Utility Navigation – Typically placed above the primary navigation. Includes quick-access links not part of the main site hierarchy (e.g., Search, Login/Sign Up, social media icons).
• Primary Navigation – The main site menu, usually at the top of the page. Includes the most important, high-level sections (e.g., Services, Portfolio, Resources, About, Contact).
• Secondary Navigation – Supporting menus for related or less critical sections. Can appear as a sidebar or drop-down. May contain multiple levels.
• Footer Navigation – A repeat or extended menu at the bottom of the site, often including utility links (e.g., Privacy Policy, Terms of Use, Sitemap).

General

• Use Site Architecture as an Outline – This keeps content organized, avoids repetition, and helps divide writing among your team.
• Deliver Content Early – Our design process depends heavily on finalized text and images. Technicalities will provide deadlines for client requirements at the beginning of the project. Late content or approvals may result in project schedule delays, including the launch date, and could result in additional costs to the client due to increased administrative and team resource time.
• Know Your Audience – Write with your ideal visitors in mind. Think about what they need, the questions they’ll have, and how you want them to feel when they land on your site.
• Keep It Simple – Use short sentences, plain language, and avoid jargon. Online readers skim, so clarity is key.
• Inline Links — Cross-reference other pages on your site within your content to help guide readers to relevant information. You can also link to external sites, such as partner websites or resources with additional information. All external links will be set to open in a new tab to keep users on your site.
• Think SEO Early – Identify important keywords (the words your audience searches for) and work them naturally into your page titles, headings, and content.

Writing Content

• Prioritize Key Messages – Place your most important information and keywords near the top of each page. People and search engines pay extra attention to opening sections.
• Use Headings and Subheadings – Break content into sections using headings and subheadings that include keywords where natural. This improves readability, supports accessibility tools, and helps with SEO.
• Write for the Web – Use bullet points, numbered lists, and short paragraphs. Include related terms and synonyms to capture more search traffic.
• Calls to Action (CTAs) – Always guide readers on what to do next (e.g., “Contact us,” “Book a demo,” “Donate today”). Use action words.
• Unique, Valuable Content – Avoid copy-paste or filler text. Provide original insights and solutions that build trust and improve search rankings.

Formatting & Delivery

• Editable Formats – Send text in Word, Google Docs, or plain text files. Avoid embedding text in PDFs.
• Match Content to Architecture – Clearly label content for each page so it’s easy to place correctly. If renaming a page, include a note (e.g., “formerly Publications”).
• Accessibility for Informational Images – For infographics/charts that portray a lot of information, provide a text version of the data for screen readers. This content will be displayed on the page beside or below the image.
• Internal Review & Approval Before Sending – Only send us content that has been approved internally. Receiving multiple versions of the same content can create confusion, slow down the process, and increase editing time. Once the site is set up, we’ll provide training so your team can make final edits before launch—and of course, you’ll be able to keep updating your site whenever you want after it goes live.

When sending us your form content (e.g., contact forms, event registrations, applications), here are some guidelines to make the process smooth and ensure nothing gets missed:

Provide Questions in Order

• List each question or field exactly as you want it to appear.
• Keep them in the order you’d like them to show up on the form.

Indicate Field Types

• Specify whether a field should be:
  • Short text (e.g., name, subject line)
  • Long text/paragraph (e.g., comments, message)
  • Dropdown menu (include all options)
  • Checkboxes (if multiple choices are allowed)
  • Radio buttons (if only one choice is allowed)
  • Date picker (for event dates, birthdays, etc.)

Mark Required Fields

• Let us know which questions must be answered before the form can be submitted.

Include Any Instructions or Help Text

• Add notes if you want explanatory text (e.g., “We’ll respond within 2 business days” or “Please upload PDF files only”).

Decide Where Form Submissions Should Go

• Provide the email address (or addresses) where you want notifications for responses delivered.

File Uploads (if needed)

• If users should be able to upload files, specify the file types (PDF, JPG, Word, etc.) and maximum size.

Confirmation Message

• Tell us what message people should see after submitting the form (e.g., “Thank you for your message. We’ll be in touch soon!”).
• Alternatively, you can provide a page link if you’d like them redirected.

Testing

• Once we build the form, we’ll test it on our end and then send you a link so you can test it as well before launch.

• File Format for Images – JPG for photos; PNG/AF/SVG/AI/EPS for graphics; or WebP.
• Logos & Brand Assets – Provide the highest resolution available (vector files such as AF, SVG, AI or EPS preferred).
• High-Quality Images – Use sharp, well-lit images. Provide original photos where possible, or purchase professional stock images.
• Stock Images & Videos – You may provide your own stock images or request sourcing from Technicalities (extra cost). For large projects we often recommend purchasing a month-to month subscription, downloading everything you need, and then cancelling afterward. There are many stock sites available but the ones we use on a regular basis are:
  • Paid sites: iStock, Shutterstock, Adobe Stock
  • Free sites: Pixabay, Pexels, Unsplash
• Optimize File Names – Instead of “IMG_1234.jpg,” use descriptive names like “toronto-office-team.jpg” or “eco-friendly-soap.jpg.”
• Multiple Options Help – If possible, send a few choices so we can pick the one that crops and scales best.

Full-Width Banner Images

• Image Resolution: Images should be at least 1920px wide. Lower-resolution images will look blurry or pixelated.
• Landscape Orientation: Wide, horizontal images work best (similar to a “panoramic” photo). Generally we can work with square images but portrait images usually won’t crop well.
• Keep Important Content Centered: On different screen sizes, the edges of the image may be cropped. Place the subject or focal point in the middle third of the image.
• Avoid Text on the Image: Text in an image may get cut off or be unreadable on smaller screens. Instead, provide the text separately so it can be added in HTML for better accessibility and SEO.