Building Mobile Apps Matt Driscoll, Lloyd Heberlie @driskull @lheberlie Welcome • Introductions • Expectations • Agenda • Resources Why are we here? Mobile resources in the API Lloyd Heberlie Designing for mobile Lloyd Heberlie Touch aware map Geocoder, LocateButton esri/dijit/Geocoder esri/dijit/LocateButton Popup Mobile esri/dijit/PopupMobile Basemap Gallery esri/dijit/BasemapGallery Basemap Toggle esri/dijit/BasemapToggle Custom components Custom basemap switcher Designing for mobile Lloyd Heberlie Productivity and code management Lloyd Heberlie Setup a developer machine Code quality and verification web server Source Control Code formatting and management Automation and continuous integration Code validation • JSLint • JSHint CSS preprocessors Productivity and code management Lloyd Heberlie Debugging and testing for mobile Lloyd Heberlie Emulators / Simulators Opera Mobile Emulator iOS Simulator * Windows Phone Emulator * Android Emulator Physical devices http://blog.adtile.me/2014/01/08/adtile-device-lab/ Remote debugging • Safari Web Inspector Remote • Google Chrome remote debugging • Adobe Edge Inspect - Synchronized screen capture, device details - Node.js (weinre local) • Web Inspector Remote (weinre) Enable Safari remote web inspection Safari remote debugging Safari remote debugging Chrome remote debugging Chrome remote debugging Adobe Edge Inspect Adobe Edge Inspect Adobe Edge Inspect device_model = LGE Nexus 5 device_res = 1080x1776 device_model = iPhone device_model = iPad orientation = portrait device_res = 1136x640 device_res = 1024x768 os_name = Android orientation = portrait orientation = landscape os_version = 4.4.2 os_name = iOS os_name = iOS pixel_density = 480 dpi os_version = 7.0.4 os_version = 7.0.4 pixel_density = 326 ppi pixel_density = 132 ppi Debugging mobile Lloyd Heberlie Mobile Resources ArcGIS JavaScript API Types Of Resources • Widgets • Apps • Templates • Boilerplates • Code Snippets Mobile resources in the API Basemap Toggle esri/dijit/BasemapToggle Popup Mobile esri/dijit/PopupMobile Demo HTML5 APIs, tools, best practices HTML5 APIs for Mobile • Geolocation • Local Storage • Application Cache • Fullscreen • Video • Battery • Vibration HTML 5 input types type=“email” type=“tel” type=“date” Touch aware map Feature Detection • CanIUse.com • html5please.com Fixing IE8 • Respond.js - Support CSS3 Media Queries • Html5shiv - Support HTML5 sectioning elements Demo Design Guidelines Responsive Design • Designing a single web page/app that works well across a variety of devices and screen sizes • Re-use content and software • Considers - Device limitations - User’s behavior Components of Responsive Design 1. Media Queries 2. HTML5 3. CSS 4. JS Media Queries . Detect device screen size and orientation . Apply CSS at specific break points . Typical: 480px, 768px, 1024px, 1280px . Test with these, Make sure all work Mobile First Design • Simplest design first • Constrains • Makes you do research on what your users really need • Not the kitchen sink • Know target audience Screen Real Estate • Screen real estate • Determine what’s important Fluid Grid System • Layout adapts to different screen sizes • Based on percentages • 12 column Default Behavior Not scaling, not adapting Higher resolution device Lower resolution device Grid Layouts Vertical Stacking Horizontal Stacking No Stacking Vertical Stacking Responsive Web Frameworks Standardized set of HTML, CSS and JS • Bootstrap 3 • Foundation 3 • HTML5 • Skeleton • YAML 4 Icon Fonts, images, media queries, components… Full screen map app? • Pros - Can be embedded - More space to interact • Cons - No scroll The Hamburger Button UI Sketch Mockup Design Wireframes UI Sketches Iterative Design Design Evaluate Prototype Apps, Templates, Boilerplates Demo Tips & Tricks Device Orientation <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> @media all and (orientation:portrait) { /* Styles for Portrait screen */ } @media all and (orientation:landscape) { /* Styles for Landscape screen */ } Touch Friendly UI: Finger Targets Make sure your assets Scale • Icon Fonts • SVG • Multiple sizes of images Demo Final Notes • Write code once • Make your maps responsive • Know your device • Know you user • Reduce HTTP Requests • Avoid bulky modules/plugins Don’t re-invent the wheel! Mobile Resources Configuring the viewport | Guide | ArcGIS API for JavaScript Mobile popup | ArcGIS API for JavaScript Attribute editing - mobile | ArcGIS API for JavaScript Popup content in side panel | ArcGIS API for JavaScript Locate Button Fullscreen Dijit Esri/arcgis-dijit-sample-js Expand Map Button Dijit driskull/arcgis-dijit-expand-map-button-js http://localhost/git/application-boilerplate-js- drawer/application_boilerplate/ driskull/application-boilerplate-js-drawer ArcGIS API for JavaScript | Basic Search ArcGIS API for JavaScript | Search widget with multiple sources Esri/offline-editor-js Liquidapsive (Liqui-dap-sive) HTML5 Can I use... Support tables for HTML5, CSS3, etc HTML5 Please - Use the new and shiny responsibly Modernizr: the feature detection library for HTML5/CSS3 dojo/has — The Dojo Toolkit - Reference Guide dojo/touch — The Dojo Toolkit - Reference Guide dojox.gesture — The Dojo Toolkit - Reference Guide aFarkas/html5shiv scottjehl/Respond Apps Mobile Patterns Esri/bootstrap-map-js Bootstrap Map JS - Demos Esri/dojo-bootstrap-map-js Citizen Request Rate the GeoForm (Live) ArcGIS - Responsive Map Viewer Boilerplate Responsive Map Viewer - Demos Responsive Map Viewer Public Information Map ArcGIS Web App Templates Story Map Tour | Story Maps Namibia Road Trip Story Map Journal | Story Maps Explore a Tapestry of World Ecosystems US Wildfire Activity Gallery Tips Responsinator Fontello - icon fonts generator IcoMoon App - Icon Font & SVG Generator CSS Orientation - Hongkiat.com .