Designing for Smaller Screens: It's not just about the technology.

1,052 views
983 views

Published on

What's the best thinking about mobile design? What are the technical and non-technical decisions that need to be made and how does design support the mobile experience? Using case studies like the responsive website designed for Webster University, we'll walk through the practical and the introductory about designing for the mobile experience. This presentation was on the program for the UCDA Design Summit in March 2013.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,052
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Designing for Smaller Screens: It's not just about the technology.

  1. 1. Designing for Small Screens It’s not just about the technology. UCDA Design Summit 2013
  2. 2. Susan T. Evans Senior Strategist mStoner
  3. 3. We’re all figuring this out as we go along.
  4. 4. Up next, Chris Butler!
  5. 5. Why small screens?Mobile “on the go” is a myth. 68% of smart phone use happens at home.
  6. 6. “Everything you knowis not quite right anymore.” @thedougco http://www.slideshare.net/thedougco/rethink-everything
  7. 7. It’s just more of the same. strategy + design + content + technology
  8. 8. What’s Included: The mobile context.Relaunching Webster.edu It’s all going to be okay.
  9. 9. 69% of all internet users did so through a mobile device. Accenture Mobile Web Watch Internet Usage Survey 2012
  10. 10. Half of all adult Americans own a tablet or a smartphone. One-third use mobile to view newsstories and video at least once a week. Pew Research Centers Project for Excellence in Journalism
  11. 11. In part, we can blame #social. 55% of Facebook’s traffic comes from a mobile device. Mobile + Social = Social + Mobile
  12. 12. We live in a world where...
  13. 13. Everyone over 50 on an airplane has one.
  14. 14. The mobile device is like a new lover. mstnr.me/nhLt3X
  15. 15. We are a nation of multi-screeners. TV - Computer - Smartphone - Tablet
  16. 16. • Context • Sequential • Simultaneous • TV+ personal go-to devicepartly disconnect business/work from work Google: The New Multi-Screen World Study
  17. 17. http://mstnr.me/XLgHS5
  18. 18. RWDResponsive Web Design
  19. 19. RWD Responsive websites scale and reformatcontent appropriately to the device screen.Ethan Marcotte coined the term RWD in a 2010 article on A List Apart.
  20. 20. Bringing it home to higher ed.
  21. 21. Yes, it’s a bit of a crisis. Why?
  22. 22. myPortal .eduyourAlumniCommunity
  23. 23. We aren’t RebeccaPeabody Conservatory Class of 2013
  24. 24. Your visitors don’t knowabout RWD. They just know if they can read and use your site on their phones.
  25. 25. We aren’t
  26. 26. 52% of prospective studentshave viewed a college website using their smartphones. http://mstnr.me/10VnuWc
  27. 27. Yes, it’s a bit of a crisis.Shhh...you’ve got time.
  28. 28. Colleges and universities areseeing about 10% - 15% of their website traffic coming from mobile devices. Source: Anecdotal from our clients.
  29. 29. How many .edu sites are responsive? 84 Eric Runyon’s HigherEd RWD Directory
  30. 30. I’m pretending I get it. “I have an iPhone but I still have no idea what you’re talking about.” http://gomobile.tamu.edu/index.php
  31. 31. “We have an app.” (I think.)
  32. 32. RWD is not “just skinnier.”
  33. 33. http://gomobile.tamu.edu
  34. 34. Webster University
  35. 35. She said, he said. “We recommend RWD as a step toward future-proofing your website.” “I knew RWD meant I’d only have one site to update and keep fresh. It was going to be enough of a challenge to do that. The idea of not having to maintainPatrick Powers a separate mobile site sold me.”
  36. 36. When the new webster.edu launched... “This is awesome. I didn’t do anything; but it looks different on my iPad.” - a web editor at Webster “When a feature story from the homepage can link to a faculty directory listing thatlooks good on a phone, it’s a beautiful thing.” - Patrick Powers
  37. 37. Keep a few things in mind...
  38. 38. What does your audience want? 1. Majors 2. Costs and financial aid 3. Admissions content http://mstnr.me/10VnuWc
  39. 39. Will this QR code send me tocontent optimized for mobile?
  40. 40. “Below the fold.”Three words that make me cringe are disappearing. I hope.
  41. 41. Yes, they do!
  42. 42. RWD is a no brainer.If you are about to relaunch your website.
  43. 43. What do I do while waiting?
  44. 44. Content and strategy still come first.
  45. 45. Don’t waste a good crisis.
  46. 46. Will mobile help higher edget in line with the good?
  47. 47. The big asteroid...is not mobile marketing.
  48. 48. Enterprise Systems Classes Payments Grades BillsBlackboard Banner Bus Schedules Menus Events http://mstnr.me/15aYFWK
  49. 49. Read on.• Responsive Web Design by Ethan Marcotte• Mobile First by Luke Wroblewski• Smashing Magazine’s Mobile Book• Google: The New Multi-Screen World Study• Chris Butler, Newfangled• Dave Olson, West Virginia University• Eric Runyon, Notre Dame• Doug Gapinski on the mStoner Blog• EDUniverse• Higher Ed Live
  50. 50. Thank you! @susantevansSusan T. EvansSenior Strategistsusan.evans@mStoner.com757.903.1120

×