2012 05-10 fia practical problems in mobile web final

Practical problems in mobile web …
… And ways to address them

Stephan Haux
Director Product Management
Netbiscuits

May 11, 2012 © Netbiscuits GmbH 2012 1

Agenda
 Who is Netbiscuits
HTML5  Looking at the Mobile Internet
"If you look at 100  The Parallel Experience
different devices,  Ways to address them
you’ll find 100
different versions"

Brett Taylor, CTO of Facebook, talking
about HTML5 on mobile devices
February 27, 2012

May 11, 2012 © Netbiscuits GmbH 2012 Slide 2

Who is Netbiscuits?
Community of over

15,000
developers
ME Awards 2011, won for the second time since 2009
Best Mobile Web Publishing Platform

120 9.6 Gartner 2011 MCAP Magic Quadrant ranks Netbiscuits
Visionary with highest ability to execute
million
Videos delivered/month
billion
Pages & content items
delivered/month Frost & Sullivan European Best Practice Awards 2011
Best Mobile Apps Deployment Platform
27,000
Sites & apps live and
Doubled in the last 12 months

growing by 500/month CBS.com mobile site built on Netbiscuits Platform wins
Meffys & Eppy Awards Best Mobile Site
8,000+
Device profiles in our database

8
Global Mobile Awards at Mobile World Congress 2012

offices on 4 continents
Shortlisted Best Cloud-Based Technology


What do we do? - biscuitML

HMTL Output (Delivered to device)
<div class=" slider nbslideshow " id="nb-joif2detable" style="position: relative; ">
<table style=" border-spacing: 0px; margin-left: auto; margin-right: auto;">
Biscuit ML <tr id="nb-joif2detr0">
<GALLERY id="nb-joif2de"> <td id="nb-joif2deitem1">
<headline/> <span class="" style="display:block;"> </span>
<table style="margin:auto; width:auto !important; border-spacing:0px;">
<items>
<tr><td style="vertical-align:top">
<item> <div class=" nbsliderimg ">
<img src="pics/redbox.png"/> <img src="img/ic?width=216&height=240&fsize=
</item> 999000&format=jpg&url=pics%2Fredbox.png" alt="" id="nb-joif2deitem1img">
<item> </div></td></tr></table>
<span class="" style="display:block;"></span><a></a></td>
<img src="pics/yellowbox.png"/>
</item> <td id="nb-joif2deitem2">
<item> <span class="" style="display:block;"></span>
<img src="pics/greenbox.png"/> <table style="margin:auto; width:auto !important; border-spacing:0px;">
</item> <tr><td style="vertical-align:top">
<div class=" nbsliderimg ">
<item>
<img src="img/ic?width=216&height=240&fsize=
<img src="pics/purplebox.png"/> 999000&format=jpg&url=pics%2Fyellowbox.png" alt="" id="nb-joif2deitem2img">
</item> </div></td></tr></table>
</items> <span class="" style="display:block;"></span><a></a></td>
<view position="top"/>
<td id="nb-joif2deitem3">
<settings>
<span class="" style="display:block;"> </span>
<slider> …
<arrows/>
<slideshow/>
<indicator/>
</slider> Plus other mark-up languages including
</settings> WML, cHTML (iMode), HDML, XHTML
</GALLERY>


HTML5 & Mobile – a Dream team

Key Promises
 Local Web Applications / Local Storage
 Rich Internet Features
 Accessing the Device Information


What is the Mobile Web?
HTML5 – Not all understand HTML at all!


They understand HTML
But no idea on HTML5


Key fact on Mobile Internet


2011 – The Hard Work Got Harder

 We introduced Rich UI capabilities

 Our customers were thrilled…but naturally
asked for more!
 More flexibility with Scripts
 More control on layout and functionality.
 More features as standard

So we decided to further develop our platform to
support the next stage in development for multi-
touch, multi-platform connected devices

eBay launched their mobile
site with swiping galleries,
overlay menus & more.


Problem no.1
Differences in browsers and the patchy HTML5 support


Everything Except Green is a Problem!


HTML5 <video>

The 3 main challenges:

1. Video Codecs

2. Device HTML5 support

3. Device capabilities when
handling video

"There is no single combination
of containers and codecs that
works in all HTML5 (supported)
browsers" Source (Professor Markup:
http://diveintohtml5.info/video.htmlv)
Source: http://www.expertisemobile.com/2011/10/28/html5-video-
and-audio-tags-support-on-mobile-device-real-world-feedback/


"You can’t detect 'HTML5 support',
because that doesn’t make any
sense. But you can detect support for
individual features, like canvas,
video, or geolocation"
Source: http://diveintohtml5.info


Problem no.2
Designing for a world with multiple device categories


It's all About Width & Height
In the beginning it …then came more …and old players
was simple… strong players bring even more!

Smartphone Screen Size 1 X X X
Smartphone Screen Size 2 X X
Smartphone Screen Size 3 X
Tablet Screen Size 1 X X X
Tablet Screen Size 2 X X
Tablet Screen Size 3 X X
Tablet Screen Size 4 X
PC X
IPTV ? ? ?


Problem No.3
Let's go Multi-device Shopping


Problems 1 & 2 Create Problem No.3

 The technology spaghetti
 Screens
 Content Types
 Different Code
 Features & Functions
 Business Logic
 Maintenance & Support


Problem No.4
Tablet: More than Screen factor


A Quick Recap

"If you look at 100 different devices, you’ll find 100 different versions"

 Problem 1: HTML5 Support
 Problem 2: Multiple Screens
 Problem 3: Creating Multi-Screen UX Consistency
 Next we find Problem 4: Sequential to Parallel

Web + Smartphone doesn't equal Tablet
We've lived in a sequential world… Smartphone and PC is sequential,
but now we have an added dimension. Tablets are the parallel world
to the sequential world we know!


Melting Pot: Tablets
1+1=3

Web: Layout and real estate on screen
+ Smartphone: Multi dimensional User Experience
= Subset of Tablet

Endless vs Limited Real Estate
Tablet
Horizontal and vertical one finger swipe makes 1024 x 768 an endless
canvas enabling parallel experiences
Smartphone
The same is difficult to replicate on a multi touch smartphone as a
users hand hides display meaning it can only offer a sequential
experience


Chekov’s Console – The Parallel Experience

Source: http://kooltvblog.blogspot.com/2011/05/space-odyssey-star-trek-season-two.html?z#!/2011/05/space-odyssey-star-trek-season-two.html


Frameworks
HTML, JavaScript, SDK?


Mid 2011: State of Frameworks

 Existing frameworks were
predominantly Smartphone focused,
in fact many still are which is
surprising given that Tablets gained
traction in 2010/11

 Frameworks are not supported by
established and integrated device
databases with device information
services
 This is the root cause of many
headaches when developing for
multiple screens – develop once, test
10x and develop again and again!


Frameworks in General
 Miss some vital pieces of the puzzle

 Continued separation of Markup,
Styles and Scripts complicates
development

 IDEs & cross OS Compilers not
addressing the Screen size
continuum

 Ignore Multi Device Users

 Barely linking Front-end and Cloud
Services


Conclusion & Suggestions

 HTML5 is great
 Drives Next Generation Web Applications
 Enabler of new services – in particular for mobile/ connected devices
 HTML5 is not there …
… yet.
 Mobile Web projects require to look beyond HTML5 – even beyond
HTML.
 Don’t wait – start now


BACKUP SLIDES


2010 – Beginning the Next Generation
Mobile Web Success
Netbiscuits very successful with mobile websites

Going Mainstream
Smartphones became mainstream and phones
were divided into Feature and Smartphones

Scripts for the Small Screen
Increasing number of projects included scripting
with smaller screens supporting interactive
features

The 3rd Design Dimension: Interacting
We started to think about the 3rd Design CBS launched their mobile
Dimension, going beyond layout and pages site with rich video
playback, drop-down menu
& more.


Problem Solved, Problems Created
To solve the biggest problem, we had to solve all the little problems too.

 Rich User Interfaces opened up more possibilities and increased
the demand for more:
 Native features within the browser
 Interactive options beyond simple form fields
 Ability to design beyond 'size and colour'

 In theory HTML + DOM Manipulation via JavaScript should make all
this possible, but…
 HTML5 feature support patchy and inconsistent
 HTML + DOM manipulation is tedious with existing JavaScript Frameworks
 Effectively impossible for sites spanning multiple device categories


Designing for Multiple Screens


Tactile Core Features
Tactile Mark-up
Mark-up replaces a large portion of JavaScript reducing size and
complexity of code without compromising on user experience.

Effects & Events
Large number of cross platform optimized out-of-the-box effects and
events enable rich display and behavior.

Device Information Services
Device Information Services provide device characteristics from the device
and from our Testing Intelligence to all touch points of a web application:
At the edge enhancing redirection decisions, at the backend systems
allowing for device class specific computing (ie. Security, Device specific
offerings) and at the client side for native like user experiences

HTML5 Framework
Tactile HTML5 framework is extendable in nature. It allows developers to
extend the JavaScript library at all layers – from kernel to the UI
components or use the CSS Preprocessor capabilities.

Tactile Technical Components

Tactile contains a comprehensive set of technology
components enabling the creation and delivery of rich
cross device multi-touch user experiences.

 HTML5 UI Elements
 CSS / CSS3 Preprocessor
 JavaScript Library
 Device Information Services

These technologies, enriched through our established
mobile Cloud Platform, empower next generation user
experiences in an affordable way for today's connected
world.


Using Tactile - Smart Development

Work faster and smarter using less lines of
code with intelligent mark-up, while reducing
cost and risk.

• Ramping Up: Large initial and on-going investments, learning time and costs
• Development: Productivity (Cost per Page)
• Flexibility: Cost of changes (minor and major ones)
• Maintenance: Revisiting/updating code. Adding new device and browser
support (USP – Netbiscuits Testing Team)
• Operations: Running the services (benefits of a cloud platform)

All these cost elements are reduced with Tactile and Smart Development


Ease of Development

Tactile Mark-up,
only 70 lines.

The same page written
with HTML and CSS,
over 300 lines!


A Closer Look at Tactile


Tactile Mark-Up

 Tactile uses core mark-up to define layout and content

 Use powerful tags including <Layout>, <View> and <Item> to define
screen behaviour, content display and interactive features

 Easy, simple to define parameters for full control of effects


Tactile Events & Effects

http://www.lukew.com/touch/TouchGestureCards.pdf
* Items with grey background are part of the beta and already abstracted


Tactile Multi-device Layouts
Standard Mobile Site 'top down' approach transforms into Tactile Layouts

 Device screens are divided into
different layout sections

 Root Layout is defined by
Screen.width and Screen.height

 Resize or orientation change is
handled via intelligent event
chain from parent to children.

 Each Layout element calculates the top, left,
width and height coordinates in relation to the
parent element.

 Default values are defined within BiscuitML for
landscape and portrait

 Default values can be overwritten or fully
customized through JavaScript at any time


Introduction Views
Wrappers for Biscuits

View 2 Views ScrollView MultiView …

 Each Layout element needs at least one child element derived from
UIContainer (layout, view, multiview, flexview).
 Views are very similar to layout element.
 It is not absolute positioned by default
 It can be vertical, horizontal or in both directions scrollable. (ScrollView)
 It can be linked into the resize event chain and use the same coordinates to
calculate it‘s position in relation to it‘t parent element.
 They can be nested


View
 Intended to hold your contents such as Biscuits,
HTML 5 & HTML Tags
 Views could be designed to fit an entire page or
only a small area of the screens
 Views can be nested
 Multiple parameters (visible, position, overflow,
opacity etc.) control the look & feel and behavoir
 View can be extended with scrolling functionality
(horizizontal, vertical, both)

View ScrollView


MultiView
 Only one View within MultiView is visible at each
time.
 MultiView provides methods to switch between
Views.
 Views can be page like (large) or content like
(smaller)
 The onSwitch event can be used to get notified when
the current view has changed.

MultiView


Toyota


FlexView

 FlexViews define FlexItems that can have either one
flexible dimension (height or width)
 FlexViews can change their flexible dimension
depended on screen size or orientation
 Contents are encapsulated in FlexItems
Width is fixed;
height is flexible

Height is fixed;
width is flexible


The Daily Show Digest


GridView

 GridView arrange items in rows & columns much like a
table
 GridViews can be used to achieve responsive layouts
easily and quickly.
 Each GridView can be extended with optional
parameters like „gap“
 GridItems can contain any sort of contents or content
groups

GridView


Tactile Overlays

 Create overlays and multi-layered
layouts

 Show and hide overlays using
pre-defined, yet editable events

 Use conditions to enable device
specific layers and behavour


Tactile Layouts with Engaging UI Components
Layout Manager

Overlay

MultiView

MultiView

 Create layouts of any kind and with any level of complexity
 Deliver pages with multiple layouts
 Specify overlapping layout regions. Slide out menus for example
 Use MultiView in combination with swipe events to create galleries
 Enhance viewing experience with blind, fade and slide effects


BMW


"If you look at 100 different devices,
you’ll find 100 different versions"
Brett Taylor, CTO of Facebook, talking about HTML5 on mobile devices
February 27, 2012


Thank You

Stephan Haux
Director Product Management
s.haux@netbiscuits.com
@sthaux See Tactile in Action
Netbiscuits
http://m.netbiscuits.com


2012 05-10 fia practical problems in mobile web final

More Related Content

Similar to 2012 05-10 fia practical problems in mobile web final

Recently uploaded

2012 05-10 fia practical problems in mobile web final

Editor's Notes