How can you increase enrollment? Nurture your staff, students and alumni? And how do you reduce the cost of doing so? This presentation by Chad Van Lier explains how responsive design is an effective and efficient manner in which to engage your empowered and hyperconnected students. If done correctly, it’s impact is far reaching.

1. Responsive
Design
in Higher
Education
Presented By:
Chad Van Lier, Director Client Solutions
The Power of Drupal in Higher Education
Georgetown University
August 7, 2013

2. • Changing User Needs and Expectations
• Goals of Higher Education
• What is Responsive Design
• Examples in Higher Education
• Approach, Advantages & Considerations
Agenda

3. When it comes to digital experiences, today’s users are hyperactive.
The increase in device accessibility — smartphones, phablets, tablets, and laptops — and
convenient access to cloud-based services fuels a greater number and frequency of overall
interactions across all devices.
The result are highly empowered, hyperconnected digital users
Rise of the Connected Digital User

4. • Move across devices and platforms at will
• Use mobile devices on-the-go as well as
at home, office, in classroom, etc.
• Multitasking across devices reduces
“mind-share” for any single channel or
experience
Empowered and Hyperconnected Users

5. According to “The New Multi-Screen
World Study” from Google (2012)
• 66% sixty-six percent of those surveyed reported using smartphones and laptops
simultaneously
• 75% reported using tablets while using other devices
• Of this simultaneous use, 92% report multitasking across their PCs and smartphones

6. Top activities performed when
sequentially screening between devices
Source: “The New Multi-Screen World Study”, Google, August 2012

7. “Where do you access the internet on
your…?”
Source: January 15, 2013, “The State Of Consumers And Technology: Benchmark 2012, US” Forrester report

8. Digital
Experience
in Higher
Education

9. • How do I increase enrollment?
• How do I nurture my students, staff, and alumni?
• How do I reduce the costs of doing so?
Drivers in today’s Higher Ed
Marketplace

10. Traditionally, colleges have done a great job managing
students’ on-campus experience from freshman
orientation to graduation – academics, research, team-
building, parties, sports, concerts and much more.
But many colleges fall short when providing their
students with a differentiated online experience that
reinforces the core attributes of the school’s brand and
students’ personal goals for success.
The Challenge

11. • Online Demand Generation
• Student Retention
• Digital Consolidation and Multi-brand
Management
Why the Digital Experience
Matters (or, what’s the ROI?)

12. Responsive Design and the Higher Ed
Digital Experience
Responsive design is an effective and efficient manner in which to
engage your empowered and hyperconnected students. If done
correctly, it’s impact is far reaching:
•Broadens the reach of your message and communications
•Increases engagement – repeat visits, number of page views, time
on site, etc.
•Enhances the perception of your brand among current and
prospective students, alumni, faculty, etc.
•Improves SEO

13. A responsively-designed website is able to adapt to different screen sizes and
devices, to provide an optimized viewing and interactive experience on each.
What is Responsive Design? (Cliffs Notes
version)
Media queries allow the page to use different CSS style rules based on characteristics of the device the site is being displayed on.
Through the concept of a fluid grid layout, image & page elements are sized in relative units, rather than absolute units.

14. Case Study in
Higher
Education

15. • Private University in West Philadelphia
• 25k students (5k online)
• 14 Colleges and Schools
• Best known for engineering and Co-op program
• Located directly in the city and they have one tree…so in terms of
imagery, “a girl with a guitar under a tree” won’t work!

16. Project Objective: Demand Generation. Engagement. Retention
•Highlight options for accessing an education at Drexel
•Position Drexel as the leading provider of Co-op education
•Build perception of Drexel as an institution of academic rigor and research
excellence
•Streamline pathways for prospective students and secondary audiences to
find the information they need quickly
•Address the job placement concerns and needs of prospective students
Redesign of drexel.edu

17. Responsive Solution
Combining a new visual identity – rich Philadelphia cityscapes along with the movement,
excitement and fast-paced environment of the University – with responsive design,
Drexel is able to digitally convey its rich in-person experience.
A blend of fixed + fluid layouts gives more control to the design and layout from
larger “desktop” resolutions down to mobile resolutions at full screen width. And the
use of CSS3 allows for smooth animations.
•Custom full screen background slideshow
•CSS3 transitions with jQuery animate backup for many of the transitions
•Responsive images – appropriately sized images download based on screen capability
(ex: a phone won’t download a 1600px wide image)
•A mix of fixed + fluid layout breakpoints (1200, 980, 740, liquid)

19. www.drexel.edu

20. • 14 College/School sites
• 35 “Provostial” sites
• 25 administrative sites
• All maintain their own content
• Analytics not integrated, governance loose
• Limited staff (director of web communications and 1.5 additional
developers)
• But..Drexel does have an in-house IT staff to build site shells and support
implementations
What’s next?

22. • Extend responsive framework across entire digital system
• Department and Colleges have 2 alternatives
http://drexel.edu/autisminstitute/
http://drexel.edu/president/
• Standards are provided that allow individual site owners flexibility with
look and feel, content, etc. within the framework
University-wide Responsive
Design

23. Additional Higher
Education
Examples

28. Approaches,
Advantages &
Consideration
s

29. Responsive Approach 1: Column Drop

30. Responsive Approach 2: Layout Shift

31. Responsive Approach 3: Off Canvas

32. Common Breakpoints

33. Advantages
• Can accommodate different devices with a single code
base
• Provides optimized viewing experiences given the screen
size
• Can provide optimized interactions based on the
predominant input method for the device (e.g. mouse
pointer vs. touch/multi-touch/swiping)
• Improved SEO
• Single URL for all devices (with no redirects)

34. Considerations
• Higher Level-of-Effort
• Difficult to layer into existing sites without redoing “desktop”
templates
• Touch interaction and image optimization work required to
meet smartphone and tablet user expectations
• Restricts the different screens to essentially similar content
and functionality (vs. mobile application or mobile website)

35. Thank you!Chad Van Lier
O: 703.584.8943
M: 703.967.3189
E: cvanlier@navigationarts.com