Responsive Design in Higher Education


Published on

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.

Published in: Education, Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Design in Higher Education

  1. 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. 2. • Changing User Needs and Expectations • Goals of Higher Education • What is Responsive Design • Examples in Higher Education • Approach, Advantages & Considerations Agenda
  3. 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. 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. 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. 6. Top activities performed when sequentially screening between devices Source: “The New Multi-Screen World Study”, Google, August 2012
  7. 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. 8. Digital Experience in Higher Education
  9. 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. 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. 11. • Online Demand Generation • Student Retention • Digital Consolidation and Multi-brand Management Why the Digital Experience Matters (or, what’s the ROI?)
  12. 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. 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. 14. Case Study in Higher Education
  15. 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. 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
  17. 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)
  18. 18.
  19. 19. • 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?
  20. 20. • Extend responsive framework across entire digital system • Department and Colleges have 2 alternatives • Standards are provided that allow individual site owners flexibility with look and feel, content, etc. within the framework University-wide Responsive Design
  21. 21. Additional Higher Education Examples
  22. 22. Approaches, Advantages & Consideration s
  23. 23. Responsive Approach 1: Column Drop
  24. 24. Responsive Approach 2: Layout Shift
  25. 25. Responsive Approach 3: Off Canvas
  26. 26. Common Breakpoints
  27. 27. 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)
  28. 28. 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)
  29. 29. Thank you!Chad Van Lier O: 703.584.8943 M: 703.967.3189 E: