Designing for Small Screens   It’s not just about the technology.          UCDA Design Summit 2013
Susan T. Evans Senior Strategist    mStoner
We’re all figuring this out as we go along.
Up next, Chris Butler!
Why small screens?Mobile “on the go” is a myth.   68% of smart phone use happens at home.
“Everything you knowis not quite right anymore.”                   @thedougco  http://www.slideshare.net/thedougco/rethink...
It’s just more of the same. strategy + design + content + technology
What’s Included:  The mobile context.Relaunching Webster.edu It’s all going to be okay.
69% of all internet users did so  through a mobile device.  Accenture Mobile Web Watch Internet Usage Survey 2012
Half of all adult Americans own a        tablet or a smartphone.  One-third use mobile to view newsstories and video at le...
In part, we can blame #social. 55% of Facebook’s traffic comes from a mobile device.              Mobile + Social = Social...
We live in a world where...
Everyone over 50 on an airplane has one.
The mobile device is like a new lover.                mstnr.me/nhLt3X
We are a nation of multi-screeners.   TV - Computer - Smartphone - Tablet
•   Context                    •   Sequential                    •   Simultaneous                    •   TV+              ...
http://mstnr.me/XLgHS5
RWDResponsive Web Design
RWD Responsive websites scale and reformatcontent appropriately to the device screen.Ethan Marcotte coined the term RWD in...
Bringing it home to higher ed.
Yes, it’s a bit of a crisis.           Why?
myPortal        .eduyourAlumniCommunity
We aren’t      RebeccaPeabody Conservatory    Class of 2013
Your visitors don’t knowabout RWD. They just know if they can read and use your    site on their phones.
We aren’t
52% of prospective studentshave viewed a college website  using their smartphones.       http://mstnr.me/10VnuWc
Yes, it’s a bit of a crisis.Shhh...you’ve got time.
Colleges and universities areseeing about 10% - 15% of their  website traffic coming from        mobile devices.          ...
How many .edu sites are   responsive? 84   Eric Runyon’s HigherEd RWD Directory
I’m pretending I get it.                                 “I have an iPhone                                 but I still hav...
“We have an app.” (I think.)
RWD is not “just skinnier.”
http://gomobile.tamu.edu
Webster University
She said, he said.                  “We recommend RWD as a step toward                      future-proofing your website.”...
When the new webster.edu       launched...   “This is awesome. I didn’t do anything;     but it looks different on my iPad...
Keep a few things in mind...
What does your audience want?          1. Majors          2. Costs and financial aid          3. Admissions content       ...
Will this QR code send me tocontent optimized for mobile?
“Below the fold.”Three words that make me cringe    are disappearing. I hope.
Yes, they do!
RWD is a no brainer.If you are about to relaunch your website.
What do I do while waiting?
Content and strategy  still come first.
Don’t waste a good crisis.
Will mobile help higher edget in line with the good?
The big asteroid...is not mobile marketing.
Enterprise Systems   Classes                              Payments  Grades                                   BillsBlackboa...
Read on.•   Responsive Web Design by Ethan Marcotte•   Mobile First by Luke Wroblewski•   Smashing Magazine’s Mobile Book•...
Thank you!     @susantevansSusan T. EvansSenior Strategistsusan.evans@mStoner.com757.903.1120
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Designing for Smaller Screens: It's not just about the technology.
Upcoming SlideShare
Loading in …5
×

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

1,192 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,192
On SlideShare
0
From Embeds
0
Number of Embeds
83
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

×