Best Practices for the Web

More than just an afterthought

Managing a website takes planning, thought and some basic knowledge of page layout. There's constantly content that needs to be updated, edited or replaced. Placing each piece of content takes strategy in order to provide a consistent user experience.

Your website reflects your organization

Keeping your site up to date and in line with Missouri S&T's branding and best practices is more than just following regulations. It's about creating a professional representation of your organization and the people who work to make the gears turn.

  • Your website will be the first impression that most people have of your organization.
  • A simple, elegant design creates a strong impression, while a cluttered layout can leave users confused and dissatisfied.
  • Photos can tell a story and create an emotional connection.
  • Creating an organized information hierarchy is an important foundation for any site.
Create an outline of your organization and its functions
  • There isn't a magic wand or automated way to redesign your information architecture, but the best place to start is by creating a logical, detailed outline of your organization.
  • Think of what your organization does and start organizing those actions into groups.
  • What questions do you receive the most? This can help you identify site content that is lacking.
  • Use an outline to pace the information. Building a website is like a marathon, not a sprint. If you put all of the content up front, users will get lost.
Identify your audience
  • Once you have an organized outline, identify your audience and structure information so that it is easy for users to navigate.
  • Put yourself into your users' shoes and think of the various tasks they may perform on your site.
Create a chart of how users flow through the site
  • Draw out a web of your pages and how they connect.
  • Experiment with different flows and go with the layout that best fits your audience.
  • In which branch of the chart does the information make the most sense?
  • Go from broad topics to more specific ideas, just as a tree goes from a trunk to its branches.
Examine your site structure
  • All site sections should be examined for misspellings, properly capitalized and spaced page section names and page titles.
  • The site tree should be logical, organized and labeled correctly.
Watch for duplicate pages, redundant folders, and orphaned pages
  • These lead to confusion for you and your users.
  • Redundant content can make it difficult to keep your content up to date.
  • Use a grouping system that becomes more specific the deeper you go in the tree (ex. What to Wear -> Clothes -> Hats -> Bowler Hats).
Eliminate redundancy
  • Look for content redundancy throughout your pages and trim it down to the information needed by your target audience.
  • Tightening down the structure of your content will make it easier for you to maintain.
Users read the web differently from books
  • Generally, users scan or skim websites, reading the shortest or boldest information first.
  • Creating a visual hierarchy of headings and descriptive text will help users flow efficiently through content
Pages are viewed on screens, not paper
  • Design pages as screens, rather than pieces of paper.
  • As users scroll down a page, each screen should guide them along a path of information.
Break info into chunks
  • Think of information as chunks rather than paragraphs (similar to how notecards can be used for studying - a title and description for a concept).
  • If your information gets out of hand, make notecards of the information chunks and pin them out onto a board as a way to show how all of your information connects.
Create a visual hierarchy
  • Put important information at the top, with each piece of content broken up into bullet points, headings, and short bits of text.
  • Use headings, images and bold text effectively. White space is a powerful tool.
  • For example – take of a piece of paper filled with text and compare it with one with a single word on it. Which one makes it more difficult to read all of the content?
Understand the flow
  • Users tend to focus on the top left corner of the page and scan across to the right corner.
  • These "hot spots" will generally be the first the users will see.
An endless path of information
  • After scanning across the page, users scroll down and repeat the process – which is why we use the idea of a screen, as opposed to a page, for content layout.
  • As long as you've followed a strong visual hierarchy, don't be afraid to have a page with a scroll bar.
Colors
  • The use of a lot of colors can be distracting to the user.
  • Missouri S&T has a selection of color palette options to choose from.
  • Use colors to accent and enhance your content. Color can draw attention to something or create a relationship with other content. Try to avoid mixing a lot of colors in a small area.
Image sizes
  • Aspect Ratio - Be careful not to squish or stretch images out of proportion. Use an image resizing tool that keeps the aspect ratio locked for you to ensure that your images don't end up looking distorted, like the reflection from a carnival mirror.
  • Compression - Aim for a JPEG quality between 75 and 90 percent to avoid large file sizes or blurry and blocky images.
  • Dimensions- Depending on the layout used, images should be saved at particular widths. You can create image variations (different crops or sizes) using the media library within T4, or use an image resizing tool.
    • Full width images (100%): 1280px wide
    • Half width images (50%): 600px wide
    • Third width images (33%): 400px wide
    • Fourth width images (25%): 400px wide
  • Alt tags - The description box in T4 should be filled in, providing a short summary describing the image.
Stock photos

We offer a large and growing selection of professional photos, available on the Missouri S&T Photoshelter.

Fonts and text styling
  • Fonts are determined by the template, additional fonts should not be used in page designs.
  • If you are using non-standard font colors, this online tool can help to determine whether they meet ADA contrast requirements.
  • Do not underline headings or text. Underlining text or headings that are not links is ambiguous, since by default all links are underlined.
  • Do not use all capital letters (all caps) when typing out headings or paragraphs. All caps is handled by the website style. Normal case should be used so that when text is read by search engines and screen readers, it is treated correctly.
  • Use different headings sizes along with paragraphs to provide a visual hierarchy to your content. (Headings are used to categorize smaller text below them - just like the content on this page.)
Icons
  • Use the same style to provide a consistent look across your site. It is unprofessional to use dissimilar icon styles for related information.
  • Icons should have a specific meaning; do not use an icon to represent multiple meanings.
  • As with any design element, overuse can become tiresome and cause it to lose its original purpose.
Design

Follow the design principles of repetition, contrast, proximity and alignment.

  • Repetition: establish a method of laying out information (especially with tightly related content/pages) and stick with it.
  • Contrast: contrast can be created with whitespace, colored graphics, photos, etc.
  • Proximity: Group similar items together. Scattering them about reduces patterns and causes chaotic organization.
  • Alignment: Aligning content correctly creates simplicity by forming groups, lines and shapes that are easy for users to follow

We want to create a cohesive, visual identity for faculty, staff and student portraits online. The portraits used online represent the S&T brand. While we can’t force you to include professional portraits on your S&T website, we strongly encourage it.

Portraits give the department a personal touch

Most students want to see a portrait of the faculty and staff they will be interacting with. Adding a professional portrait will help you develop better connections with the people you interact with.

Portraits enhance faculty and staff biography pages

The faculty and staff directories and biography pages get a large volume of web traffic; it’s critical to include updated, professional portraits of all faculty and staff. Portraits can help your website look more professional and friendly, allowing your users to connect to a face and not just a name.

Portrait standards

A solid gray background is used for studio portraits. Please dress professionally for photographs. If you prefer to be more casual in your portrait, please do not wear non-department shirts, t-shirts or hats; stick to S&T gear only.

Don't use:

  • Selfies
  • Photos taken with a cell phone
  • Images of people backed up against a wall, horizontal images or images that have been cropped too closely to the subject's head
  • Photos of people outside, sitting at a desk, giving a presentation or in general doing anything other than looking at the camera and posing
  • Photos that haven't been updated in the past two years
Make content for your audience
  • Information, images and other content items are there to be consumed by your site audience.
  • Think about the information that people often ask, or that you provide when guiding someone through solving an issue.
 Avoid linking to pages with no content or pages labeled as “under construction” or “coming soon”
  • Keep pages in draft form until you have content finalized.
  • “Coming soon” is subjective to users.
  • Your site should provide information users want now and not focus on what you don’t have available.
Outdated content is useless
  • Old, time sensitive information can't be used by your audience and clogs up your site.
  • Trim your content and keep it focused so that it is easy to manage updates when they occur.
Organize your content
  • Grouping content by categories, likeness or relevance can help users find content.
  • Remember to group content by subject or action first, not by a user's role (student, teacher, etc.).
Tone of voice
  • When writing, try to use a conversational voice that is semi-formal and concise.
  • Speak to your audience as if you are in their shoes.