Responsive Delivery: A Methodology For Mobile Site Development & Delivery

You might also like

Download as pdf or txt
Download as pdf or txt
You are on page 1of 40

Responsive Delivery

A  Methodology  for  Mobile  Site    


Development  &  Delivery  

With  
 
Ike  DeLorenzo  
Mitch  Bishop  
Can you hear me?

Copyright ©2012 Moovweb. All Rights Reserved.


2

Can you see me?

Copyright ©2012 Moovweb. All Rights Reserved.


3

Questions

Copyright ©2012 Moovweb. All Rights Reserved.


4

Responsive Delivery (RD)
A modern methodology for mobile development and delivery

Industry  experts  Ike  and  Mitch  on  mobile  development  and  delivery  for  real  
businesses,  and  the  evolu:on  of  “responsive”  mobile  solu:ons.  
 

•  Overview: What is Responsive Delivery?


Keeping up with the history’s fastest technological revolution.

•  Past and present methodologies.


UX, UI, business agility, speed, TTM, TCO…

•  Security in a mobile world


Devices are only half the story.

•  Case study: Moovweb RD platform


Responsive Delivery for Fortune 1000 & SMB.

5
Welcome to 3.0
The next generation of the web is being driven by intense personalization & mobility

2000 2010 2020 Time

Web 1.0 Web 2.0 Web 3.0


One-to-Many Many-to-Many Many-to-One
HTML JavaScript, Ajax, CSS HTML 5, Big data
Scraping,
WORA Templates Proxies RWD Responsive Delivery

Mobile Technology Drivers


6
Mobile Internet: 2013
Mobile: The fastest technological revolution in history

Mobile devices: 13% of web pages, but 37% of dwell-time.

37%  and  growing  

63%  and  shrinking  

Source,: Comscore, April 2013


7
Those Unpredictable Mobile OSs!
Mobile: The fastest technological revolution in history

Changing, splintered US mobile device & OS market

Source,: Comscore, April 2013 8


Those Unpredicatble Mobile OSs
Still revolutioning … development & delivery agility is important

Changing,  splintered  world  


mobile  device  and  OS  market  

Q1  2013  
Worldwide  Mobile  Phone  Market  

Source,: FierceMobile,

9
Responsive Delivery
Leverage the web you have … to get the mobile experience you want.

•  Leverage, don’t rebuild.


•  Unify web, mobile – don’t create silos.
•  Create business agility, not complexity.
•  Invest in a strategic solution,
not a short-term bridge.
•  Deliver in weeks, not months.

10
Mobile 1.0: Siloed Development
2005 - present

•  Good for supporting few


device types.
•  Device-specific development
can yield better, more
performant UIs than cross-
device solutions.
•  Silos make sense to SOA folks.
•  Splintered code, high CoO.

•  It’s a silo!

11
What is Responsive Web Design?

•  Single code base


•  Adapts to different screen areas
•  Single URL

12
Mobile 2.0: Responsive Web Design (RWD)
2010 - present

•  One code base to target many devices.


A quest for programmers and that WORA-appeal for businesspeople.

•  Open standards languages like HTML5, CSS3, JS.


•  Frameworks like Backbone and Foundation.

•  Promising programming tools (e.g. Adobe Edge Reflow)

•  Programmer motivation to work on cool technology.

13
Mobile 2.0: Responsive Web Design (RWD)
2010 - present

•  One code base to target many devices.


A practice that makes complex code.

•  Only handles UI. Backend work separate & uncoordinated.


Security, cost, ongoing CoO issues.

•  Can only effectively target browsers (not apps).


•  More devices = more compromises in UI and UX.
•  Élite programmer skill required to execute well.
•  Industry commentators describe a 2013
“RWD Hangover” after the initial euphoria.

14
Mobile 2.0: RESS (RWD with Server-Side Components)
2011 – present

•  RWD Hangover?
“Take two RESS and call me in the morning.”
•  Many of the benefits of RWD.

•  Server decides what code to send based on device type.


A practice that reduces code size and complexity code.

•  A more moderate “realistic” approach.


•  Faster time-to-market over RWD.

15
Mobile 2.0: RESS (RWD with Server-Side Components)
2011 – present

•  Still requires the big re-write.


•  Only handles UI. Backend work separate & uncoordinated.
Security, cost, ongoing CoO issues.

•  High programmer skill required to execute well.


•  Poor at targeting hybrid app endpoints.

•  Unclear and ad-hoc best-practices.

16
Mobile 3.0: Responsive Delivery
An enterprise-weight solution that builds on learning from RESS & RWD

•  No rewrite: Leverage existing back-end business logic, process


flow, and UX to the device -- not just UI.
•  Open standards languages: HTML5, CSS3, JS, Tritium
see www.tritium.io

•  Requires only front-end developers, tools, and languages.

•  Embraces many of the benefits of RWD and RESS while


addressing concerns that have surfaced in business use.
•  No change in existing IT infrastructure.

•  Good solution for hybrid apps, robust support for PhoneGap.

Moovweb  Company   17

ConfidenNal  
Mobile 3.0: Responsive Delivery
An enterprise-weight solution that builds on learning from RESS & RWD

•  Cloud based RD solutions are mature, but on-premise solution


is just in beta.
•  Some purists prefer manual JS to Tritium script.

•  Enterprise platform sometimes seen as not as cool/gnarly to


programmers as pure RWD, Backbone.js, in-page JS apps, etc.

18
Conceptually …
A “UX-Informed Informed Infrasructure”

Responsive  Delivery  Layer  

Web  Server  Layer  

ApplicaNon  Layer  

Database  Layer  

19

Responsive Delivery … in the Cloud
Transforming web logic and assets to suit mobile form factors & capabilities

20

Transform the
business logic
and assets of
existing web sites
into clean,
modern HTML5.

Yes, without re-engineering


the existing site.

21
RD in the cloud: 15 billion Pages / Year
(more than CNN and Tumblr—the biggest news site and biggest blog provider—combined.)

22
Responsive Delivery
The mature, business analogue to the designers technique of “responsive design” (RWD).

Responsive delivery (RD)


allows your complete
business—infrastructure,
process, workflows, existing
business logic, assets, and
complete user experiences—
to transform and respond
appropriately to all devices
What RWD does for interface, RD does and endpoints.
for business logic and web assets.

23
Who’s talking about Responsive Delivery?

“... the most robust solution on the


market to realize our mobile vision.”
—Jamie Maki, Director eCommerce, Golfsmith

“... getting a ton of visibility, all the


way to Mike Duke and Rob Walton.”
—Gibu Thomas, SVP Strategy, Walmart

“... small screen size, but a huge step forward in our ability
to help people stay well. This major new development
would not have been possible without Moovweb.”
—ACS / American Cancer Society,
Miles Orkin, National Director,
Web & Mobile
24
Mobile 3.0: Responsive Delivery
Business-level take away

•  Agility & consistency through unified web & mobile


•  Future features in sync at minimal cost
•  No rewrite required
•  App ready, no integration required

•  Create great experiences, unencumbered


•  Responsive for big teams (enterprise-ready)

25
Quick Comparison
Moovweb is the only released, mature Responsive Delivery platform now on the market

Responsive Delivery (RD)


Ability to create great UX

Siloed RESS

Responsive Web Design (RWD)

WORA

Business agility
26
Fully Compatible
Moovweb works out-of-the-box with hundreds of major IT products.

Authentication Analytics Backend

TPS CMS Security Database


27
Secure
A leader in security for cloud based platforms

•  Security as product foundation, not afterthought:


The first cloud based service to have PCI level 1 certification accepted by Amazon.

•  Transparent single-sign on for major auth providers.


•  Fully stateless system: no data retained.
•  The most secure business mobilization methodology:
“Fortress model” : one highly secured entrance.

28
Life in the Fast Lane
Why Responsive Delivery is the fastest path to superior mobile experience

•  A running head-start.
In other methodologies, up to 80% of mobile dev is back-end work.

•  Lower learning curve.


RD uses the languages & technologies front-end devs have already
mastered.

•  Fast iteration.
Develop and test locally, Chrome plug-in debugger.

•  Easy build management.


One-button push-to-deploy.

29
Moovweb: What’s in the Box
Our product: a platform in three integrated parts.

30
Platform and methodology
Moovweb UX-informed infrastructure is built to evolve better end-results

31
Moovweb Product Components
code → manage → deploy to t.engine

32
Moovweb Development Tools
code → manage → deploy t.engines

•  Full-featured, well documented SDK


•  Code rapidly, test visually (local dev engine)
•  Built on, and for, open source technologies
•  Debug & log in familiar Chrome environment
•  Use your favorite IDE or editor (Intelli-sense support)
•  Quickstart Tritium app boilerplates
•  Polished UX with mobile UI widget libraries
•  Enhanced mobile performance (asset optimizers)

33
Moovweb Control Center
code → manage → deploy t.engines

•  Easy, efficient build management


Manage + build projects from the web browser

•  Simplify build and release cycles


Fully integrated with GIT and SVN

•  Monitor, configure, and provision t.engines

•  Manage teams and privileges

•  One-button push-to-deploy
Deploy projects to staging or production t.engines

34
Moovweb Cloud
code → manage → deploy t.engines

•  Fast page loads and app performance.


5 Enterprise grade global data centers

•  Reliable delivery
Uptime SLAs start at 99.95%

•  Proven throughput: one billion page views / month

•  Proven security.
PCI DSS Level 1 Certified

•  PhoneGap and app framework support.


JSON-ification of web data for app frameworks

•  Market-leading innovation: US Patent #8,438,312

35
Responsive Delivery for Apps
Apps as endpoints

Browser app
•  web logic and assets → t.Engine → UX in a web view

Hybrid app
•  web logic and assets → t.Engine → UX in a web view

Native app
•  web assets → t.Engine → JSONified web assets

36
Responsive Delivery Powers Business

•  Beautiful responsive mobile experiences


•  10X faster time to market
•  Unified web & mobile enables cost savings
•  Competitive agility

•  Works seamlessly with existing infrastructure

•  Always safe, always secure


•  Lightning-fast performance

•  Simple project management

37
White Paper!

www.moovweb.com/RD  

38
Questions?

•  Ike Delorenzo, Director Product Marketing


ike.delorenzo@moovweb.com

•  Mitch Bishop, CMO


mitch.bishop@moovweb.com

39
Responsive  Delivery  
and    

www.moovweb.com

You might also like