As mentioned in a previous post, University Relations is working on a header and footer for mobile devices. This project is part of a larger project to create a U of M Mobile Website. The goal for the larger project will be to create a basic mobile website to launch by the end of the calendar year. Initial content that we intend to be available at launch are:

• Maps


• People Search


• Events


• Login Pages


• Mobile site directory

University Relations has started working on a mobile-optimized home page that is accessible using most modern hand-held devices. As part of this project, we will be working on developing a header and footer to use on mobile websites along with standards and guidelines for designing mobile websites. Our plan is to have the new header and footer completed by the end of 2011.

If you have any suggestions/feedback on the header and footer as it relates to the mobile devices, please send an email to urweb@umn.edu.

As I read an interview with Brain Traffic's CEO Kristina Halvorson, her words rang as clear as Prince William and Kate's wedding bells.

"One big mistake companies make is they are undertaking projects like creating web apps or mobile websites that are separate from the rest of their online initiatives. It's really very important that all content is created for all platforms and to let it evolve over time regardless of what context the user is in. The first thing would be not to consider your mobile content a separate project. Mobile really forces you to look at what's important which makes mobile is a great place to start when creating content because there is less space and it forces you to deal with what's most important. Smart content that can be distributed across many channels. Keeping your mobile strategy separate is a mistake."

I couldn't have said it any better. So, this brings me to the third objective of the umn.edu home site redesign:

Increasing usability and support for mobile devices

University Relations is partnering with the Office of Information Technology (OIT) to develop its mobile approach in conjunction with the launch of the home page. For starters, we worked with OIT to develop an executive overview outlining the objective, strategies, and goals.

Objective
Provide an optimized mobile experience for all visitors and establish m.umn.edu or mobi.umn.edu or mobile.umn.edu as a gateway to the University of Minnesota.

Strategies
* Redesign and improve websites with consideration for presentation/organization for both desktop and mobile devices
* Increase collaboration with campuses and units
* Reduce duplication of effort and increase re-purposing of content
* Follow project management best practices
* Integrate technology and communications strategy for mobile devices into a unified University approach.

Goals
* Create an infrastructure to support and extend research
* Support the University's online learning initiatives
* Position the University of Minnesota as a leader in delivering higher education communications via multiple channels
* Increase public engagement
* Provide proactively a mobile environment to all stakeholders
* Help ensure the University of Minnesota maintains a competitive advantage
* Establish benchmarks to measure and evaluate mobile devices projects and their success

First, the home page redesign separates content from design. This is critical for repurposing content as well as content shifting - allowing a user to take a piece of content that they've identified in one context and make it available in another. The bottom line: it is all about providing the right information to the right people in the right format at the right time.

Second, this summer the team expects to develop mobile guidelines/standards that can be adopted throughout the institution. Finally, we will be focusing on content liberation. Content liberation is a two-part process that results in a piece of content uprooted from its original context and tied to a user.

We are confident we are on the right track. Why? According to A List Apart, "Websites have responded quickly to these new demands. Media queries and the responsive design movement have enabled designers to tailor the experience of a site to whichever device a user happens to be using. Flexibility at this macro level of the site is important, but the real breakthroughs will come when we enable the same flexibility at the micro level with individual pieces of content."

Cheers!
~Jennie

Read previous home site redesign posts:
Time flies when you are having fun (3/23/11)
2011 Home Site Redesign - 8 weeks and counting (4/1/11)
Surviving - 7 weeks and counting (4/7/11)
The Amazing Race - 6 (wait - it's already 5) weeks and counting (4/21/11)

Anyone who has worked with the University web templates has probably pulled their hair out over one thing or another. The template stylesheets can be a bit challenging, even though they were constructed to be as straight-forward as possible. (Really!) But it's never easy working with someone else's styles. You have to take time to read through them, from beginning to end, to have a grasp of what style is responsible for which behavior.

Reset.css--The first stylesheet listed in the templates is the reset.css. This sheet zeros out most of the commonly used HTML elements to level the playing field for all browsers. Attributes normally applied to these elements by browsers are removed, giving you more complete control over your styles. Using the reset.css, you can specify styles for the font(s) used, the link colors, the style for heading tags, the margins for lists, and so on.

Template.css--The template.css stylesheet introduces an adaptation of the 960 grid system and the template-specific styles used, such as those for the campus links, header, search, footer, and so on. If you're comparing styles between the University templates and the 960 grid system, this is where you'll see a slight difference. The 960.gs uses 10 pixel padding on their divs. The U templates removed the padding from the divs and placed it on the p and h tags instead. The main purpose for this was to allow for background colors within columns to touch. In other words, background columns in the 960.gs will have a 20 pixel gap between the columns. Background colors used in the templates will meet between columns. See the bottom of "960 grid system and the templates" on the Brand site for an example.

Optional.css--This style sheet is only needed if you are using the horizontal navigation with the dropdowns or the unit footer. If you're not using either of those features, the link to this style sheet can and should be removed from your pages. The more extraneous code you can get rid of, the better.

Print.css--This constructs a print version of your web pages, assuming that the main content on your page is in the center and right columns. It removes things unnecessary for print, such as the left navigation and the unit's graphic header. A block M and wordmark combination appears in the upper left corner of pages, and unit-specific information can be added in the upper right corner. Be sure to look at the coding on the template pages to see where you need to add your unit-specific information so that when someone does print out one of your pages.

IE6 and IE7.css--These two style sheets are vital to make your pages render correctly for these browsers. They must be imported into the pages, not linked. They must also have the correct path to them, so as you change location of your .css files or as you add directories (different levels and sublevels of pages) you need to maintain the correct path to these style sheets.

As you work with the style sheets and run into behaviors that you weren't expecting, take a look at the style or the tag that might be responsible for the behavior you're seeing. You may need to track it back through more than one style sheet to find out what's going on. Use the Brand site for a reference. There is a good deal of information in the Web Templates section of the site.

HTML5 and CSS3--As we work on a new University home page (due to appear this spring), we are converting template code to use HTML5 and CSS3. New templates with this updated code will be available at some point after the launch of the home page. Don't worry - just because there will be new code does not mean you need to switch to it! It's simply an update that you can use as you build new sites. The current code will continue to be available as well.

If you have any requests or suggestions for the next release of the templates, please let us know! You can comment on this post or email us at urweb@umn.edu.

For those of you who are fans of the television show "Survivor," you may be familiar with one of this season's characters, Phillip. Phillip is supposedly a former federal agent who launches into the most obscure diatribes when asked a question by the show's host, Jeff Probst. On more than one occasion, Phillip starts talking about Japanese samurai - something that has absolutely NOTHING to do with the topic at hand.

As I watched last night's show, I was thinking about the home page project and how EVERYTHING we are doing is related to improving a website visitor's experience. Which brings me to the second objective for the website:

Helping visitors find information more quickly and easily by highlighting upcoming events and providing more areas for stories, hot topics, and news.

There are several ways we hope to enhance a visitors experience including:
- Elevating the placement of the central navigation to the top of the page
- Using mega-menus to allow for more efficient navigation to high-interest categories
- Adding supplemental navigation specific for each persona
- Infusing a calendar of events with a constant presence
- Providing more opportunities to share targeted topics per persona
- Building the architecture so it can tap into the functionality of the Content Store. (Don't know about the Content Store? Read Pete Wiringa's latest post.)
- Strengthening relationships with all colleges/units/departments so stories, hot topics, and more can be shared quicker and easier

Each element on the new home site has been discussed, reviewed, tested, discussed some more, and then supported with data and research. Next week, I'll delve into a little more about the vigorous usability testing the site has gone through.

Cheers!
~Jennie

Last week, I shared with you the strategy for the new home site redesign. With eight weeks to launch, I thought it might be intriguing to delve a little deeper into each of the objectives.

Objective
Delivering a customized experience by allowing individuals to self-select an " audience view." While a common option for many corporate websites, the University of Minnesota will be a leader in the field of higher education by meeting the growing expectations of website visitors to identify the type of information they want to see.

Tactic
The new University of Minnesota home page allows visitors to self-select a "view" which delivers customized information to that particular audience (or also referred to as persona).

Every view contains unique stories as well as supplemental central navigation crafted specifically for each group. In addition, views display commonly- accessed links and topics of interest tailored per persona.

Functionality
When visiting umn.edu for the first time, a screen appears displaying:
"Welcome to umn.edu. Select the view that best fits your needs. You will see the University's top stories plus content created just for you. Personal views can be changed by clicking 'change my view.'"

Also appearing next to the statement will be a selection box for the following groups:
- Current Students
- Donors & Alumni
- Faculty
- Future Students
- Parents
- Sports Fans
- Staff
- No Preference

Visitors are asked to save their preference; so upon return they will immediately see their selected view. Since our research reveals many of the University's website visitors have multiple roles such as parent, staff, donor, etc., it will be very easy to toggle between views.

These persona-based pages are the first step in a long journey of providing a cohesive umn.edu online experience.

Stay tuned for next week's post as the countdown continues.

It is hard to believe it has been 2 1/2 years since the home page of umn.edu was redesigned. I had just joined University Relations in April of 2008 and the redesign was in full swing. By October 2008, the current home page was launched. Since that time, we have been tracking usage, sharpening our coding skills, looking at innovative ways to tell a story, and refining how to best deliver electronic information.

It seems it all comes down to: Delivering the right information in the right format at the right time for the right audience.

This is a huge vision. But, it is one we are proud to be taking a step closer to with the latest redesign of the umn.edu home site by:

• Delivering a customized experience by allowing individuals to self-select an " audience view." While a common option for many corporate websites, the University of Minnesota will be a leader in the field of higher education by meeting the growing expectations of website visitors to identify the type of information they want to see.


• Helping visitors find information more quickly and easily by highlighting upcoming events and providing more areas for stories, hot topics, and news.


• Streamlining navigation by bringing the most-accessed items near the top of the page.


• Increasing usability and support for mobile devices.


• Reducing number of clicks through consolidation of home pages for sites including faculty, staff, and parent.

Over the past few months, many of you have had a chance to see design direction for the new site. And, I realize many of you have not. So, without further adieu, I invite you to take a sneak peek of the new home page: Design Direction (pdf).

From developing the project plan in August 2010 to kicking-off our fourth type of usability, we have been working diligently to create a virtual face that best meets the needs of our stakeholders including students, donors & alumni, faculty, staff, and more.

The new home page is scheduled to launch at the end of May 2011. But, in the meantime, I plan on providing more frequent updates about the project. If you have a specific question or would like to talk, please do not hesitate to contact me at lijew006@umn.edu. I would love to hear from you!

Cheers!
~Jennie

We have been working on developing templates for UMContent and we are pleased to announce that these are now available to the University community. The templates were developed from the viewpoint of allowing groups with minimal web knowledge create websites quickly based on the templates developed by University Relations.

These templates do not require any HTML knowledge for users to use them, just simply send a request to the Office of Information Technology (OIT) and they will create a UMContent site that users can start creating content immediately. Some of the features of the templates are:

• Ability to create a horizontal navigation similar to the home page
• Option to show breadcrumbs in the pages
• Option to set header, footer, and background colors
• Select from a couple of page layouts (one column, two column, etc)

If any group is interested in utilizing these templates, please look at the documentation available here.

If you haven't already heard from one or two University listservs, University Relations launched the new Our Brand--How to Convey It website today.

This new site is designed to be a "one stop" location for guidelines, recommendations, requirements, logos, templates, and images related to University marketing and branding.

Our Brand--How to Convey It combines and replaces several sites that you may already be aware of; the Graphic Standards site, the eCommunication Standards (webdepot) site, the Style Manual, and the Images Library. (These old sites will remain online until Monday.)

Please take some time in the next few weeks to visit the new site and make comments via the questionnaire posted on the home page of the site (in the upper right corner) at www.umn.edu/brand. We value your input!

Thank you,

University Relations Marketing and Electronic Communications staff

Many thanks to the most wonderful Tim Roman and Blaine Cross for their presentation on October 26. Tim and Blaine were the featured speakers for the third Examining Ecommunications webinar.

A recording of the presentation is available at: https://umconnect.umn.edu/p83424454/

For those of you who attended, my apologies for running right up to the time limit. Both Tim and Blaine had such great information, I hated to put a stop to the discussion. Tim and Blaine have graciously offered to answer your questions offline. So, if you did have any further questions, please feel free to send an email to them.

Tim: roman029@umn.edu
Blaine: bcross@umn.edu

Mark your calendars for the next webinar on November 30 featuring Liz Giorgi, University Relations, talking about video.