Web Strategy and Development News

Taylor Health and Wellness Center website focuses on cost, care and convenience

by

The Taylor Health and Wellness website was redesigned to make it more friendly and usable to health center clients.

Taylor Health and Wellness Center websiteKey features of the newly designed website include the following:

  • Offers separate sections for students and employees
    Since different services are available to different clients, the website organizes the information onto audience-specific pages.
  • Outlines all medical services
    Clients can now easily find and review all the services offered by Taylor, which helps them determine if they can save time and money.
  • Provides updates through a blog
    The homepage offers timely updates for clients through a blog feed. This method also allows for clients to subscribe to updates or for other websites to display the posts.

Site credits

Several university relations offices assisted in developing this site:

  • Staff lead: Andrea Mostyn, university communications assistant director
  • Content development: Brooke Lairmore, university communications graduate assistant
  • Design: Veronica Adinegara, publications senior graphic designer
  • Website implementation: Brys Broughton and David Howell, web and new media student workers, with oversight by Sara Clark, director of web and new media

Blog theme redesign

by

Over the past few weeks we have been converting all Missouri State blogs to our new redesigned theme, which is designed to utilize all of the new features offered in WordPress 3.x and better coordinates with the 2010 web templates. Now that the conversion process is completed, I wanted to share more detailed information about the new theme and all of the options now available to blog users.

Here are some of the key features of the new Missouri State Blog theme:

Various color options

There are now seven color options for your blog; these colors coordinate with the new skins in Web Press. You can now choose a color layout of Maroon, Grey, Orange, Blue, Tan, Green or Lime.

Updates to header images

The new header images utilize a larger size of 960×198 pixels. We have also created a set of default header images that blog administrators can choose from, and the option of creating and uploading a custom header image is still in effect. The process for uploading header images has also been updated, and is documented on the Header Images tutorial within our blog support pages.

Now that the process for uploading header images is integrated into your blog Dashboard, we will be phasing out the NextGEN Gallery plugin in the near future. We suggest using either the built-in photo gallery for WordPress or the Inline Media Tool plugin in combination with Flickr for any future slideshows or galleries that need to be embedded in your blog posts.

Drop-down menus

The Missouri State 2010 theme neatly organizes your pages into a menu in your blog’s header, and includes drop-down menus for multiple levels of nested sub-pages.

Author box

An box containing information about a blog post’s author is now default on all blogs (you can see an example at the bottom of this post). To have the box appear on your blog, the author must have some information entered on their profile within WordPress. You can enter this information by visiting your profile page.

Multiple sidebars

The new blog theme supports up to two sidebars on the right side of the blog and up to four sidebars above the footer. The layout of the theme will change dynamically depending on how many sidebars you utilize.

New IDEA Commons website promotes innovation, design, entrepreneurship and the arts

by

IDEA CommonsThe new IDEA Commons website promotes IDEA Commons as a collaborative community effort — bringing together corporations, the University, lofts, non-profits and retail space — a downtown community where people from all walks of life can live, shop, learn, create and work.

Key features of the newly designed website include the following:

  • Provides map of facilities
    IDEA Commons is an urban research park with defined boundaries. The website provides a interactive map of the facilities so visitors can better understand its location and future developments.
  • Highlights opportunities for entrepreneurs, inventors, artists and designers
    Since the focus of IDEA Commons is to revitalize the downtown neighborhood and develop a sense of place for young talent, the website lists opportunities and contact information to encourage collaboration.
  • Offers co-branding options
    The website includes a section of shared resources for members of the district, including an IDEA Commons logo that they can use on their websites and publications.

Site credits

Several university relations offices assisted the division of research and economic development in developing this site:

  • Content development: Nicki Donnelson, university communications public relations specialist
  • Design: Lindsay Thomack, web and new media designer (with initial logo design by Veronica Adinegara, publications senior graphic designer)
  • Website implementation: Jacob Zwiefel and Nate Bassett, web and new media student workers, with oversight by Sara Clark, web and new media director, and Chad Killingsworth, web and new media assistant director

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:

Activity Streams

by

One of the key components of the Missouri State website redesign is the new Activity Stream. It’s featured on both the Missouri State homepage and Current Students page. The activity stream combines content feeds from various campus providers – University Relations, Public Affairs, SGA, Athletics, SAC and the Bookstore to name just a few.

Not only does it pull in content from many different providers, it also pulls in content from different services such as Facebook, Twitter, Flickr, YouTube, Delicious and various RSS feeds. This makes for a very dynamic and constantly changing stream of information.

Activity Stream

Here’s how it works:

  • Only one item is pulled per source every 30 minutes. This is to ensure that one content provider doesn’t overload the stream by posting a lot of content in a very short amount of time.
  • If content is posted on multiple sites it will only show the first entry. For example, if a link is posted on the Missouri State Facebook page and then the Missouri State Twitter account, only the first post from Facebook will show on the stream. This helps to reduce duplicated entries.
  • Only the 15 most recent items appear on the homepage (the 13 most recent appear on the current students page), but older items can be viewed by visiting the Full Stream, which shows the 100 most recent items.
  • From Facebook, only manual updates are pulled into the stream; this means that anything posted by an application (like Notes, RSS Graffiti, Twitter, etc.) does not appear. For content posted to Twitter, the stream ignores any items posted from Facebook, Twitterfeed and the Twitter Tools plugin on Missouri State blogs.

Some best practices you should be following when posting your content:

  • Don’t post a lot of content at once. There’s no need to post six months worth of events in the span of five minutes. Not only is this an ineffective way to promote your content, it also has the potential to alienate your followers, who will relate such activity with spam. Space out your content postings as much as you can, and if you do have more than one piece of content you need to post at the same time, wait at least 30 minutes to do so to ensure that all of the items appear on the activity stream.
  • Use tools that minimize copying and pasting your content into different sources. You should only need to post your update in one place, and then by setting up the correct tools, your content will disseminate automatically to your other accounts. Some great examples of these tools are the Facebook to Twitter option available to Facebook page administrators, or Twitterfeed for Twitter users. Last fall I presented on RSS and Social Media Coordination, and if you would like to see more of these tools in action I suggest you watch this video presentation. Not only does this coordination between your sites make the workload easier on you, it also streamlines how that content comes into the activity stream and helps reduce the possibilities of content duplication.
  • Similarly with blogs, take advantage of having notifications of new blog posts sent automatically to Facebook, using an application like Notes or RSS Graffiti, and Twitter using the Twitter Tools plugin available on Missouri State blogs.
  • When retweeting others’ content on Twitter, use the new retweet feature and do not put “RT” in front of the tweet. This will ensure that if you are retweeting content from another provider on the activity stream, that tweet will not be duplicated.

Features to be added in the future:

  • We will be adding an RSS feed of all the content from the activity stream, so users can subscribe to the feed and keep up to date with everything happening on campus without having to visit the website to see all the content from the activity stream.
  • We will be integrating a Like button on all activity stream content sourced from Facebook. At present you can see how many people like Facebook content, but once this button is added users will be able to like content without leaving the Missouri State website.
  • The full stream page will eventually go away and will be replaced with an expanding homepage that will show older content on the same page – similar to how the news stream works on Facebook. This will allow users to see older content without going to a different page.
  • There will be a button added that allows others in the campus community to submit their content sources to be added to the stream. For content to be considered for the homepage, it must have at least two audiences. For content to be considered for the current student page, the content must be relevant to current students.