one site to rule them all

EDUWEB 2012

One Site To Rule Them All

Mobile and traditional sites can come together

EDUWEB 2012

Responsive Design…Again?

Just give me more stuff to do and push me off the edge

EDUWEB 2012

Beyond Responsive Design

Content, Behaviors, Design…

Oh My!

EDUWEB2012

Introductions

Nathan Gerber@nathangerber

Nathan.Gerber@uvu.edu

• Web IA, CMS consulting, Web IA experience

• Director, Web Development Services – 13 years

• Noel-Levitz Associate Consultant, Web Strategy Services team

EDUWEB2012

We Will Be Discussing…

Mobile landscape

Implementation options

Content strategies

“Web apps”

Lessons learned – takeaways

12345

EDUWEB2012

Can you find my son in this picture?

You Are Here

EDUWEB2012

EDUWEB2012

Anyone Else Feel Behind?

EDUWEB2012

THE MOBILE LANDSCAPE (more stats and trends? please…we can’t take it anymore)

1

EDUWEB2012

The Shifts/Trends…

EDUWEB2012

At UVU…

We are watching the trends on our campus

Allocated 4,000 IPs for connections on wireless

First two days of semester…

Over

31,000

devices attempted connection

(34,000+ students)

EDUWEB2012

Your Mobile Phone… Not Really A Phone Anymore!!

What do you use your “phone” for?• Computer• GPS• Accelerometer• Camera• Video camera• Location services• Voice Calls

More than two-thirds (67%) have regular access to a

mobile device• 20% are using tablets• 52% of college-bound

students have looked at a college Web site using a

mobile device

Site optimized for mobile?

35% of 4-yr privates39% of 4-yr publics7% of 2-yr schools

EDUWEB2012

Mobile Email

EDUWEB2012

IMPLEMENTATION OPTIONS(things to consider…)

2

EDUWEB2012

Build A New Mobile Site?

“Mobilize, don’t miniaturize”… anon.- Anonymous

“… the mobile context is so different from the desktop one it deserves direct consideration vs. just mangling down a full-size site.”

- Drew Stevenson, University of Minnesota, 2010

EDUWEB2012

Our Focus

“The user IS mobile, not just holding one.” - Justin Gatewood, Victor Valley Community College

“It is not about making our site work on a mobile device, it is about what our users need when they’re mobile”

- Mobile Web Team, Utah Valley University

EDUWEB2012

Which “mobile” ?

…or maybe a combination of all three?

Native Apps

Mobile web

Adaptive Design

EDUWEB2012

How To Decide…

• Time

• Cost

• Scalability

• Maintenance

• Your current resources

EDUWEB2012

Native Apps

Advantages• Control user experience• Use hardware features• Off-line usage• Uses app code on device

Disadvantages• Develop for each platform • Differing experience by device• Cost/time to develop/deploy • Testing more difficult• Changes require download• Lag in “publishing changes”• App overload

70% of respondents said that they were happy to browse a school’s mobile site through their device browser, rather than

downloading a mobile app specific to that school.

EDUWEB2012

Dedicated Mobile Web

Advantages• Cost less than native apps• Quick upgrades/updates• Available on all web devices• More discoverable

Disadvantages• No offline mode • Updating multiple sites• Content is typically limited • Content separate from “main” site• SEO issues

– Multiple URLs = link popularity issues– Sites compete with one another– Doesn’t have the authority and ranking of

one site

EDUWEB2012

Responsive Design

Advantages• Most cost effective• One site• Content experts update once• Optimized for different mobile

devices• Adaptable for future shifts• Best long term ROI• Single URL, better for SEO

Disadvantages• Page bloat can become an issue• Third party systems adopting

adaptive/responsive design

EDUWEB2012

Responsive Design

Advantages• Content strategies become

forethought • Multiple experiences become

part of the plan• Mobile first forces content

prioritization

Disadvantages• Content strategies become

forethought • Multiple experiences become part of

the plan• Mobile first forces content

prioritization

Your content experts will be learning principles in content strategies and user

experience

EDUWEB2012

Why Responsive Design?

• Sites, pages, elements “adapt” to the viewer’s experience

• One site can serve all devices, optimized for experience (mobile, tablet, desktop, etc.)

• Accomplished through media queries, CSS, and HTML5

• Can really push content strategy and behaviors

EDUWEB2012

How Many Devices?

UVU Site

292 unique devices

in last 30 days

EDUWEB2012

How Many Resolutions?

UVU Site

2739 resolutions

in last 30 days

EDUWEB2012

Notre Dame

EDUWEB2012

Regent College

EDUWEB2012

UCSD

Brett PollakEmily Deere

EDUWEB2012

EDUWEB2012

EDUWEB2012

CONTENT STRATEGIES(more important than ever…)

3

EDUWEB2012

Content = KING(and always will be on the web)

EDUWEB2012

Give ‘em What They Want

EDUWEB2012

Design and IA Considerations

Most valuable content:1. Academic program listing

2. Cost/scholarship calculators

3. Calendar of important dates and deadlines

4. Specific details about academic programs

5. An application process summary

6. Online application forms

The Mobile and Live Conversation Expectations of

College Bound Students

EDUWEB2012

University Website

Source: http://xkcd.com

Mobile WebANY Web

EDUWEB2012

EDUWEB2012

EDUWEB2012

What Can We Eliminate?

• “Must not lose anything”

• “It is all vitally important”

• “We should have everything linked off the homepage”

EDUWEB2012

Best Admin Testing Tool…

EDUWEB2012

Content Choreography- Trent Walton -

EDUWEB2012

Content Choreography

stacking vs. interdigitating

- Trent Walton -

EDUWEB2012

Content Choreography

EDUWEB2012

Shift Your Thinking

EDUWEB2012

Mobile First

…forces content strategy

EDUWEB2012

UVU Current Web Organization

Decentralized Content Experts

Decentralized Content Experts

Decentralized Content Experts

Decentralized Content Experts

Centralized ITStandard CMS

Templates

EDUWEB2012

Two BIG Questions to Answer

• Can your content folks get “content choreography”?

• Do your current tools allow them to?

EDUWEB2012

Choreography and Design

• Developers create, content experts can use

• Content elements become focus, not page

• Paradigm shift for developers and content experts

EDUWEB2012

WEB APPS(feel the power…)

4

EDUWEB2012

UVU Web Apps

• Use jQuery, CSS, HTML5, media queries

• Build in “features” based on device

• Creates more functionality on devices

• Build behaviors that can be reused on elements (microdata anyone?)

EDUWEB2012

EDUWEB2012

Content, Behaviors, & Design

EDUWEB2012

LESSONS LEARNED(important takeaways…)

5

EDUWEB2012

A Possible Approach

Develop in phases – evolving site

• Choose one area of your site• Start with responsive, fluid grid• Identify content “elements” and how to handle them• Add “web app” functionality where appropriate • Teach content strategies to area experts• Continue to fine tune

EDUWEB2012

Key Takeaways

• Start with something small(Possibly email and landing pages, let analytics guide you)

• Content strategy/choreography for first phase

• Gather resources

• Learn about current CMSCan it utilize a responsive design?

• Get help, if needed

EDUWEB2012

Lessons Learned

• Develop in phases – evolving site

• Content strategy must be top concern

• Keep your mobile users in mind

• Use your own mobile site – best testing

• Monitor your analytics

• Realize that everything is still changing

EDUWEB 2012

Questions?

Nathan Gerber

Nathan.Gerber@uvu.edu

@nathangerber

http://www.slideshare.net/nathangerber

Need info on E-Expectations or tools that we use?

Please see me after the session

EDUWEB 2012

THANK YOU