One site to rule them all

501 views

Published on

eduWeb 2012 Responsive Design/Content Strategy presentation

Published in: Technology, Business
1 Comment
0 Likes
Statistics
Notes
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/i7K0s4
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
501
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
1
Likes
0
Embeds 0
No embeds

No notes for slide
  • Image from Mary
  • E-Expectations logo
  • Images???
  • Images???
  • Images???
  • One site to rule them all

    1. 1. One Site To Rule Them All Mobile and traditional sites can come togetherEDUWEB 2012
    2. 2. Responsive Design…Again? Just give me more stuff to do and push me off the edgeEDUWEB 2012
    3. 3. Beyond Responsive Design Content, Behaviors, Design… Oh My!EDUWEB 2012
    4. 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 teamEDUWEB2012
    5. 5. We Will Be Discussing… 1 Mobile landscape 2 Implementation options 3 Content strategies 4 “Web apps” Lessons learned – takeaways 5EDUWEB2012
    6. 6. Can you find my son in this picture?EDUWEB2012
    7. 7. EDUWEB2012
    8. 8. Anyone Else Feel Behind?EDUWEB2012
    9. 9. THE MOBILE LANDSCAPE (more stats and trends? please…we can’t take it anymore) 1EDUWEB2012
    10. 10. The Shifts/Trends…EDUWEB2012
    11. 11. We are watching the trends on our campusAt Allocated 4,000 IPs for connections on wirelessUVU… First two days of semester… Over 31,000 devices attempted connection (34,000+ students)EDUWEB2012
    12. 12. Your Mobile Phone… Not Really A Phone Anymore!! What do you use your “phone” for? • Computer • GPS • Accelerometer • Camera • Video camera • Location services • Voice CallsEDUWEB2012
    13. 13. 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 deviceSite optimized for mobile?35% of 4-yr privates39% of 4-yr publics7% of 2-yr schools
    14. 14. Mobile EmailEDUWEB2012
    15. 15. IMPLEMENTATION OPTIONS (things to consider…) 2EDUWEB2012
    16. 16. 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, 2010EDUWEB2012
    17. 17. 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 UniversityEDUWEB2012
    18. 18. Which “mobile” ? Native Mobile Adaptive Apps web Design …or maybe a combination of all three?EDUWEB2012
    19. 19. How To Decide… • Time • Cost • Scalability • Maintenance • Your current resourcesEDUWEB2012
    20. 20. 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
    21. 21. 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 siteEDUWEB2012
    22. 22. 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 SEOEDUWEB2012
    23. 23. 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 experienceEDUWEB2012
    24. 24. 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 behaviorsEDUWEB2012
    25. 25. How Many Devices? UVU Site 292 unique devices in last 30 daysEDUWEB2012
    26. 26. How Many Resolutions? UVU Site 2739 resolutions in last 30 daysEDUWEB2012
    27. 27. Notre DameEDUWEB2012
    28. 28. Regent CollegeEDUWEB2012
    29. 29. UCSD Brett Pollak Emily DeereEDUWEB2012
    30. 30. EDUWEB2012
    31. 31. EDUWEB2012
    32. 32. CONTENT STRATEGIES (more important than ever…) 3EDUWEB2012
    33. 33. Content = KING (and always will be on the web)EDUWEB2012
    34. 34. Give „em What They WantEDUWEB2012
    35. 35. 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 formsEDUWEB2012
    36. 36. University Website ANY Web Mobile Web Source: http://xkcd.comEDUWEB2012
    37. 37. EDUWEB2012
    38. 38. EDUWEB2012
    39. 39. What Can We Eliminate? • “Must not lose anything” • “It is all vitally important” • “We should have everything linked off the homepage”EDUWEB2012
    40. 40. Best Admin Testing Tool…EDUWEB2012
    41. 41. Content Walton - - Trent ChoreographyEDUWEB2012
    42. 42. Content Choreography stacking vs. interdigitatingEDUWEB2012 - Trent Walton -
    43. 43. Content ChoreographyEDUWEB2012
    44. 44. Shift Your ThinkingEDUWEB2012
    45. 45. Mobile First …forces content strategyEDUWEB2012
    46. 46. UVU Current Web Organization Decentralized Decentralized Decentralized Decentralized Content Experts Content Experts Content Experts Content Experts Standard CMS Centralized IT TemplatesEDUWEB2012
    47. 47. Two BIG Questions to Answer • Can your content folks get “content choreography”? • Do your current tools allow them to?EDUWEB2012
    48. 48. Choreography and Design • Developers create, content experts can use • Content elements become focus, not page • Paradigm shift for developers and content expertsEDUWEB2012
    49. 49. WEB APPS (feel the power…) 4EDUWEB2012
    50. 50. 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
    51. 51. EDUWEB2012
    52. 52. Content, Behaviors, & DesignEDUWEB2012
    53. 53. LESSONS LEARNED (important takeaways…) 5EDUWEB2012
    54. 54. 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 tuneEDUWEB2012
    55. 55. 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 neededEDUWEB2012
    56. 56. 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 changingEDUWEB2012
    57. 57. 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 sessionEDUWEB 2012
    58. 58. THANK YOUEDUWEB 2012

    ×