These recommendations cover general site-wide characteristics. Accessibility and content recommendations follow.
Group broad categories of information on a site according to users' needs.
Page levels should be organized to provide increasing degrees of detail for those who require more information.
Northwestern University supports Internet Explorer version 9+ and the latest versions of Firefox, Safari and Chrome. We do support the user-specified Internet Explorer compatibility or quirks modes.
As of 2014, Northwestern University recommends using HTML5 for web pages.
Arial is the preferred font for text. Recommended settings (in order of preference): Arial, Helvetica, sans-serif; Verdana, Geneva, sans-serif; and Tahoma, Geneva, sans-serif. Font sizes should be defined in your CSS using relative sizes (em's).
Pages should be responsive and flexible in nature to support all devices from desktop to mobile. Recommended desktop resolution is 1440px wide with major breakpoints at 768px (tablet) and 480px (mobile). The viewable content region on desktop should be 1120px wide.
Awareness of conventions in web design will help you to plan your site's structure, navigational elements, and page design so that your site visitors can quickly and accurately find what they're looking for.
Make the site's structure obvious on the home page with a visual hierarchy to "clearly and accurately portray the relationships between the things on the page: which things are related, and which things are part of other things" (Krug).
Become familiar with Dreamweaver, Adobe's web page editing program. Northwestern University Human Resources Training and Development offers Dreamweaver classes. Call 847-467-5081 or e-mail firstname.lastname@example.org. Dreamweaver instruction books are widely available as well.
Try to organize sections and content according to users' needs, not necessarily by departmental organization or hierarchy. Try to identify what items a user would logically want, even if it means grouping functions from different areas together.
Use a validator to ensure the site's compliance (validate both HTML5 and CSS) with W3C coding recommendations.
- W3C Markup Validator - http://validator.w3.org/
- CSS Validation Service - https://jigsaw.w3.org/css-validator/
Check your website to test compliance with section 508 and WCAG 2.0 accessibility standards.
- Find accessible color combinations using Contrast-A
- Check color contrast using Juicy Studio Accessibility Toolbar for Firefox
- Web Accessibility Evaluation Tool WAVE
- A firefox add-on Accessibility Evaluation Toolbar