mg-logo
UC Master Gardener Coordinators

Website Guidelines

UC Master Gardener Website Cleanup Checklist

Thank you for helping keep UC Master Gardener websites clear, welcoming and user-friendly!

Your work maintaining these sites plays a critical role in how community members, volunteers and partners experience our programs. A well-organized website helps people find reliable information quickly, supports participation in events and classes, and reflects the quality of the UC Master Gardener program.

 

UC Master Gardener Website Guideline Webinar

Resources to Support You

To help you get started, the following resources are available: 

 

How to Use This Checklist

Use the checklist below to review the pages you manage. Not every item will apply to every page, and that’s okay — the goal is to improve clarity, accessibility, and consistency over time. 

If you prefer a printable version of the checklist, you can download the PDF (365 KB).


Page structure & Text style 

  • Headings are structured hierarchically with only one H1 per page (H1 is for the page title, then H2 > H3 > H4)

    • Why it matters: Headings act like an outline and help visitors and screen readers understand the page.

  • Headings are used to organize page content – not just to make text stand out (and built-in heading styles are not manually changed)

    • Why it matters: Headings should be used only when a new section begins and should follow the logical flow of the page. Using a heading just to emphasize something important – or manually changing heading capitalization/appearance – can confuse visitors and accessibility tools. If you want to call out an important note, use a brief sentence with bold text.

  • Navigation labels, buttons, and links avoid ALL CAPS and unnecessary punctuation; Titles and headers use Title Case and links/buttons use sentence case

    • Why it matters: All-caps and heavy punctuation reduce readability. Avoid adding any punctuation to navigation labels or link text (like exclamation points). 

      • Examples: “Garden Workshops” (Title Case) and “Register for the workshop” (Sentence case).

  • Link text is clear, descriptive (avoid “click here” or “learn more”) and embedded in the text – you do not need to spell out full web addresses.

    • Why it matters: Screen reader users often navigate by links alone, so the link text must make sense out of context.     

      • Example of what to do: 

        • Register for our upcoming UC Master Gardener event

      • Examples of what not to do: 

        • Click here for more

        • Register at this page for more information: ucanr.edu/site/master-gardener-event

  • Buttons and links use real text, not images with text inside them

    • Why it matters: Images that contain text and act as buttons or links are difficult for screen readers to interpret and can be harder to use on different devices. Using real text for buttons and links improves accessibility, readability, and consistency across the site.


Navigation & Menus

  • Top-level navigation is minimal and intuitive (best practice is 5–7 main menu items)

    • Why it matters: Too many items in the main menu can overwhelm visitors and make it harder to find key information, especially on mobile devices. Clear, well-organized navigation helps users quickly understand what your site offers.

    • Tips:

      • The top-level (main) navigation includes no more than 5–7 menu items whenever possible.

      • Each top-level menu item represents a category, not a long list of individual pages (Think of it like a folder: the top-level page gives an overview and useful content for the topic, while more detailed pages live underneath it.)

      • Sub-pages and deeper pages (pages linked under a main menu item) do not count toward the 5–7 item limit.

      • For additional guidance, please refer to our webpage that outlines navigation menu best practices

  • Menus include only real subpages within your site. If you need to share related ANR pages, PDFs, or outside links, place them in the page content where they have context. 

    • Why it matters: Navigation should reflect your site structure. Putting links to other pages or documents on the page itself adds context and improves usability. Refer to our Navigation & menus webpages for more information. 


Writing & Content Quality

  • Paragraphs are short and broken up for easier reading, using bullets when appropriate

    • Tip: If a paragraph is longer than 4–5 lines, consider breaking it into two paragraphs or a bulleted list.

  • Key pages begin with a short introductory paragraph explaining what the site or section is and who it serves

    • Why it matters: A brief introduction helps users quickly understand where they are, whether the information is relevant to them, and how to navigate the page confidently.

    • Tip: Add a short intro (2–4 sentences) explaining the purpose of the page and who it’s for.

  • Pages include brief explanatory text, not just lists of links.

    • Why it matters:  Pages that are only lists of links don’t explain what the links are for or which ones matter most. Context helps visitors decide what to click and why.

    • Tip: Introduce groups of links with a short sentence explaining what they relate to or who they’re for.

  • Acronyms and abbreviations are defined or spelled out at first use to provide clarity 


Files, Images & Layout

  • File types are properly labeled (PDFs labeled in parentheses, in ALL CAPS, with file size; example: (PDF, 1.2 MB))

    • Why it matters: Visitors should know when they are downloading a file and how large it is.

  • Text is presented as real HTML text, not embedded within images

    • Why it matters: Text inside images cannot be resized easily, searched, translated, or read by screen readers. Real text is more accessible and consistent.

    • Tip: If an image contains essential words (such as event details or announcements), include the key information as text on the page instead of embedding it in the image. This applies to images placed on a page; downloadable PDFs and flyers are covered in a separate checklist item below.

  • PDFs and flyers are only uploaded if they are accessible

    • Why it matters: PDFs and flyers must be accessible to be readable by screen readers and usable by all visitors. Image-only PDFs (such as scanned or designed flyers) create accessibility barriers and should not be uploaded. If a document’s accessibility cannot be confirmed, the information should be added as regular page text instead of a PDF.

    • Tip: When in doubt, do not upload the PDF or flyer. Add the information directly to the page using headings and text.

  • Tables should only be used for information that looks like a spreadsheet, such as lists of numbers or comparisons arranged in rows and columns. They should not be used to position text or images side by side or to control how a page looks.

    • Why it matters: Tables work well for comparisons and structured data, but they are hard to read on mobile and can be confusing for screen readers when used for layout.      

    • Tip:  If you’re trying to align content visually, use lists or approved layout tools (for example, Bootstrap grid) rather than tables. You can find layout examples using the Bootstrap grid on the Sample IWP site. For technical help, visit the Drupal training site

  • All images and photos include concise, accurate alt text that describes their content or purpose

    • Why it matters: Alt text allows people using screen readers to understand what the image conveys. It also helps when images fail to load. 

    • Tip: Alt text is a short sentence that explains what is happening in a picture for people who cannot see it. You do not need to say “This photo has” or “This is a picture of” – just describe what you would say if you were explaining the picture to someone over the phone.

  • Photos include a visible photo credit 

    • Why it matters: Photo credits are required for photos used on UC Master Gardener sites and acknowledge the photographer or source. This requirement applies to photos only (not graphics, icons, or decorative images). Photo credits must appear as regular text near the photo using the format “Photo credit: Name or organization.” Photo credits should not be included in alt text, which is reserved for describing the image for screen readers.

    • Tip: Enter the photo credit in the Caption field when adding the image. This ensures the credit appears consistently below the photo.

  • Photos use a maximum display size of “Medium” (unless there is a clear reason to use larger)

    • Why it matters: Oversized images can overwhelm the page, compete with the written content, and distract visitors instead of supporting the message.

  • All headers and body text are left-justified, not center-aligned

    • Why it matters: Left-aligned text is easier to read and scan, particularly for longer content and for visitors with reading or visual challenges.


Page-specific guidance

  • Homepage: The homepage uses an appropriate header (hero) image

    • Why it matters: The header image creates the first impression of the site. A high-quality, decorative image without text helps the page feel welcoming and professional.

    • Tip: Header images should be high-resolution (not grainy), use the “Narrow” display setting, and appear on the homepage only rather than on all subpages. You can find image templates on our template page.

  • Homepage: Dynamic Related Content (Carousel) is not used; key related content is moved into the homepage body

    • Why it matters: The carousel was removed due to formatting and usability issues. 

    • Tip: Do not manually recreate the carousel. If you want to highlight a blog post, article, or other related content, work with your UC Master Gardener coordinator to create a simple on-page promotion or link instead.

  • Homepage: Official social media accounts are added using the Social Media content type (if applicable)

    • Why it matters: The Social Media content type automatically displays social links as icons below the main navigation, keeping the site consistent and professional. See the IWP training site for more information on how to add these icons to the homepage.

    • Tip: You also have the option of listing your social media accounts on the Contact Us page, but without icons.

  • Contact Us: “Contact Us” shortcut is present and links to the site’s main Contact Us page

  • Contact Us: The Contact Us page includes required contact information and follows the standard layout

    • Why it matters: Visitors use the Contact Us page to quickly find out how to reach your program. A consistent structure across sites makes information easy to find, scan, and understand.

    • What to check (required):
      • The page includes a “How to Reach Us” section at the top, using a Heading 2 (H2).

      • This section includes, at a minimum:

        • Email address

        • Phone number

        • Physical address (if available)

      • This structure is required and standard across the organization.

    • Staff contact information (required):
      • Below "How to Reach Us" section, there should be a "Meet Our Team" standard heading with h2

      • For a small number of people, use a simple table with names, titles, and contact details.

      • If using photos: If featuring staff profile photos, use a Bootstrap grid layout, not a table. If staff photos are used and a photo is not available, use the standard placeholder image or a text-only layout instead of leaving a broken image. See the Sample IWP site for options on how to display staff information.
    • Social media links (optional):
      • The Contact Us page is an appropriate place to list social media accounts (in addition to adding it as a content type)

      • Use text links only – icons are not approved on this page

      • See the Sample IWP site for more information on how to format social media links on this page. 

Important: Do not use icons, buttons, or other visual elements on the Contact Us page.