don't break the bank - improve your mobile experience with light responsive techniques

62

Upload: mallory-oconnor

Post on 05-Dec-2014

447 views

Category:

Technology


0 download

DESCRIPTION

On Thursday, February 6, Habanero is hosting a webinar about Habanero’s light-responsive design approach. Light-responsive design techniques help organizations realize the benefits of better mobile support, without the high cost of completely rebuilding their website. They’re also great if you have a dedicated mobile site and want to make the shift to a responsive portal. The webinar will include a Habanero client case study to showcase our light-responsive approach and illustrate how you can benefit from this simplified way of doing responsive web design. John Allan, a Senior User Experience Developer, and Mallory O’Connor, Practice Lead, Customer and Member Portals, will present the webinar. This 30-minute ‘coffee break’ presentation is geared for designers, developers, marketing professionals, or website managers.

TRANSCRIPT

Page 1: Don't break the bank - improve your mobile experience with light responsive techniques
Page 2: Don't break the bank - improve your mobile experience with light responsive techniques

February 6, 2014

Don’t break the bank:

Improve your mobile experience with light responsive techniques

Page 3: Don't break the bank - improve your mobile experience with light responsive techniques

Practice Lead, Customer and Member Portals

Hello

Senior User Experience Developer

mallory o’connor john allan

Page 4: Don't break the bank - improve your mobile experience with light responsive techniques

light responsivewhat, why, and how light responsive applied

casestudy

Agenda for today

Page 5: Don't break the bank - improve your mobile experience with light responsive techniques
Page 6: Don't break the bank - improve your mobile experience with light responsive techniques

Q & A

Page 7: Don't break the bank - improve your mobile experience with light responsive techniques

About Habanero

Page 8: Don't break the bank - improve your mobile experience with light responsive techniques

thrivepeople and

organizations

we are

passionateabout helping

Page 9: Don't break the bank - improve your mobile experience with light responsive techniques

employeeportals

and intranets

customerportals

memberportals

and websites and extranets

Page 10: Don't break the bank - improve your mobile experience with light responsive techniques

Don’t break the bank:

Improve your mobile experience with light-responsive techniques

Page 11: Don't break the bank - improve your mobile experience with light responsive techniques

Mobile traffic

Page 12: Don't break the bank - improve your mobile experience with light responsive techniques

What is lightresponsive design?

Page 13: Don't break the bank - improve your mobile experience with light responsive techniques

mobile app vs. mobile web

Mobile experiences consumed via dedicated native application

Mobile experiences consumed via local device browsers

Page 14: Don't break the bank - improve your mobile experience with light responsive techniques

Dedicated mobile site

Page 15: Don't break the bank - improve your mobile experience with light responsive techniques

Responsive site

Desktop Tablet Phone

Page 16: Don't break the bank - improve your mobile experience with light responsive techniques

Light responsive site

Desktop Phone

Page 17: Don't break the bank - improve your mobile experience with light responsive techniques

Why chooselight responsive?

Page 18: Don't break the bank - improve your mobile experience with light responsive techniques

Budget

Enhancements vs. overhaul

Page 19: Don't break the bank - improve your mobile experience with light responsive techniques

Buy-in

Limited appetite to start from scratch

Page 20: Don't break the bank - improve your mobile experience with light responsive techniques

Pain

Impact on brand, satisfaction, and conversion

Page 21: Don't break the bank - improve your mobile experience with light responsive techniques

Benefits oflight responsive

Page 22: Don't break the bank - improve your mobile experience with light responsive techniques

It’s fast.

Page 23: Don't break the bank - improve your mobile experience with light responsive techniques

It’s cost effective.

Page 24: Don't break the bank - improve your mobile experience with light responsive techniques

It’s high impact.

Page 25: Don't break the bank - improve your mobile experience with light responsive techniques

How does it work?

Page 26: Don't break the bank - improve your mobile experience with light responsive techniques

CSS Javascript

Page 27: Don't break the bank - improve your mobile experience with light responsive techniques

Reprioritizing content

Page 28: Don't break the bank - improve your mobile experience with light responsive techniques

Reprioritizing content

Page 29: Don't break the bank - improve your mobile experience with light responsive techniques

Reprioritizing content

Page 30: Don't break the bank - improve your mobile experience with light responsive techniques

Rethinking navigation

Page 31: Don't break the bank - improve your mobile experience with light responsive techniques

Rethinking navigation

Page 32: Don't break the bank - improve your mobile experience with light responsive techniques

Rethinking navigation

Page 33: Don't break the bank - improve your mobile experience with light responsive techniques

Addressing complexity

Page 34: Don't break the bank - improve your mobile experience with light responsive techniques

Addressing complexity

Page 35: Don't break the bank - improve your mobile experience with light responsive techniques

Addressing complexity

Page 36: Don't break the bank - improve your mobile experience with light responsive techniques

Performance

Page 37: Don't break the bank - improve your mobile experience with light responsive techniques
Page 38: Don't break the bank - improve your mobile experience with light responsive techniques
Page 39: Don't break the bank - improve your mobile experience with light responsive techniques
Page 40: Don't break the bank - improve your mobile experience with light responsive techniques

Case study:oilsandstoday.com

Page 41: Don't break the bank - improve your mobile experience with light responsive techniques

A little backgroundabout the site

Page 42: Don't break the bank - improve your mobile experience with light responsive techniques
Page 43: Don't break the bank - improve your mobile experience with light responsive techniques

Bounce rate

High bounce rate was an indicator of deeper issues.

Page 44: Don't break the bank - improve your mobile experience with light responsive techniques

Layout

Pinch and zoom experience

Page 45: Don't break the bank - improve your mobile experience with light responsive techniques

Page load

Page size and load times were prohibitive

Page 46: Don't break the bank - improve your mobile experience with light responsive techniques

Results

Page 47: Don't break the bank - improve your mobile experience with light responsive techniques
Page 48: Don't break the bank - improve your mobile experience with light responsive techniques
Page 49: Don't break the bank - improve your mobile experience with light responsive techniques
Page 50: Don't break the bank - improve your mobile experience with light responsive techniques

Performance improvements

Page 51: Don't break the bank - improve your mobile experience with light responsive techniques

50%

Decrease in server requests

Page 52: Don't break the bank - improve your mobile experience with light responsive techniques

94%

Decrease in page size

Page 53: Don't break the bank - improve your mobile experience with light responsive techniques

86%

Decrease in page load time

Page 54: Don't break the bank - improve your mobile experience with light responsive techniques

Summary

Page 55: Don't break the bank - improve your mobile experience with light responsive techniques

Key takeaways

Page 56: Don't break the bank - improve your mobile experience with light responsive techniques

Light responsive is a fast, affordable, interim solution.

Page 57: Don't break the bank - improve your mobile experience with light responsive techniques

Mobile second can be ok too.

Page 58: Don't break the bank - improve your mobile experience with light responsive techniques

We can help you get started.

Page 59: Don't break the bank - improve your mobile experience with light responsive techniques

Questions?

Page 60: Don't break the bank - improve your mobile experience with light responsive techniques

Wrap up•Follow up questions are welcome!

•Past webinars: youtube.com/habaneroconsult

•Blog posts:habaneroconsulting.com/insights

Page 61: Don't break the bank - improve your mobile experience with light responsive techniques

[email protected]

Get in touch

[email protected]

mallory o’connor john allan

habaneroconsulting.com/team

Page 62: Don't break the bank - improve your mobile experience with light responsive techniques