Explore Montana State University

Creating a lead generation page for your university or institution? Here are a few thoughts after implementing the “Explore” page for Montana State University.

In 2015, I had the pleasure of implementing a university lead generation form designed by Graphic Designer Ron Lambert and the Montana State University marketing team!

Overall this design was challenging due to a few of our special page requirements:

Keep the users on the lead page

In order to get the contact information we hoped for, we had to include enough content to remain informative without linking to other pages.

The clever flip over and hover tiles showed additional information without crowding the space. In addition, we chose images that conveyed messages without any text. For example, the section explaining MSU’s majors is interesting, but we didn’t need a paragraph on our beautiful surroundings—that photo speaks for itself!

Use OmniUpdate Content Management System to house our custom page

In implementing this design, we needed to change pieces of the theme for this page only, but we didn’t want to modify the CMS’s XSL templates. Some of our solutions included the following:

  • Disable the heading link for the site logo using JavaScript.
  • Remove the bulk of heading and footer elements using a custom stylesheet.
  • Create assets for each SVG icon—this worked remarkably well for keeping the SVG code inline once published but keeping the page tidy when editing!

Maintain minimal page load time even with a lot of media

Due to the parallax design and large banner, all images and files had to be compressed to keep load times down. Also, we worked to implement SVG icons instead of PNGs or GIFs. The SVGs also made the page more fun to “play” with—the colors could easily change using simple CSS!

Though this was a time-consuming creation, our page analytics showed that it barely made any return on the effort put into it. Given more time on it, I would make the following recommendations:

  • Add Twitter card metadata so the page looked beautiful when shared.
  • Change the text on the form button to make the offer more enticing. HubSpot’s article about lead generation forms points out that the submit button may be the “final opportunity to convince your visitors that they should fill out those last few fields.”
  • Make the benefit more clear to the user—explain what the Explorer’s Guide contains or why it will be exciting to receive.

If you want to check it out (or sign up to learn more about Montana State University!) visit www.montana.edu/explore.

Naropa University

A redesign to help put users’ needs first for the Naropa University website.

Working with the team from OmniUpdate along with Mary Haste from Naropa University, we implemented a redesign for the entire university website.

Unlike other designs I’ve implemented, Naropa University’s wasn’t quite ready to move all pages into the responsive view. We worked through the challenges and created non-responsive and responsive versions using the same Sass base CSS. As they work through updating each page’s outdated elements—removing fixed width content, updating low-quality images with higher-resolution versions and revisiting text—they can then easily switch their page to the responsive version using a page setting in the OmniUpdate CMS!

To ensure user needs were met, accessibility, semantics and improving content were all specific goals of these updated pages. Many colors were modified to be more vibrant and have a higher contrast in order to adhere to recommended color contrast. Are you meeting these standards? Check your own site’s colors!

Visit their updated website at http://naropa.edu!

Elizabeth City State University Web Redesign

ECSU’s redesign included many creative design pieces that presented fun challenges for implementing in a responsive environment.

In 2015, I worked with Vayakone Sphabmixay from SAX, Inc. implementing their redesign for Elizabeth City State University in North Carolina. There were many creative design pieces that presented fun challenges for implementing in a responsive environment.

Historical Year Timeline

The timeline is both collapsible and adapts to mobile devices. In addition, with this and other dynamic pages developed—such as the Past Presidents of ECSU—a page scroll to the updated area was necessary to orient users to new information.

Custom Weather Feed

If you use OmniUpdate for your Content Management System, you can set your feeds to republish every hour. This is perfect for third-party tools that are only free up to a number of page views. For ECSU, the weather feed was implemented using Weather Underground’s API and is re-published on an hourly basis.

Hover Tiles

The content tiles on ECSU’s admissions page were designed to link to other elements when a user hovers or clicks on a image.

Visit ECSU’s website at http://www.ecsu.edu/ to see the variety of page layouts and how they work on your devices—desktop, tablet and mobile!

Northeastern University’s College of Professional Students

Crafting a better responsive experience for higher education.

In the summer of 2014, I had the opportunity to develop the code for a design created by the team at I-SITE, INC. for the College of Professional Students in Boston, MA. Unlike new development work, this redesign required an update to the base code using only minimal CSS.

Before updating, this Web page had used mobile queries to (unfortunately) simply hide the “unnecessary” mobile elements to make the content disappear on smaller devices. However, many sourcesincluding the book “Responsive Web Design (Brief Books for People Who Make Websites, No. 4) ” from Ethan Marcotte—explain that your Web content is important no matter the device!

Using only 200 lines of CSS, I was able to take this page from its previous design to an elegant responsive design which kept all content and formatted it appropriately.

As this was one of the first pages I implemented responsive web design in, it was an interesting and rewarding challenge. If you have a project which needs a quick update to make it mobile friendly, let’s chat!

Visit the updated homepage at http://www.cps.neu.edu/.