59
EDUWEB 2012 One Site To Rule Them All Mobile and traditional sites can come together

One site to rule them all

Embed Size (px)

DESCRIPTION

eduWeb 2012 Responsive Design/Content Strategy presentation

Citation preview

Page 1: One site to rule them all

EDUWEB 2012

One Site To Rule Them All

Mobile and traditional sites can come together

Page 2: One site to rule them all

EDUWEB 2012

Responsive Design…Again?

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

Page 3: One site to rule them all

EDUWEB 2012

Beyond Responsive Design

Content, Behaviors, Design…

Oh My!

Page 4: One site to rule them all

EDUWEB2012

Introductions

Nathan Gerber@nathangerber

[email protected]

• Web IA, CMS consulting, Web IA experience

• Director, Web Development Services – 13 years

• Noel-Levitz Associate Consultant, Web Strategy Services team

Page 5: One site to rule them all

EDUWEB2012

We Will Be Discussing…

Mobile landscape

Implementation options

Content strategies

“Web apps”

Lessons learned – takeaways

12345

Page 6: One site to rule them all

EDUWEB2012

Can you find my son in this picture?

You Are Here

Page 7: One site to rule them all

EDUWEB2012

Page 8: One site to rule them all

EDUWEB2012

Anyone Else Feel Behind?

Page 9: One site to rule them all

EDUWEB2012

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

1

Page 10: One site to rule them all

EDUWEB2012

The Shifts/Trends…

Page 11: One site to rule them all
Page 12: One site to rule them all

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)

Page 13: One site to rule them all

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

Page 14: One site to rule them all

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

Page 15: One site to rule them all

EDUWEB2012

Mobile Email

Page 16: One site to rule them all

EDUWEB2012

IMPLEMENTATION OPTIONS(things to consider…)

2

Page 17: One site to rule them all

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

Page 18: One site to rule them all

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

Page 19: One site to rule them all

EDUWEB2012

Which “mobile” ?

…or maybe a combination of all three?

Native Apps

Mobile web

Adaptive Design

Page 20: One site to rule them all

EDUWEB2012

How To Decide…

• Time

• Cost

• Scalability

• Maintenance

• Your current resources

Page 21: One site to rule them all

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.

Page 22: One site to rule them all

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

Page 23: One site to rule them all

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

Page 24: One site to rule them all

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

Page 25: One site to rule them all

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

Page 26: One site to rule them all

EDUWEB2012

How Many Devices?

UVU Site

292 unique devices

in last 30 days

Page 27: One site to rule them all

EDUWEB2012

How Many Resolutions?

UVU Site

2739 resolutions

in last 30 days

Page 28: One site to rule them all

EDUWEB2012

Notre Dame

Page 29: One site to rule them all

EDUWEB2012

Regent College

Page 30: One site to rule them all

EDUWEB2012

UCSD

Brett PollakEmily Deere

Page 31: One site to rule them all

EDUWEB2012

Page 32: One site to rule them all

EDUWEB2012

Page 33: One site to rule them all

EDUWEB2012

CONTENT STRATEGIES(more important than ever…)

3

Page 34: One site to rule them all

EDUWEB2012

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

Page 35: One site to rule them all

EDUWEB2012

Give ‘em What They Want

Page 36: One site to rule them all

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

Page 37: One site to rule them all

EDUWEB2012

University Website

Source: http://xkcd.com

Mobile WebANY Web

Page 38: One site to rule them all

EDUWEB2012

Page 39: One site to rule them all

EDUWEB2012

Page 40: One site to rule them all

EDUWEB2012

What Can We Eliminate?

• “Must not lose anything”

• “It is all vitally important”

• “We should have everything linked off the homepage”

Page 41: One site to rule them all

EDUWEB2012

Best Admin Testing Tool…

Page 42: One site to rule them all

EDUWEB2012

Content Choreography- Trent Walton -

Page 43: One site to rule them all

EDUWEB2012

Content Choreography

stacking vs. interdigitating

- Trent Walton -

Page 44: One site to rule them all

EDUWEB2012

Content Choreography

Page 45: One site to rule them all

EDUWEB2012

Shift Your Thinking

Page 46: One site to rule them all

EDUWEB2012

Mobile First

…forces content strategy

Page 47: One site to rule them all

EDUWEB2012

UVU Current Web Organization

Decentralized Content Experts

Decentralized Content Experts

Decentralized Content Experts

Decentralized Content Experts

Centralized ITStandard CMS

Templates

Page 48: One site to rule them all

EDUWEB2012

Two BIG Questions to Answer

• Can your content folks get “content choreography”?

• Do your current tools allow them to?

Page 49: One site to rule them all

EDUWEB2012

Choreography and Design

• Developers create, content experts can use

• Content elements become focus, not page

• Paradigm shift for developers and content experts

Page 50: One site to rule them all

EDUWEB2012

WEB APPS(feel the power…)

4

Page 51: One site to rule them all

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?)

Page 52: One site to rule them all

EDUWEB2012

Page 53: One site to rule them all

EDUWEB2012

Content, Behaviors, & Design

Page 54: One site to rule them all

EDUWEB2012

LESSONS LEARNED(important takeaways…)

5

Page 55: One site to rule them all

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

Page 56: One site to rule them all

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

Page 57: One site to rule them all

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

Page 58: One site to rule them all

EDUWEB 2012

Questions?

Nathan Gerber

[email protected]

@nathangerber

http://www.slideshare.net/nathangerber

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

Please see me after the session

Page 59: One site to rule them all

EDUWEB 2012

THANK YOU