Presentation is loading. Please wait.

Presentation is loading. Please wait.

© 2012 DigitalDay | www.Digital-Day.com Mobile Development March 29, 2012 1.

Published byLetitia Tyler Modified over 8 years ago

Similar presentations

Presentation on theme: "© 2012 DigitalDay | www.Digital-Day.com Mobile Development March 29, 2012 1."— Presentation transcript:

1 © 2012 DigitalDay | www.Digital-Day.com Mobile Development March 29, 2012 1

2 © 2012 DigitalDay | www.Digital-Day.com Have a mobile device? Take a test drive on our demo mobile site – http://digital-day.com/workshop/mobile/presentation/ http://digital-day.com/workshop/mobile/presentation/ 2

3 © 2012 DigitalDay | www.Digital-Day.com What we’ll discuss 1.Mobile Platforms 2.Mobile Development Considerations 3.Mobile Development Techniques 3

4 © 2012 DigitalDay | www.Digital-Day.com MOBILE PLATFORMS 4

5 © 2012 DigitalDay | www.Digital-Day.com Mobile Differs from Desktop Just like on the desktop there are various browsers and operating system platforms to account for. On top of browser and operating systems are hardware configurations that vary from device to device 5

6 © 2012 DigitalDay | www.Digital-Day.com Mobile Differs from Desktop Popular mobile operating systems Include: iOS, Android, Windows Mobile and Blackberry. Popular mobile browsers include: Safari, Webkit, Opera, Firefox (Fennec) and Internet Explorer 6

7 © 2012 DigitalDay | www.Digital-Day.com Mobile Handset Trends In the U.S., the BlackBerry Curve 8530 took the #4 spot despite RIM shedding a significant portion of its smartphone share throughout 2011. The HTC – EVO 4G secured the #5 slot and was the only device in the top 5 running the Android operating system. 7

8 © 2012 DigitalDay | www.Digital-Day.com MOBILE DEVELOPMENT CONSIDERATIONS 8

9 © 2012 DigitalDay | www.Digital-Day.com Mobile Website Development Considerations Small screen size Performance: – Data / Internet Connection WiFi or Cellular Load time – Hardware and phone features Location and usage – Context of where mobile is accessed 9

10 © 2012 DigitalDay | www.Digital-Day.com Common Website Architecture 10

11 © 2012 DigitalDay | www.Digital-Day.com Multi-Platform Architecture 11

12 © 2012 DigitalDay | www.Digital-Day.com Common APIs 12

13 © 2012 DigitalDay | www.Digital-Day.com Getting Started with Development Developing mobile websites/apps is similar to developing a desktop website. Most text editors can be used to construct HTML code used to develop the site. – Notepad, Notepad++, Visual Studio, Aptana, Coda, TextMate, BBEdit, Text Wrangler, Dreamweaver, X- code… insert your favorite text editor here. Adobe Dreamweaver CS5.5 includes support for jQuery Mobile framework 13

14 © 2012 DigitalDay | www.Digital-Day.com MOBILE DEVELOPMENT TECHNIQUES 14

15 © 2012 DigitalDay | www.Digital-Day.com Mobile Development Techniques Viewport meta tag HTML5/CSS3 Em/percentages vs. pixel (responsive-ish) Incorporating video JavaScript frameworks Testing tools Performance and optimization 15

16 © 2012 DigitalDay | www.Digital-Day.com What’s a Viewport? Viewport meta tag is a valuable addition for any mobile website. Most common viewport setting to use is: Without a viewport set the browser will think the width to display is the desktop version of what the page would be and will appear to be zoomed out. 16

17 © 2012 DigitalDay | www.Digital-Day.com iOS Safari Viewport Scaling Bug iOS Safari has a scaling bug when rotating device. Additional settings applied to viewport can remedy bug. 17 Web Designer Wall

18 © 2012 DigitalDay | www.Digital-Day.com Setting the zoom This setting is bad for accessibility as it prevents the ability to zoom on a page. 18

19 © 2012 DigitalDay | www.Digital-Day.com Viewport Set with JavaScript Fix 19 Setting viewport with “width=device-width” and use of JavaScript fixes iOS bug with scaling on orientation change.

20 © 2012 DigitalDay | www.Digital-Day.com HTML5 and CSS3 Use new CSS3 properties for rounded corners, gradients and shadows – rely less on graphics Location based ability with HTML5 APIs and JavaScript Reduce the use of images where possible Use image sprites where you can to help reduce additional HTTP requests – a good practice to use with desktop web development as well. 20 Target.com Find Store on Mobile Safari

21 © 2012 DigitalDay | www.Digital-Day.com What’s a sprite? An image sprite is a way to group backgrounds images into one image and using CSS ‘background-position’ property to select the correct image 21 Duck Tape’s Stuck at Prom

22 © 2012 DigitalDay | www.Digital-Day.com HTML5 today The framework’s standards are in flux It’s not fully supported What it allows now: – GPS Access – Video – Updated form handling Email, URL, Phone, Date What it will enable: – Camera access – Printing – Storage/uploading files – Everything that Flash can do 22 Fabian Pimminger

23 © 2012 DigitalDay | www.Digital-Day.com Build Responsively – “Think Fluidly” Use EM/Percentages instead of pixels to achieve a desired look across various devices and resolutions Target / context = result (300px / 960px = 31.25%) 23 Think Vitamin

24 © 2012 DigitalDay | www.Digital-Day.com Developing for Mobile Video 3 options to display mobile video: 1.YouTube 2.HTML5/JWPlayer 3.File download (booo) 24

25 © 2012 DigitalDay | www.Digital-Day.com Developing for Mobile Video Capabilities Vary by Device – YouTube opens app – JWPlayer plays in the browser for Android – iPhone & iPod open in a video player 25 iPad Video Playback

26 © 2012 DigitalDay | www.Digital-Day.com Developing for Mobile Video How to serve a video 1.Streaming Services (optimal) 2.File download 3.YouTube-like services 26

27 © 2012 DigitalDay | www.Digital-Day.com Mobile Frameworks 1.jQTouch 2.Sencha Touch 3.jQuery Mobile 27

28 © 2012 DigitalDay | www.Digital-Day.com Frameworks -- jQTouch jQTouch - http://jqtouch.com/ – One of the first JavaScript Frameworks – jQuery plugin – Webkit browsers are the main focus 28

29 © 2012 DigitalDay | www.Digital-Day.com Frameworks – Sencha Sencha Touch - http://www.sencha.com/products/touch – Now freely available for commercial use – Huge learning curve in development – Most code/configuration are in the form of javascript API calls, no “real” HTML code – Can be used to create native mobile apps – Geared towards latest mobile browsers/devices – Webkit browsers are the main focus 29

30 © 2012 DigitalDay | www.Digital-Day.com Frameworks – jQuery Mobile jQuery Mobile - http://jquerymobile.com – Easier to implement – Broad range of support with fallbacks in place – More browser support than just Webkit – An extension of the jQuery core frameworks 30

31 © 2012 DigitalDay | www.Digital-Day.com Frameworks – and JavaScript JavaScript frameworks add the ability to do additional capabilities for a mobile website to feel just like an app. However, Frameworks are not necessary to achieve a mobile website – they give use to additional functionality. 31

32 © 2012 DigitalDay | www.Digital-Day.com Testing Resources & Emulators Adobe Device Central – http://www.adobe.com/products/devicecentral.html?promoid=GFTDD http://www.adobe.com/products/devicecentral.html?promoid=GFTDD Ripple Emulator – http://ripple.tinyhippos.com/ http://ripple.tinyhippos.com/ Fennec Emulator - Mobile Firefox – http://www.mozilla.org/en-US/mobile/ http://www.mozilla.org/en-US/mobile/ Firefox User Agent Switcher Extensions – http://chrispederick.com/work/user-agent-switcher/ http://chrispederick.com/work/user-agent-switcher/ – https://addons.mozilla.org/en-US/firefox/addon/user-agent-rg/?src=api https://addons.mozilla.org/en-US/firefox/addon/user-agent-rg/?src=api Chrome User Agent Chooser Extension – https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US&gl=US https://chrome.google.com/webstore/detail/djflhoibgkdhkhhcedjiklpkjnoahfmg?hl=en-US&gl=US Safari with User Agent set to iPhone/iPad – http://www.apple.com/safari/ http://www.apple.com/safari/ Opera Mobile Emulator – http://www.opera.com/mobile/download/ http://www.opera.com/mobile/download/ 32

33 © 2012 DigitalDay | www.Digital-Day.com Testing Resources & Emulators Blackberry Simulator – http://us.blackberry.com/developers/resources/simulators.jsp http://us.blackberry.com/developers/resources/simulators.jsp Windows Phone 7 Emulator – http://www.microsoft.com/visualstudio/en-us/products/2010-editions/windows-phone-developer-tools http://www.microsoft.com/visualstudio/en-us/products/2010-editions/windows-phone-developer-tools Android SDK Emulator – http://developer.android.com/sdk/index.html http://developer.android.com/sdk/index.html iOS Simulator – https://developer.apple.com/devcenter/ios/index.action https://developer.apple.com/devcenter/ios/index.action Perfecto Mobile (pay by the hour) – http://www.perfectomobile.com http://www.perfectomobile.com 33

34 © 2012 DigitalDay | www.Digital-Day.com Testing No better way to test than on the actual device itself 34 jQuery Mobile

35 © 2012 DigitalDay | www.Digital-Day.com Performance and Optimization Reduce HTTP requests Minify HTML, JavaScript and CSS to reduce load Asynchronous Loading 35 Page speed tests – Google’s web app as a base for testing Blaze Mobile Performance Tests – (http://www.blaze.io/mobile )http://www.blaze.io/mobile

36 © 2012 DigitalDay | www.Digital-Day.com Our recommended minimum platform standards If, primary/only market is North America: 1.iOS 4.x+ 2.Android 2.1 If market is international, consider: 1.SymbianOS 2.iOS 4.x+ 3.Android 2.1 Optional depending on business needs and market analysis: – Blackberry – Opera 36

Download ppt "© 2012 DigitalDay | www.Digital-Day.com Mobile Development March 29, 2012 1."

Similar presentations

HTML5 for Data Visualisation

HTML5 for Data Visualisation
Facts about Welcome to this video from Ozeki. In this video I will present what makes Ozeki Phone System XE the Worlds best on-site software PBX for Windows.

Facts about Welcome to this video from Ozeki. In this video I will present what makes Ozeki Phone System XE the Worlds best on-site software PBX for Windows.
Archana Mandape. 234 million Wireless subscriptions in USA. Many players in the smart phone market. Apple iPhone OS, RIM BlackBerry OS and Android OS.

Archana Mandape. 234 million Wireless subscriptions in USA. Many players in the smart phone market. Apple iPhone OS, RIM BlackBerry OS and Android OS.
DotNetNuke Mobile Development -- options, tools and approaches

DotNetNuke Mobile Development -- options, tools and approaches
Kinesis Survey Technologies Kinesis Webinar January 8 & 9, 2014 Mobile Testing - Best Practices.

Kinesis Survey Technologies Kinesis Webinar January 8 & 9, 2014 Mobile Testing - Best Practices.
Cross Platform Mobile application development HTML5 and JavaScript Chris Connor.

Cross Platform Mobile application development HTML5 and JavaScript Chris Connor.
Mobile Application Development

Mobile Application Development
V1.00 © 2009 Research In Motion Limited Introduction to Mobile Device Web Development Trainer name Date.

V1.00 © 2009 Research In Motion Limited Introduction to Mobile Device Web Development Trainer name Date.
Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.

Chapter 1 Getting Started With Dreamweaver. Explore the Dreamweaver Workspace The Dreamweaver workspace is where you can find all the tools to create.
Developing Content for Mobile Devices Larry D. Lee Web Developer for K4Health.

Developing Content for Mobile Devices Larry D. Lee Web Developer for K4Health.
Responsive Web Design Design websites so that they can adapt to different devices seamlessly. Image by Muhammed RafizeldiMuhammed Rafizeldi.

Responsive Web Design Design websites so that they can adapt to different devices seamlessly. Image by Muhammed RafizeldiMuhammed Rafizeldi.
Desktop and Mobile Testing Miroslav Shtilianov QA Engineer Automated Testing Team Telerik QA Academy

Desktop and Mobile Testing Miroslav Shtilianov QA Engineer Automated Testing Team Telerik QA Academy
 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.

 jQuery Mobile An Introduction. What is jQuery Mobile  A framework built on top of jQuery, used for creating mobile web applications  Designed to make.
Tivoli Software © 2010 IBM Corporation Maximo Everyplace 7.1.1 Lori Landesman.

Tivoli Software © 2010 IBM Corporation Maximo Everyplace Lori Landesman.
Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University

Social Media Apps Programming Min-Yuh Day, Ph.D. Assistant Professor Department of Information Management Tamkang University
Session: 11. © Aptech Ltd. 2HTML5 Audio and Video / Session 11  Describe the need for multimedia in HTML5  List the supported media types in HTML5 

Session: 11. © Aptech Ltd. 2HTML5 Audio and Video / Session 11  Describe the need for multimedia in HTML5  List the supported media types in HTML5 
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.

Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
Lesson 15: Mobile Design and Layout Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.

Lesson 15: Mobile Design and Layout Introduction to Adobe Dreamweaver CS6 Adobe Certified Associate: Web Communication using Adobe Dreamweaver CS6.
And Mobile Web Browsers

And Mobile Web Browsers
HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.

HTML5. What is HTML5? HTML5 will be the new standard for HTML. HTML5 is the next generation of HTML. HTML5 is still a work in progress. However, the major.

Similar presentations

Ads by Google