pseweb 2013 - make it responsive - terminalfour

Make it Responsive!

David Miller, COO TERMINALFOUR

25 June 2013, PSEWEB 2013, Vancouver1

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

• 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

TERMINALFOUR Site Manager at a glance…


• 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.)


Mobility Design

(*Source: David Armano - Harvard Business Review - http://blogs.hbr.org/cs/2012/07/the_future_isnt_about_mobile_its.html)


‘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’.


‘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/

http://rsd.joshemerson.co.uk/

http://rsd.joshemerson.co.uk/

• http://www.higher-education-marketing.com/ Make it responsive! 8

Google Trend: Interest in responsive web design

http://www.higher-education-marketing.com/



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!


Why bother? The Stats.

(*Source:Luke Wroblewski. "Mobile Context Revisited." http://www.lukew.com/ff/entry.asp?1333)


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

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/


Responsive Examples

http://www.bostonglobe.com/

http://www.smashingmagazine.com/

http://www.lancs.ac.uk/

http://www.anderssonwise.com/

http://www.anderssonwise.com/

http://www.sacredheart.edu/

http://www.liv.ac.uk/

http://drake.edu/

http://drake.edu/

http://www.port.ac.uk/

http://www.mi.mun.ca/

• 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


Why bother? Benefits of Responsive Design

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.*


Responsive Design & Your Content Strategy

(*Source: UX MAGAZINE http://uxmag.com/articles/a-primer-on-responsive-design)

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


Managing a Responsive Design Project & the Project Phases

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?


Project Phases - UX - User Experience Planning

• 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)


Quick Hint….. Cutting down complexity

Analysis by UK partner Reading Room www.readingroom.com

http://www.readingroom.com/

http://www.youtube.com/watch?v=AGVTp7eCWBo

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….


Project Phases - Development

• 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”


Project Phases - Development

http://www.port.ac.uk/courses/accounting-economics-and-finance/



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


Tips for Adopting Responsive Design

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 EmulatorsPlenty of free ones around - Two quick & easy browser based emulators TERMINALFOUR like: http://www.mobilephoneemulator.comhttp://www.responsinator.com


Tips for Adopting Responsive Design

http://www.mobilephoneemulator.com/

http://www.mobilephoneemulator.com/

http://www.responsinator.com/



• 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


Some “Gotchas” to look out for

• 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

• Phases1. External Top level pages – complete2. Most visited pages (courses) - complete3. 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


• 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.


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



• 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


De-constructed course information into component parts



• 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


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)



• Content authors able to focus on quality of content and message

• Content appears as needed• Reuse is automatic


End Result: Fully responsive site with emphasis on courses..

http://www.port.ac.uk/courses/art-and-design/ba-hons-fashion-and-textile-design/





• 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”)


Measuring Success: University of Liverpool

http://www.liv.ac.uk


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


The three key requirements for success

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!

http://m.specsavers.co.uk/

http://m.specsavers.co.uk/

http://www.qub.ac.uk/sites/mobile/




Responsive Example: Marine Institute: Memorial University


Quick “responsive approach” added at last minute




Responsive Example: Sacred Heart University

http://www.sacredheard.edu

Faculty & Staff directory auto populatedUsing External content Syncerhttp://www.sacredheart.edu/facultystaffdirectory/


http://www.sacredheart.edu/facultystaffdirectory/

http://www.sacredheart.edu/facultystaffdirectory/


Responsive Example: University College Cork

http://www.ucc.ie

http://www.ucc.ie/


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

http://www.lancs.ac.uk/


Responsive Example: Liverpool University

http://www.liv.ac.uk



Responsive Example: University of Portsmouth


Over 300 separate courses – auto populated and listed using various criteriahttp://www.port.ac.uk/courses/accounting-economics-and-finance/





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-desi

gn/

• 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

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://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://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

Thank You

David Miller, [email protected]

twitter.com/terminalfourMake it responsive! 37

mailto:[email protected]

mailto:[email protected]

pseweb 2013 - make it responsive - terminalfour

Technology