Category: Design

A Better Footer for All

The Digital Services team is developing an upgraded global footer design for our CMS websites. The upgrade puts a strategic focus on marketing and recruitment in line with our mission to increase enrollment.

Customization

We are excited to introduce some new, customizable options. In addition to customizing your contact information, you will now be able to add call-to-action (CTA) buttons and social media icons to your CMS website’s footer. Options include:

  1. No CTA buttons or social media icons (base footer only)
  2. Add social media icons linking to the social media channels of your choice
  3. Add a “Give” button, linking to the giving page of your choice
  4. Add three recruitment buttons, letting users Request Information, Schedule a Visit, or Apply

You can also use any combination of option #2, #3, and #4.

Upgrading Process

The base footer will launch automatically using your existing contact information in the next week. Nothing is required of you. Additions can be used on an opt-in basis. Instructions for enabling the CTA buttons and social media icons will be sent to CMS Liaisons later this month.

Example Footers

Design elements may be still be adjusted slightly by UMC, but the following examples preview the design for our new footer options.

Base Footer (Example #1)

The contact information will continue to be customizable as it is in our current footer design.

Base footer example.


Social Media Icons (Example #2)

You can choose from our standard social media icons and point them to social accounts of your choice.

Footer example with social media icons.


Give Button (Example #3)

You can choose where the giving button links to. We recommend using this button only if your department has it’s own giving webpage, although you could also choose to link to the University’s giving website.

Footer example with giving button.


Recruitment Buttons (Example #4)

You must add all three recruitment buttons together (all or nothing) and they will automatically link to the appropriate University-level webpages for you.

Footer example with recruitment buttons.


Combination Option

You can mix and match between options #2, #3, and #4. Here is one example of a potential combination.

Footer example with all options.


Feedback

We are very excited about an increased focus on recruitment that matches our University goals. Any feedback, questions, or concerns can be sent to cmshelp@mtu.edu. Thank you.

Joel C. Vertin
Director of Digital Services
jcvertin@mtu.edu

Continue Reading


Upgrading your Giving Priorities

When we started rolling out CMS websites back in 2007, many of our academic departments wanted some sort of Giving Opportunities webpage on their shiny new website.

Some departments were able to hone in on a few key priorities. Some departments struggled to chose specific priorities, so they kept things very vague. And some departments listed everything fund they had and the kitchen sink.

These pages generally looked the same: an image slideshow, some headings and bullets, and some “Give Now” buttons.

Fast forward to 2017, and we have a new widget available in our new CMS template. Called “Gift Boxes”, this widget has a more modern look and feel and allows you to:

  • show a representative fund/priority image
  • show a fundraising goal for the particular fund/priority
  • show a progress bar indicating how close we are to the goal
    • The progress bar automatically updates overnight
  • provide a short description of the fund/priority
  • provide a link to a longer webpage all about the fund. The full webpage can include:
    • A point of contact
    • Additional descriptions
    • Additional photos
    • Social media sharing icons
    • The ability to comment on the fund via the Facebook commenting platform

You can view a great example of how to use these new gift boxes on the School of Forest Resources and Environmental Science website.

This new widget can help you create a more engaging, powerful, and attractive Giving Opportunities webpage that showcases your priorities.

You can use these boxes to highlight your key priorities and follow them up with more general descriptions, bulleted lists, and/or sliders for your additional opportunities. You can also change the funds/priorities that you feature with these boxes through out the year.

Creating Gift Boxes

In order to create a gift box, you must first have an account number registered with the Michigan Tech Fund. Once you have your account number, you can follow our online documentation and create your own gift boxes on your CMS website.

We happy to provide this new feature to our CMS liaisons. If you have questions, please contact us at cmshelp@mtu.edu.

Joel Vertin
Director of Digital Services

Continue Reading


Will My iPhone Photo Work?

Our new CMS templates put a premium on photography. Compelling images help tell better stories. They catch your eye and draw you in. Make you say ‘wow.’ A picture is worth a thousand words, right?

Everyone seems to have a smartphone with an amazing camera these days. My iPhone goes everywhere with me. I’m sure yours does too. It can capture a photo from your research lab as you conduct a new experiment. Your internship in Silicon Valley. Your kayak ride on the canal. Or mountain biking on the Tech trails. There are many opportunities to capture the Michigan Tech story each day.

Lately, more people have been asking if an iPhone photo is high enough quality for a CMS webpage. The answer is “it depends.”

Photo Quality

Two factors determine if a photo will “work” on a website:

  1. Is it actually a good photo?
  2. Does the photo have enough pixels?

What Makes a Good Photo?

I’m not a photographer. I can tell you that straight up. I can tell you the basics of a good photo though. The lighting has to be right. The zooming appropriate (not too close). The photo must be clear (no shaky hands!). The subject has to be in focus and, if a person, hopefully smiling or making an appropriate face. If the photo is in a lab, proper safety equipment must be used. Is the photo compelling? Does it tell a story? Does it make you say “wow?”

Pixels and Filesize

If you want to use your iPhone photo as a large, feature photo in the CMS, it must be at least 1000 pixels wide. More is better, though, as the Image Editor will scale it down for you. If you are using a smaller photo, in a Boxed Item or Sidebar, you can likely get away with a photo that is only 500 pixels wide. Again, more is better, though. I’ve often found that a photo that is under 1MB is usually too small or zoomed in to work. That is a very general guideline, though.

Give It a Try

All in all, it doesn’t hurt to try a smartphone photo on your website. Upload, crop, and put onto a webpage. See for yourself if the photo looks “good” or not. Try previewing with both a wide screen (standard desktop monitor width) and a thin screen (make your browser window smaller, to mimic a smart phone).

If you don’t like what you see, you don’t have to use the photo. However, you or your faculty or your students may have access to some wonderful shots that will bring your website to life.

One great example is the banner photo at the top of this webpage:

http://www.mtu.edu/business/resources/internships-coops/

This is a business student at an actual co-op/internship and the photo was shot with a smartphone. Is the photo “award winning” for quality and composition? No. But does it work? Does it tell a story? Is it authentic? And quality enough? Absolutely. Just think about the types of photos you get access to for your CMS website. Even for your research blog or your department’s social media account!

If you have a photo that you’d like to run by the web team, you’re welcome to email it in to cmshelp@mtu.edu and we can let you know what we think.

Joel Vertin
Digital Services Manager

Continue Reading


Why We Are Going Responsive

When universities or corporations redesign their website, the trend is to ‘go responsive.’ There are a few important reasons, beyond being trendy:

  • Mobile usage is exploding: More than 33% of our web traffic is on a mobile device and that percentage increases every few months. Our Athletics website has already seen “the flip” where more of their traffic is via mobile than any other platform.
  • Consistent user experience: if your customer is used to your desktop website, they should have a similar experience on a tablet or mobile phone. This is ensured by serving them a responsive website that adapts to their screen size. We believe in serving the same content, regardless of the screen size. Smartphones are fully capable of displaying all of the content that a desktop machine can.
  • It is recommended by Google: Google will boost your search engine rankings if a user is searching on a mobile device and your website is ‘mobile friendly.’ Although Google also values a separate version of your website as being ‘mobile friendly’, they recommend that your website be responsive.
  • Cost effectiveness: in the long run, it is easier to make your website responsive than it is to maintain two or more separate versions of your website. With multiple website copies, it is easy to be lazy and develop for ‘desktop only’ and then have to redevelop for the other screen sizes. A responsive website puts the focus on all screen sizes and one code base.

The Importance of Mobile

Administrators and others who are not trained web professionals often overlook the importance of having a fully functioning mobile website. Sitting at a desk all day can make you forget that this is not how everyone accesses your website. Think of your friends and family members who don’t even a computer now that they have a tablet.

The Pew Research Center has some excellent information about mobile device usage:

From those reports, these statistics especially stand out to Michigan Tech:

  • Nearly 1 in 5 Americans relies on a smartphone for accessing the Internet either because there isn’t “any other form of high-speed Internet access at home” or because of a “limited number of ways to get online other than their cell phone.”
  • 7 percent have neither broadband service nor other alternatives for going online other than their smartphone
  • Younger adults: Fifteen percent of Americans ages 18-29 are heavily dependent on a smartphone for online access.

Here are some other statistics that were discussed during the 2015 HighEdWeb Annual Conference:

  • 60% of college freshman say the visual environment is the deciding factor for college choice.
  • 40% of students use mobile devices to view any website “all the time”
  • 88% of juniors and 86% of seniors find college websites through search engines.

Putting Our Best Foot Forward

In order to reach the audiences that we want, moving our websites to a responsive design is not just a desire—it is a must. We’re excited to be putting our best foot forward to better serve our users and to reach a wider portion of our target audience. Going responsive is not a trivial initiative, but we’re ready for the challenge.

Joel Vertin
Digital Services Manager

Continue Reading


Image Carousels are Dead

Why do people always ask for image carousels, especially on their homepage? Ok, I understand that sometimes it is politics. “I can’t feature just one topic on my department’s homepage. Can we add seven images, so no one is mad?” Sometimes it is because novices thinks that it “looks cool.” Sometimes people see it on one website and think they should copy the effect. None of these are good reasons for an image carousel, though.

No One is Watching

Politically, you may feel better about having an image carousel, but your users don’t care. No one is watching past the first image. Not only do our own analytics show it, but it has been well documented by others on the web as well:

Alternatives

Instead of an image carousel that no one will be looking at, sprinkle strong imagery and content through your homepage, informational page, or marketing page. Users will scroll—especially on mobile devices. Instead of cramming all your images into one small section of your page, use them throughout your page. You’ll find more success.

If You Must . . .

If you HAVE to use image carousels, we recommend the following:

  • No more than three images. Don’t make the user load anything more than that (bandwidth isn’t free)
  • Optimize your images to reduce total load
  • Don’t rotate your images automatically. It affects those with motion sickness issues or other motor skill deficiencies

Joel Vertin
Digital Services Manager

Continue Reading


The Hierarchy of (Web) Needs

Being a web professional at a university can be difficult. Department chairs say things like “I want a website that looks different from everyone else.” A liaison says “I want the newest, craziest, most different website that you can make.” Everyone wants ‘cutting edge,’ although they don’t know what that means or why they are asking for it.

Those who don’t work in the web profession get lost in flashy designs, zany animations, and sparkles. They rarely analyze how many clicks it takes to get to the real information, how accessible a website is to those with disabilities, or how user-friendly a website is on an iPhone. They just want to be ‘wowed.’ Does their audience really want to be wowed, though?

Design Hierarchy of Needs

The problem is that creativity is the least important part of the web design pyramid. A website cannot be successful if it is not functional, first and foremost. It also should be reliable and usable.

Design Hierarchy of Needs
Design Hierarchy of Needs (Credit: 3.7 Designs http://3.7designs.co/)

3.7 Designs has a nice article that discusses this issue by relating it to Maslow’s Hierarchy of Needs.

My Digital Services team puts the focus back on making websites that are functional, reliable, and usable first and foremost. We understand why you are asking for “new and fancy” websites and we are working on new CMS templates to accommodate this. However, let’s not lose focus on what makes a website truly effective: good, readable content organized within an intuitive navigation structure and usable interface.

Joel Vertin
Digital Services Manager

Continue Reading