SlideShare a Scribd company logo
1 of 50
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

      May 11, 2012                                      © Netbiscuits GmbH 2012                                           3
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>


   May 11, 2012                                          © Netbiscuits GmbH 2012                                                            4
HTML5 & Mobile – a Dream team

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




  May 11, 2012             © Netbiscuits GmbH 2012   5
What is the Mobile Web?
HTML5 – Not all understand HTML at all!




    May 11, 2012                   © Netbiscuits GmbH 2011   6
They understand HTML
But no idea on HTML5




    May 11, 2012       © Netbiscuits GmbH 2011   7
Key fact on Mobile Internet




   May 11, 2012         © Netbiscuits GmbH 2012   8
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.


  May 11, 2012                   © Netbiscuits GmbH 2012                           9
Problem no.1
           Differences in browsers and the patchy HTML5 support




May 11, 2012                 © Netbiscuits GmbH 2012              10
Everything Except Green is a Problem!




   May 11, 2012         © Netbiscuits GmbH 2012   11
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/


    May 11, 2012                          © Netbiscuits GmbH 2012                                            12
"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




May 11, 2012                       © Netbiscuits GmbH 2012   13
Problem no.2
          Designing for a world with multiple device categories




May 11, 2012                 © Netbiscuits GmbH 2012              14
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            ?                         ?              ?

   May 11, 2012                           © Netbiscuits GmbH 2012                          15
Problem No.3
           Let's go Multi-device Shopping




May 11, 2012                  © Netbiscuits GmbH 2012   16
Problems 1 & 2 Create Problem No.3

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




  May 11, 2012                  © Netbiscuits GmbH 2012   17
Problem No.4
           Tablet: More than Screen factor




May 11, 2012                  © Netbiscuits GmbH 2012   18
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!



    May 11, 2012              © Netbiscuits GmbH 2012                 19
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

   May 11, 2012             © Netbiscuits GmbH 2012              20
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


       May 11, 2012                                         © Netbiscuits GmbH 2012                                                          21
Frameworks
   HTML, JavaScript, SDK?




May 11, 2012                © Netbiscuits GmbH 2012   22
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!


  May 11, 2012         © Netbiscuits GmbH 2012                        23
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

  May 11, 2012          © Netbiscuits GmbH 2012               24
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




  May 11, 2012                   © Netbiscuits GmbH 2012                      25
BACKUP SLIDES




  May 11, 2012   © Netbiscuits GmbH 2012   26
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.

  May 11, 2012                 © Netbiscuits GmbH 2012                       27
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



    May 11, 2012                      © Netbiscuits GmbH 2012                28
Designing for Multiple Screens




   May 11, 2012         © Netbiscuits GmbH 2012   29
May 11, 2012   © Netbiscuits GmbH 2012   30
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.
   May 11, 2012                     © Netbiscuits GmbH 2012                       31
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.

  May 11, 2012                © Netbiscuits GmbH 2012               32
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



     May 11, 2012                 © Netbiscuits GmbH 2012                        33
Ease of Development




                 Tactile Mark-up,
                 only 70 lines.


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



  May 11, 2012                 © Netbiscuits GmbH 2012   34
A Closer Look at Tactile




May 11, 2012         © Netbiscuits GmbH 2012   35
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

   May 11, 2012                 © Netbiscuits GmbH 2012                36
Tactile Events & Effects




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


      May 11, 2012                                                 © Netbiscuits GmbH 2012   37
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

     May 11, 2012                               © Netbiscuits GmbH 2012    38
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


    May 11, 2012                         © Netbiscuits GmbH 2011                               39
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


  May 11, 2012                © Netbiscuits GmbH 2011                             40
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


  May 11, 2012             © Netbiscuits GmbH 2011                         41
Toyota




  May 11, 2012   © Netbiscuits GmbH 2012   42
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




     May 11, 2012                             © Netbiscuits GmbH 2011                          43
The Daily Show Digest




  May 11, 2012          © Netbiscuits GmbH 2012   44
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


  May 11, 2012              © Netbiscuits GmbH 2011                          45
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




   May 11, 2012    © Netbiscuits GmbH 2012                  46
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

    May 11, 2012                     © Netbiscuits GmbH 2012      47
BMW




 May 11, 2012   © Netbiscuits GmbH 2012   48
"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




May 11, 2012                     © Netbiscuits GmbH 2012                  49
Thank You

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




  May 11, 2012           © Netbiscuits GmbH 2012                              50

More Related Content

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

CNUG ASP.NET MVC 4 – New Features
CNUG ASP.NET MVC 4 – New FeaturesCNUG ASP.NET MVC 4 – New Features
CNUG ASP.NET MVC 4 – New Features
Mayank Srivastava
 
Coding for Desktop and Mobile with HTML5 and Java EE 7
Coding for Desktop and Mobile with HTML5 and Java EE 7Coding for Desktop and Mobile with HTML5 and Java EE 7
Coding for Desktop and Mobile with HTML5 and Java EE 7
Petr Jiricka
 
Porting experience - by Golden Gekko
Porting experience - by Golden GekkoPorting experience - by Golden Gekko
Porting experience - by Golden Gekko
Vodafone developer
 

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

Mobile Development Challenges
Mobile Development ChallengesMobile Development Challenges
Mobile Development Challenges
 
Duncan hallas netbiscuits mobile publishing masterclass
Duncan hallas netbiscuits mobile publishing masterclassDuncan hallas netbiscuits mobile publishing masterclass
Duncan hallas netbiscuits mobile publishing masterclass
 
Group link 2ndsession-gwava_con2012
Group link 2ndsession-gwava_con2012Group link 2ndsession-gwava_con2012
Group link 2ndsession-gwava_con2012
 
Html5 data viz
Html5 data vizHtml5 data viz
Html5 data viz
 
Basics of WRT (Web Runtime)
Basics of WRT (Web Runtime)Basics of WRT (Web Runtime)
Basics of WRT (Web Runtime)
 
Best Practices for Moving to Drupal 9
Best Practices for Moving to Drupal 9Best Practices for Moving to Drupal 9
Best Practices for Moving to Drupal 9
 
CNUG ASP.NET MVC 4 – New Features
CNUG ASP.NET MVC 4 – New FeaturesCNUG ASP.NET MVC 4 – New Features
CNUG ASP.NET MVC 4 – New Features
 
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issuesMaximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
Maximising Online Resource Effectiveness Workshop Session 3/8 Priority issues
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
Basics of web runtime
Basics of web runtimeBasics of web runtime
Basics of web runtime
 
The State of Drupal 8
The State of Drupal 8The State of Drupal 8
The State of Drupal 8
 
Adobe & HTML5
Adobe & HTML5Adobe & HTML5
Adobe & HTML5
 
Coding for Desktop and Mobile with HTML5 and Java EE 7
Coding for Desktop and Mobile with HTML5 and Java EE 7Coding for Desktop and Mobile with HTML5 and Java EE 7
Coding for Desktop and Mobile with HTML5 and Java EE 7
 
Using Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino AppsUsing Cool New Frameworks in (Mobile) Domino Apps
Using Cool New Frameworks in (Mobile) Domino Apps
 
Mat Marquis - JQuery Mobile
Mat Marquis - JQuery MobileMat Marquis - JQuery Mobile
Mat Marquis - JQuery Mobile
 
Vodafone 360 - Porting Experience
Vodafone 360 - Porting  ExperienceVodafone 360 - Porting  Experience
Vodafone 360 - Porting Experience
 
Porting experience - by Golden Gekko
Porting experience - by Golden GekkoPorting experience - by Golden Gekko
Porting experience - by Golden Gekko
 
Mobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery MobileMobile Apps with PhoneGap and jQuery Mobile
Mobile Apps with PhoneGap and jQuery Mobile
 

Recently uploaded

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 

Recently uploaded (20)

Using IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & IrelandUsing IESVE for Room Loads Analysis - UK & Ireland
Using IESVE for Room Loads Analysis - UK & Ireland
 
WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024WebRTC and SIP not just audio and video @ OpenSIPS 2024
WebRTC and SIP not just audio and video @ OpenSIPS 2024
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024Long journey of Ruby Standard library at RubyKaigi 2024
Long journey of Ruby Standard library at RubyKaigi 2024
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdfThe Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
The Value of Certifying Products for FDO _ Paul at FIDO Alliance.pdf
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
WebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM PerformanceWebAssembly is Key to Better LLM Performance
WebAssembly is Key to Better LLM Performance
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Oauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoftOauth 2.0 Introduction and Flows with MuleSoft
Oauth 2.0 Introduction and Flows with MuleSoft
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
Choosing the Right FDO Deployment Model for Your Application _ Geoffrey at In...
 

2012 05-10 fia practical problems in mobile web final

  • 1. Practical problems in mobile web … … And ways to address them Stephan Haux Director Product Management Netbiscuits May 11, 2012 © Netbiscuits GmbH 2012 1
  • 2. 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
  • 3. 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 May 11, 2012 © Netbiscuits GmbH 2012 3
  • 4. 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> May 11, 2012 © Netbiscuits GmbH 2012 4
  • 5. HTML5 & Mobile – a Dream team Key Promises  Local Web Applications / Local Storage  Rich Internet Features  Accessing the Device Information May 11, 2012 © Netbiscuits GmbH 2012 5
  • 6. What is the Mobile Web? HTML5 – Not all understand HTML at all! May 11, 2012 © Netbiscuits GmbH 2011 6
  • 7. They understand HTML But no idea on HTML5 May 11, 2012 © Netbiscuits GmbH 2011 7
  • 8. Key fact on Mobile Internet May 11, 2012 © Netbiscuits GmbH 2012 8
  • 9. 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. May 11, 2012 © Netbiscuits GmbH 2012 9
  • 10. Problem no.1 Differences in browsers and the patchy HTML5 support May 11, 2012 © Netbiscuits GmbH 2012 10
  • 11. Everything Except Green is a Problem! May 11, 2012 © Netbiscuits GmbH 2012 11
  • 12. 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/ May 11, 2012 © Netbiscuits GmbH 2012 12
  • 13. "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 May 11, 2012 © Netbiscuits GmbH 2012 13
  • 14. Problem no.2 Designing for a world with multiple device categories May 11, 2012 © Netbiscuits GmbH 2012 14
  • 15. 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 ? ? ? May 11, 2012 © Netbiscuits GmbH 2012 15
  • 16. Problem No.3 Let's go Multi-device Shopping May 11, 2012 © Netbiscuits GmbH 2012 16
  • 17. Problems 1 & 2 Create Problem No.3  The technology spaghetti  Screens  Content Types  Different Code  Features & Functions  Business Logic  Maintenance & Support May 11, 2012 © Netbiscuits GmbH 2012 17
  • 18. Problem No.4 Tablet: More than Screen factor May 11, 2012 © Netbiscuits GmbH 2012 18
  • 19. 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! May 11, 2012 © Netbiscuits GmbH 2012 19
  • 20. 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 May 11, 2012 © Netbiscuits GmbH 2012 20
  • 21. 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 May 11, 2012 © Netbiscuits GmbH 2012 21
  • 22. Frameworks HTML, JavaScript, SDK? May 11, 2012 © Netbiscuits GmbH 2012 22
  • 23. 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! May 11, 2012 © Netbiscuits GmbH 2012 23
  • 24. 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 May 11, 2012 © Netbiscuits GmbH 2012 24
  • 25. 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 May 11, 2012 © Netbiscuits GmbH 2012 25
  • 26. BACKUP SLIDES May 11, 2012 © Netbiscuits GmbH 2012 26
  • 27. 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. May 11, 2012 © Netbiscuits GmbH 2012 27
  • 28. 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 May 11, 2012 © Netbiscuits GmbH 2012 28
  • 29. Designing for Multiple Screens May 11, 2012 © Netbiscuits GmbH 2012 29
  • 30. May 11, 2012 © Netbiscuits GmbH 2012 30
  • 31. 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. May 11, 2012 © Netbiscuits GmbH 2012 31
  • 32. 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. May 11, 2012 © Netbiscuits GmbH 2012 32
  • 33. 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 May 11, 2012 © Netbiscuits GmbH 2012 33
  • 34. Ease of Development Tactile Mark-up, only 70 lines. The same page written with HTML and CSS, over 300 lines! May 11, 2012 © Netbiscuits GmbH 2012 34
  • 35. A Closer Look at Tactile May 11, 2012 © Netbiscuits GmbH 2012 35
  • 36. 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 May 11, 2012 © Netbiscuits GmbH 2012 36
  • 37. Tactile Events & Effects http://www.lukew.com/touch/TouchGestureCards.pdf * Items with grey background are part of the beta and already abstracted May 11, 2012 © Netbiscuits GmbH 2012 37
  • 38. 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 May 11, 2012 © Netbiscuits GmbH 2012 38
  • 39. 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 May 11, 2012 © Netbiscuits GmbH 2011 39
  • 40. 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 May 11, 2012 © Netbiscuits GmbH 2011 40
  • 41. 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 May 11, 2012 © Netbiscuits GmbH 2011 41
  • 42. Toyota May 11, 2012 © Netbiscuits GmbH 2012 42
  • 43. 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 May 11, 2012 © Netbiscuits GmbH 2011 43
  • 44. The Daily Show Digest May 11, 2012 © Netbiscuits GmbH 2012 44
  • 45. 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 May 11, 2012 © Netbiscuits GmbH 2011 45
  • 46. 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 May 11, 2012 © Netbiscuits GmbH 2012 46
  • 47. 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 May 11, 2012 © Netbiscuits GmbH 2012 47
  • 48. BMW May 11, 2012 © Netbiscuits GmbH 2012 48
  • 49. "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 May 11, 2012 © Netbiscuits GmbH 2012 49
  • 50. Thank You Stephan Haux Director Product Management s.haux@netbiscuits.com @sthaux See Tactile in Action Netbiscuits http://m.netbiscuits.com May 11, 2012 © Netbiscuits GmbH 2012 50

Editor's Notes

  1. BiscuitML is an XML based mark-up language that has been used for many years to build mobile web pages on the Netbiscuits PlatformBiscuitML defines the structure of a page through use of &quot;Biscuits&quot;, which create segments of a page. Each Biscuit has a predefined structure that can be configured as neededIt has always been possible to use other languages within BiscuitML including JSP, ASP.NET, PHP and static XML filesIn addition you can use your existing web application IDE (e.g. Eclipse, Visual Studio)
  2. Rich UI capabilities:Phone FamiliesAction and Event HandlingEnabled Custom ScriptingEnhanced Functionality including Geolocation and Image GalleriesThis really opened a can of worms - This increased ability to &apos;do stuff&apos; slashed development costs for our customers, however it meant their desire to develop interactive sites for Smartphones skyrocketed!
  3. With the support and structure of a platform that understands the devices, the video formats and delivery capabilities you can still use &lt;video&gt; and know it will workNeed: One Tag for all
  4. Very recently there has been a study that many US citizen already have 3 connected devices.
  5. Will have demo device example which literally switches from a PC to a tablet
  6. The commands are changing and so is the displayChecov sitting infront of the panel and is “engaging”. His two fingers move up a screen, sounds comes and certainly on the right something is changing colors etc.UI Building BlocksTablet size multi touch screenColored squaresChanging color on swipehttp://kooltvblog.blogspot.com/2011/05/space-odyssey-star-trek-season-two.html?z#!/2011/05/space-odyssey-star-trek-season-two.html
  7. iPad launched April 2010
  8. Barely linking: Use the camera example, simple Geocoordinates