responsive design in higher education
DESCRIPTION
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.TRANSCRIPT
Responsive Designin Higher Education
Presented By:
Chad Van Lier, Director Client Solutions
The Power of Drupal in Higher EducationGeorgetown UniversityAugust 7, 2013
• Changing User Needs and Expectations
• Goals of Higher Education
• What is Responsive Design
• Examples in Higher Education
• Approach, Advantages & Considerations
Agenda
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
• 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
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
Top activities performed when sequentially screening between devices
Source: “The New Multi-Screen World Study”, Google, August 2012
“Where do you access the internet on your…?”
Source: January 15, 2013, “The State Of Consumers And Technology: Benchmark 2012, US” Forrester report
Digital Experiencein Higher Education
• 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
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
• Online Demand Generation
• Student Retention
• Digital Consolidation and Multi-brand Management
Why the Digital Experience Matters (or, what’s the ROI?)
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
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.
Case Study in Higher Education
• 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!
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
Responsive SolutionCombining 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)
www.drexel.edu
• 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?
• Extend responsive framework across entire digital system
• Department and Colleges have 2 alternativeshttp://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
Additional Higher Education Examples
Approaches, Advantages & Considerations
Responsive Approach 1: Column Drop
Responsive Approach 2: Layout Shift
Responsive Approach 3: Off Canvas
Common Breakpoints
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)
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)
Thank you!Chad Van LierO: 703.584.8943M: 703.967.3189E: [email protected]