University of Minnesota
University Relations
Our Brand: How to Convey It
http://www.umn.edu/brand

Our Brand: How to Convey It.

Recently in Tips and Tricks Category

Resources: UofM and Beyond

| No Comments

A compilation of University websites, listservs, and wikis with a few outsiders thrown in for good measure. Add more resources by commenting on this entry.

U of M web-related listservs

CODE-PEOPLE: For application developers at the U.

WEB_TEMPLATES: Discuss U of M templates and standards.

WEB-PEOPLE: Web developer and designer discussion list.

WEBSTANDARDS: General discussion about web communications at the U.

WEBSTATS: Discussion of University-wide stats.

WEBDEV: News and information about Web design and development from UMD's Laura Carlson.


UMContent listservs

UMCONTENT-USERS: Support list for UMContent content management system users.

UMCONTENT-SITEBUILDERS
Discuss site building guidelines and best practices for CSS layouts and fragments in UMContent.


General web resources

A list apart--A blog "for people who make websites."

The Smashing network--A list of resource sites including Webdesigner Depot, Six Revisions, CSS Tricks, Smashing Magazine, and lots, lots more.

Web Standards Group--The Web Standards Group is a place where the web developers at the University of Minnesota Twin Cities Campus come together to network, learn from each other, and put into place the best methods to put together web sites and communicate with our varied audiences.


CSS resources

CSS_DEV Wiki--A wiki organized by the U's CSS Development and Education Workgroup.

The CSS Tutorial--Learn all about CSS at CSSTutorial.net.

CSS Tutorial--Another tutorial from w3schools.com.

CSS Zen Garden—The power of CSS to change a page without changing the HTML.

The W3C on CSS—What's new with CSS, W3C core styles, authoring tools and more.


XHTML resources

If you use Dreamweaver 4 or above, this extension can automate your conversion from HTML to XHTML.

XHTML Tutorial—The 'how' and 'why' of using XHTML.

XHTML Reference—A best practice guide with descriptions and examples.


Tools

Firebug--Provides tools for inspection, analysis, and debugging of HTML, CSS, and Javascript using Firefox.

Firefox Web Developer--Adds a menu and a toolbar with various web developer tools.

Web Standards Advisor--Combines coding checks with best practices and standards in a user-friendly report.

Grid System Generator--Build a custom grid using the 960.gs (the same grid system that the U templates use). Tutorials for using the grid system are also available.


Mass email resources

CAN-SPAM Act

Email Standards Project--Great information for what is and isn't supported in various email clients.

Campaign Monitor Articles & Tips

Constant Contact Learning Center

MailChimp.com--Email marketing resources

ExactTarget.com--Email marketing strategy and education resources.

Lyris HQ Email Marketing and More--Articles, FAQs, and more on email marketing, integrated marketing, web analytics, and search engine optimization.

Mailer Mailer—Email Marketing Metrics Report includes some interesting data such as click rates based on the length of your subject line and level of personalization.


UMContent resources

UMContent support--The University's support site for UMContent includes recent announcements, FAQs, new site and account request forms.

UMContent Wiki--Review UMContent notes and download vendor and U documents.

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)

April 26 webinar to be rescheduled

| No Comments

Unfortunately due to circumstances beyond control, we are terribly sorry to announce the April 26 webinar is cancelled. This topic "Writing for the Web" is very popular and we will plan on scheduling the session this summer.

Please accept our deepest apologies for the inconvenience.

How to Read Template Stylesheets

| No Comments

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.

Examining eCommunications webinars - March 2011 update

| No Comments

Since starting the series in August 2010, more than 300 people have registered for the webinars. The response has been overwhelmingly positive and we are excited to be more than half through the series.

There have been a few shifts in the schedule and the next webinar will be April 26 at 10 a.m. The topic will be "Less is More: Writing for the Web." You may recall this session was originally scheduled for February but due to circumstances beyond our control was canceled. But - no worries - the speakers have agreed to participate in April. Round of applause for the most excellent Office of Communications and Advancement in OIT. Thank you Chris Goodland and Chris Moellering!

If you are new to the webinars, here's the scoop:

Who: Anyone can attend (University students/staff/faculty or the general public)
What: Examining eCommunications webinars. Each 45-minute presentation will focus specifically on online communication as it relates to the University.
Where: On the web
When: August 2010 - June 2011; 10 a.m. CDT
Why: Learn about new best practices, glean tips and tricks, and ask questions of your colleagues all from the comfort of your own chair.
How: Attendance is FREE with registration. Want to receive reminders of upcoming webinars? Send an email to urweb@umn.edu with subject line "Webinar Reminder" and we'll be sure to give you ample notice.

Here's how the remainder of the series is shaping up:

April 26, 2011 - CANCELLED - WILL BE RESCHEDULED FOR SUMMER 2011
Less is More: Writing for the Web by Chris Goodland and Chris Moellering, OIT

May 24, 2011
Sneak peek of new umn.edu home page by Jennie Lijewski, University Relations

June 28, 2011
Tabbed search and keyword by Jeremy Casper & Pete Wiringa, University Relations

July 26, 2011
Events calendar by Jeremy Casper, University Relations

Examining eCommunications webinar recordings

| No Comments

Since links to recordings from the Examining eCommunications webinar series are scattered across posts, he's a quick roundup of what's available.

Photo Library (August 2010)
Recording and PDF of slides.

Content Store (September 2010)
Recording and PDF of slides.

CCE and UMContent (October 2010)
Just the recording.

Video Storytelling (November 2010)
Just the recording.

Usability Services at the U (January 2011)
Just the recording. Note: introductions were cut off. The presenter is Josh Carroll, Senior Usability Consultant for Usability Services in the Office of Information Technology. The facilitator is Jennie Lijewski, Associate Director for Electronic Communications in University Relations.

**NEW DATE** Webinar - Less Is More: Writing for the Web

| No Comments

Less Is More: Writing for the Web
April 26, 2011; 10 a.m. (New date! Originally scheduled for February)
Attend via UMConnect

NOTE: If you had registered for the February webinar, please register again for the April session. We apologize for any inconvenience. Thank you.

Three years ago the Office of Information Technology (OIT) began a project to integrate its more than 110 separate websites into a single University-branded OIT site delivered with the UMContent content management system. The communications group designs and builds the site and edits content contributed by other OIT staff who have varied educational backgrounds, work cultures, and experience providing web content.

Join Christina Goodland and Chris Moellering on April 26 to hear about the communications group's five good practices for web writing, discuss examples of writing on University of Minnesota websites, and share a your own ideas about how to write effectively for the web.

Register today! A confirmation email with the link to UMConnect will be sent to you prior to the webinar.

FREE webinar - Usability Services at the U

| 1 Comment

Usability by David Rosen, Usability Services
Jan. 25, 2011; 10 a.m.
Attend via UMConnect
REGISTER NOW

Join David Rosen, usability services manager, and learn about usability services' origins at the University, its accomplishments since David started leading the group in March 2009, and what future services and plans look like.

Register today! A confirmation email with the link to UMConnect will be sent to you prior to the webinar.

College students on the web

| No Comments

As I read Jakob Nielsen's latest post "College Students on the Web," the summary resonated with me:

"Students are multitaskers who move through websites rapidly, often missing the item they come to find. They're enraptured by social media but reserve it for private conversations and thus visit company sites from search engines."

Nielsen also noted, "Students usually kept many browser tabs open at the same time. When a site slowed them down, they'd usually switch to another tab and continue on another site. Even if they're just checking their Facebook page, such context switches removed users from the flow of using the first site. Thus, even in cases when they later returned, users had a harder time picking up where they had left off."

I couldn't help but chuckle at Nielsen's description because he accurately describes my behavior. At times, I have been known to have a dozen or more tabs open on my browser and not only have one browser window open but three or four. My attention jumps from site to site in a split second. So, while I am definitely NOT in the student age group he refers to (18-24) - I do like to think my online habits mean I am young at heart.

Read Nielsen's entire article at: http://www.useit.com/alertbox/students.html.

Higher ed analytics revolution

| No Comments

I just read this most interesting article and wanted to share it with you:
Avinash Kaushik on Higher Ed Websites and Web Analytics

This topic seemed incredibly appropriate on the heels of my registration for Friday's Web Standards meeting focusing on stats and analytics. I am very intrigued to see what data my colleagues across the U are collecting and acting upon.

Avinash hit the nail on the head. I hope all of you who work on websites will be inspired by his words.

In the spirit of sharing, there is another great article which I actually have taped to my wall (ask anyone in Morrill Hall and they can vouch for it). I hope you take the time to read this one too: Why Are Colleges Flunking Web Strategy 101.

Cheers!