2012 05-10 fia practical problems in mobile web final

April 12, 2023 © Netbiscuits GmbH 2012 1

Practical problems in mobile web …

… And ways to address them

Stephan HauxDirector Product ManagementNetbiscuits

Agenda

Who is Netbiscuits Looking at the Mobile Internet The Parallel Experience Ways to address them

April 12, 2023 © Netbiscuits GmbH 2012 Slide 2

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

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

Who is Netbiscuits?


9.6billionPages & content items delivered/month

Doubled in the last 12 months

120millionVideos delivered/month

15,000Community of over

developers

27,000Sites & apps live and growing by 500/month

8 offices on 4 continents

8,000+Device profiles in our database

ME Awards 2011, won for the second time since 2009

Best Mobile Web Publishing Platform

Gartner 2011 MCAP Magic Quadrant ranks Netbiscuits

Visionary with highest ability to execute

Frost & Sullivan European Best Practice Awards 2011

Best Mobile Apps Deployment Platform

CBS.com mobile site built on Netbiscuits Platform wins

Meffys & Eppy Awards Best Mobile Site

Global Mobile Awards at Mobile World Congress 2012

Shortlisted Best Cloud-Based Technology


Biscuit ML<GALLERY id="nb-joif2de"><headline/><items>

<item><img src="pics/redbox.png"/>

</item><item>

<img src="pics/yellowbox.png"/></item><item>

<img src="pics/greenbox.png"/></item><item>

<img src="pics/purplebox.png"/></item>

</items><view position="top"/><settings>

<slider><arrows/><slideshow/><indicator/>

</slider></settings></GALLERY>

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;"><tr id="nb-joif2detr0"><td id="nb-joif2deitem1"><span class="" style="display:block;"> </span><table style="margin:auto; width:auto !important; border-spacing:0px;"><tr><td style="vertical-align:top"><div class=" nbsliderimg "><img src="img/ic?width=216&height=240&fsize=999000&format=jpg&url=pics%2Fredbox.png" alt="" id="nb-joif2deitem1img"></div></td></tr></table><span class="" style="display:block;"></span><a></a></td>

<td id="nb-joif2deitem2"><span class="" style="display:block;"></span><table style="margin:auto; width:auto !important; border-spacing:0px;"><tr><td style="vertical-align:top"><div class=" nbsliderimg "><img src="img/ic?width=216&height=240&fsize=999000&format=jpg&url=pics%2Fyellowbox.png" alt="" id="nb-joif2deitem2img"></div></td></tr></table><span class="" style="display:block;"></span><a></a></td>

<td id="nb-joif2deitem3"><span class="" style="display:block;"> </span>…

Plus other mark-up languages including WML, cHTML (iMode), HDML, XHTML

view-source:http://m.netbiscuits.com/img/ic?width=216&height=240&fsize=999000&format=jpg&url=pics/redbox.png






view-source:http://m.netbiscuits.com/img/ic?width=216&height=240&fsize=999000&format=jpg&url=pics/yellowbox.png







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

Fragmentation


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>

"There is no single combination of containers and codecs that works in all HTML5 (supported) browsers" Source (Professor Markup: http://diveintohtml5.info/video.htmlv)

The 3 main challenges:

1. Video Codecs

2. Device HTML5 support

3. Device capabilities when handling video

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


!


In the beginning it was simple…

…then came more strong players

…and old 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 ? ? ?

It's all About Width & Height


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 TabletWe'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

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

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


1 + 1 = 3


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 SuccessNetbiscuits very successful with mobile websites

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

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

The 3rd Design Dimension: InteractingWe started to think about the 3rd Design Dimension, going beyond layout and pages


CBS launched their mobile site with rich video

playback, drop-down menu & more.


Problem Solved, Problems Created

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

To solve the biggest problem, we had to solve all the little problems too.


Designing for Multiple Screens


Tactile Core Features

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

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

Device Information ServicesDevice 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 FrameworkTactile 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

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.

Standard Mobile Site 'top down' approach transforms into Tactile Layouts

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 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

2 Views …


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 FlexItemsWidth 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

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

Layout Manager

MultiView

MultiView

ScrollView

ScrollViewViewOverlay

FlexView


BMW


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


Thank You

Stephan HauxDirector Product [email protected]@sthaux See Tactile in Action

Netbiscuitshttp://m.netbiscuits.com

mailto:[email protected]

http://m.netbiscuits.com/

2012 05-10 fia practical problems in mobile web final

Technology

Transcript of 2012 05-10 fia practical problems in mobile web final