SlideShare a Scribd company logo
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
February 6, 2014
Hello

mallory o’connor

Practice Lead, Customer and Member Portals

john allan

Senior User Experience Developer
Agenda for today

light
responsive

case
study

what, why, and how

light responsive applied
Don't break the bank - improve your mobile experience with light responsive techniques
Q&A
About Habanero
we are

passionate
about helping
people and
organizations

thrive
customer
portals

employee
portals

member
portals

and websites

and intranets

and extranets
Don’t break the bank:
Improve your mobile experience with
light-responsive techniques
Mobile traffic
What is light
responsive design?
mobile app vs. mobile web
Mobile experiences
consumed via dedicated
native application

Mobile experiences
consumed via local device
browsers
Dedicated mobile site
Responsive site
Desktop

Tablet

Phone
Light responsive site
Desktop

Phone
Why choose
light responsive?
Budget
Enhancements vs. overhaul
Buy-in
Limited appetite to start from
scratch
Pain
Impact on brand, satisfaction, and
conversion
Benefits of
light responsive
It’s fast.
It’s cost effective.
It’s high impact.
How does it work?
CSS

Javascript
Reprioritizing content
Reprioritizing content
Reprioritizing content
Rethinking navigation
Rethinking navigation
Rethinking navigation
Addressing complexity
Addressing complexity
Addressing complexity
Performance
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
Don't break the bank - improve your mobile experience with light responsive techniques
Case study:
oilsandstoday.com
A little background
about the site
Don't break the bank - improve your mobile experience with light responsive techniques
Bounce rate
High bounce rate was an indicator
of deeper issues.
Layout
Pinch and zoom experience
Page load
Page size and load times were
prohibitive
Results
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
Don't break the bank - improve your mobile experience with light responsive techniques
Performance improvements
50%
Decrease in server requests
94%
Decrease in page size
86%
Decrease in page load time
Summary
Key takeaways
Light responsive is a fast,
affordable, interim solution.
Mobile second can be ok too.
We can help you get started.
Questions?
Wrap up
•Follow up questions are welcome!
•Past webinars:
youtube.com/habaneroconsult

•Blog posts:
habaneroconsulting.com/insights
Get in touch

mallory o’connor

moconnor@habaneroconsulting.com

john allan

jallan@habaneroconsulting.com

habaneroconsulting.com/team
Don't break the bank - improve your mobile experience with light responsive techniques

More Related Content

PPTX
Benefits of responsive web design
PPT
Responsivewebdesigningtraininginchandigarh2014
PDF
20161115 umasake Analytics Report
PDF
Why responsive web design may be a must!
PPTX
VoC Naspers product conference oct 2018
PDF
Admissions Differentiation - Toolkit for Admissions
PPTX
Using Back-End SDKs to Drive App Sessions, Revenue and Retention
PPTX
Speakamos presentation 3 427
Benefits of responsive web design
Responsivewebdesigningtraininginchandigarh2014
20161115 umasake Analytics Report
Why responsive web design may be a must!
VoC Naspers product conference oct 2018
Admissions Differentiation - Toolkit for Admissions
Using Back-End SDKs to Drive App Sessions, Revenue and Retention
Speakamos presentation 3 427

What's hot (20)

PPT
M6 - E Commerce - Designing An E Commerce Site
PPTX
Elements Which Make Your Customers To Leave Your Website
PPTX
why responsive web design is important
PPTX
Are your website is Responsive?
PPTX
Oscar Clark, Unity
PPTX
Human Computer Interaction Project
PPSX
How to build a website that attracts more
PPTX
Gymometer Presentation 1
PPTX
SharePoint User Adoption - SPSJHB - Feb 2011
PPTX
Creating an effective online presence for small businesses on the new web
PPT
Responsive web design
PPTX
Improving Your Mobile App Experience with Voice of the Customer Studies
PDF
Business Advantage of Responsive Design
PDF
What is Usersnap
PPTX
Designing a Customer Feedback Program to Measure and Improve User Satisfaction
DOCX
5 benefits of amp
PDF
EO Presentation SEO, Conversion, Brain Science
PDF
Cheaponomics
PPTX
5 Things You Need to Know About Responsive Design in eCommerce
PDF
Social, Mobile & The Future of Retail
M6 - E Commerce - Designing An E Commerce Site
Elements Which Make Your Customers To Leave Your Website
why responsive web design is important
Are your website is Responsive?
Oscar Clark, Unity
Human Computer Interaction Project
How to build a website that attracts more
Gymometer Presentation 1
SharePoint User Adoption - SPSJHB - Feb 2011
Creating an effective online presence for small businesses on the new web
Responsive web design
Improving Your Mobile App Experience with Voice of the Customer Studies
Business Advantage of Responsive Design
What is Usersnap
Designing a Customer Feedback Program to Measure and Improve User Satisfaction
5 benefits of amp
EO Presentation SEO, Conversion, Brain Science
Cheaponomics
5 Things You Need to Know About Responsive Design in eCommerce
Social, Mobile & The Future of Retail
Ad

Viewers also liked (7)

PDF
SharePoint Summit Vancouver: Reach your audience with a SharePoint mobile app
PDF
Reach your audience with a share point mobile app
PDF
Crossing the killer content chasm with agile teams
PDF
Share pointsummit vancouver2014 habanerocp case study
PPSX
Media selection and measuring campaign performance
PDF
Advertising Media Selection
PDF
Hype vs. Reality: The AI Explainer
SharePoint Summit Vancouver: Reach your audience with a SharePoint mobile app
Reach your audience with a share point mobile app
Crossing the killer content chasm with agile teams
Share pointsummit vancouver2014 habanerocp case study
Media selection and measuring campaign performance
Advertising Media Selection
Hype vs. Reality: The AI Explainer
Ad

Similar to Don't break the bank - improve your mobile experience with light responsive techniques (20)

PPTX
Mobile websites - The Hidden Mobile Website Sales Opportunities Revealed
PPTX
An Exclusive Blog on Turning Your Website into an Android App
PPTX
How to Get Going with Recurring Revenue Services in Your App Development Busi...
PDF
Google Mobile Sites | We Got Certified so You Don't Have To
PDF
What is the Importance of Responsive Web Design for Business Development?
PPTX
What is the Importance of Responsive Web Design for Business Development_.pptx
PDF
Web Designing : Essential Tips and Tricks for an Eye-Catching Website
PDF
Why you should get your website redesign
PPTX
Implementing Voice Search for E-commerce Website: Developer's Guide
PDF
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
PDF
Mobile seminar-worksheet
DOCX
Unlocking Success A Comprehensive Guide to Optimize Your Landing Page Strateg...
PDF
What are the 4 most important things for a successful digital marketing caree...
PDF
Mobile Friendly Web Design - Webinar - Mobile Responsive Design
PDF
Your website is your digital storefronta
PDF
Responsive design
PDF
The Complete Guide To Custom Web Application Development.pdf
PDF
Multi screen-moblie-whitepaper research-studies
PDF
PRINCIPLES OF MOBILE SITE DESIGN Via Google
PPTX
How often should I upgrade my website? A comprehensive guide for large busine...
Mobile websites - The Hidden Mobile Website Sales Opportunities Revealed
An Exclusive Blog on Turning Your Website into an Android App
How to Get Going with Recurring Revenue Services in Your App Development Busi...
Google Mobile Sites | We Got Certified so You Don't Have To
What is the Importance of Responsive Web Design for Business Development?
What is the Importance of Responsive Web Design for Business Development_.pptx
Web Designing : Essential Tips and Tricks for an Eye-Catching Website
Why you should get your website redesign
Implementing Voice Search for E-commerce Website: Developer's Guide
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Mobile seminar-worksheet
Unlocking Success A Comprehensive Guide to Optimize Your Landing Page Strateg...
What are the 4 most important things for a successful digital marketing caree...
Mobile Friendly Web Design - Webinar - Mobile Responsive Design
Your website is your digital storefronta
Responsive design
The Complete Guide To Custom Web Application Development.pdf
Multi screen-moblie-whitepaper research-studies
PRINCIPLES OF MOBILE SITE DESIGN Via Google
How often should I upgrade my website? A comprehensive guide for large busine...

Recently uploaded (20)

PDF
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
PDF
Web App vs Mobile App What Should You Build First.pdf
PDF
1 - Historical Antecedents, Social Consideration.pdf
PDF
Developing a website for English-speaking practice to English as a foreign la...
PPTX
Tartificialntelligence_presentation.pptx
PDF
Enhancing emotion recognition model for a student engagement use case through...
PDF
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
PPTX
1. Introduction to Computer Programming.pptx
PDF
STKI Israel Market Study 2025 version august
PDF
Architecture types and enterprise applications.pdf
PPTX
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
PPTX
OMC Textile Division Presentation 2021.pptx
PDF
WOOl fibre morphology and structure.pdf for textiles
PDF
Getting started with AI Agents and Multi-Agent Systems
PDF
A contest of sentiment analysis: k-nearest neighbor versus neural network
PPTX
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
PPT
What is a Computer? Input Devices /output devices
PDF
NewMind AI Weekly Chronicles - August'25-Week II
PPTX
O2C Customer Invoices to Receipt V15A.pptx
PDF
A comparative study of natural language inference in Swahili using monolingua...
Transform Your ITIL® 4 & ITSM Strategy with AI in 2025.pdf
Web App vs Mobile App What Should You Build First.pdf
1 - Historical Antecedents, Social Consideration.pdf
Developing a website for English-speaking practice to English as a foreign la...
Tartificialntelligence_presentation.pptx
Enhancing emotion recognition model for a student engagement use case through...
ENT215_Completing-a-large-scale-migration-and-modernization-with-AWS.pdf
1. Introduction to Computer Programming.pptx
STKI Israel Market Study 2025 version august
Architecture types and enterprise applications.pdf
TechTalks-8-2019-Service-Management-ITIL-Refresh-ITIL-4-Framework-Supports-Ou...
OMC Textile Division Presentation 2021.pptx
WOOl fibre morphology and structure.pdf for textiles
Getting started with AI Agents and Multi-Agent Systems
A contest of sentiment analysis: k-nearest neighbor versus neural network
MicrosoftCybserSecurityReferenceArchitecture-April-2025.pptx
What is a Computer? Input Devices /output devices
NewMind AI Weekly Chronicles - August'25-Week II
O2C Customer Invoices to Receipt V15A.pptx
A comparative study of natural language inference in Swahili using monolingua...

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