Embed Size (px)
Citation preview
Building Mobile AppsMatt Driscoll, Lloyd Heberlie
@driskull @lheberlie
• Introductions• Expectations• Agenda• Resources
Welcome
Why are we here?
Lloyd Heberlie
Mobile resources in the API
Designing for mobileLloyd 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
Lloyd HeberlieDesigning for mobile
Productivity and code managementLloyd Heberlie
Setup a developer machine
Source Control
Code quality and verification
web server
Code formatting and management
Automation and continuous integration
• JSLint• JSHint
Code validation
CSS preprocessors
Lloyd Heberlie
Productivity and code management
Debugging and testing for mobileLloyd Heberlie
Emulators / SimulatorsOpera 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 = iPhonedevice_res = 1136x640orientation = portraitos_name = iOSos_version = 7.0.4pixel_density = 326 ppi
device_model = LGE Nexus 5device_res = 1080x1776orientation = portraitos_name = Androidos_version = 4.4.2pixel_density = 480 dpi
device_model = iPaddevice_res = 1024x768orientation = landscapeos_name = iOSos_version = 7.0.4pixel_density = 132 ppi
Lloyd HeberlieDebugging mobile
Mobile ResourcesArcGIS 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
HTML5APIs, 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 Queries2. HTML53. CSS4. 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 BehaviorNot scaling, not adapting
Higher resolution
device
Lower resolution device
Grid Layouts
Vertical Stacking
Vertical Stacking No StackingHorizontal Stacking
Responsive Web FrameworksStandardized 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
Wireframes
Sketches UI
Sketch Mockup UI Design
Iterative Design
Design
PrototypeEvaluate
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 ResourcesConfiguring the viewport | Guide | ArcGIS API for JavaScriptMobile popup | ArcGIS API for JavaScriptAttribute editing - mobile | ArcGIS API for JavaScriptPopup content in side panel | ArcGIS API for JavaScriptLocate ButtonFullscreen DijitEsri/arcgis-dijit-sample-jsExpand Map Button Dijitdriskull/arcgis-dijit-expand-map-button-jshttp://localhost/git/application-boilerplate-js-drawer/application_boilerplate/driskull/application-boilerplate-js-drawerArcGIS API for JavaScript | Basic SearchArcGIS API for JavaScript | Search widget with multiple sourcesEsri/offline-editor-jsLiquidapsive (Liqui-dap-sive)
HTML5Can I use... Support tables for HTML5, CSS3, etcHTML5 Please - Use the new and shiny responsiblyModernizr: the feature detection library for HTML5/CSS3dojo/has — The Dojo Toolkit - Reference Guidedojo/touch — The Dojo Toolkit - Reference Guidedojox.gesture — The Dojo Toolkit - Reference GuideaFarkas/html5shivscottjehl/Respond
AppsMobile PatternsEsri/bootstrap-map-jsBootstrap Map JS - DemosEsri/dojo-bootstrap-map-jsCitizen RequestRate the GeoForm (Live)ArcGIS - Responsive Map Viewer BoilerplateResponsive Map Viewer - DemosResponsive Map ViewerPublic Information MapArcGIS Web App TemplatesStory Map Tour | Story MapsNamibia Road TripStory Map Journal | Story MapsExplore a Tapestry of World EcosystemsUS Wildfire ActivityGalleryTipsResponsinatorFontello - icon fonts generatorIcoMoon App - Icon Font & SVG GeneratorCSS Orientation - Hongkiat.com
