Responsive Mobile Design with Netbiscuits


Published on

Download the full white paper here:

Responsive design is a set of practices rather than a technology choice. This paper discusses responsive design for mobile devices and outlines how Netbiscuits’ technology complements and simplifies responsive design practices with specialization on mobile to enable customers as well as design and implementation partners to leverage our over 12 years of mobile platform innovation.

Working from the adage that there is no magic bullet in IT that solves every problem, Netbiscuits advocates combining techniques and technologies to achieve technology goals. The Netbiscuits Platform provides many practical tools, useful services and open standards that allow a combination of different strategies in order to create an optimal, scalable and cross platform mobile user experience.

In this document, we introduce a white paper by Stephan Haux, Head of Product Development at Netbiscuits, in which he shares the latest findings, best practices and recommendations from the world leading cloud service for device-agnostic web publishing.

If you want to find out more, you can download the free white paper here:

Published in: Technology
1 Comment
1 Like
  • Download the full white paper here:
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive Mobile Design with Netbiscuits

  1. 1. Be future friendly Be device agnostic!Responsive Design is a set of practices rather than a technology choice.Netbiscuits’ technology simplifies Responsive Design practices withspecialisation on mobile. We call it Responsive Mobile Design. 1
  2. 2. Content based on White Paper to come in September 2012. By Stephan Haux, Head of Product Development at Netbiscuits. 2
  3. 3. What is Responsive Design? • In May 2010, Boston designer Ethan Marcotte coined it in his article on “A List Apart”: "Mobile browsing is expected to outpace desktop-based access within three to five years (…). In short, were faced with a greater number of devices, input modes, and browsers than ever before (…) how can we - and our designs- adapt?" • The evolution of screen sizes  • Many web users are mobile only • 80+% of web users browse the internet on mobile 3
  4. 4. Mobile Forecasts2.1bn+ mobile devices with HTML5 browsers by 2016 4
  5. 5. Purpose of RMDResponsive Mobile Design focuses on solving three core issues:1. displaying the right sized images for a screen using CSS “media queries”; 2. developing one single layout that can self-adapt on the client-side for any browser, in many cases by reusing the desktop version of a site in the mobile realm using CSS; 3. hiding inappropriate content from devices that can’t display it using CSS and adaptive markup components.A stepstone towards the mythical One Web! 5
  6. 6. Reality CheckReality tells us three things:1. CSS and Javascript does not work uniformly on all OS/ browsers (HTML Standards issue)2. Adaptive markup assumes that devices have have uniform capabilities. Reality is massive hardware fragmentation in screen sizes, browser capabilities and processor speeds; 3. Higher implementation cost with building and maintenance effort through traditional implementation using the CSS3 and media query approach 6
  7. 7. The many faces of the little green robot Testing on 400+ Android devices that matter 7
  8. 8. 4,000 android flavours Source: Open Signal Maps 8
  9. 9. 4,000 android flavours Source: Open Signal Maps 9
  10. 10. 4,000 android flavours Source: Open Signal Maps 10
  11. 11. 4,000 android flavours Source: Open Signal Maps 11
  12. 12. 4,000 android flavours Source: Open Signal Maps 12
  13. 13. Necessity of RMDWhat stakeholders are expecting:1. For advertisers, responsive mobile website is the answer to keep costs low in long term2. For developers, responsive mobile website reduces work load by ensuring information integrity (update one website version and not multiple versions) and scalable functionality that works in cross devices3. For brand ambassadors, responsive mobile website is the answer (to help) keep the look-and-feel consistent in digital communication. 13
  14. 14. Necessity of RMDFrom a practical perspective:• To provide seamless windows Size management:  • On devices, windows are not resizable.  • But there are many screen sizes and aspect ratios• To manage display/orientation change • it happens all the time on mobile, never on desktop• To optimise media queries on the fly over 3G 14
  15. 15. Necessity of RMDTo handle various input methods in a mouse-less context• Keyboards• Track balls• Single touch screens (stylus devices, kiosk systems)• Multi-touch screens (smartphones + tablets)• Camera + Microphone (tablets, smart TV)• Haptic sensors• other still unknown features! 15
  16. 16. Nextgen devices? 16
  17. 17. Necessity of RMDTo address the specificities of Mobile Usage • Shorter attention span• Mono tasking requires responsive services• Couch & bed friendly ergonomics• Single handed mode (Thumb)• Short, focused, linear experience• Interface/Content caching between online/offline environments => Mobile UX/UI specialists wanted! 17
  18. 18. Best Practices• Hierarchy of Importance• Content First• Think Modules• Fluid Framework / In-content adaptation• Multi Touch / Gesture enabled• Responsive Environment Settings• Adaptive navigation• Seamless Browsing Experience=> Thats what we are capitalising and putting into ourtechnology. 18
  19. 19. Netbiscuits Approach• Netbiscuits aims to focus on addressing responsive design issues especially across mobile and multi- touch devices.• Netbiscuits is a SaaS platform which delivers all the components that is needed to build a responsive mobile experience: • Device adaptive Mark-Up (BiscuitML technology for device compatible code generation) • Device adaptive CSS and Javascript. We deliver just the right code payload • Media queries optimisation and caching 19
  20. 20. Netbiscuits Tactile FW• Netbiscuits has an integrated Tactile framework, an extension of the Netbiscuits platform, which is designed to bring out more from multi- touch enabled browsers on supported connected devices.• Components: • Layout Manager • An extensible Javascript Framework • A CSS Processor • Device Information Service • Extra features: • Image Scaler • Location Awareness 20
  21. 21. Benefits of RMD with• Framework = Responsive Mobile Design Made easy• Affordable and cost effective • Cloud = Scalability and sustainability• True and unprecedented device agnosticism • Fits with the SOA architecture of your Digital Delivery platform 21
  22. 22. How to?• Synch with your IT on ... • SOA Architecture (SAP & co layer) • Digital Delivery Platform = CMS layer + Rendering Engine• Define your multi-device strategy ... • Get UX specialists on board • Scope and plan your project roadmap• Execute with ... • best-in-class technology: Netbiscuits • top skills: Our solution partners 22
  23. 23. Thank You!Lucas Challamel - ANZ Country ManagerT: 04 1014 1795 - E: @netbiscuitsAPAC 23