The links below are to the standards and guidelines that should be used when managing your school's website. Following these guidelines will create a more useful, accessible, and enjoyable experience for your users. Use the links to read the full documents. A summary of the most of basic web design guidelines is given below.
ADA Compliance | JSD Style Manual | District Logos & Tagline Use
Basic Web Design Guidelines
- Purpose
Make sure every page on your website serves a purpose. It might be news and upcoming events, policy and procedures, recognition, resources for added learning, etc. Make sure the way information is organized on the page is effectively serving its purpose. - Communication
People want to get information quickly, so it is important to communicate clearly and concisely. Make your information easy to read and understand. Avoid using lengthy explanations when a short sentence or two, or a bulleted list would suffice. - Typefaces
In general, Sans Serif fonts such as Open Sans (the default typeface) are easier to read online. (Sans Serif fonts are clean-looking fonts without decorative finishes - or Serifs.) Avoid using more than 2 or 3 different fonts on your website. If you feel the need to use decorative fonts, use them sparingly, and only for headlines and not in the body text. You can show emphasis by using a larger font size (use only 2 or 3 sizes total) and by making words bold or italicized. Do not use underline for headings or emphasis. Underline indicates a link and should only be used for links as to not confuse users. - Color
Your website has a color scheme based on your school colors. When possible, stick to those colors, or complementary ones, when adding any color elements to your site, i.e. headlines, graphics, etc. Color can add visual interest to your site when used sparingly. However, if overdone, it can make it uncomfortable to look at. (See the How-To section for a tip on matching colors.)
- Images
Using images on your website can reduce the need for a lot of text, help users find what they need faster, and make the page more visually interesting. However, make sure you are using images in a way that improves your site instead of making it distracting and unusable. (See the How-To section for tips on Working with Media.) - Navigation
Proper navigation will enable users to easily take action and move around your website. To create effective navigation, use a logical page hierarchy, group pages under the most appropriate top-level navigation tab (this may be more than one for a few pages), include clickable buttons or links whenever referencing another page on your site. Follow the 'three click rule' which means users should be able to find what they are looking for in three clicks or less. - Layout & Alignment
It is best to design your pages, keeping the viewer's natural reading pattern in mind. Users will scan the page left to right and from top to bottom, so display information in order of importance in that same order. Wide columns of text are harder to read than narrower ones. Centered text requires more effort to read than left-aligned text. Make sure columns of text, images, and other elements are lined up neatly and well balanced to improve the look and readability of the site. - Mobile friendly
Many users will be viewing your site from a mobile device. When you create a new page or make major adjustments to an existing page, look at it on your phone to make sure the layout works well for mobile devices.