This document discusses designing websites for small screens like smartphones. It notes that most smartphone use occurs at home, not on the go. It introduces responsive web design (RWD) which allows websites to automatically reformat content for different screen sizes. RWD is becoming more important as over half of adults own smartphones or tablets. The document provides examples of colleges implementing RWD successfully and notes that only around 15% of college websites are fully responsive currently. It encourages adopting RWD to future-proof websites and improve the mobile experience for prospective students.

1. Designing for Small Screens
It’s not just about the technology.
UCDA Design Summit 2013

2. Susan T. Evans
Senior Strategist
mStoner

6. We’re all figuring this out as we go along.

7. Up next, Chris Butler!

8. Why small screens?
Mobile “on the go” is a myth.
68% of smart phone use happens at home.

9. “Everything you know
is not quite right anymore.”
@thedougco
http://www.slideshare.net/thedougco/rethink-everything

10. It’s just more of the same.
strategy + design + content + technology

11. What’s Included:
The mobile context.
Relaunching Webster.edu
It’s all going to be okay.

12. 69% of all internet users did so
through a mobile device.
Accenture Mobile Web Watch Internet Usage Survey 2012

13. Half of all adult Americans own a
tablet or a smartphone.
One-third use mobile to view news
stories and video at least once a week.
Pew Research Center's Project for Excellence in Journalism

14. In part, we can blame #social.
55% of Facebook’s traffic comes from a mobile device.
Mobile + Social = Social + Mobile

15. We live in a world where...

16. Everyone over 50 on an airplane has one.

17. The mobile device is like a new lover.
mstnr.me/nhLt3X

18. We are a nation of multi-screeners.
TV - Computer - Smartphone - Tablet

19. • Context
• Sequential
• Simultaneous
• TV+
personal
go-to device
partly disconnect business/work
from work
Google: The New Multi-Screen World Study

20. http://mstnr.me/XLgHS5

22. RWD
Responsive Web Design

23. RWD
Responsive websites scale and reformat
content appropriately to the device screen.
Ethan Marcotte coined the term RWD in a 2010 article on A List Apart.

24. Bringing it home to higher ed.

25. Yes, it’s a bit of a crisis.
Why?

26. myPortal
.edu
yourAlumniCommunity

27. We aren’t
Rebecca
Peabody Conservatory
Class of 2013

28. Your visitors don’t know
about RWD. They just know if
they can read and use your
site on their phones.

29. We aren’t

30. 52% of prospective students
have viewed a college website
using their smartphones.
http://mstnr.me/10VnuWc

31. Yes, it’s a bit of a crisis.
Shhh...you’ve got time.

32. Colleges and universities are
seeing about 10% - 15% of their
website traffic coming from
mobile devices.
Source: Anecdotal from our clients.

33. How many .edu sites are
responsive? 84
Eric Runyon’s HigherEd RWD Directory

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

35. “We have an app.” (I think.)

36. RWD is not “just skinnier.”

37. http://gomobile.tamu.edu

38. Webster University

42. 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 maintain
Patrick Powers a separate mobile site sold me.”

45. 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 that
looks good on a phone, it’s a beautiful thing.”
- Patrick Powers

46. Keep a few things in mind...

47. What does your audience want?
1. Majors
2. Costs and financial aid
3. Admissions content
http://mstnr.me/10VnuWc

48. Will this QR code send me to
content optimized for mobile?

49. “Below the fold.”
Three words that make me cringe
are disappearing. I hope.

50. Yes, they do!

51. RWD is a no brainer.
If you are about to relaunch your website.

52. What do I do while waiting?

53. Content and strategy
still come first.

54. Don’t waste a good crisis.

55. Will mobile help higher ed
get in line with the good?

59. The big asteroid...
is not mobile marketing.

60. Enterprise Systems
Classes Payments
Grades Bills
Blackboard Banner
Bus Schedules
Menus
Events
http://mstnr.me/15aYFWK

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

62. Thank you!
@susantevans
Susan T. Evans
Senior Strategist
susan.evans@mStoner.com
757.903.1120