This article is based on the Financial Times App as conveyed by the work of lead designer Jim Cresswell. We chart the journey and reasons from moving from a single appstore presence to an online presence in the form of HTML 5 and other multi platform solutions. Questions that will be addressed for app developers are:
FT app aims
• Single page experience and responsive
layout/interactions.
• Single code base across platforms.
• Download data only, render client-side.
• Offline functionality.
• Regular app releases straight to the user.
History
• iOS app - May 2010.
• Web app – May 2011.
app.ft.com
• Over 3 million downloads.
Platforms
• iOS first because of readership.
• Android next, performance necessitated
wrapper.
• Windows 8.
• Chrome for Android.
Benefits of web for the FT
• No need to be subject to rule changes in
an app store.
• Users see new features/fixes immediately,
update is automatic.
• One code base, multiple target platforms.
The Windows App Architecture
• HTML/CSS/JavaScript wrapper app.
• Written with Visual Studio (Windows Store
integration).
• Contains iframe pointing at the web app.
• Wrapper communicates with web app via
postmessage.
• OS integration via Windows Library for JS.
How we got there
• First targeted IE10 to test/adapt the web
app.
• Changes to the web app were front-end
only.
• Created an installable wrapper with OS
integration.
Changes to the web app
• Update Prefixed CSS.
• Implement IndexedDB support
(see Matt Andrews’ labs.ft.com tutorials).
• Abstract and improve touch handling
and scrolling (ftscroller library).
• Many small improvements to codebase.
Where Windows was hard
• Documentation of Windows App APIs and
processes was poor to start with but has
since improved massively.
• Support for multiple builds of a single app
targeting different equipment
manufacturers is tricky.
Lessons learned
• Simple test cases to pin down weird
behaviour in a simple environment save
time., especially when documentation is
scarce.
• The better abstracted your code is the less
time it will take to reach a new platform.
• It takes time to learn new IDEs.
- Why migrate to other app platforms
- The difficulties of HTML 5
- Is Windows 8 valid for earning money rather than the traditional app route?
- The inherent difficulties of programming for many platforms
FT app aims
• Single page experience and responsive
layout/interactions.
• Single code base across platforms.
• Download data only, render client-side.
• Offline functionality.
• Regular app releases straight to the user.
History
• iOS app - May 2010.
• Web app – May 2011.
app.ft.com
• Over 3 million downloads.
Platforms
• iOS first because of readership.
• Android next, performance necessitated
wrapper.
• Windows 8.
• Chrome for Android.
Benefits of web for the FT
• No need to be subject to rule changes in
an app store.
• Users see new features/fixes immediately,
update is automatic.
• One code base, multiple target platforms.
The Windows App Architecture
• HTML/CSS/JavaScript wrapper app.
• Written with Visual Studio (Windows Store
integration).
• Contains iframe pointing at the web app.
• Wrapper communicates with web app via
postmessage.
• OS integration via Windows Library for JS.
How we got there
• First targeted IE10 to test/adapt the web
app.
• Changes to the web app were front-end
only.
• Created an installable wrapper with OS
integration.
Changes to the web app
• Update Prefixed CSS.
• Implement IndexedDB support
(see Matt Andrews’ labs.ft.com tutorials).
• Abstract and improve touch handling
and scrolling (ftscroller library).
• Many small improvements to codebase.
Where Windows was hard
• Documentation of Windows App APIs and
processes was poor to start with but has
since improved massively.
• Support for multiple builds of a single app
targeting different equipment
manufacturers is tricky.
Lessons learned
• Simple test cases to pin down weird
behaviour in a simple environment save
time., especially when documentation is
scarce.
• The better abstracted your code is the less
time it will take to reach a new platform.
• It takes time to learn new IDEs.
No comments:
Post a Comment
Like us? Then say So!