2012 05-10 fia practical problems in mobile web final


Published on

Published in: Technology, Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • 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 "Biscuits", 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)
  • 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 'do stuff' slashed development costs for our customers, however it meant their desire to develop interactive sites for Smartphones skyrocketed!
  • With the support and structure of a platform that understands the devices, the video formats and delivery capabilities you can still use <video> and know it will workNeed: One Tag for all
  • Very recently there has been a study that many US citizen already have 3 connected devices.
  • Will have demo device example which literally switches from a PC to a tablet
  • 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
  • iPad launched April 2010
  • Barely linking: Use the camera example, simple Geocoordinates
  • 2012 05-10 fia practical problems in mobile web final

    1. 1. Practical problems in mobile web … … And ways to address them Stephan Haux Director Product Management NetbiscuitsMay 11, 2012 © Netbiscuits GmbH 2012 1
    2. 2. Agenda  Who is Netbiscuits HTML5  Looking at the Mobile Internet"If you look at 100  The Parallel Experiencedifferent devices,  Ways to address themyou’ll find 100different versions" Brett Taylor, CTO of Facebook, talking about HTML5 on mobile devices February 27, 2012 May 11, 2012 © Netbiscuits GmbH 2012 Slide 2
    3. 3. Who is Netbiscuits?Community of over 15,000 developers ME Awards 2011, won for the second time since 2009 Best Mobile Web Publishing Platform120 9.6 Gartner 2011 MCAP Magic Quadrant ranks Netbiscuits Visionary with highest ability to executemillion Videos delivered/month billion Pages & content items delivered/month Frost & Sullivan European Best Practice Awards 2011 Best Mobile Apps Deployment Platform27,000Sites & apps live and Doubled in the last 12 monthsgrowing by 500/month CBS.com mobile site built on Netbiscuits Platform wins Meffys & Eppy Awards Best Mobile Site8,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. 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. 5. HTML5 & Mobile – a Dream teamKey Promises Local Web Applications / Local Storage Rich Internet Features Accessing the Device Information May 11, 2012 © Netbiscuits GmbH 2012 5
    6. 6. What is the Mobile Web?HTML5 – Not all understand HTML at all! May 11, 2012 © Netbiscuits GmbH 2011 6
    7. 7. They understand HTMLBut no idea on HTML5 May 11, 2012 © Netbiscuits GmbH 2011 7
    8. 8. Key fact on Mobile Internet May 11, 2012 © Netbiscuits GmbH 2012 8
    9. 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 standardSo we decided to further develop our platform tosupport 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. 10. Problem no.1 Differences in browsers and the patchy HTML5 supportMay 11, 2012 © Netbiscuits GmbH 2012 10
    11. 11. Everything Except Green is a Problem! May 11, 2012 © Netbiscuits GmbH 2012 11
    12. 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. 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.infoMay 11, 2012 © Netbiscuits GmbH 2012 13
    14. 14. Problem no.2 Designing for a world with multiple device categoriesMay 11, 2012 © Netbiscuits GmbH 2012 14
    15. 15. Its 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. 16. Problem No.3 Lets go Multi-device ShoppingMay 11, 2012 © Netbiscuits GmbH 2012 16
    17. 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. 18. Problem No.4 Tablet: More than Screen factorMay 11, 2012 © Netbiscuits GmbH 2012 18
    19. 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 ParallelWeb + Smartphone doesnt equal TabletWeve lived in a sequential world… Smartphone and PC is sequential,but now we have an added dimension. Tablets are the parallel worldto the sequential world we know! May 11, 2012 © Netbiscuits GmbH 2012 19
    20. 20. Melting Pot: Tablets1+1=3 Web: Layout and real estate on screen+ Smartphone: Multi dimensional User Experience= Subset of TabletEndless vs Limited Real EstateTabletHorizontal and vertical one finger swipe makes 1024 x 768 an endlesscanvas enabling parallel experiencesSmartphoneThe same is difficult to replicate on a multi touch smartphone as ausers hand hides display meaning it can only offer a sequentialexperience May 11, 2012 © Netbiscuits GmbH 2012 20
    21. 21. Chekov’s Console – The Parallel ExperienceSource: 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. 22. Frameworks HTML, JavaScript, SDK?May 11, 2012 © Netbiscuits GmbH 2012 22
    23. 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. 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. 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. 26. BACKUP SLIDES May 11, 2012 © Netbiscuits GmbH 2012 26
    27. 27. 2010 – Beginning the Next GenerationMobile Web SuccessNetbiscuits very successful with mobile websitesGoing MainstreamSmartphones became mainstream and phoneswere divided into Feature and SmartphonesScripts for the Small ScreenIncreasing number of projects included scriptingwith smaller screens supporting interactivefeaturesThe 3rd Design Dimension: InteractingWe started to think about the 3rd Design CBS launched their mobileDimension, going beyond layout and pages site with rich video playback, drop-down menu & more. May 11, 2012 © Netbiscuits GmbH 2012 27
    28. 28. Problem Solved, Problems CreatedTo 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. 29. Designing for Multiple Screens May 11, 2012 © Netbiscuits GmbH 2012 29
    30. 30. May 11, 2012 © Netbiscuits GmbH 2012 30
    31. 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. 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 todays connected world. May 11, 2012 © Netbiscuits GmbH 2012 32
    33. 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. 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. 35. A Closer Look at TactileMay 11, 2012 © Netbiscuits GmbH 2012 35
    36. 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. 37. Tactile Events & Effectshttp://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. 38. Tactile Multi-device LayoutsStandard 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. 39. Introduction ViewsWrappers 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. 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. 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. 42. Toyota May 11, 2012 © Netbiscuits GmbH 2012 42
    43. 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. 44. The Daily Show Digest May 11, 2012 © Netbiscuits GmbH 2012 44
    45. 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. 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. 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. 48. BMW May 11, 2012 © Netbiscuits GmbH 2012 48
    49. 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, 2012May 11, 2012 © Netbiscuits GmbH 2012 49
    50. 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