This document discusses responsive design and its importance for websites. It defines responsive design as a website that automatically adjusts based on the device being used. The document outlines the benefits of responsive design such as cost savings, improved user experience, and scalability. It provides tips for adopting responsive design including starting with the smallest device and focusing on key content. Examples of responsive design implementations at universities are also presented.

1. Make it Responsive!
David Miller, COO TERMINALFOUR
25 June 2013, PSEWEB 2013, Vancouver
1

2. 22Make it responsive!
What's it all about?
Topics to discuss today;
• TERMINAL Who?
• Mobility Design
• ‘Responsive Design’…What Does It Mean For You?
• Why bother? The Stats.
• Why bother? Benefits of Responsive Design
• Responsive Design & Your Content Strategy
• Managing a Responsive Design Project & the
Project Phases
• Tips for Adopting Responsive Design
• Some examples

3. • Web Content Management Specialists
• Top 30 in Content Management Companies (Real Story Group)
• Drive towards supporting the best Digital Engagement Experience
• 300 clients
• Higher Education (130+), Commercial & Government
• Main growth US & Canada - recently Australia & New Zealand
• International reach:
• UK, Ireland, Middle East, US, Canada, Australia, New Zealand
TERMINAL Who?
Make it responsive! 3
We make it really easy for
organisations to deliver and manage
very large, highly devolved, multilingual
RESPONSIVE Websites, Mobile sites
Intranets and Extranets

4. TERMINALFOUR Site Manager at a glance…
Make it responsive! 4

5. • The Future Isn't About Mobile; It's About Mobility*
• It means, trying to eliminate the need for a
different design and development project every
time a new device comes out in the marketplace.
• Responsive is about future proofing your content
as much as possible for mobile devices
• One CMS – output to one/multiple site(s)
• And other channels (social etc.)
Make it responsive! 5
Mobility Design
(*Source: David Armano - Harvard Business Review -
http://blogs.hbr.org/cs/2012/07/the_future_isnt_about_mobile_its.html)

6. 66Make it responsive!
„Responsive Design‟…What Does It Mean For You?
• As the user switches from one device to another,
and from one place to another, the website should
automatically ‘respond’.

7. 77Make it responsive!
„Responsive Design‟…What Does It Mean For You?
• Responsive web design is not mobile design.
• Responsive design is happening; it is not another
trend!
• It’s evolving….. responding not just to devices
• It’s not just a sausage dog
– http://rsd.joshemerson.co.uk/

8. • http://www.higher-education-marketing.com/Make it responsive! 8
Google Trend: Interest in responsive web design

9. Where are people using mobile devices?
• 84% at home
• 80% during downtime throughout the day
• 76% waiting in lines for appointments
• 69% while shopping
• 64% at work
• 62% while watching TV
• 47% during commute in to work
• Higher Ed Audiences are all the same!
Make it responsive! 9
Why bother? The Stats.
(*Source:Luke Wroblewski. "Mobile Context Revisited."
http://www.lukew.com/ff/entry.asp?1333)

10. Make it responsive! 10
What is Responsive Design?
10
Source: http://viljamis.com/blog/2012/adaptive-vs-responsive-whats-the-difference.php
What is Responsive Design Today?
This is just the start! Still evolving
- Responding to more inputs
(hyper personalisation,
localisation, history`)
- Automatically matching
content to your activity

11. Examples
• Boston Globe
• Smashing Magazine
• Lancaster University
• Andersson-Wise
• http://www.sacredheart.edu/
• http://www.liv.ac.uk/
• http://drake.edu/
• http://www.port.ac.uk/
• http://www.mi.mun.ca/
Make it responsive! 11
Responsive Examples

12. • Costs more initially but less in long run
• Allows you to re-use content and use the same
digital assets, saving time and development
costs.
• Same URLs for every device, improving SEO
Performance
• Unified analytics
• Enhanced Customer Experience – not just based
on device (can include location etc.)
• Scalability
• Unified Codebase
Make it responsive! 12
Why bother? Benefits of Responsive Design

13. What Does Responsive Design Mean for Your
Content Strategy?
• Responsive design is not about getting all your
content in front of the reader.
• Content audit - Put your website on a diet.
• For many websites, only about 10% of a page is
essential content; putting that essential content
onto mobile is key for mobile visitors.*
Make it responsive! 13
Responsive Design & Your Content Strategy
(*Source: UX MAGAZINE http://uxmag.com/articles/a-primer-on-responsive-design)

14. Approach;
• More agile approach – ‘Think agile vs. waterfall’.
• A CMS focusses on efficiency of the content
management aspects – not the design or
content aspects
Project Phases;
• Identifying Cross Functional Teams on both sides
• Research & Strategy
• UX - User Experience Planning
• Wireframing and Design
• Development
Make it responsive! 14
Managing a Responsive Design Project & the Project Phases

15. Understand your breakpoints
• What are the key breakpoints? What do major
templates look like at each breakpoint? What do
the header and footer look like?
Make it responsive! 15
Project Phases - UX - User Experience Planning

16. • Only web developers resize screens to show
their cool CSS - until we have very stretchy
phones
• You can cut down complexity by assuming:
• Most people use tablets in the same way
• Tablets = Desktop (landscape)
• Mobile = phone
• Can really focus on two options
• Desktop (but make sure touch works)
• Mobile (plus respond to location)
Make it responsive! 16
Quick Hint….. Cutting down complexity
Analysis by UK partner Reading Room www.readingroom.com

17. Timeline and Budget Impact
• Redesign takes 20-30% longer than a desktop-
only site
• Reduces on-going maintenance costs
• Major milestones are unchanged, but a few new
ones are added (Breakpoint sign offs are key)
• Bulk of time increase is in development
• And testing….
Make it responsive! 17
Project Phases - Development

18. • Remember the complexity
• Possible “media explosion” for all your
variants for various output devices
• Multiple layouts for each break point.
• Leads to growth for testing
• But end result is “one system”
Make it responsive! 18
Project Phases - Development
http://www.port.ac.uk/courses/accounting-economics-and-finance/

19. 1) Plan for a change management phase and gain
stakeholder buy-in.
2) Start with the smallest device you plan to
design for – ‘stay simple’
3) Focus on key-content.
4) Remember, content that is hidden with CSS still
gets downloaded
Make it responsive! 19
Tips for Adopting Responsive Design

20. 5) Testing - Two Options
• Test on as many real devices as possible and
from as many OS as possible - Apple family (iOS),
Android, Windows Phone, others to consider:
Blackberry, Nokia, Kindle Fire
• Mobile Emulators
Plenty of free ones around - Two quick & easy
browser based emulators TERMINALFOUR like:
http://www.mobilephoneemulator.com
http://www.responsinator.com
Make it responsive! 20
Tips for Adopting Responsive Design

21. • It’s all about content
• Where to cut off long articles…
• Long titles, Content ordering (when rearranging)
• Context
• Slow loading sites…. Especially on slower links
• It might not be shown but it is loaded!
• Just converting menus to links won’t always work
• It’s not just about device rendering
• Remember the device features
• Smooth, performing, user experience
Make it responsive! 21
Some “Gotchas” to look out for

22. • Outline of project
• “This wasn’t just a re-skin of an existing site we
wanted to completely re-make the website
based on audience needs and business aims” –
James Mellor, Project Manager
• Phases
1. External Top level pages – complete
2. Most visited pages (courses) - complete
3. All other sites – in progress
• Design by ClearLeft (UK)
• Initial Research by New City Media (Blacksburg VA)
Make it responsive! 22
A worked Example: Portsmouth University, England
http://www.port.ac.uk

23. • We wanted our site to be
responsive and for us this meant
really focusing on our brand
messages and then incorporating
this as much as possible into our
content and with a responsive site
the challenge for us was always to
be brief and think mobile first. We
also went for a show not tell
approach so throughout our
course pages you will see small
chunks of copy, with photos of
student and tutor testimonials as
well as video wherever possible.
Make it responsive! 23
Portsmouth University: The course Challenge
Rethought Subject
areas and cut them
down from 30 to 17.
Video commissioned
for each subject area
and selected
individual courses
http://www.port.ac.uk

24. • Selected info directed
to appropriate part of
page & reused across
multiple pages
• E.g. Common open day
• Common subject area
video
• System automatically
displays additional
information if available
Make it responsive! 24
De-constructed course information into component parts
http://www.port.ac.uk

25. • Using Modernizer for feature detection & zepto instead
of jQuery
• Serves only correct size image for device in use
• Over 300 courses – each with separate image
• 3 variants of each image for responsive site
• Image, image-400, image-800 –
• Smallest always loaded first and JavaScript decides if others
are needed
Make it responsive! 25
Some Complexity Introduced
320 courses x3 = 960 images uploaded just for the
header images, with potentially 320x9 for 3 unique
images in the slideshow is potentially 3,840 images
uploaded for the courses pages alone….. (did get
some reuse across course images)
http://www.port.ac.uk

26. • Content authors able to focus
on quality of content and
message
• Content appears as needed
• Reuse is automatic
Make it responsive! 26
End Result: Fully responsive site with emphasis on courses..
http://www.port.ac.uk/courses/art-and-design/ba-hons-fashion-and-textile-design/

27. • Three main methods
• User Satisfaction (tricky)
• Usability Testing
• Task completion
• Option Feedback
• Analytics
• Device usage (desktop/mobile/browser)
• Retention time (mobile users way more “bouncy”)
Make it responsive! 27
Measuring Success: University of Liverpool
http://www.liv.ac.uk

28. 1. Great design
• Factor in the situations YOU want to
respond do for optimal user impact
2. Well Planned Content strategy
• Target key messages to respond to
appropriate user (and appropriate content
length)
3. Great CMS
• Or one that doesn’t “get in the way” and
ideally supports your great ideas
Make it responsive! 28
The three key requirements for success

29. Specsavers: Mobile Site as
opposed to app
• Find store & book
appointment
29
We Started with Separate Mobile Channels
http://m.specsavers.co.uk/ http://www.qub.ac.uk/sites/mobile/
• Queens University
Belfast
• jQuery mobile site
Make it responsive!

30. Make it responsive! 30
Responsive Example: Marine Institute: Memorial University
http://www.mi.mun.ca/
Quick “responsive approach” added at last minute

31. Make it responsive! 31
Responsive Example: Sacred Heart University
http://www.sacredheard.edu
Faculty & Staff directory auto populated
Using External content Syncer
http://www.sacredheart.edu/facultystaffdirectory/

32. Make it responsive! 32
Responsive Example: University College Cork
http://www.ucc.ie

33. Make it responsive! 33
Responsive Example: Lancaster University
http://www.lancs.ac.uk
Winner of
EduStyle award
for best responsive
design
Also use CampusM app for
enhanced student experience

34. Make it responsive! 34
Responsive Example: Liverpool University
http://www.liv.ac.uk

35. Make it responsive! 35
Responsive Example: University of Portsmouth
http://www.port.ac.uk
Over 300 separate courses – auto
populated and listed using various criteria
http://www.port.ac.uk/courses/accounting-
economics-and-finance/

36. 3636Make it responsive!
Useful References & Sources
Useful References & Sources
• http://www.insidenewcity.com/blog/view/responsive/
• http://uxmag.com/articles/a-primer-on-responsive-design
• http://responsivedesignweekly.com/
• http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-
design/
• http://blog.galvintech.com/design/a-2012-process-for-a-2012-responsive-
web-1439.htm
• http://blogs.hbr.org/cs/2012/07/the_future_isnt_about_mobile_its.html
• http://mobitest.akamai.com/m/index.cgi

37. Thank You
David Miller, COO
David.miller@terminalfour.com
twitter.com/terminalfour
Make it responsive! 37