IBM Worklight: Responsive Design for Mul8- Channel Applica8on Development

Transcription

1 IBM Worklight: Responsive Design for Mul8- Channel Applica8on Development

2 Please Note IBM s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM s sole discretion. Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion. Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user s job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.

3 Credits Gang Chen ISSW Tech Practice Lead for Mobile Christopher Mitchell STSM, IBM Multi-channel Strategy

4 Agenda Why Responsive Design Fluid Grid Flexible Images CSS Media Query Responsive Design Best Practice Beyond Responsive Design

5 Multi Form Factors Different Screen Sizes Different Screen Densities Different Input Methods Support for HTML5

6 Different Platform ios 4 and later Android 2.1 and later BlackBerry OS 5 and later Windows Phone 7 and later Modern browsers supporting HTML4, CSS2.1 and JavaScript 1.5 at a minimum Browsers supporting HTML5 and CSS3 ios 4.x and later Android 2.1 and later Win Gadgets: XP, Vista and 7, Mac Widgets: OSX 10 Facebook apps and igoogle gadgets Embedded as an iframe in web pages Browsers: IE 7and later, latest Chrome, Firefox and Safari

7 Substantially different screen sizes (iphone versus ipad)

8 Why Architectural Strategies Multi-channel rendering facilitate the rendering of multiple channels via Responsive Design, Feature Detection, and the Worklight Optimization framework. Mobile First Build on form factor (phone or tablet) as first channel. Extend to support other devices and form factors

9 Why Responsive Design (1 of 2) Ethan Marcotte coined the term responsive web design (RWD) in a May 2010 article in A List Part Responsive design ingredients: Fluid grid Responsive images CSS3 Media queries Design for the smallest viewport first and then progressively enhance the design and content for larger viewports. Do not use fixed width desktop site design

10 Why Responsive Design (2 of 2) Viewport is the content area within the browser window, excluding the toolbars, tabs, and so on. Minimum screen resolution cause clipped viewport Devices becoming smaller and larger simultaneously Small: Mobile devices, smart phones Large: Web gets into Game Console, TV Somewhere in between: Tablet We are designing for more: Devices Input type Resolution Landscape vs. Portrait Reduce development cost 30% ~ 50% less coding

11 For example

12 UX Design phase Responsive design pattern should be considered even in the early phase of User Interface/Experience (UX) design Design UX component that can be easily expand or subtracted. Etc. List, Grid Design/Wireframe one flow (use case) for multi-form factor (phone -> tablet) Prescriptive vs. Responsive design Prescriptive design: design targets specific device form factor without considering multi-channel or multi form factors. It ends up developing functional components for each device type or form factors Instead of reusing most of the existing component with Responsive Design Decide the major breakpoints smartphone <480px Tablets portrait <768px Tablets landscape >768px Desktop >1024px

13 Responsive Web Design Principals Fluid Grid Responsive Images CSS Media Queries

14 Fluid Grid (1 of 2) Avoid table-based layouts and pixels and use proportional-based layouts Elements scale relative to the viewport until one media query or another modifies the styling. Convert from fixed to proportional Step 1: Use outermost div as the context and set the percentage, i.e. width: 96% Step 2: Any inner div conversion is performed by dividing current div px with parent div px

15 Fluid Grid (2 of 2) How to design a responsive layout First float the content Each section uses percentage width (relative)

16 Fluid Grid font-size Set body font size to 100%, so later can use ems to size the font. Allows changing of different font sizes universally in the page Use em for font-size em is notation of the letter M, which is standard character to display text because it is the widest character Most of browser default size is 16px, use that as base for em calculation. Browser converts em to pixel internally Compounding effect: because it is relative to the font-size of the parent Modern desktop browsers use 16 px as the default font size font-size: 100% 16px 1em Use rem Introduced in CSS3 Root em relative to the root html element html { font-size: 100%; } h1 { font-size: 1.4rem; }

17 Responsive images Why - prevents images from exceeding the width of their container Max-width Discovered by Richard Rutter Use max-width : 100% Can be applied to: img, embed, object, video Alternative: overflow: hidden Make flexible background image background-size Immature browser support For information/content rich images Multi-resolution images img { max-width: 100%; }.sideblock img { max-width: 45%; }

18 CSS3 Media Query Applying rendering rules by inspecting devices and browser physical characteristics Apply generic styles at top of stylesheet and override with media queries 3 ways of applying Media screen and (orientation: portrait) <link rel="stylesheet" href= portrait.css media= screen and (orientation: portrait) url("portrait.css") screen (orientation: portrait); Two parts in a Media query: Type (screen) Query (orientation: portrait)

19 CSS3 Media Query It s all about test your browser and device: width, height, device-width, device-height (pay attention on differences between the browser viewport and device rendering surface) orientation aspect-ration, device-aspect-ratio color, color-index, monochrome resolution scan grid

20 CSS3 Media Query Media Query can be screen and (min-width: 480px) and (orientation: portrait) Set the viewport <meta name="viewport" content="width=320" /> First introduced by Apple in Mobile Safari Use it to control the rendering canvas size and override default behavior You want to get resolution-agnostic viewport (stops Mobile browsers from auto-resizing): <meta name="viewport" content="initial-scale=1.0, width=device-width" />

21 Mobile Device Orientation Change Need to design for orientation change CSS media query based Proper HTML mockup change (duplicate components for landscape, portrait) CSS Media Query is much faster in handling orientation change than JavaScript CSS Media Query following style will be screen and (orientation: portrait) { JavaScript can subscribe to following event: window.addeventlistener("orientationchange", function() {} Subscribing to orientation change event may still needed.

22 Best Practices (1 of 2) Start and stay with simple layout Basic HTML5 element A reset stylesheet (provide standard styling point across all browsers) Start the design figuring out the key breakpoints to support smartphone <480px Tablets portrait <768px Tablets landscape >768px Desktop >1024px Use smaller images and background repeat to decrease the size of the images Avoid separating styles into different stylesheets since it increases the number of requests to the server For production, minify/build css into single file

23 Best Practices (2 of 2) Set body font size to 100%, so later can use ems to size the font. <meta name="viewport" content="width=device-width"/> Create duplicate content to show and hide for orientation change Use relative size for block element Be aware of generated DOM nodes by JavaScript framework may need extra work to work with relative height

24 Beyond Responsive Design Responsive Design can t solve all the multi-channel challenges platform. Dramatic different design for Web vs. Mobile channel. Need for different landing page URL (m.mycompany.com) Alternatives to Responsive Design facade for component with different implementations on different devices Server side dynamic CSS using Sass

25 Environment Awareness Problems How to design user interfaces that can dynamically adapt to varying capabilities available on devices? Input methods (Keyboard, Touch, Mouse, Headtrack, etc.) Capabilities (SVG vs. Canvas, Camera/Video, Secure storage) How to allow different UI controls on different device types? How allow different UI controls to be used in different form factors, with very different behaviors (eg. Popover dialogs for tablet, slide-in overlays for phone) Keeping loaded JavaScript code limited to only what s needed

26 Environment Aware Conditional Loading A controller can perform feature detection, then dynamically load appropriate child controller module (or switch between views already loaded). This allows the controller to: Swap in different controls for different device types (Android/iOS/etc.) Swap in different controls for different form factors A similar technique can be used to dynamically load feature modules for Certain types of interaction, only when needed (eg. mouse or touch support)

27 Device Awareness and Feature Detection Process/Render different content based on device type and feature detection Inspecting the User-agent header property of HTTP request Mozilla/5.0 (iphone; CPU iphone OS 5_0_1 like Mac OS X) AppleWebKit/ (KHTML, like Gecko) Mobile/9A405 Device OS Browser Existing framework and API simplify the task Dojo dojo.has, dojox.mobile.devicetheme IBM Worklight - WL.Client.getEnvironment

28 IBM Worklight Technologies Environment Optimization Skin The Worklight application structure is divided into environment folders (iphone, Android, BlackBerry, and so on). Each environment folder contains the resources (CSS, JS, images, and so on) that are relevant for that specific environment. Customization can be made for a specific environment Skins provide support for multiple form factors in a single executable file for devices of the same OS family. Skins are a sub-variant of an environment. Skins are packaged together in one app. The decision on which skin to use is made automatically at runtime

29 Thank You

30 IBM Corporation

31 Legal Disclaimer IBM Corporation All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. If the text contains performance statistics or references to benchmarks, insert the following language; otherwise delete: Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here. If the text includes any customer examples, please confirm we have prior written approval from such customer and insert the following language; otherwise delete: All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. Please review text for proper trademark attribution of IBM products. At first use, each product name must be the full name and include appropriate trademark symbols (e.g., IBM Lotus Sametime Unyte ). Subsequent references can drop IBM but should include the proper branding (e.g., Lotus Sametime Gateway, or WebSphere Application Server). Please refer to for guidance on which trademarks require the or symbol. Do not use abbreviations for IBM product names in your presentation. All product names must be used as adjectives rather than nouns. Please list all of the trademarks that you use in your presentation as follows; delete any not included in your presentation. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both. If you reference Adobe in the text, please mark the first use and include the following; otherwise delete: Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries. If you reference Java in the text, please mark the first use and include the following; otherwise delete: Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. If you reference Microsoft and/or Windows in the text, please mark the first use and include the following, as applicable; otherwise delete: Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. If you reference Intel and/or any of the following Intel products in the text, please mark the first use and include those that you use as follows; otherwise delete: Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries. If you reference UNIX in the text, please mark the first use and include the following; otherwise delete: UNIX is a registered trademark of The Open Group in the United States and other countries. If you reference Linux in your presentation, please mark the first use and include the following; otherwise delete: Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others. If the text/graphics include screenshots, no actual IBM employee names may be used (even your own), if your screenshots include fictitious company names (e.g., Renovations, Zeta Bank, Acme) please update and insert the following; otherwise delete: All references to [insert fictitious company name] refer to a fictitious company and are used for illustration purposes only.