Six Reasons Why Your Institution’s Mobile Site Needs to Be a Priority in 2012
Making sure your audiences can get to vital information about your institution—wherever they are and whenever they want it—should be a top strategic priority of every college, university, and independent school. One way institutions can support this goal is to make sure they are providing audiences with web sites optimized for mobile viewing and use. If your institution doesn’t have a mobile site, here are some reasons why it should be a critically important priority in 2012. If your college, university, or school already has a mobile site, the sources below should help create a case for adding more content and utility next year.
Traffic to institutional sites from mobile devices is rapidly increasing.
Source: The College of William & Mary
Some institutions, such as the College of William & Mary, have seen as much as a 500% increase in traffic to their mobile sites in the last two years. A growing number of people are finding value on college and university mobile sites.
More smartphones are being sold than desktop computers.
Source: PCMag
It’s old news that smartphones are outpacing the sale of desktop computers (with tablet sales on the rise as well). This means that how and where people access the internet is changing. As the way people access content changes, colleges, universities, and schools need to be prepared to address strategic goals and visitor needs on smartphones.
A vast majority of smartphone users use their smartphones to access the web.
Source: Pew Internet
84% of people who own a smartphone in the US use it to access the web. I included this statistic to add some context to the previous one, since some people might wonder if smartphones are primarily being used for verbal communication and apps.
There is a “mobile-only internet” contingent on the rise.
Source: ondeviceresearch.com
There is a growing population of people who only browse the internet on mobile devices. This seems to be truest in developing countries in Africa and Asia, but many colleges and universities are looking to build a global brand. By implementing a site that looks great on mobile devices you are decreasing the chances you will alienate people who never browse the web on a desktop machine.
Mobile access to the internet will eclipse desktop internet access as soon as 2015.
Source: idc.com
While some of the other statistics in this post hint this is where we are headed, the data here is pretty explicit: we will soon be living in an age where more people are accessing the internet via mobile than on desktop computers. Now is the time to deploy a first-generation mobile solution, start measuring how people are using it, and iterate the site effectively over time.
The innovators are now developing for mobile experiences even before they touch the web site.
Source: daringfireball.net
It’s not to say this should be a primary consideration, but many companies outside of higher ed are now developing for smartphones or iOs first, and then developing for a desktop website experience. The demands of code and site development are starting to follow the conventions of devices sold to access the internet. For a more expansive version of this philosophy, check out the book Mobile First by Luke Wreblonski.
Lastly, I’ll round these facts with something that is not a statistic, but rather a tactical consideration when building a case for a mobile site: cost. It costs a fraction of a full site relaunch to do a mobile site, usually because the information provided is more transactional and self-contained in a mobile environment than it is in a sprawling college or university site. If you’re thinking about how to prioritize web or marketing budgets, consider that mobile is both future-friendly and comparatively affordable.
Posted by Doug Gapinski
Additional Posts (28)
Categories:
Discuss this article (0)
Return of the Pwireframes
Hey, remember my post on paper wireframing? Well, paper wireframing is back. And this time, it’s mobile.
To perform paper wireframing (also known as pwireframing), you print out all of the components you’d need to wireframe a site, cut them out, and lock yourself in a room with the people you need to make a new site with. You figure out which pages you need to create templates for and start arranging those components. If you picked the right people to lock yourself in a room with, you’ll end up with rough-hewn paper templates and ready to be redrawn digitally.
This method (which I first came up thinking about how to apply magazine paste ups to the web) makes the wireframe process collaborative and visual for a web team.
Why the new post? We’ve been lucky enough to partner with UIC to apply this process in a new way. UIC is a large, public university with a reputation for research outcomes, quality academics, and innovation. Their marketing and web team (including Anne Petersen, Kevin Tynan, and Michelle Geddes, pictured above) contacted us to help design and build the new UIC mobile website.
As a group, we are trying to build a mobile site with utility and appeal for prospective students, current students, and alumni. We used mobile site statistics and a comprehensive review of other college and university mobile sites as a starting point and then dove into paper wireframing as a cooperative way to architect the mobile site. We created a paper set of all the mobile components we could think of, brought some blank paper for spontaneous ideas, and set aside some time to work. In a few short hours, we hashed out a majority of the information architecture for the new mobile site as a group.
Paper wireframing helped us make better decisions about what to offer visitors to the mobile site, how links should be ordered, and how a visitor would proceed from one screen to the next. When we were done cutting and pasting, we redrew everything digitally to clean it up. We’re now ready to dive into design and start making decisions about images, graphics, typography and color.
If you work in education and would like to collaborate with others to make your mobile site in the same way, you can download the mobile paper wireframe templates here. After you print these, you will need scissors, tape, and something to write with to turn them into functional wireframes.
Posted by Doug Gapinski
Additional Posts (28)
Categories:
Discuss this article (2)
March 2011 Mobile Webinar Q&A
This post is a forum to field questions from today’s presentation of our mobile webinar, co-hosted by Susan Evans and Tiffany Broadbent of the Office of Creative Services at the College of William and Mary.
Click here to download the presentation (PDF), and feel free to post your questions or comments about the mobile webinar below. Responses will come from members of the mStoner team and members of the William and Mary team.
If you are interested in signing up for the mobile workshop being hosted in Chicago on Friday, March 18, 2010 you can get more information and register here.
Posted by Doug Gapinski
Additional Posts (28)
Categories:
Discuss this article (8)
Five Things You Need to Know about Mobile Sites in Higher Education
2011 is the year of the mobile site. Research is being released to support this idea, you’re hearing about mobile sites at conferences, and mobile sites are what our clients are asking about right now. We’re going to be releasing a mobile portfolio a little later this year but until then, I’d like to share a little of what we’re learning as we delve into mobile site development for a variety of different institutions. Let’s begin with the basics: five things you need to know about mobile sites, whether your institution has one or not.
1. Institutions without mobile sites are missing opportunities to connect with key audiences.
According to a recent survey conducted by Dave M. Olsen, developer of Mobile Web OSP, only around 9% of colleges and universities have mobile sites. Mobile device traffic is rising steadily (growth varies by institutional profile), but higher education institutions have been slow to meet the demand to create lightweight sites that meet the expectations of mobile visitors. An article by Joshua Keller of the Chronicle of Higher Education provides more depth on this topic if you’re interested.
Many institutions are creating mobile sites that provide valuable content to the current community: maps, directories, and schedules for example. But if you have a mobile site that caters specifically to internal audiences (or if you don’t have a mobile site), you’re overlooking the needs of two audiences who control the financial future of your institution: prospective students and alumni.
2. Mobile sites seem to be receiving traffic in addition to regular site traffic.
As an example, the College of William & Mary received almost 20,000 unique visits to their mobile site in a 4 month period between August of 2010 and December of 2010. During this time period, their main site traffic also increased compared to the previous year, suggesting that mobile sites are a second destination, rather than a drain on traffic to the primary site. Acknowledging that a mobile site is its own destination with its own traffic implies that resources need to be devoted to developing and maintaining mobile sites in addition to main sites.
3. If you only have the budget for a mobile site or a mobile application, do a mobile site first.
If you’re trying to create something that can serve general information to current and prospective students, faculty and administration, parents and alumni, you want to lower the bar for access to information. That means making sure a visitor can get to an optimal mobile site first, and then covering specialty applications next (such as College of William and Mary’s “Dress the Griffin” or Ohio State’s Athletics application).
The argument could be made that applications serve a much different need or have viral possibilities that might give them precedence over a mobile site. But consider this survey by Pew Internet: the trend for mobile usage is that visiting sites on a mobile device accounts for almost 40% of mobile users’ activity. Creating a mobile site responds to how people are actually using smart phones.
4. Creating a mobile site has most of the components of a main site relaunch, but almost everything is smaller (and I don’t just mean the design).
Everyone’s interested in mobile, but many people aren’t sure where to start. I hear a lot of this: “I like the idea of a mobile site, but I don’t know anything about it.” To these people I say: you may already know more than you think. The process of getting a mobile site up and running is not so different than launching a regular site: buy-in, Information architecture, wireframes, decisions about publishing, design, and content, social media integration, analytics.
But the devil is in the details. The process is the same, but the resulting tool must be smaller and more focused. The conventions for information and architecture change. The writing and design change. Phones in 2011 need to serve pared-back, streamlined content that is sized for a wireless connection.
5. Best practices for mobile .edu sites are still being determined.
The state of mobile sites in higher education today is similar to where the state of main .edu sites were back in the late 1990s. Some of the best practices and conventions that we take for granted today in design, information architecture or navigation, were still being established at that time.
In 2011, the same is true for mobile sites in higher education. What does this mean to you? It means if you’re thinking about a mobile site, consider that you personally have an opportunity to be an innovator—one of the people who helps determine best practices. We hope to see you on the landscape. If you’re doing innovative things with mobile or know of an institution who is, feel free to share an example in this post or email me a link.
Posted by Doug Gapinski
Additional Posts (28)
Categories:
Discuss this article (1)
Social Media Super Session Q&A
This post is a forum to field questions from today’s CASE District II Super Session, “So You Think You Want a Social Media Strategy,” presented by Ken George from Union College and Doug Gapinski from mStoner.
Click here to download the presentation (PDF), and feel free to post your questions or comments about the session below. Responses will come from members of the mStoner team and from Ken George.
The white paper by Michael Stoner and Slover Linett, referenced frequently in the presentation, is available here (PDF), and we’ll be adding a longer list of references to this post next week.
Posted by Doug Gapinski
Additional Posts (28)
Categories:
Discuss this article (0)
Mobile Webinar Q&A
This post is a forum to field questions from today’s presentation of our mobile webinar, co-hosted by Susan Evans and Tiffany Broadbent of the Office of Creative Services at the College of William and Mary.
Click here to download the presentation (PDF), and feel free to post your questions or comments about the mobile webinar below. Responses will come from members of the mStoner team and members of the William and Mary team.
Posted by Doug Gapinski
Additional Posts (28)
Categories:
Discuss this article (17)
Mashed Up: edUi 2010
In early 2010, my colleague Laurel Hechanova and I noticed that a growing number of the interesting projects we were working on, like the new branding page for Trinity College (part of larger relaunch that is not yet live) and the social media aggregator NMHbook were mashups. We find mashups compelling because they signal a change in how the internet is growing. Mashups represent a new realm of possibility by combining content and functionality from different sites.
We spent the last few months taking a deeper dive into mashups, and the result was a presentation we first gave at eduWEB 2010. Since then, we’ve updated the examples, added a couple of new ones, and tightened this presentation (download a PDF) for edUi 2010. We’ve curated the mashups we think are the best examples around. While NMHbook is an mStoner project, the other examples are simply really nice projects we’ve selected so you can get an idea of everything that’s happening with Mashups.
Education examples:
Savannah College of Art and Design: Connect
Northfield Mount Hermon: NMHbook
University of Maryland, Baltimore County: Be.UMBC
Towson University: Campus map
Non-education examples:
Newsmap
SeeClickFix
WeFeelFine
HandmadeSpark
Interhoods
Paper.li
The second half of this blog post is a mashup of Expression Engine and the Twitter API. When you tweet with the #mashedUi tag it will go into the second half of this post automatically.
Say something insightful or incendiary–just say something, and tag it with #mashedUi. It will becomes a part of this post and the back channel simultaneously. The blog post also gives you a chance to drive traffic to your own Twitter channel. We look forward to seeing what you have to say about mashups.
Posted by Doug Gapinski
Additional Posts (28)
Categories:
Discuss this article (0)
MashED Up: Mashups and Higher Education
Hey, remember the spork? The bizarre utensil combining the properties of a spoon and fork? The spork is an analog mashup: a combination of two existing things into a third thing that has some of the positive attributes of its parents, but also has its own structure, pattern, and level of fragility.
The spork is a great example of a mashup because it’s simple—easy to understand, easy to parse, with a catchy name. Most mashups are more complex, and the internet has given rise to a multitude of digital mashups, combinations of APIs and content designed to leverage assets and code already written.
It’s estimated that in 2007 YouTube’s bandwidth exceeded the bandwidth of the enitre internet in 2000. The ever-growing well of content that the internet represents, in conjunction with huge media repositories like YouTube and open source APIs, isn’t just changing how we think; it’s changing how we build. And how we build is important because the structures we build end up dictating the spaces we occupy physically, mentally and socially … in the analog world, and on the internet.
In the first quarter of this year, my coworker Laurel Hechanova and I noticed that a growing number of the interesting projects we were working on, like the new branding page for Trinity College (part of larger relaunch that is not yet live) or design of a social media aggregator NMHbook were mashups.
So we spent the last few months taking a deeper dive into mashups, and the result was this presentation (download as PDF) for Eduweb 2010. We’ve taken care to curate by the mashups we felt were most compelling in higher education and beyond. While NMHbook is an mStoner project, the other examples are simply really nice projects we’ve selected so you can get an idea of what’s out there.
For easy reference, here are the examples shown in the presentation by category.
Education examples:
Savannah College of Art and Design: Connect
Northfield Mount Hermon: NMHbook
University of Maryland, Baltimore County: Be.UMBC
Towson University: Campus map
Non-education examples:
Newsmap
SeeClickFix
WeFeelFine
HandmadeSpark
We also felt it was only appropriate to create our own mashup based on the live presentation. The second half of this blog post is a combination of Expression Engine and the Twitter API. Stuff you tweet with the #mashed_up tag goes into the second half of this post automatically. You’ve got an opportunity to say something insightful–or incendiary–that becomes a part of this post and the back channel simultaneously. The blog post also gives you a chance to drive traffic to your twitter channel. We look forward to seeing how your comments become a part of the mashup.
Posted by Doug Gapinski
Additional Posts (28)
Categories: Design and usability
Discuss this article (0)
Discuss this article (0)NMHbook: the Award, the Trends, and the Takeaways
Congratulations!
I’m writing this post to publicly congratulate our client, Northfield Mount Hermon, for winning a Circle of Excellence Silver Award in the Best Uses of Social Media in Student Recruitment and Marketing Category from CASE this year for NMHbook. Michael Stoner wrote a longer post on judging criteria you should read if you’re interested in more information on how social media was evaluated by CASE this year.
I’m also writing this post to give a little additional context on this project: what it is, thoughts on trends, and some takeaways to keep in mind if you are considering an aggregation project.
What is NMHbook?
It’s a social media aggregator that collects feeds from multiple social media channels and displays them on a single page. At the time this page was conceived of (around March 2009), to my knowledge, no one in higher education was doing aggregation pages. I remember coming across some of the early aggregation pages (sites such as popurls.com and the previous version of netvibes.com) that collected feeds from news sites and talking to the partners about how we might apply this idea in higher education.
Aggregation was a good fit for NMH because they were already maintaining good social media content on a number of channels including Twitter, Facebook, YouTube, and their own Wordpress blogs. We pitched the NMHbook idea, then designed and developed it with Northfield Mount Hermon. We customized Drupal to collect decentralized social media content being maintained by NMH around the web in a single destination. The goal was to provide people interested in NMH a consolidated dashboard for quickly viewing all of the content with the option to jump off and participate in a single channel if they wanted to.
Some thoughts on aggregation trends
NMHbook was conceived of in early 2009, but in the last year and a half the idea of aggregation pages has become much more common. We partnered with Christopher Newport University to relaunch their site and a new aggregation page. We’ve have a couple of alumni-focused versions of this idea in development for a couple of clients.
Other great examples of this are popping up elsewhere. SCAD launched an absolutely killer aggregation page. Our friendly competitors at White Whale launched an aggregation page for USF.
The list is much longer, but my point is: you don’t have to look very hard to find this idea is a rapidly growing trend on the web and specifically in higher education. But the aggregator is the second part of the trend. The first part is individuals or institutions maintaining decentralized content around the web instead of only on a single institutional site. Maintaining content on multiple sites helps search engine results, allows people to find you on the platform of their choice, and (usually) allows readers to post on or respond to your content. Aggregation (the second part) is what follows: collecting these channels in as a dashboard view so that people have a consolidated source they can check on regularly.
My opinion on why NMHbook is successful:
• They keep a primary audience in mind: prospective students. Other people aren’t excluded in any way, but they keep primary audience in mind with the content.
• The aggregation page doesn’t post every comment made in these channels, only the institutional comments. This strategy corresponds to their comfort level about user contributions. This is one of the keystones of a successful social media project: understanding your own comfort level for sharing user contributions first.
• There’s new content almost every day in most of their channels except YouTube. The information is fresh and relevant, giving audiences incentive to check back regularly.
• There isn’t much overlap between channels unless it’s for events / calls to action. By handling it this way, audiences have an incentive to visit NMH on multiple channels.
• They post content to inspire discussion. The kind of post that inspires multiple responses is a complex topic, but I encourage you to check out their facebook page and see where the action is.
• The design of NMHbook follows conventions of social media: it’s simple and to the point.
Posted by Doug Gapinski
Additional Posts (28)
Categories:
Discuss this article (0)
It’s All Good in the Neighborhood!
Physical presence often gets downplayed because our coworkers, clients, and friends are now reachable through so many channels. To say technology has made connecting easier is to dramatically understate this idea — it’s now taken for granted that there are multiple venues to reach a person. Because we’re so plugged in, it’s easy to forget where we’re physically located becomes a part of who we are and how we work in some way. I’m talking about the office space, but I’m also talking about the neighborhood. The neighborhood is the point of arrival and departure each day, the microcosm containing the feng shui, the people, the flora and fauna, the lunch spots and happy hour bars surrounding our places of work.
For the Chicago office of mStoner, our neighborhood is Ravenswood, a few miles of land stretching north to south along the Metra tracks, about a mile and half west of Wrigley Field. It’s a highly residential area occasionally punctuated by brick office buildings and plenty of cute restaurants and quirky creative businesses (including our own!). This week, mStoner and managing partner Voltaire Miran was interviewed and mentioned in a Chicago Tribune article about Ravenswood. The writer refers to our neighborhood as a place that nurtures intellectual manufacturing. As a creative director, I’ll take that as compliment. For those interested, this article will give you a sense of the spirit of the neighborhood surrounding the mStoner Chicago crew.
If you want to see more of Ravenswood, I also recommend James Hyatt’s Awesome Chicago Video Tour.
It’s a couple of years old at this point (Stubbs was sold!) but the narrative still paints a light-hearted and accurate picture of where we work.
