From smartphone to tablet, laptop to desktop, families use multiple screens, splitting their attention from one medium to another - consuming content in different ways. Is your school delivering the right information at the right time on the right device? Robin Cook, Pomfret School, and Peter Baron, WhippleHill, share why a responsive website matters. See how Pomfret developed a multi-screen strategy & learn how your school’s site can thrive in a multi-device world.

1. Responsive Web Design
in the MultiScreen World.
Peter Baron
Chief Evangelist
WhippleHill, Inc.
pbaron@whipplehill.com
Robin Cook P '16
Director of Electronic Communications
Pomfret School
rcook@pomfretschool.org

2. How did we get here?

3. How did we get here?
-
MultiScreen World.
-
Responsive Web Design (aka. RWD)
-
Impact on Private Schools.

4. The Major Trends in Computing
1988
Mark Weiser
Mainframes (many:one)
Personal Computers (one:one)
Ubiquitous Computing (one:many)
1940
1965
1985
2005

5. What are we seeing?
13%
76%
11%
source: AUG 2013 total page requests served from WhippleHill servers.

10. http://www.nd.edu

15. Of course, but how?

17. Too many choices ...

19. Responsive Web Design
-
Phrase coined in 2010 by Ethan Marcotte.
Emerged in 2012.
-
A cost-effective alternative to mobile apps.
-
Utilizing HTML and CSS3.

20. Responsive Web Design
-
Fluid Grid. graceful degrading of layout across
devices and device orientation.
-
Media Queries. A media query allows us to target
not only certain device classes, but to actually
inspect the physical characteristics of the device
rendering our work.

22. Common Break Points
-
320 px — Mobile portrait
480 px — Mobile landscape
600 px — Small tablet
768 px — Tablet portrait
1024 px — Tablet landscape/Netbook
1280 px & greater — Desktop

23. Responsive Web Design
-
Fluid Grid. graceful degrading of layout across
devices and device orientation.
-
Media Queries. A media query allows us to target
not only certain device classes, but to actually
inspect the physical characteristics of the device
rendering our work.

26. How did we get here?
MultiScreen World.
Responsive Web Design (aka. RWD)
- Impact on Private Schools.

28. Robin Cook
Director of Electronic Communications
Pomfret School
Parent Class of 2016
Teaches Web Design Course
Media Team Coach
Critical to get in the trenches and listen.
Repurposing content.

29. What is Pomfret seeing?
13%
83%
4%
source: Pomfret Google Analytics September 2013

30. The Trend 2012 v 2013
+97%
-4.09% +110%
source: Pomfret Google Analytics September 2012 & 2013

31. 2013 Latest Data Parents,
Students, & Faculty

32. Spring 2012 Pomfret Parent’s Preferred Means of Communications
15%
1%
1%
4%
20%
38%
61%
76%
84%
Invitations
Personal Letters
Email
Postal
Annual Fund
Neither
source: Spring 2012 Parent Survey

33. Spring 2012 Pomfret Parent’s and Social Media
8%
5%
3%
1%
1%
1%
8%
20%
19%
90%
68%
78%
Facebook
Twitter
Daily
Weekly
Occasionally
Vimeo
Never
source: Spring 2012 Parent Survey

34. Student Input for Website Design

35. Redesign Request For Proposal March 2012
● Create an innovative, flexible, informative website that is easy to maintain. We must develop a friendly site that can deliver
large amounts of constantly changing information to our key target audiences. In addition to designing a user-friendly site
with an intuitive interface, we must be provided with a web-based, database-driven administration tool that allows key
management personnel to easily update content without directly accessing source code.
● To be effective, our website must be:
○ Visually engaging and informative
○ Quick and easy to load and operate
○ Accessible from desktop and mobile platforms
○ Safe and secure
● Our primary Internet objective is to continue to build brand identity, awareness, and interest in Pomfret School and the
services/value it provides. Our vision is to maximize web-based technologies to:
○ Build brand loyalty and enhance target audience relationships
○ Improve program delivery and service
○ Increase market share
● Create a site that helps to recruit, enroll, and maintain mission compatible students (and their families) and strengthen
relationships with all constituents (prospects, students, parents, alumni, college reps, community partners, current and
prospective faculty/staff).
● Convey the Pomfret School brand through the use of:
○ Innovative graphical user interface and design
○ Compelling visuals
○ Intuitive navigation
○ Consistent and concise messaging of mission and identity
○ Comprehensive information and resources in an easy to use format
● Deliver a scalable and maintainable foundation.

36. The Pomfret Strategy
-
Email Newsletters
Email Letters
Email Invites
Website
Digital Signage
Importance of Reuse & Multipurpose content.

37. eNews Evolution
2010
2011
2012
Parent/student/faculty enews (Sept.):
2010 - 43% open 1066
2011 - 49% open 1105
2012 - 49% open 1141
2013 - 51% open 982 (5th issue of 1 column)

38. eNews Evolution - Now

39. Email Invitations

40. Email Invitations

41. Mobile App to Responsive Design

43. Digital Signage On Campus & Web

44. Athletic Hall of Fame Kiosk
http://preview.risevision.com/Viewer.html?type=presentation&id=abcace04f348-4cc2-9fe0-f896c6159bda
pulls in athletic schedule & campus news from WhippleHill site

45. Pomfret E-Communication Specs
Concept of “Scanable”
Titles of news items 50 characters or less (text notifications)
News items = title (under 50 characters), short descriptions (under 100
characters), article (150 words)
eLetters - 300 - 500 words, use bullet points if appropriate, link to pdfs/
webpage for details
“if it has to be pretty, put it in print”
3 emails (1 is eNews for parents, students, faculty/staff) a week/constituency as
part of the yearly plan (TPS - touch point schedule)

47. http://thenewdesignguidelines.derekevanharms.com/#

59. Other things to consider ...
-
Smaller site maps ... (WH reporting 30% reduction in size)
Photo Selection (portrait v landscape)
Viability of video on smartphone and tablet (surprising)

60. </presentation>

61. http://www.responsinator.com
http://snippets.hubspot.com/hubspot-device-lab

62. http://www.businessinsider.com/15-billion-smartphones-in-the-world-22013-2

63. http://www.marketingprofs.com/charts/2013/11489/mobile-email-benchmarks-andtrends-by-industry

64. http://www.themillennialimpact.com/2013research

65. http://www.mstoner.com/blog/mobile-and-responsive-design/four-ways-make-sitefriendlier-smartphones-tablets/?
utm_source=Intelligence&utm_medium=email&utm_term=September&utm_campai
gn=Sept+Intelligence

68. Extra Slides Follow..
to be deleted

69. http://uxmag.com/articles/create-a-better-responsive-userexperience#.UZPccuxSawI.twitter
Just pasting these links in
here for reference. They need
to be read and broken down
into concepts that we can
turn in to slides. This are
articles or links to things on
RWD I’ve been collecting over
the last year.

70. http://mashable.com/2013/01/03/tablet-friendly-website/?
utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:
+Mashable+(Mashable)

71. http://www.slideshare.net/ProphetsAgency/trends-in-interactive-design-2013?
utm_source=slideshow03&utm_medium=ssemail&utm_campaign=share_slide
show_loggedout

73. http://www.elated.com/articles/responsive-web-design-demystified/

74. USA TODAY article on cellphones and schools
www.usatoday.com/story/tech/personal/
2013/08/07/views-shift-on-cell-phones-inschools/2607381?

75. Potential Sources
•
•
•
Google Multiscreen Report
•
DistilledLive Catch Up: Responsive Web Design
http://www.distilled.net/blog/seo/responsive-web-design-distilledlive/
PEW Mobile Internet Data ?
University Examples found on EDUstyles ?
http://www.weinberg.northwestern.edu/index.html
http://fyp.washington.edu/
https://rising.jhu.edu/
http://seas.yale.edu/

76. Native Apps v. Mobile Web
Native App
device dependent
Moblie Web

77. scheniderb reference?

78. Mobile First
Very key for
admissions

79. What is RWD ?