Responsive Web Design
in the MultiScreen World.

Peter Baron
Chief Evangelist
WhippleHill, Inc.
pbaron@whipplehill.com

Ro...
How did we get here?
How did we get here?
-

MultiScreen World.

-

Responsive Web Design (aka. RWD)

-

Impact on Private Schools.
The Major Trends in Computing

1988
Mark Weiser
Mainframes (many:one)
Personal Computers (one:one)
Ubiquitous Computing (o...
What are we seeing?

13%

76%

11%

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 by Ethan Marcotte.
Emerged in 2012.

-

A cost-effective alternative to mobi...
Responsive Web Design
-

Fluid Grid. graceful degrading of layout across
devices and device orientation.

-

Media Queries...
Common Break Points
-

320 px — Mobile portrait
480 px — Mobile landscape
600 px — Small tablet
768 px — Tablet portrait
1...
Responsive Web Design
-

Fluid Grid. graceful degrading of layout across
devices and device orientation.

-

Media Queries...
How did we get here?
MultiScreen World.
Responsive Web Design (aka. RWD)
- Impact on Private Schools.
Robin Cook
Director of Electronic Communications
Pomfret School
Parent Class of 2016
Teaches Web Design Course
Media Team ...
What is Pomfret seeing?

13%

83%

4%
source: Pomfret Google Analytics September 2013
The Trend 2012 v 2013

+97%

-4.09% +110%
source: Pomfret Google Analytics September 2012 & 2013
2013 Latest Data Parents,
Students, & Faculty
Spring 2012 Pomfret Parent’s Preferred Means of Communications

15%

1%

1%

4%
20%

38%
61%
76%

84%

Invitations

Person...
Spring 2012 Pomfret Parent’s and Social Media

8%

5%

3%
1%

1%
1%
8%

20%

19%

90%

68%

78%

Facebook

Twitter

Daily
...
Student Input for Website Design
Redesign Request For Proposal March 2012
● Create an innovative, flexible, informative website that is easy to maintain. We...
The Pomfret Strategy
-

Email Newsletters
Email Letters
Email Invites
Website
Digital Signage
Importance of Reuse & Multip...
eNews Evolution
2010

2011

2012

Parent/student/faculty enews (Sept.):
2010 - 43% open 1066
2011 - 49% open 1105
2012 - 4...
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=abcace04f348-4cc2-9fe0-f896c615...
Pomfret E-Communication Specs
Concept of “Scanable”
Titles of news items 50 characters or less (text notifications)
News it...
http://thenewdesignguidelines.derekevanharms.com/#
Other things to consider ...
-

Smaller site maps ... (WH reporting 30% reduction in size)
Photo Selection (portrait v lan...
</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-andtrends-by-industry
http://www.themillennialimpact.com/2013research
http://www.mstoner.com/blog/mobile-and-responsive-design/four-ways-make-sitefriendlier-smartphones-tablets/?
utm_source=In...
Extra Slides Follow..
to be deleted
http://uxmag.com/articles/create-a-better-responsive-userexperience#.UZPccuxSawI.twitter

Just pasting these links in
here...
http://mashable.com/2013/01/03/tablet-friendly-website/?
utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:
+Mashabl...
http://www.slideshare.net/ProphetsAgency/trends-in-interactive-design-2013?
utm_source=slideshow03&utm_medium=ssemail&utm_...
http://www.elated.com/articles/responsive-web-design-demystified/
USA TODAY article on cellphones and schools
www.usatoday.com/story/tech/personal/
2013/08/07/views-shift-on-cell-phones-in...
Potential Sources
•
•
•

Google Multiscreen Report

•

DistilledLive Catch Up: Responsive Web Design
http://www.distilled....
Native Apps v. Mobile Web
Native App
device dependent

Moblie Web
scheniderb reference?
Mobile First
Very key for
admissions
What is RWD ?
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Responsive Web Design in a Multi-Screen World
Upcoming SlideShare
Loading in...5
×

Responsive Web Design in a Multi-Screen World

219

Published on

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.

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
219
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Responsive Web Design in a Multi-Screen World"

  1. 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. 2. How did we get here?
  3. 3. How did we get here? - MultiScreen World. - Responsive Web Design (aka. RWD) - Impact on Private Schools.
  4. 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. 5. What are we seeing? 13% 76% 11% source: AUG 2013 total page requests served from WhippleHill servers.
  6. 6. http://www.nd.edu
  7. 7. Of course, but how?
  8. 8. Too many choices ...
  9. 9. Responsive Web Design - Phrase coined in 2010 by Ethan Marcotte. Emerged in 2012. - A cost-effective alternative to mobile apps. - Utilizing HTML and CSS3.
  10. 10. 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.
  11. 11. 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
  12. 12. 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.
  13. 13. How did we get here? MultiScreen World. Responsive Web Design (aka. RWD) - Impact on Private Schools.
  14. 14. 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.
  15. 15. What is Pomfret seeing? 13% 83% 4% source: Pomfret Google Analytics September 2013
  16. 16. The Trend 2012 v 2013 +97% -4.09% +110% source: Pomfret Google Analytics September 2012 & 2013
  17. 17. 2013 Latest Data Parents, Students, & Faculty
  18. 18. 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
  19. 19. 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
  20. 20. Student Input for Website Design
  21. 21. 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.
  22. 22. The Pomfret Strategy - Email Newsletters Email Letters Email Invites Website Digital Signage Importance of Reuse & Multipurpose content.
  23. 23. 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)
  24. 24. eNews Evolution - Now
  25. 25. Email Invitations
  26. 26. Email Invitations
  27. 27. Mobile App to Responsive Design
  28. 28. Digital Signage On Campus & Web
  29. 29. 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
  30. 30. 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)
  31. 31. http://thenewdesignguidelines.derekevanharms.com/#
  32. 32. 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)
  33. 33. </presentation>
  34. 34. http://www.responsinator.com http://snippets.hubspot.com/hubspot-device-lab
  35. 35. http://www.businessinsider.com/15-billion-smartphones-in-the-world-22013-2
  36. 36. http://www.marketingprofs.com/charts/2013/11489/mobile-email-benchmarks-andtrends-by-industry
  37. 37. http://www.themillennialimpact.com/2013research
  38. 38. 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
  39. 39. Extra Slides Follow.. to be deleted
  40. 40. 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.
  41. 41. http://mashable.com/2013/01/03/tablet-friendly-website/? utm_source=feedburner&utm_medium=feed&utm_campaign=Feed: +Mashable+(Mashable)
  42. 42. http://www.slideshare.net/ProphetsAgency/trends-in-interactive-design-2013? utm_source=slideshow03&utm_medium=ssemail&utm_campaign=share_slide show_loggedout
  43. 43. http://www.elated.com/articles/responsive-web-design-demystified/
  44. 44. USA TODAY article on cellphones and schools www.usatoday.com/story/tech/personal/ 2013/08/07/views-shift-on-cell-phones-inschools/2607381?
  45. 45. 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/
  46. 46. Native Apps v. Mobile Web Native App device dependent Moblie Web
  47. 47. scheniderb reference?
  48. 48. Mobile First Very key for admissions
  49. 49. What is RWD ?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×