Departmental Web Redesign Project

Creative Services is currently working on extensive testing to make sure the new department websites are accessible and usable in a wide range of web browsers and operating systems, from Internet Explorer (IE) to the newest browser on the web, Google Chrome. If you are using a really old version of IE (version 6 or earlier) or any other browser, now would be a great time to upgrade!

Internet Explorer 6 is a widely used but severely outdated browser; it's nearly 8 years old, which is practically ancient in Internet years! Popular websites like YouTube and Digg are starting to drop support for IE6 in favor of more modern browsers, and JMU's own recommended minimum computer configuration requires Internet Explorer 7.

When we build our websites, we strive to make them functional in the widest range of browsers possible. If you view our new websites in IE6, however, you will be greeted with a message prompting you to upgrade your browser. Upgrading to a more recent browser, like Internet Explorer 8 or FireFox 3.5, is important so that you may experience all of the features of our new websites as they were intended. Essential parts of the new department sites will still work in IE6 (with a little help from Javascript), but everything looks better and functions optimally in modern browsers.

Updating your browser is easy and painless, and will allow you to enjoy the best the web has to offer, in both features and security. Here are a few links where you can find the most recent versions of popular web browsers, all as free downloads:

Download Internet Explorer 7 for Windows XP and Vista (For JMU faculty, staff, and students only) (JMU Supported)
Download Internet Explorer 8  for Windows XP and Vista
Download Firefox 3.5 for Windows, Mac OS X and Linux (JMU Supported)
Download Safari 4 for Windows XP and Vista, and Mac OS X (JMU Supported)
Download Chrome for Windows XP and Vista

In the spring, Leadership Council appointed a cross-department committee to advise Creative Services' graphic designer on the creation of a theme to be used for the 2009 college-wide web redesign effort.

The work of that committee was completed and the theme was approved by leadership council.

We are pleased to share the new design for departmental level sites.



Our staff looks forward to working with each department in customizing the colors and design elements of the theme to best suit your needs.

After meeting with Leadership Council, a standard outline for departmental websites has been determined.  Departmental websites will be kept simple and minimal - serving mainly as hubs to direct visitors quickly to the academic program information they are seeking.

All pages will include near the top: Search, Contact Us, Find Us, Support Us

All pages will include in the footer: Date Last Updated, Email Address for Information Publisher, CISAT Logo, JMU Privacy Policy

The Home Page Will Include:

• Feature Stories/Strong Photography
• News and Announcements
• Prominent List of Academic Programs - these will link directly to program level websites which will follow a second standard outline which is currently under development.  View a working version of the program level outline. 
  
• Welcome from Department Head
  

An About Section Will Include:

• Accreditation/Awards/Recognition
• Mission/Departmental Values
• History
• Links to Departmental Research Labs/Projects
• Links to Outreach Units/Projects
• Department Organization Chart
• Internal Information (Governance, Forms for Faculty, Committee Lists)
  

An Our People Section Will Include

• Faculty/Staff Directory
  
• Profile Pages
• List of Program Related Contacts
  

A Job Opportunities Section Will Include

• Job listings for Faculty, Staff, Students and G.A.s

The look of the World Wide Web is constantly changing and websites often become outdated and lose visual appeal. Fresh looking, well designed, easy to use websites generally share the following features:

Simplicity    

Simplicity is key in modern web design. A simple design not only looks better but is also more user-friendly. Web users want to get the information sought in as little time as possible. The more complicated a webpage, the longer it will take to find this information. A simple website design loads faster, is clear and easy to read, and is easier to navigate.

Animated content, splash screens, and other elements that move or blink can be distracting and should be used sparingly. Heavy use of icons, unusual fonts and overly flashy colors can overwhelm the eye and should also be avoided. Instead, professional looking photography and simple typography should be used to create visual appeal.

Subtle 3D Effects in Moderation

3D effects are illusions that make things appear more like they would outside of the computer in the real world. Some examples of these effects can be seen on the Google home page (www.google.com). The shaded area beneath the Google logo is a drop shadow, a popular effect that makes an object appear to be floating above the background. The input field below the logo is an example of a beveled edge created by subtle color changes along the edge of a shape. Beveled effects help distinguish elements from the rest of the page and strengthen container properties. The buttons below the input field appear rounded and glassy. This is an example of the glass effect.

These effects can add richness to a web page and can be powerful devices for directing attention to important information. Also, 3D effects can be used to suggest that an element is clickable or interactive. However, if overused 3D graphics can significantly increase file size and cause confusion, so these effects must be used sparingly.

Soft, Neutral Background Colors

Many websites have white or nearly white colors as backgrounds. This does not distract from the content and gives the page a soft, neutral base on top of which brighter colors can be used to direct attention to important information.

Plenty of White Space

On a web page the term white space refers to the blank space between elements such as columns of text, buttons or images. White space is an important part of any design. Properly used white space can give a page a stylish or sophisticated appearance. The balance between positive and negative space is vital to creating visual appeal. A page with too little white space appears cluttered and complicated while over use can give the impression the page is unfinished.

Hierarchy of Text and Big Typography

The size and boldness of text are used to control attention. The reader's eye will look first at the largest, most accessible information. The bulk of the information, the body of the text, should be the smallest. A clear contrast between font sizes is necessary to develop a clear hierarchy of information. Ideally, in any design there are three clearly different intensities of text.

There is a trend in modern Web Design toward the use of large font sizes beyond 36 pixels to draw attention to the most important information. Larger fonts are easier to read. Also, typography can be very attractive and making it large is a great way to show it off.

Professional Looking Photography

Using photos is a great way to make a website more appealing and improve the look. However, poor quality photos can ruin even the nicest looking design. Photos displayed on websites should be clear and in focus, with the proper lighting, and a clean, uncluttered background. They should also be dynamic and lively; a photo of students interacting at an interesting event for example, rather than a posed group or lecturer speaking. The colors in a photo should fit the color scheme the rest of the site uses and should never clash with the design. When suitable personal photos aren't available, almost any image imaginable can be purchased online. www.istock.com is a great place to find inexpensive, professional looking stock photography.

Consistency

Consistency is important in all areas of design. Repeating elements and consistent treatment of type within a design shows the viewer how the site navigation works and how to find the information they seek. Good websites have pages that share a consistent layout. Though the content changes from page to page, the way it is displayed should stay the same. Without consistency a web user might think they have landed on a different site when the main elements change. A great way to ensure websites have this consistency is to use a template. Consistency across departmental sites will be an important consideration as we go through the redesign process.


Our design team is currently brainstorming and laying out initial design ideas for this project. If you have any suggestions, concerns or ideas of your own, now is a great time to let us know. We would like faculty and staff from all departments to be involved in the graphic design process. Our goal is to design appealing departmental websites and incorporate the latest technology and trends in web design. Please do not hesitate to voice your opinion.

You still have an opportunity to share your thoughts and ideas about the CISAT Departmental Web Redesign Project.  CISAT Creative Services will hold two Open Forums this month.
 
The first is on Tuesday, January 20th at 2:00 p.m. in the nTelos room. 

The following week an additional Open Forum will be held on Wednesday, January 28th at 10:30 a.m. in Taylor 304.

If you weren't able to join us for December's Open Forum we hope to see you at one of the upcoming events!  If you aren't available for either session, we hope that you will take a few minutes to share your ideas in our online survey: http://www.surveygizmo.com/s/82478/initial-website-opinions.  

Your thoughts and ideas will be shared with Leadership Council in the spring and will influence their decisions in this process.