eduWeb 2012 Responsive Design/Content Strategy presentation

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

2. Responsive Design…Again?
Just give me more stuff to do and
push me off the edge
EDUWEB 2012

3. Beyond Responsive Design
Content, Behaviors, Design…
Oh My!
EDUWEB 2012

4. 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

5. We Will Be Discussing…
1 Mobile landscape
2 Implementation options
3 Content strategies
4 “Web apps”
Lessons learned – takeaways
5
EDUWEB2012

6. Can you find my son in this picture?
EDUWEB2012

7. EDUWEB2012

8. Anyone Else Feel Behind?
EDUWEB2012

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

10. The Shifts/Trends…
EDUWEB2012

12. We are watching the trends on our campus
At Allocated 4,000 IPs for connections on
wireless
UVU… First two days of semester…
Over
31,000
devices attempted connection
(34,000+ students)
EDUWEB2012

13. 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
EDUWEB2012

14. 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 privates
39% of 4-yr publics
7% of 2-yr schools

15. Mobile Email
EDUWEB2012

16. IMPLEMENTATION OPTIONS
(things to consider…)
2
EDUWEB2012

17. 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

18. 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

19. Which “mobile” ?
Native Mobile Adaptive
Apps web Design
…or maybe a combination of all three?
EDUWEB2012

20. How To Decide…
• Time
• Cost
• Scalability
• Maintenance
• Your current resources
EDUWEB2012

21. Native Apps
Advantages Disadvantages
• Control user experience • Develop for each platform
• Use hardware features • Differing experience by device
• Off-line usage • Cost/time to develop/deploy
• Uses app code on device • 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

22. Dedicated Mobile Web
Advantages Disadvantages
• Cost less than native apps • No offline mode
• Quick upgrades/updates • Updating multiple sites
• Available on all web devices • Content is typically limited
• More discoverable • 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

23. Responsive Design
Advantages Disadvantages
• Most cost effective • Page bloat can become an issue
• One site • Third party systems adopting
• Content experts update once adaptive/responsive design
• Optimized for different mobile
devices
• Adaptable for future shifts
• Best long term ROI
• Single URL, better for SEO
EDUWEB2012

24. Responsive Design
Advantages Disadvantages
• Content strategies become • Content strategies become
forethought forethought
• Multiple experiences become • Multiple experiences become part of
part of the plan the plan
• Mobile first forces content • Mobile first forces content
prioritization prioritization
Your content experts will be learning principles in
content strategies and user experience
EDUWEB2012

25. 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

26. How Many Devices?
UVU Site
292 unique devices
in last 30 days
EDUWEB2012

27. How Many Resolutions?
UVU Site
2739 resolutions
in last 30 days
EDUWEB2012

28. Notre Dame
EDUWEB2012

29. Regent College
EDUWEB2012

30. UCSD
Brett Pollak
Emily Deere
EDUWEB2012

31. EDUWEB2012

32. EDUWEB2012

33. CONTENT STRATEGIES
(more important than ever…)
3
EDUWEB2012

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

35. Give „em What They Want
EDUWEB2012

36. 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
EDUWEB2012

37. University Website
ANY Web
Mobile Web
Source: http://xkcd.com
EDUWEB2012

38. EDUWEB2012

39. EDUWEB2012

40. What Can We Eliminate?
• “Must not lose anything”
• “It is all vitally important”
• “We should have everything linked off the
homepage”
EDUWEB2012

41. Best Admin Testing Tool…
EDUWEB2012

42. Content Walton -
- Trent
Choreography
EDUWEB2012

43. Content Choreography
stacking vs. interdigitating
EDUWEB2012 - Trent Walton -

44. Content Choreography
EDUWEB2012

45. Shift Your Thinking
EDUWEB2012

46. Mobile First
…forces content strategy
EDUWEB2012

47. UVU Current Web Organization
Decentralized Decentralized Decentralized Decentralized
Content Experts Content Experts Content Experts Content Experts
Standard CMS
Centralized IT
Templates
EDUWEB2012

48. Two BIG Questions to Answer
• Can your content folks get “content
choreography”?
• Do your current tools allow them to?
EDUWEB2012

49. Choreography and Design
• Developers create, content
experts can use
• Content elements become
focus, not page
• Paradigm shift for
developers and content
experts
EDUWEB2012

50. WEB APPS
(feel the power…)
4
EDUWEB2012

51. 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

52. EDUWEB2012

53. Content, Behaviors, & Design
EDUWEB2012

54. LESSONS LEARNED
(important takeaways…)
5
EDUWEB2012

55. 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

56. 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 CMS
Can it utilize a responsive design?
• Get help, if needed
EDUWEB2012

57. 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
EDUWEB2012

58. 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

59. THANK YOU
EDUWEB 2012