Don't break the bank - improve your mobile experience with light responsive techniques
-
Upload
mallory-oconnor -
Category
Technology
-
view
447 -
download
0
description
Transcript of Don't break the bank - improve your mobile experience with light responsive techniques
![Page 1: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/1.jpg)
![Page 2: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/2.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/3.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/4.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/5.jpg)
![Page 6: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/6.jpg)
Q & A
![Page 7: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/7.jpg)
About Habanero
![Page 8: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/8.jpg)
thrivepeople and
organizations
we are
passionateabout helping
![Page 9: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/9.jpg)
employeeportals
and intranets
customerportals
memberportals
and websites and extranets
![Page 10: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/10.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/11.jpg)
Mobile traffic
![Page 12: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/12.jpg)
What is lightresponsive design?
![Page 13: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/13.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/14.jpg)
Dedicated mobile site
![Page 15: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/15.jpg)
Responsive site
Desktop Tablet Phone
![Page 16: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/16.jpg)
Light responsive site
Desktop Phone
![Page 17: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/17.jpg)
Why chooselight responsive?
![Page 18: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/18.jpg)
Budget
Enhancements vs. overhaul
![Page 19: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/19.jpg)
Buy-in
Limited appetite to start from scratch
![Page 20: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/20.jpg)
Pain
Impact on brand, satisfaction, and conversion
![Page 21: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/21.jpg)
Benefits oflight responsive
![Page 22: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/22.jpg)
It’s fast.
![Page 23: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/23.jpg)
It’s cost effective.
![Page 24: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/24.jpg)
It’s high impact.
![Page 25: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/25.jpg)
How does it work?
![Page 26: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/26.jpg)
CSS Javascript
![Page 27: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/27.jpg)
Reprioritizing content
![Page 28: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/28.jpg)
Reprioritizing content
![Page 29: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/29.jpg)
Reprioritizing content
![Page 30: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/30.jpg)
Rethinking navigation
![Page 31: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/31.jpg)
Rethinking navigation
![Page 32: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/32.jpg)
Rethinking navigation
![Page 33: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/33.jpg)
Addressing complexity
![Page 34: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/34.jpg)
Addressing complexity
![Page 35: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/35.jpg)
Addressing complexity
![Page 36: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/36.jpg)
Performance
![Page 37: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/37.jpg)
![Page 38: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/38.jpg)
![Page 39: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/39.jpg)
![Page 40: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/40.jpg)
Case study:oilsandstoday.com
![Page 41: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/41.jpg)
A little backgroundabout the site
![Page 42: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/42.jpg)
![Page 43: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/43.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/44.jpg)
Layout
Pinch and zoom experience
![Page 45: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/45.jpg)
Page load
Page size and load times were prohibitive
![Page 46: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/46.jpg)
Results
![Page 47: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/47.jpg)
![Page 48: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/48.jpg)
![Page 49: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/49.jpg)
![Page 50: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/50.jpg)
Performance improvements
![Page 51: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/51.jpg)
50%
Decrease in server requests
![Page 52: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/52.jpg)
94%
Decrease in page size
![Page 53: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/53.jpg)
86%
Decrease in page load time
![Page 54: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/54.jpg)
Summary
![Page 55: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/55.jpg)
Key takeaways
![Page 56: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/56.jpg)
Light responsive is a fast, affordable, interim solution.
![Page 57: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/57.jpg)
Mobile second can be ok too.
![Page 58: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/58.jpg)
We can help you get started.
![Page 59: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/59.jpg)
Questions?
![Page 60: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/60.jpg)
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](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/61.jpg)
Get in touch
mallory o’connor john allan
habaneroconsulting.com/team
![Page 62: Don't break the bank - improve your mobile experience with light responsive techniques](https://reader034.fdocuments.us/reader034/viewer/2022051817/54809c455906b5cd6c8b456d/html5/thumbnails/62.jpg)