Ten Tips for Creating Better USU Extension Web Pages

Creating a great web page in USU's content management system isn’t just about making it look good—it’s about making it accessible, responsive, and easy to maintain. Here are some key tips to help you build pages that work well for all users.

1. Use Proper Headings for Structure

Headings (H1, H2, H3, etc.) should follow a logical order to help both users and search engines understand your page's content. Every page should have one H1 heading, which is usually the page title. After that:

• Use H2 for main page sections.
• Use H3 for subsections under an H2.
• H4 for smaller subsections, though it’s used less often.
• H5 and H6 are rarely needed but can be used for very deep sub-sections.
• Avoid skipping levels (e.g., don’t jump from H2 to H4).

Headings should not be used just to make text bigger or bold, such as for introductory text. If you need larger or emphasized text, you can use classes like "lead" or "xl" for properly styled paragraph tags. The Extension web team can help you with that.

2. Use Components and Snippets for Laying Out Content

Take advantage of USU’s built-in components and snippets. These pre-made elements make building web pages easier and ensure your page is designed well, adapts to different screen sizes, and stays easy to maintain.

Types of Components (Reusable elements for structured content)

• Banners
• Buttons
• Contact blocks
• CP (article) feeds
• Directory feeds
• Embedded content (videos, etc.)
• Icons
• Galleries
• Quote blocks
• Step guides 

Types of Snippets (Pre-built layout structures)

• Alerts
• Cards
• Columns
• Figures (images with paragraph-like spacing around them)
• Images with captions
• Step guides
• Tables

Using these tools keeps your page clean, professional, and mobile-friendly—without the need for extra coding.

3. Keep Image File Sizes Small

Large images slow down page load times—especially on slower internet connections. To keep pages fast and efficient:

• Aim for 100 KB or less for most images.
• Keep banners and larger images under 500 KB.
• Use online tools like TinyJPG or TinyPNG to compress images without noticeable loss of quality.
• Choose the right file type – JPGs are best for photographic images because they balance quality and file size, while PNGs work well for simple graphics like logos or icons.

Optimized images improve site speed, user experience, and performance on all devices. For more details, including how to check file sizes, visit the USU Extension web team's image optimization guide.

4. Choose Banner Images Carefully

USU banner images are responsive, meaning they will automatically resize and crop depending on the screen size. To avoid important details getting cut off:

• Use wide shots or images with multiple points of interest or that look okay no matter how they're cropped.
• Images of faces can be especially tricky, as they'll be unpredictably cropped at different screen sizes.
• Text or logos on banner images may be cropped off at different sizes. Use these mobile friendly banners instead. The Extension web team can help you implement these banners.
• Check how the image looks on different screen sizes (see next tip).

5. Check Responsiveness at Different Browser Window or Device Sizes

It’s tempting to focus only on how your page looks in your current browser window on your current screen, but visitors will experience your page on screens of all sizes—including phones, where most web traffic now happens. A layout that looks fine on a large screen may not work well on smaller ones.

Before publishing, check how your page adapts by resizing your browser window to different widths or viewing your page on your phone and/or tablet. This helps you catch issues like:

• Columns collapsing incorrectly or stacking in the wrong order.
• Uneven spacing between sections.
• Tables that don’t fit within the page width or require excessive scrolling.
• Images or videos that get cut off on the sides instead of resizing properly.

Taking a few moments to test responsiveness ensures your page is easy to read and navigate for all users.

6. Keep HTML Clean (Especially When Copying from Word Processors)

Messy HTML can cause unexpected formatting issues and make content harder to edit and maintain. Copying from Word or other editors into the WYSIWYG editor often brings in extra code, such as unnecessary spans, inline styles, and empty tags, which can lead to inconsistent formatting.

Example of Messy HTML (Copied from a Word Processor)

<p> <span style="font-family: Arial; font-size: 14pt; color: black;"> Important information about our programs. </span> </p>

Example of Cleaned-Up HTML

<p>Important information about our programs.</p>

How to Keep HTML Clean While Using WYSIWYG Editor

• Paste without formatting using Ctrl + Shift + V (Windows) or Cmd + Shift + V (Mac).
• Use the Clear Formatting button to remove hidden styling.
• Turn on Show Blocks to spot and fix misplaced elements.
• Use tools like WordHTML to clean up copied text before adding it to your page.

Clean HTML ensures consistent formatting and easier future updates.

7. Avoid Using the “Enter” or “Space” Key for Adding Extra Spacing or the “Space” Key or Tables for Creating Layout Columns

Pressing Enter or the Spacebar multiple times to adjust spacing may seem like a quick fix, but it often results in inconsistent layouts and unpredictable formatting, especially on different screen sizes such as phones. These manual adjustments can create extra gaps, misaligned content, and make future edits more difficult. Using the space key to create columns is especially a problem.

Better Ways to Control Spacing

• Use built-in snippets and components (like columns and cards) for proper layout.
• Adjust margins and padding using existing layout Bootstrap classes.
• If you’re unsure how to achieve the layout you need, reach out to the web team for help.
• Turning on Show Blocks in the WYSIWYG editor helps in spotting and removing unnecessary empty elements.

Avoid Using Tables for Layout Columns

Tables shouldn't be used for layouts as they are inflexible, less accessible, and not responsive—only use them for tabular data (like spreadsheets) and use Bootstrap columns, components, or snippets instead.

Using the right tools ensures your page stays clean, responsive, and easy to maintain. 

8. Use the Right Type of Enter (Hard vs. Soft Return)

In most systems and programs, pressing Enter creates a new paragraph (hard return), and Shift + Enter creates a line break (soft return), but in the USU Extension WYSIWYG editor, this behavior is reversed.

Pressing Shift + Enter creates a new paragraph (hard return):

This is the first line of text.

This is the second line of text (a new paragraph with extra space).

Pressing Enter creates a line break (soft return) without extra spacing:

This is the first line of text.
This is the second line of text (on the next line but in the same paragraph).

Use hard returns for separate sections and soft returns for breaking up a long line inside the same section. Don’t hit the enter button multiple times for spaces between paragraphs to create spaces between paragraphs.

9. Use Dependency Tags for Internal Links and Images

When linking to internal pages or adding images, use dependency tags instead of static URLs. This ensures links and images stay functional even if files are moved or renamed.

For example:

• A dependency tag looks like this:{{f:1234}}
• A static URL looks like this: https://extension.usu.edu/about-us

Dependency tags are automatically inserted when you use the file manager in the WYSIWYG editor’s Insert/Edit Link or Insert/Edit Image tools. Avoid manually typing or pasting in internal URLs in the dialogue though.

10. Keep Accessibility in Mind

Ensuring your webpage is accessible allows all users, including those with disabilities, to access your content effectively. Here are a few key accessibility practices to follow:

• Use descriptive alt text for images to provide meaningful context for users who rely on screen readers.
• Avoid placing key information in images (such as flyers) since users using screen readers cannot read text within an image. Instead, provide the details as actual text on the page.
• Use proper heading structure (H1 for the main title, H2 for sections, H3 for sub-sections) rather than skipping levels or using headings for decoration.
• Ensure sufficient color contrast for readability and avoid using color alone to convey meaning for color blind users. It’s best to stick to USU template colors and template items to ensure sufficient contrast.
• Make link text descriptive (e.g., "Learn more about soil health" instead of "Click here").
• Use captions and transcripts for videos to make multimedia content accessible.

For more details on accessibility best practices, visit USU Extension’s Accessibility Basics article.

Bonus Tip: Use the Show Blocks Feature in the WYSIWYG Editor

The Show Blocks feature in the WYSIWYG editor highlights the structure of your content, making it easier to identify and fix formatting issues. This tool visually outlines elements like paragraphs, headings, tables, and divs, helping you:

• Spot and remove empty tags and extra spacing that can cause inconsistent formatting.
• Ensure proper heading structure, so content remains organized and accessible.
• Identify misplaced elements, such as text accidentally placed inside a heading or list.

Using Show Blocks helps keep your HTML clean, structured, and easy to edit, reducing unexpected layout problems. While working on your page, turn it on to check the page’s structure and make necessary adjustments.

---

By following these tips, you’ll create web pages that are well-structured, easy to use, and visually appealing across all devices. Happy editing!