minuti.ae

In-progress screenshot of our the new mStoner.com blog landing page.

Better? I hope... showing to the client tomorrow :)

Concept for Webster University.

Another small screen shot of a potential design for Columbia University.

Potential design for Columbia University.

button design for a project for Columbia University

Spoof graphic for a presentation about the negative aspects of responsive design

That's right, it's a website wearing a party hat. You only wish your site had a party hat like this one!

Anyway, this was a graphic about a website launch party. You can see the graphic and post connected to this at mstonerblog.com

Working on the EDUniverse.org Twitter page.

Intergalactic awesomeness. See the full graphic on our blog: http://t.co/BZijVFuH

Another detail from the new mStoner site.

Promo graphic for mobile workshop at mstoner.com. The promo will be live in the next couple of days.

Mobile site concept for a Tier One law school located in NYC. The name has been obscured because... they're lawyers!

One of the slides from a presentation I am giving to students at Indiana University this week.

I'm keeping a daily journal to measure my overall stress level vs. how much I drink vs. how much I exercise. It's called "boozelog."

Food label in progress, vegan curried vegetable pot pie.

Tabs and buttons for an aggregation project I am working on at mStoner.

This is a piece of a mobile site design for a community college. The idea is that the headlines will scroll via touch, or you can click the link to view them as a list. The design is a collaboration with my friend and colleague, Laurel Hechanova.

Possible homepage design for the mobile site of a fashion museum. By the way, who doesn't love cute cyberpunks?

Table cards for a copy shop that is now selling my wife's savory pies in Chicago.

Ziggurat and Whitney go together like peas and carrots.

This is a concept / collaboration with Laurel Hechanova for her new business cards. You've got to

This footer is all up in yo' grill!

This is for a concept presentation tomorrow for a Chicago University. Wish me luck or tell me to break a leg.

Another slide from the mobile webinar I am working on.

Slide for a mobile webinar I'm doing with a couple of people from the College of William and Mary.

Food label, one of several

Food label, one of several.

Work in progress for a current client–detail of the media player and buttons for timely information.

On April 1, 2012 Notre Dame’s in-house team launched a new homepage that raises a new standard for design and development for colleges and universities. It a nutshell: it’s awesome.

Much of the media attention on the new nd.edu homepage has been on the responsive design—the way it adjusts automatically resizes the page and stacks page elements when it is viewed on tablets and smartphones. Their responsive development is truly cutting-edge: they are using RESS (responsive design with server-side components) to deploy content that is appropriate to each device.

But the innovation and real success of this project goes much deeper. Almost everything about the new nd.edu challenges the conventions that are typical to university homepages. The nd.edu team changed the basic navigation model associated with universities, the amount of content presented, and even replaced the top area reserved for feature stories on most sites with simple but gorgeous photography. The primary photography on the homepage photography differs from the standard “students on the green” imagery, instead focusing on images that are distinctly Notre Dame: architectural details, interiors and exteriors, an image of the Dome.

Their new homepage represents a boldness rarely seen from universities. it demonstrates a willingness to try something different and to own the details that make Notre Dame unique. We spent some time with Nick Johnson (Director of Web and Interactive Marketing), Erik Runyon (Manager of Interactive Development), and Philip Zastrow (Web Designer) to dig into the story behind this radical reinvention the University homepage.

The new ND.edu pretty much defies nearly every convention of a typical university homepage. Can you explain what it is that you just launched?
Nick Johnson: We launched the new fully responsive homepage for nd.edu.

From the start, we believed that we could create something bold without making sacrifices to usability. If doesn’t matter if you’re a transactional or experiential user. It doesn’t matter what device you’re viewing from. Whether you prefer a rich, long form approach or a traditional navigational approach, we cover those bases. We launched something where the core brand is present through the entire page. We want the brand to bubble up and out from behind a click or a feature and really saturate the page, regardless of what browser the user is on.

Philip Zastrow: The experiential aspect of this page is our marketing. One of our biggest brand elements is the physical campus itself. Alumni and current students already have an emotional connection to the places featured in the large photos. Prospective students get a glimpse into the experience of being at Notre Dame.

Can you talk about the overall creative strategy—what you were trying to accomplish?
Nick Johnson: The senior leader on campus that tasked us with this redesign believes firmly that when a visitor walks on to campus, they hope at some moment to be moved to tears. We were asked to bottle a little of that up.

Nesting our content choices within a mobile-up strategy helped lead the creative charge. Why not deliver what’s best about your tour site in your homepage too? If your campus is a major part of who you are—as it is at Notre Dame— why not feature the campus in a big way? We wanted to hit that mark boldly, all the while avoiding the girls-under-trees crutch.

You moved away from a typical navigation set for colleges and universities. What drove the decisions you made about navigation?
Philip Zastrow: We wanted to make the navigation as intuitive and simple as possible. We don’t have clear-cut audiences every time the site is accessed. The four core items are About, Academics, Admissions, Faith & Service: a set that is tailored to the needs of any visitor to the site, from prospective student to alumni. This core navigation also corresponds with the sections found on the homepage. There is also a secondary navigation set above that provides information for very specific audiences.

The new homepage brings a large amount of content into one page. What was the thinking here?
Nick Johnson: Most higher ed sites have a big feature area at the top, as did the previous version of nd.edu. Our analytics showed us that pouring energy into rich feature stories is not a good use of the real estate. Less than 2% of our visitors were diving into the feature stories. We were putting a ton of effort into design and photography for these features, and barely anyone was taking the time to read them.

In this version we thought about a model to distribute the institutional identity more broadly: photos that aren’t linked to stories at the top, pieces and details of Notre Dame are distributed throughout the page.

Philip Zastrow: In a lot of ways a homepage is a portal, but we want it to be a more experiential, informative portal. We know our homepage has overlapping needs between our target audiences, so we looked to news websites. These are sites that deal with a wide range of topics and a number of audiences. Plus, they have a lot of information on a single page. The way sites like The Verge handle content is very appealing and inspirational.

Erik Runyon: A challenging, yet fun part of the project was deciding how best to present this wide range of content across the myriad of devices we’re dealing with these days. In some places, we decided that, where you click to switch between content on the desktop, we’d employ swipe gestures on those devices that support it. The conventions of a “touchable” user interface made sense.

Nick Johnson: A lot of credit goes to Erik for the multi-device, responsive approach—from the beginning he pushed for a site that would work for desktop users, smartphone users, tablet users, and whatever is next.

The user interface (UI) seems pretty different than many sites, but still engaging. What informed the decisions you made about UI?
Philip Zastrow: We didn’t want to be like other higher ed websites, but we also didn’t want to be different for the sake of being different. Notre Dame has a unique and vast community with a rich history. We needed to capture Notre Dame.

We took the prospective student tour and walked around campus a lot. We took pictures and sought out little intricacies of our campus that we could bring to the site. For example, the light gray background on the site comes from a pattern found on the walls of the Sacred Heart Basilica. Of course there is the gold from the Dome and some other campus elements scattered throughout the site.

We were also inspired by news websites, entertainment websites, and iPad apps. The news sites largely helped inform how to handle content. Entertainment websites, such as HBO, inspired the experiential approach with accessibility on devices furthering that experience.

How does the site scale well for devices (including tablets and mobile) and how did you implement this?

Erik Runyon: We began by thinking mobile first. We started out knowing that our 1200px wide initial design needed to adapt in every direction. This includes mobile phones and HDTV’s. The difference in this case is that not every device can experience content in the same way. The biggest case on our homepage are the large location images. That experience doesn’t translate to a mobile phone, so now we’re in the process of bringing features to mobiles that are unique to those devices.

Almost everything available on the big screen is available on the mobile version, except that we load content conditionally in order to download fewer resources for mobile users initially. We use server-side scripts to accomplish this.

The large screen version for the whole site is around 2.9 MB. The home-page doesn’t load everything at once, but once someone starts playing with featured content, we load what didn’t download initially. That way, if a user visits for a strictly transactional purpose, they’re not downloading a bunch of content they won’t view or need.

If you load the nd.edu homepage on a tablet, the full set of files downloaded is more like 2.18 MB. The idea is only to give users as much resolution as they need.

If you visit the site on a smartphone you’re getting lower resolution images and less initial content, only about 304k, and we’re trying that to get that number down even lower. The smartphone set of files is very tiny by most .edu standards. And the content we’re not loading for mobiles is available with a single touch on the homepage.
What is cutting edge about the responsive code on the new homepage?

Erik Runyon: We’re using a technique called RESS, and we implemented a fairly simple user agent detection script to decide what platform the user is on. We do this to tailor the experience to the device in order to create an optimal experience for everyone. Eventually I plan on changing our server-side code to feature detection using a library that makes use of Modernizr tests. This is a more forward-thinking method of detection that is less about looking for specific browsers, and more about looking at the browsers capabilities. It’s a good way to future-proof the site.

Do you have any preliminary site metrics to share?
Erik Runyon: Twitter and press response has been overwhelmingly positive. This is my third major launch of nd.edu. The two prior received less than stellar reviews from our internal audiences. This time around we didn’t receive a single negative comment through our feedback form. No one questioned where things had been moved or why.

Nick Johnson: We’ve received lots of favorable press from experts in higher-ed. Voices we care about love the site…it’s been humbling.

Erik Runyon: The overall number of visits to the homepage is very similar, which is good considering we pushed a lot of ordinary conventions out the window. The time spent on the site is similar too. We were happy to see that some of the colleges and departments that are now featured on the homepage are now getting more traffic since the launch.

We are also tracking every action we can on the homepage to learn more about how people are using the site. We’ll use this to drive decisions about content and screen real-estate as we move forward.

Any advice for a university that wants to reinvent their homepage in a unique way?
Nick Johnson: Stop looking at other higher ed sites, because many of them look the same. Somewhere along the way, the higher ed web community appears to have decided upon the “right way” to execute a site. Take a look at your own campus, your own strengths, your own brand and saturate your site with those details.

Philip Zastrow: Designers need to see their canvas as the web browser rather than Photoshop. We have an expansive canvas that can be as small as a mobile phone to as large as a HDTV and bigger, with everything in between. Know your subject and get away from your computer to find inspiration. And get a deeper understanding of how far you can go. Talk to developers to know what is possible and ideally design with code.

Erik Runyon: Respect all users and devices, and think mobile first. Feel free to go crazy with challenging conventions but don’t forget that download size matters, especially for low-powered devices. If it takes too long for your site to download, you’re going to start losing visitors.

List of credits for the new nd.edu homepage and Notre Dame people to follow:

Don Schindler, Managing Director; Print, Web and Multimedia of University Communications
Responsible for the content strategy
@donschindler

Nick Johnson, Director of Web and Interactive Marketing
Responsible for the creative direction, design and development of website.
@GtownNick

Erik Runyon, Manager of Interactive Development
Responsible for development of the website.
@erunyon

Philip Zastrow, Web Designer
Responsible for user interface and design of the website.
@zastrow

Stephanie Tatay-Myers, Project Manager
Responsible for resource dedication, meeting documentation and timelines.
@stephaniemyers7

Jane Morrow, Content Specialist
Responsible for stakeholder interviews, site map audit and content audit.
@janeway2

Kate Russell, Information Architect
Responsible for Google Analytics, Information Architecture, and Quality Assurance Plan for the website.
@krussellnd

Mike Roe, Writer
Responsible for user interface text and copywriting on the website.
@wokeupwithword

An Examination of the April 2012 Noel-Levitz Research on Communication Expectations of College-Bound High School Students

A college bound student—and parents of the student—should have high expectations. The student or family will pay top dollar—and in many cases accept a burden of debt—for a degree that’s seen as mandatory or nearly mandatory in many fields. But what do college-bound students expect, and how do they prefer to be contacted? What admissions efforts have the biggest impact on decision making? We can’t assume that we know the answers to these questions without research.

As luck would have it, our friends at Noel-Levitz just released another research report based on surveys from nearly 1,000 college-bound students (and just over 350 parents or guardians of future students) to help us all better understand the expectations of these audiences. I spent some time reading this document, rereading it, and thinking about it. Here are my top conclusions.

All seven highly influential factors for college-bound students are strongly connected to one another.
There are seven factors (including a campus visit, the institutional web site, college search sites, and talking to counselors and students) identified as highly influential—with an average rating of 3.5 or higher on a 5 point scale. We can look at this as good news: an institution has up to seven powerful chances to help a college-bound student make a decision. Even though the report separates these factors for purposes of comparison we can think of them as additive. For example, a live chat is a chance for positive influence but is also a chance to point a prospective to a campus visit or a helpful area of the website. One influential factor can point to the next, and all factors can point to “yes.”

All or nearly all of your efforts should support a visit to campus as a next step.
According to the data, the on-site campus visit still wins as the most influential factor for prospective students and parents. If we acknowledge that none of the decision factors exist in a vacuum, most efforts need to point to the most powerful decision maker in some way. The campus visit should have obvious calls-to-action across communications channels, and any web presence should make it as easy as possible for prospectives to schedule a visit.

You need an outstanding website.
The main college or university website is the second most influential factor for college bound students and their parents. Websites were ranked as more influential than speaking with a current student, talking to an admissions representative, and even more influential than college search sites or guidance counselors. It’s worth remembering that in addition to being nearly as influential as an on-site visit, a website offers a very high level of convenience (it can be accessed without much of a time investment) and immediacy (it can be accessed at the moment of inspiration).

Facebook loses to other sources of influence (including print!) by a pretty big margin…
This was the biggest shocker to me. Facebook was the only choice identified as a middling source of influence, with an average rating of only ~2.5 on a 5 point scale.

… but is still worth maintaining based on the level of ease and because curating for Facebook has other benefits.
Facebook can be set up in minutes and a moderate Facebook presence can be maintained relatively easily. In the process of combing for content, a person curating for Facebook will likely turn up stories that are appropriate for other feeds or even feature interviews.

You need a good admissions email campaign.
For juniors, seniors, and parents, email was chosen as the most comfortable method of online communication. All other methods (live chat, social media, webcast, webcam) were fairly close to one another for comfort level. It is worth noting that the convenience level of social media might beat some of the others (webcam or live chat). In other words, social media has a nearly equal level of influence to efforts such as webcam chats but social media probably represents less time and effort to maintain.

A big thumbs up to Steph Geyer for being friendly about sharing research and for her permission to blog about it. She’s a smart lady and you should listen to what she says.

Day three of An Event Apart Seattle 2012 draws to a close. I saw a number of presentations ranging from “very good” to “face-meltingly good” in the last three days, and I present you with my selections of the most important running themes from the conference.

Better service is still a top consideration for the people shaping the web.
“Better service” isn’t a very sexy phrase. In fact, I think one of the reasons our industry settled on the term UX is that it’s shorter, sexier, and more futuristic than, say, “service-oriented design.” This conference was a reminder that leaders in web design, development, and content strategy are still considering and respecting the individuals on the other side of the solutions: the audiences who will use our interfaces, read or watch our content, and navigate the sites and experiences we build. Two speakers who covered ideas about the human side of what we do exceptionally well were Jared Spool and Whitney Hess.

Internet access on multiple devices in general, and mobile specifically, are the biggest changes to the web since the inception of the web.
I’ll actually go bigger and say that proliferation of devices (mobile specifically) is a step toward pervasive computing and is one of the biggest technological advances in human history. Many speakers touched on this theme, and the specifics of this change were very well articulated by Luke Wroblewski and Ethan Marcotte. The magnitude of the global move away from a desktop-centric web can’t really can’t be overstated. It’s a change that deals with use (how / where people use the internet and what they do while connected), resources (both time and money spent on devices and associated ad revenue), and the practices that need to be adjusted to accommodate different needs and displays with different input types.

Content strategy is the phoenix rising out of the ashes of a traditional print-first publishing model.
A print-first publishing model is already dead for most organizations. This change created a dire need for strategic decisions about how content is managed, and the role of content strategist has emerged. Karen McGrane showed a great example of a future-friendly content model in her presentation when she highlighted NPR’s Create Once Publish Everywhere workflow.

Responsive design and mobile development are both still in the early stages of infancy.
Shoehorning desktop-centric philosophies and solutions into smaller, touch-driven mobile screens creates really sucky mobile experiences. It’s a little bit like saying that the only way to accommodate a smaller room is to shrink all the furniture down. You wouldn’t do that because it would create unusable, tiny furniture. On a mobile device, we are dealing with people who have different needs and operate in a different set of circumstances than desktop audiences. We lose a significant amount of visual real estate and so the decisions about how we manage content and interfaces have to change significantly. In Luke W’s two presentations he covered a few ways we tend to fall back on desktop thinking and apply it to user experience in a mobile context. Ultimately, we must remember that this a new phase of the web–best practices are still emerging and in flux, and we must approach our work in an investigative and open-minded way.

In the future-friendly web, generalists rule, but most good generalists still have specialties.
Scott Berkun talked about reasons why generalists trump specialists. Generalists have a bigger circle of understanding than pure specialists do and they are able to relate their work to a bigger context. I also can’t help but observe that many compelling speakers such as Jon Tan still have specialties (in Jon’s case, typography) that lend magic and emotional grace to their work.

An Event Apart is worth attending for anyone who wants to gain a better understanding of the forces, people, and practices shaping the web.
And no, I’m not being paid to say this. Eric Meyer and Jeffrey Zeldman know how to curate and host a great conference. Since a big portion of our readers work in .edu I’m going to finish this thought with an additional call-to-arms: more people in higher education should attend this conference. It’s a place to learn and to relate your work to a web community beyond colleges and universities.

Thanks to everyone who attended our free webinar about planning for devices today. Here’s a downloadable version of the slide deck as a pdf. The underlined sources within the deck will take you straight to the references in your default web browser.

Thanks to everyone who has followed up about this.

A big part of what we do during a web relaunch is help our clients present what’s unique about their institution to audiences on the web: prospective students, alumni, internal audiences, and the public at large. Presenting uniqueness is often called branding; the American Marketing Assocation defines brand as “a name, term, design, symbol, or any other feature that identifies one seller’s good or service as distinct from those of other sellers.”

Creating a sense of place is one of the main goals of a site: you’re helping an institution present a sense of identity online. I’m going to change gears for a moment and talk about an idea that is typically not very unique from site to site in higher education: information architecture (often referred to by the acronym IA), or how a site is organized and labeled. As different as one college is from the next, if you spend some time on different college and university sites, you’ll notice that a lot of the basics of navigation and how the site are organized are very similar. I’ll give you an example of a simple topic navigation so you can see what I mean:

Look familiar? It should. There are hundreds of examples of a topic navigation model that is very close (if not identical) to this one. There are a couple of big reasons for the sameness of navigation and information architecture in higher education:
1) It works. The model used above as an example is a fairly simple, usable approach for organizing what a college or university offers. The effectiveness of this model has been confirmed through usability testing.
2) It conforms to mental models. We expect a prospective student will look at 10 or more web sites when investigating options for colleges and universities. As a person performs a comparative investigation in this way, she forms a mental model of how to navigate a higher education site in order to find information.

Because of these factors, it doesn’t much benefit a college or university to do something radically different from other institutions with their top level of navigation. To do so would be to move away from a model that is both very functional and very nearly taken for granted. To change it radically would likely cause frustration to prospective students.

That’s another idea of a basic function of a web site, and is more transactional than presenting uniqueness. You must allow audiences an easy way to information they need.

How can we reconcile what we must present as different with what needs to look the same for the sake of usability? This is the first of several posts where I’ll be looking at some creative techniques for supporting institutional identity with navigation and information architecture decisions.

Making room for the brand in your topic-based navigation
When we began our engagement with Trinity College’s web relaunch (Hartford), our client Jenny Holland brought an idea to us: to place Trinity’s two major references to the Trinity brand in the topic-based navigation. For reference, here’s what it looks like:

As you look across the topic-based navigation on the Trinity College site, one category should strike you as different from the typical model. It’s “Urban + Global,” the two-word distillation of the Trinity College brand.

This link points you to a page that shows the many ways Trinity delivers on “Urban & Global” with academics and opportunities.

An identity link: brand-driven navigation
Jenny’s concept for inserting the brand into the topic navigation supports ideas from Trinity College mission and makes those ideas a part of how the top level of the site is organized. You can’t guarantee that everyone will click on this identity link, but placing “Urban & Global” so prominently does several things for the site.

It guarantees that information about how Trinity is different is more visible and only one click away from the top in every level of the site.

The identity link also provides something for the curious. If we assume that students develop a mental model for what to expect on higher education sites, “Urban & Global” is a piece that stands out because no other site places these words in the topic navigation. Many other colleges use a similar or identical model because it works, but in this case the piece of navigation that is different is dedicated to explaining the differences of the institution.

The “Urban & Global” page provides a logical grouping for a number of ideas spread throughout the institution. Trinity really does have a number of ways of delivering on an education related to cities and the world.

Other examples
We’ve since applied the identity link idea for several clients.

Middlesex School
The founding headmaster of Middlesex School stated that their mission was to “find the promise that lies hidden in every student.” We helped Middlesex reimagine this founding mission as a call to action of “Find Your Promise” in the topic based navigation:

This section of the site demonstrates the connections between people, places, and ideas at Middlesex–the connections that help students reach their full potential.

NC A&T
For the recently launched North Caroline Agricultural and Technical State University, we culled one word from their strategic plan to accurately represent their brand: “Excellence.” You’ll notice this word in their topic-based navigation:

The Excellence page houses stories that show how they deliver excellence: through innovation, collaboration, connections, and leadership.

Elizabethtown College
The Elizabethtown topic navigation looks fairly conventional, but for them we applied this idea as a “sticker” on the left edge of the site—”Surprise Yourself.”

Finding the area of magic
In my years working in a creative industry, I’ve often found there are “areas of magic” where highly logical ideas overlap highly creative ones. To me, this idea belongs in that category: a navigation that follows best practices but has a piece of institutional DNA spliced in as an identity link. If you end up using this idea, or have examples of how you’ve used a solution like this already, please post a link to it in the comments section.

Web Office team members at UC San Diego are early adopters of responsive design in higher education. Many of the top levels of their site display optimally on desktop browsers, mobile devices, and tablets—and they have plans to take this strategy down to the department level. We spoke with Brett Pollak, Director of the UC San Diego Campus Web Office, and Cristian Horta, Web Project & Operations Manager at UCSD, to explore the work and thinking they did to deploy a responsive site for their institution.

Why should people care about responsive design?
Brett: We’ve turned another corner in the era of computing. In the 60’s it was the mainframe. In the 80’s the desktop overtook the mainframe. In the last couple of years, phones and tablets are overtaking desktop and laptop computers. We now use computers and devices to access contextual information around us. People are using the web through TVs and video platforms like the Wii… many new cars are connected to the Internet. We are using more devices to access the internet and relying on the internet to help us accomplish more tasks.

Designers and developers need to be prepared for this shift. It’s getting harder and harder to predict what device and resolution people are using to view our university’s content. We want to build for the future. We want to be ready for whatever replaces the current trending device. Responsive design has emerged as one solution.

Are there reasons responsive design is particularly important for colleges and universities?
Brett: If you look at the primary demographic for college and university websites and applications—current and prospective students—this is the millennial generation. They have a deep connection with mobile devices; it’s second nature to them. We need to be prepared to deliver content to these groups on devices they use—a generation that wants information on their phones or on the latest gadget.

In higher education, we’re not only serving the students. Faculty, staff, parents, alumni are all important audiences, and each audience may have vastly different computing preferences. We have to support the leading edge demographic but also those who are part of the long tail.

What has UCSD done with a responsive relaunch? When did it go live?
Brett: We deployed our campus homepage and top levels of the campus site as responsive. Our campus search and the staff & faculty search are responsive. The UCSD NewsCenter site is maintained by our Communications department and is also responsive. We went live with these sites at the end of January, 2012.

How many people worked on this project?
Brett: We had about 4 or 5 core people working on it, but it wasn’t anyone’s full time project. We also had small contributions from others outside of our core group. The desktop layout was originally designed by our Communications department. Our UI designer, Jeremy Wiles, worked on all of the visual designs for the different breakpoints.

What is the most important thing for designers and developers to think about as they tackle responsive design?
Brett: It’s best to decide whether or not you’re doing responsive design at the beginning of the project. There is additional planning you will need to do for this approach and understanding that from the beginning meand you can think proactively rather than reverse engineer a responsive solution.

Cristian: We designed our specific breakpoints based on our site analytics—the devices we we’re getting the most traffic from. We started with an idea of designing for 3 versions–desktop, mobile, tablet and filled in the gaps.

What CMS is UCSD on? What were the challenges of deploying a responsive design in your CMS?
Brett: Hannon Hill Cascade Server.

Cristian: We created new templates from the ground up to house the new, responsive campus website. It was relatively easy to integrate the responsive CSS with the CMS templates as they are independent from one another. We’ve also started applying responsive design to the 60+ pre-existing CMS websites. The core templates remain the same, we just swap out the CSS with a new version that’s responsive. This will continue to take place over the next couple of months.

Responsive development is fairly new, so working as a team on this kind of project was very beneficial. We met at least two times a week and did plenty of ad-hoc meetings.

UCSD firsts directs visitors to a responsive version of the site, not the custom UC San Diego mobile site. What drove the decision to move away from a custom mobile site as the first destination for visitors on phones?
Brett: It’s an interesting topic and one that we are not finished exploring. There’s a couple of different schools of thought here.

Some institutions automatically redirect to a custom mobile site—a set of optimized mobile tools. Many custom mobile sites give the user a choice when they hit the site—such as University of Michigan’s mobile site. A visitor can use a set of mobile tools or visit the main site by clicking the link at the bottom.

Our first thought when considering a responsive relaunch of ucsd.edu is that we’re primarily serving prospective students. We didn’t want to direct people to a custom mobile site that was geared toward utility rather than admissions. Our audiences can still get to a button that takes them to the custom mobile tools as they scroll down the page on the responsive version of the main site. I should also mention that we’re continuing to add both content and utility to our custom mobile site because people are using it.

We’re looking at a couple of other models for the future. USC has a unique approach on their mobile site—the utility is at the top, and the responsive content is below. We’re likely to eventually take an approach where mobile tools are at the top as well.

What kind of different content do visitors look at on a smartphone vs. a desktop machine or tablet?
Over the past couple of years we have seen, on average, about a half a percent increase from mobile devices to all our web properties per month. This is really remarkable growth for mobile traffic. Below is a snapshot for what content people are accessing.

Top content visited on main site from desktop browsers (Jan ‘11 – Jan ‘12):
Current Students: 9.4%
Prospective Students/Admissions: 7.2%
Academics: 6%
About: 3%

Top content visited on main site from mobile browsers (Jan ‘11 – Jan ‘12):
Current Students: 12%
Prospective Students/Admissions: 8%
Academics: 7%
About: 2%

Top content visited on m.ucsd.edu (Jun ‘11 – Jan ‘12) from mobile browsers:
MyTritonLink (Student Portal): 10%
Course Schedule: 3%
Maps: 2.3%
Dining: 2%

Does how .edu tackles responsive design and development differ from how other industries tackle it?
Brett: Widespread decentralization is a hallmark of colleges and universities. I think that decentralization happens with all kinds of organizations, but it happens in a very extreme way in .edu. Here at UCSD we’ve accumulated a lot of web properties over the years. With our approach and how we’re using the CMS we’ve been able to consolidate many of them but there’s still a lot of work to do.

Part of how we’re approaching this strategically is to provide alternate solutions for websites and web applications that may or may not be maintained by our IT group. We are now offering responsive web templates and application decorators that can be used by anyone on campus.

About a year ago, we deployed UCSD Mobile using the Mobile Web Framework (MWF). The Mobile Web Framework was originally developed by UCLA and has been adopted UC-wide. We’re all contributing to it now.

We’ve made UCSD’s version of the mobile framework available to campus IT units so they can mobile-optimize their applications. They build and host their own apps and point to our centrally hosted framework. It’s been successful.

With the introduction of responsive design, we also wanted to start with a tested, stable, and effective HTML base for all sites. For this, we are using HTML5 Boilerplate as the foundation with our own custom styles.

If you had to do it over again, what would you do differently?
Brett: For the home page redesign, we started with the desktop design layout and figured out how to scale down for a mobile display. A different approach (and one that has been popularized by mobile web guru Luke Wroblewski) would be to start with the mobile strategy and figure out how to scale up.

Another thing is to leave enough time for testing. Fluid containers and elements that stack require more time to test in different browsers.

For the pre-existing CMS sites, there are problems we still haven’t solved such as image compression, tables with more than a couple columns, embedded or iframed content, and reports. We will get to these things but waiting until we’ve got a perfect solution for all of the issues would put us behind. Solutions will emerge quickly as these problems exist for everyone moving to responsive design.

Cristian: Internet Explorer Compatibility Mode is not accurate. I’d want anyone who is undertaking responsive development to know that, if they don’t already. Having a test center close while doing development is paramount.

Also, pick a solid code foundation. We used HTML 5 Boilerplate. We also looked at Less Framework. Twitter developed their own code base called Bootstrap.

Have you deployed and responsive sites for departments, centers, etc? Any plans to do this?
Brett: Yes. We are taking a responsive approach down to the college, division, and department level now. Two early examples are our Campus Web Office site and our User Experience and Technologies Site.

We’re always working with website owners to launch on a pilot basis, get feedback, and iterate. We’re doing what we can to deliver a great experience for all audiences and to help faculty at staff at UC San Diego do the same for their audiences.

Congratulations to our client North Carolina Agricultural and Technical State University on the launch of their new site! We’re proud of how we helped them create a web presence that is inspiring, easy-to-use, and supports their strategic plan. Their newly minted site has been live for only two weeks, but early feedback has been overwhelmingly positive and traffic to the site has increased. Nicole Pride, our main point of contact and the project leader on the NCA&T side, is a superstar.

For the rest of our readers, I wanted to relay some lessons I learned at the NCA&T launch party. Whaaaat? Just hear me out. A month before the new site went live, we were invited to the launch party luncheon. The first thing that struck me about the invitation was that not many of our clients bother to host a official launch party at all. Because of this, we would be attending the event without expectations.

The big day arrived. My colleague Greg Zguta and I met in Raleigh and headed to Greensboro. The party was a catered event hosted in a nice, formal space on campus. Slowly people began to arrive. Eventually the room had filled up with more than 150 faculty and staff members who had written, edited, and migrated content to the new site. Below are a few things I observed during the event.

The party was a great way to thank content contributors.
A&T reworked and deployed over 1,800 pages in under a year in a new CMS, making it one of the most ambitious web relaunches we’ve ever seen. To pull it off, the A&T project team had to move very quickly on training and hold contributors to strict deadlines. By throwing a special party just after launch, the project team was able to publicly thank faculty and staff and celebrate what they had accomplished. They also awarded gift bags to five people in the room who had gone above and beyond the call of duty to get the site live on schedule.

The party was a chance for institutional leaders to show how much they value the site (and the work needed to maintain it).
Chancellor Harold Martin, Vice Chancellor Barbara Ellis, and other key leaders on the A&T side spoke at the launch party. This was a way of sending an important message to a room full of faculty and staff: leadership takes the new website seriously, and they value the work content contributors are doing to sustain the new site.

The party was a call-to-arms for additional work.
Like nearly all institutional sites with a page count in the thousands, there are still areas of the NCA&T site that need new content after launch. The project team used the last few minutes of the luncheon to talk through the work that still needs to be done to finish up certain areas.

I walked away from the luncheon convinced that every college, university, and school deploying a site with multiple content contributors should throw a party after launch.

ND.edu displays optimally on browsers of all sizes, and they also have a custom mobile site. How did Notre Dame deploy such powerful solutions for reaching all audiences, and how did they manage to do it with only internal resources? We sat down and spoke with Erik Runyon, Manager of Interactive Development at Notre Dame to find out.

Why should people care about responsive design and mobile sites?
It all comes down to developing content for visitors and delivering a good experience for them. More and more people are accessing the web on different kinds of devices, and we need to deliver content that’s formatted for all devices. In a recent survey by Noel-Levitz, they noted over half of all college-bound students will access institutional sites on mobile browsers while investigating which College or University to attend. This is an example of how we need to be prepared to deliver content in a way that’s optimal for different viewing environments.

What inspired you to take this approach for ND.edu?
At Notre Dame, we have a long history of trying to make things accessible. Mobile and responsive sites are a part of that tradition—it’s a way of making web content more accessible to more people.

In March of 2011 I started getting into adaptive design. It began with the Notre Dame magazine site. Because a a magazine site is primarily for delivering content, we wanted to make a solution that would work for the desktop or for tablets in both landscape and portrait, and so we retrofitted the site to use an adaptive layout (not fluid, but layout changes at specified breakpoints).

A couple of months later, in May of 2011, we started making ND.edu adaptive. We set up break points and conditional style sheets so the site would render well if someone accessed the site from a mobile phone or tablet. This wasn’t a fully responsive design though. It had “hard” breakpoints as you collapsed the browser and did not have fluid containers.

On June 7th, 2011—a Friday—I bought Ethan Marcotte’s book on responsive design. I read it over the weekend and I saw the logic of taking a responsive approach rather than an adaptive approach. Responsive is more scalable because we really don’t know how resolution is going to work on future devices. It follows the logic of some fixed breakpoints for devices, but also uses fluid widths. So basically, you render down to the browser size, rather than just the device. I got started on the reworking our stylesheet and html to be fully responsive. To make the switch from adaptive to responsive (stylesheet, html, media queries) took me about 3 days.

Who did the visual design on the current version of ND.edu?
The talented Tim “Oak” O’Connor. It is worth mentioning that in April of 2012 we will be transitioning to a new design by another great designer, Philip Zastrow.

Are the reasons mobile and responsive design are particularly important for colleges and universities?
To me, the need is the same: to deliver content to different audiences on different devices. I can imagine that in .edu we have smaller budgets than many corporations, so we need to stay focused.

How did you deploy a custom mobile site?
I started on the current version of the Notre Dame mobile site in late 2009. I heard that two other people from the Academic Technologies group at ND.edu—Paul Turner & Xiaojing Duan—were working on something similar. Xiaojing got in touch with me and we combined our efforts in Github. We began with the MIT Mobile OSP code base and hacked it to add additional features. We worked with a great internal designer named Jim Gosz on the interface, and launched the mobile site about 4 months after we began.

We continue to add content to our mobile site. It originally launched with very few categories. I think that’s important for institutions to consider about mobile sites: get something out the door, then continue to refine it over time. There’s no reason a mobile site needs to be totally robust when it launches.

Is m.ND.edu integrated in your content management system?
Our mobile site is now managed as standalone code base on Github. It does pull some content from our CMS, Conductor. Conductor is a custom Ruby on Rails CMS that we’ve built internally here at Notre Dame.

What should designers and developers think about as they tackle a responsive design?
First and foremost, information architecture needs to be addressed. That should be the first step of any site, not just a responsive design. After that, the order of the content should be considered. If designers begin with a 960 or so pixel view, they need to consider how things will move around as the browser collapses. I don’t think it’s necessary to design a Photoshop document for each instance, but conversations need to happen about how things will work at critical sizes.

Download size is another thing to consider. Unfortunately, as broadband has gotten larger, developers and designers have pushed the idea of keeping page weight down out of the window. Now that we’re moving into responsive design and trying to deploy code and content to mobile devices with less bandwidth, the web community needs to pay more attention to the total size of their pages and sites and how much we’re throwing at visitors. We need to concentrate on keeping things light.

More testing time is required for responsive design. For testing you should set your break points and then figure out the fluid elements. As I worked on the current version of ND.edu, I just began scaling down and seeing where the layout broke, and then applied styles to clean it up.

How are you handling responsive design as you get more requests for work from faculty and staff at Notre Dame?
We’re now doing responsive design for every new site request we get. It’s an approach that will really cover the needs of most departments and administrative units. I have 3 developers reporting to me, and we’ve developed built-in standards for how we’re laying out code. Following a consistent system makes it easier for us to work together and build responsive sites quickly.

Part of deploying responsive design across campus is educating people that this is part of how we work and deploy sites now. Last month, I presented to the Campus Communicators Network at Notre Dame about the importance of responsive design. Campus Communicators is a large group of people who maintain content and sites for different department and academic sites at Notre Dame, and once a month we do a brown bag lunch to talk about important issues.

How has traffic to ND.edu from mobile and tablets increased over the past couple of years?

Here’s a snapshot of monthly mobile visits to our homepage from two years ago vs. now:

ND.edu January 2010:
1% traffic from mobile (14,943 mobile visitors)

ND.edu January 2012:
5% traffic for mobile (58,282 mobile visitors)

That’s roughly a 500% increase in mobile traffic over about two years. If you look at overall traffic on all of the sites we manage in our CMS (Conductor), the traffic from mobile devices is currently around 8%.

The previous numbers are traffic to ND.edu pages. If you’re looking for traffic specifically to our custom mobile site (m.ND.edu)—from Jan 2010 to Jan 2012 we’ve seen a 900% increase in the amount of traffic it receives. It also gets huge spikes on game days—almost 700% increases in traffic.

Are people accessing different content on the mobile site than they are the desktop / tablet version of the site? In other words, what kind of different content do visitors look at on a smartphone vs. a desktop machine or tablet?

Here’s a breakdown of what people are looking at on desktop machines vs. mobile devices, and a separate category for m.ND.edu traffic.

Visits to ND.edu from desktop browsers from January 2011 to January 2012:
sights and sounds (webcams, pictures, etc): 5%
admissions: 3%
current students: 3%
academics: 2.3%
about: 2.2%

Visitors to ND.edu from from mobile devices from January 2011 to January 2012:
admission: 7%
sights and sounds: 5.6%
about: 5.5%
academics: 4.6%
current students: 3.2%

Visitors to m.ND.edu (our custom mobile site) from January 2011 to January 2012:
athletics 16%
map 12%
news and events (combined) 6.6%
food (for students to see what’s being served today): 6%
academics: 5%
webcams (basically we think of this as sights and sounds for mobile): 4%
people: 4%

Are there things about tackling mobile and responsive specifically for .edu that differ from the way other industries tackle mobile/responsive?
The thing we haven’t had to deal with yet is ad sizes. Dealing with responsive when you have fixed ad sizes is a trending topic in responsive design outside of higher education.

If you had to do it over again, what would you do differently? This question applies to mobile and responsive project.
If we had to do m.ND.edu we might build our own code base for it. We’d probably build a Rails option instead of using the MIT OSP code base since it would fit the family of our Conductor code better.

For responsive… based on the history of how we deployed everything, we couldn’t really apply Luke Wroblewski’s mobile first approach. I agree with his philosophy though. We’re in the process of redoing ND.edu though. For that, we are applying a mobile first approach methodology.

What do you recommend for people who want to learn more about these topics?
Responsive Web Design by Ethan Marcotte
MediaQueries (just to see what others are doing and what’s possible)
Weedy Garden (my own blog)
Dave Olsen’s Blog

Who should people interested in this topic follow on Twitter?
@bdconf — great conference, but also great responsive links
@lukew — Luke Wroblewski on Twitter
@beep — Ethan Marcotte on Twitter
@dmolsen — Dave Olsen on Twitter

Someday you will find me caught beneath the landslide in a champagne supernova in the sky.

But until then, you’ll find me and the other members of the mStoner team on our newest site: EDUniverse.

About a year ago, we started a project that had a very specific goal in mind: create the best knowledge hub for brand, web, tech, and marketing professionals in higher and secondary education. Today, we brought the site live.

Probably the coolest feature of the site is how easy it is to import RSS feeds from other places you’re posting content, including blogs and Slideshare.

Thanks to our superstar alpha contributors and beta invitees, we’ve got a wealth of content already, and ~200 profiles on the site! We hope you’ll join us in the nebula.

Congratulations to the entire mStoner team.

Noel-Levitz just released a must-read report, The Mobile Browsing Behaviors and Expectations of College-bound High School Students. The report surveyed nearly 2,300 college-bound high-school students about how they use mobile devices to connect with colleges and universities. It contains eye-opening statistics such as 52% of college-bound high school students have viewed a school’s website on a mobile device.

Interested yet? I hope so. I hope you’re downloading the report now so you have a better idea of what to say to your institution’s admissions counselors when they come to kick down your door and ask you why you’re not providing critical admissions content on your mobile site. The report also shows content rated as most valuable by prospective students, including six types of critical admissions content: academic program listings, cost/scholarship calculators, a calendar of important dates and deadlines, specific details about academic programs, an application process summary, and online application forms.

If you’ve read Seth Odell’s damning commentary that higher education has missed the mark with mobile, or if you want to see for yourself by perusing Dave M. Olsen’s Higher Education Mobile Directory, you’re going to reach a conclusion: most .edu mobile sites don’t provide all six kinds of critical admissions content.

What should you do next?

If your mobile site isn’t totally optimal yet, don’t panic! The top level findings of the Noel-Levitz research are alarming, but there’s another key statistic embedded in the report: only 2% of students indicated a mobile experience influenced their opinion of an institution for the worse. 50% indicated no change in opinion from visiting a mobile site, and 48% said it changed their opinion for the better. The bottom line here is that a great mobile experience will likely help your position, but a bad one would unlikely be a deal breaker for many prospective students.

Be proactive about bringing this research to admissions and other key stakeholders at your institution. The report provides fairly compelling statistics about why a mobile site (or responsive site designed to display on a mobile device) should be a top priority for Colleges and Universities. Sharing this information with admissions or with key stakeholders puts you in a position to help solve the problem.

If you don’t have a mobile site or a responsive design yet, get started ASAP. In the face of this new research and other research you may not need to panic, but you can no longer afford to ignore that prospective students can and will visit your site on mobile devices in increasing numbers.

If you do have a mobile or responsive site, make sure you’re providing the most valued content. Again, those six kinds of critical admissions content are are: academic program listings, cost/scholarship calculators, a calendar of important dates and deadlines, specific details about academic programs, an application process summary, and online application forms. If an online application form is out of range based on the complexity level of your admission process, consider a mobile-friendly request for information form.

Don’t forget other low-hanging admissions fruit in the mobile environment. Your institution likely has a couple of key differentiators that can easily be surfaced within a mobile or responsive framework. Prospective students who visit your campus are also more likely to apply, so making sure they can access maps or directions may help get them to visit. Lastly, facts or rankings about an institution can sway a decision to attend or decline, so consider providing prospectives with an easy way to get to this information.

Give prospective students a reason to come back to your site on a device. 47% of students indicated they would return to a schools mobile site after having visited once, and another 47% indicated they might return. This means if you provide the right level of utility and investigative content, you are more likely to encourage repeat visits from prospective students. More engagement means more interest, and more likelihood that a prospective will take action to visit, request more information, or apply.

Link to your Facebook and Twitter pages. These two pieces of content were ranked as “somewhat valuable” by college-bound high school students. Unless your social media feeds are designed for alumni as the primary audience, there is no good argument for leaving links to these two platforms out of your mobile site.