Upload
nathan-gerber
View
256
Download
2
Tags:
Embed Size (px)
DESCRIPTION
eduWeb 2012 Responsive Design/Content Strategy presentation
Citation preview
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
• 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
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
@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