Responsive Web Design in the MultiScreen World.

Robin Cook P '16 Director of Electronic Communications Pomfret School rcook@pomfretschool.org

Travis Warren President WhippleHill, Inc. travisw@whipplehill.com

How did we get here?

How did we get here?

- MultiScreen World.

- Responsive Web Design (aka. RWD)

- Impact on Private Schools.

1940 1965 1985 2005

The Major Trends in Computing

Mark Weiser !Mainframes (many:one) Personal Computers (one:one) Ubiquitous Computing (one:many)

1988

What are we seeing?

13% 11%76%

source: AUG 2013 total page requests served from WhippleHill servers.

http://www.nd.edu

Of course, but how?

Too many choices ...

Responsive Web Design

- Phrase coined in 2010. Emerged in 2012.

- A cost-effective alternative to mobile apps.

- Utilizing HTML and CSS3.

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.

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

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

What is Pomfret seeing?

13% 4%83%source: Pomfret Google Analytics September 2013

The Trend 2012 v 2013

+97% +110%-4.09%source: Pomfret Google Analytics September 2012 & 2013

2013 Latest Data Parents, Students, & Faculty

Spring 2012 Pomfret Parent’s Preferred Means of Communications

1%15%

84%

1%

38%

61%

4%

20%

76%

Invitations Personal Letters Annual Fund

Email Postal Neithersource: Spring 2012 Parent Survey

Spring 2012 Pomfret Parent’s and Social Media

68%

20%

5%8%

90%

8%1%1%

78%

19%3%1%

Facebook Twitter Vimeo

Daily Weekly Ocassionaly

source: Spring 2012 Parent Survey

Never

Student Input for Website Design

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.

- Email Newsletters - Email Letters - Email Invites - Website - Digital Signage - Importance of Reuse & Multipurpose content.

The Pomfret Strategy

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)

eNews Evolution - Now

Email Invitations

Email Invitations

Mobile App to Responsive Design

Digital Signage On Campus & Web

Athletic Hall of Fame Kiosk

http://preview.risevision.com/Viewer.html?type=presentation&id=abcace04-f348-4cc2-9fe0-f896c6159bda

pulls in athletic schedule & campus news from WhippleHill site

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)

Pomfret E-Communication Specs

http://thenewdesignguidelines.derekevanharms.com/#

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)

</presentation>

http://www.responsinator.com

http://snippets.hubspot.com/hubspot-device-lab

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

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

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

http://www.mstoner.com/blog/mobile-and-responsive-design/four-ways-make-site-friendlier-smartphones-tablets/?

utm_source=Intelligence&utm_medium=email&utm_term=September&utm_campaign=Sept+Intelligence

Extra Slides Follow.. to be deleted

http://uxmag.com/articles/create-a-better-responsive-user-experience#.UZPccuxSawI.twitter

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

+Mashable+(Mashable)

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

show_loggedout

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

Potential Sources

• Google Multiscreen Report

• 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/

• DistilledLive Catch Up: Responsive Web Designhttp://www.distilled.net/blog/seo/responsive-web-design-distilledlive/

Native Apps v. Mobile Web

Native App Moblie Web

device dependent

scheniderb reference?

What is RWD ?