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: cvanlier@navigationarts.com