Web and New Media Blog

Academics Upgrades

by

Academics PageThe Academics site has received a major overhaul in functionality. Now the site homepage defaults to using search to explore our academic programs. There are however additional tabs above the search form which lets users browse programs alphabetically or by college.

Changes to secondary education degree listings

Secondary education degrees have long been challenging for us to display. Future students have a hard time differentiating an education program from a traditional program when they both have the same name. To help alleviate this problem, we now have separated out all such listings and treat them as separate programs. Example:

In addition, when programs are listed by college, secondary education degrees are listed with a special heading under both the College of Education and Interdisciplinary Programs. This helps future students who are looking for an education degree to find them.

Direct linking to program sites

As academic program web sites are redesigned, we have begun linking results directly to that site instead of displaying an intermediate page. Programs which follow the content guidelines of the academic web site redesign process already provide all of the same content and have custom designs. Over time, our plan is to completely remove our intermediate page as sites are redesigned.

Search statistics

We track every search through our Google Analytics account so that we can monitor which search terms are most used and adjust our results accordingly.

Site credits

This redesign project was designed and implemented by the office of web and new media.

  • Design: Lindsay Thomack, web designer
  • Website implementation: Jason Devore, web and new media student worker, with oversight by Sara Clark, director and Chad Killingsworth, assistant director

Honey I Shrunk the Website

by

Honey I Shrunk the KidsWeb pages should load fast. Period. It’s irritating for any reason to wait on a computer. As a web developer, so many of the factors that go into page loading speed are outside of our control. However, some of the biggest ones are fixable with a minimal amount of work. The effort isn’t really justified for every page, but high traffic pages (like the university homepage) are definitely worth it.

Formatting for speed

As a programmer, I much prefer to maintain nicely formatted code. But when you are after speed, the whitespace has got to go. You can reduce the size of your page significantly. Smaller code size = less bandwidth used = faster load times = win for everyone but the programmer. Removing whitespace is effective on the HTML of the page, stylesheets and JavaScript.

Beyond whitespace

With JavaScript you can optimize even further. Tools such as Google’s Closure-Compiler can not only remove whitespace, but perform some pretty hefty optimizations on your code. For our redesign, Closure-Compiler reduced a 38KB file down to 14KB – and size was only part of the speed benefits it gave.

All zipped and ready

In today’s world, why would you send uncompressed resources? Processing power is cheap – it’s network speeds that still seem to limit us. Text files such as HTML, CSS and JavaScript can easily be compressed on the fly by almost any modern web server – as long as you have the processing power to spare. That 14KB JavaScript file actually gzips down to a measly 5.2KB. That brings our combined savings on that file alone up to nearly 87%!

Compression Resources

Zero is less than something

Of course downloading nothing is always faster. Usage stats show us that we have a high degree of returning visitors to our homepage. By setting some pretty aggressive cache headers, users only have to request new HTML. All of the images, stylesheets and scripts can be loaded from what they got on their last visit.

Cache headers are somewhat confusing and can have unintended side effects. Google has a great article on the relevant cache headers: http://code.google.com/speed/page-speed/docs/caching.html

Tools of the trade

Optimizing your site for loading speed can be a daunting task. There are a few tools that make this easier. My personal favorite is Google Page Speed (an addon for FireBug). In addition to a prioritized list of suggestions, several optimizations can be run within the tool itself such as image optmization and whitespace removal.

This is the second post in a series about the techniques used in the 2010 redesign of the Missouri State homepage. Other posts in the series:

Johnny five is alive

by

Jonny FiveSince in recent history the Missouri State homepage only gets a complete overhaul about once every 5 years, deciding on what HTML and CSS technologies to use as a baseline is tricky. Five years from now what was once cutting edge could now be old news. So the balance is between a cutting edge technology or something already over 10 years old. We opted to go for the HTML5 route. Little did we know the struggle that would bring.

Browser support

Everyone knows that not all browsers are created equal, but when it came to an actual HTML5 design old browsers just had to go. This wasn’t just Internet Explorer 6, but also FireFox 2 and older. The critical point came down to how a browser would handle an unknown tag. Without some JavaScript help, IE8 and older would treat any unknown tag as inline and had no way to style them. FireFox 2 just choked. There were a couple of options:

Use a hybrid template

In order to handle browser shortcomings, many people just advocated using an HTML4 design with the new tags wrapped around them. Later, you can come back and remove the extra HTML4 structural elements. While this approach would be fine in situations where you can control your templates, for a large distributed site it just wasn’t really feasible and frankly is just kind of cheating.

Go all out

This option punted on support for older browsers in order to look forward to future browsers. However, this meant requiring JavaScript for the template to even function in Internet Explorer 8 and older (IE9 platform preview support looks excellent as of this post). This could also be called the “short-term pain for long-term gain” method. Oddly enough, very few complaints related to this actually materialized.

Gracefully degrade

HTML5 and CSS3 bring some great new features – drop shadows and rounded corners alone are a godsend. But what happened to making the site look the same everywhere? I believe that question has been answered. Instead of killing ourselves on consistency, we chose just make sure the features gracefully degraded in older browsers. Try out the homepage in IE, Chrome and FireFox – all three have minor differences.

Brand new toys

HTML5 brings with it quite a few new features: native audio, video and drawing support are probably the most touted. Yet these are problematic. Not only do only the very newest browsers support the tags, but they can’t even agree on a common set of codecs. So for now, we’re forced to use browser detection to determine whether to use the native tag or to output a flash version. I guess you still can’t have your cake and eat it too.

This is the first post in a series about the techniques used in the 2010 redesign of the Missouri State homepage. Other posts in the series:

Introducing the new Missouri State website

by

The new Missouri State University homepage and top-level site launched on Aug. 9, 2010, just a couple weeks before the opening of the fall semester.

Homepage highlights

The homepage includes several components:

  • The masthead still incorporates the University logo, site index and search options, only in a more streamlined fashion.
  • The media hub has several tabs that provide quick access to video, photos, athletics, online course content and spirit sharing. It also offers a BearPass login, which can be used to access My Missouri State, email and Blackboard. Different tabs will load first each day, and the hub colors and background will change throughout the year.
  • The news and events area showcases the dynamic nature of campus through an activity stream of posts, videos and photos from a variety of sources. It also offers current news releases and a daily events calendar.
  • Promo buttons continue to provide an opportunity to share campus initiatives and events but in a more flexible format that allows for headlines, dates and text.

Of course, a website is never really finished. Features will continue to be added and tweaked over time.

Site credits

This project’s success is due to over seven months of hard work by the implementation team:

  • Sara Clark, project lead, office of web and new media
  • Chad Killingsworth, technical lead, office of web and new media
  • Lindsay Winchester, design lead, office of web and new media
  • Stacey Funderburk, office of publications
  • Brian Heaton, office of web and new media
  • Brad Mitchell, office of web and new media
  • Andrea Mostyn, office of university communications

Also, special thanks to several other key players:

  • Michael Percival, computer services
  • Web and new media student workers Danny Cook, Simon Deke, Brittany Dilts, Jacob Zweifel and Brad Fortenberry
  • Computer services networking staff
  • Sandra Miller, university advancement