This document discusses different approaches to mobile web development, including native apps, mobile web apps, and hybrid apps. It describes native apps as using device APIs and being optimized for performance but costly to maintain across platforms. Mobile web apps use HTML, CSS, and JavaScript and are low-cost with broad compatibility but lack access to device features. Hybrid apps combine web technologies with native wrappers to access device APIs and offer "write once, run everywhere" capabilities. The document also covers mobile development strategies, frameworks, and tools like Cordova that can help build hybrid mobile apps.

1. 0
Mobile Web Development

2. About me
 Soulemane Moumie
 Programmer
Blogger
Open source advocate
 www.moumie.org
Seite 1

3. Introduction
• What is Web Development ?
• What is Mobile Web Development ?
• Was predicted to be dead by now (# apps)
• Trends
Mobile browser traffic is 2X bigger than
app traffic, and growing faster1
2

4. Not Convinced !
• Mobile is taking over the internet.
• Mobile web browsing accounts for almost 1/3 of web traffic worldwide, and
it is growing fast while desktop is declining.
3

5. Mobile Development Approaches
Native
Web
Hybrid
4

6. Mobile Strategy
• Does the mobile app requires the use of any special device features
(i.e., camera, GPS, etc.)?
• What’s my budget?
• Does the mobile app needs to be Internet-enabled?
• Do I need to target all mobile devices or just certain devices?
• What programming languages do I already know?
• How important is speed and performance?
• How will this app be monetized effectively?
• What is my target audience ?
5
2. http://sixrevisions.com, Published on July 11,2012, JT Mudge

7. 1.Native Approach
- mobile application program that has been developed for use on a particular platform
or device.
- Executable binary files located on the device.
- Access to all vendor ‘s API available on the device
6
* IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper

8. Pros
• Since native apps work with the device’s built-in features, they are easier
to work with and also perform faster on the device.
• Native apps get full support from the concerned app stores and
marketplaces, making the more complete and secure.
• Easy access to high level services important to personal mobile
experience.
• Easy low-level hardware access services.
• Full use of all functionalities that modern mobile devices have to offer.
7
1. Native Approach

9. Cons
• High cost of maintenance and updation
• The process of getting the app approved at the app stores can prove to
be long and tedious for the developer
• Users of different mobile devices may be using different versions of the app,
which makes it difficult for the developer to maintain and offer support
• Designers are required to be familiar with different UI components of each
OS.
• Limited space to install all apps we need
8
1. Native Approach

10. 2. Web Approach
 Mobile Website
 Mobile Web Apps
9

11. Mobile Web App vs. Mobile Website
10
* IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper

12. Offline Web Application Architecture
11
* Developing offline web application using html5,Nilachala Panigrahy, Tata consultancy services, White Paper

13. Pros
• Immediacy – Mobile Websites Are Instantly Available.
• Compatibility – Mobile Websites are Compatible Across Devices.
• Upgradability – Mobile Websites Can Be Updated Instantly.
• Findability – Mobile Websites Can be Found Easily.
• Shareability – Mobile Websites Can be Shared Easily by Publishers, and
Between Users offer.
• Reach – Mobile Websites Have Broader Reach.
• Lifecycle – Mobile Websites Can’t be Deleted.
• Flexibility – A Mobile Website Can be an App!.
• Time and Cost - Mobile Websites are Easier and Less Expensive.
• Support and Sustainability.
12
2. Web Approach

14. Cons
• Harder to optimize for all devices and screen sizes. Even if they are often tailored
for small screen size, "One size fits all" is never the best solution.
• Limited access to device specific features, e.g. apple built-in feature.
• Limited access to low-level hardware services.
• Needs to show the content that website visitors want to see.
• Limited navigation since there’s no enough screen space.
• Dependent on internet access except for apps written in
HTML5 (offline capabilities)
13
2. Web Approach

15. Access Denied
14
Cons
http://bradfrost.com/blog/post/mobile-web-problems/

16. Screen Size
15
http://bradfrost.com/blog/post/mobile-web-problems/

17. Browser Support
16
http://bradfrost.com/blog/post/mobile-web-problems/

18. Flash
17
http://bradfrost.com/blog/post/mobile-web-problems/

19. Digital Right Management
18
http://bradfrost.com/blog/post/mobile-web-problems/

20. URL Redirect Fails
19
http://bradfrost.com/blog/post/mobile-web-problems/

21. Design (fixed position is hell)
20
http://bradfrost.com/blog/post/mobile-web-problems/

22. Overlays
21
http://bradfrost.com/blog/post/mobile-web-problems/

23. User friendliness
22
http://bradfrost.com/blog/post/mobile-web-problems/

24. Long Load Time
• Heavy image files
• Too many images
• Too many imports
• Not being responsive
• Not using HTML5 and CSS3
23

25. 3. Hybrid Approach
• Combines native development with web technologies.
• Write once and run everywhere.
• Hybrid applications are web applications (or web pages) in the native browser,
such as UIWebView in iOS and WebView in Android (not Safari or Chrome).
Hybrid apps are developed using HTML, CSS and JavaScript, and then wrapped
in a native application using platforms like Cordova.
• Local - You can package HTML and JavaScript code inside the mobile
application binary, in a manner similar to the structure of a native application. In
this scenario you use REST APIs to move data back and forth between the device
and the cloud.
• Server - Alternatively you can implement the full web application from the
server (with optional caching for better performance), simply using the container
as a thin shell over the UIWebview.
24

26. Summary
25
* IBM, Native, web or hybrid mobile app development, 2012. IBM Software Thought Leadership White Paper

27. Basic Mobile Web Development
Requirements
26

28. 27

29. CSS Frameworks
• reset style sheet
• grid especially for responsive web design
• web typography
• set of icons in sprites or icon fonts
• styling for tooltips, buttons, elements of forms
• parts of graphical user interfaces like accordion, tabs, slideshow or modal
windows (Lightbox)
• equalizer to create equal height content
• often used css helper classes (left, hide)
28
Pre-prepared software frameworks that are meant to allow for easier, more
standards-compliant web design using the Cascading Style Sheets language.
https://en.wikipedia.org/wiki/CSS_frameworks

30. Gumby
29
CSS Framework
It is one of the simplest frameworks with super flexibility. Any newbie can use
this framework to design the website and create grids. It has useful features
and is compatible with almost all browsers.

31. Bootstrap
30
CSS Framework
It is one of the most popular frameworks because of the ease of use. It is an
open source and has an extensive list of features.

32. Kube
31
CSS Framework
It is a quick and simple way to create a website with options for colorful labels,
various tables, button option and lots of other helpers. It doesn’t limit the pixels
and thus is flexible for all mobiles and tablets.

33. Other Css Frameworks
• Foundation
• Concise
• Pure CSS
• Malo
• Responsee
• etc …
32

34. Javascript Frameworks
• Jquery mobile
• AngularJs
• Node Js
• Ember.js
• Mobilize.js
• Backbone.js
• Etc…
33

35. • A JavaScript runtime built on Chrome's V8 JavaScript
engine.
• Uses an event-driven, non-blocking I/O model that
makes it lightweight and efficient.
• Node.js' package ecosystem, npm, is the largest
ecosystem of open source libraries in the world.
• used to develop I/O intensive web applications like video
streaming sites, single-page applications, and other web
applications.
34

36. UI SDKs
• The UI allow the development of applications that
replicate the features of native UI
• JQTouch
• Sencha Touch (Ext JS+ jQTouch +Raphael, wrapper)
• iWebkit (iphone oriented)
• Jquery Mobile
• You can write your own Js and Css UI.
35

37. 36
http://image.slidesharecdn.com/dashbitla-100324033446-phpapp01/95/building-crossplatform-mobile-smartphone-apps-with-ruby-
html-dash-bitla-26-728.jpg?cb=1269403315

38. Sencha Touch
37

39. iWebkit UI
38

40. Jquery UI
39

41. Mobile Web Frameworks
40
https://setandbma.files.wordpress.com/2011/12/wora-platforms.png

42. Rhodes
41

43. Rhodes
Rhodes is a free and open source framework
and the foundation for the RhoMobile
application development platform. It enables
developers to use their existing HTML, CSS,
JavaScript and Ruby skills to build native
apps for all popular operating systems,
including iOS, Android, Windows Phone 8.
42

44. Rhodes
43
http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/

45. Titanium
44
http://tinypic.com/ view.php?pic=2m451ec&s=6#.VkO84l6ScqI

46. Titanium
- Titanium Mobile by Appcelerator claims to take your hard won
web skills and turn them into mobile app development skills.
- It boasts support for letting you use JavaScript, HTML, and
CSS.
- It features a JavaScript API that provides access to native UI
elements.
- The bridge between the JavaScript and the native SDK reads
your JavaScript and uses it to build views that have the same
features and performance as an application written in that
native language.
45

47. Titanium
46
http://blogs.perficient.com/multi-shoring/files/2012/10/image001.png

48. Titanium
47
http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/

49. Mosync
48

50. Mosync
• free and open source software development kit (SDK) for mobile
applications.
• is integrated with the Eclipse development environment.
• dual license scheme; a commercial license and an open source GPL version
2 license.
• produces native mobile applications for multiple platforms using C/C++,
HTML5 scripting and any combination thereof.
• The target group for MoSync are both web developers looking to enter the
mobile space, as well as the ordinary PC/Mac desktop developer with
knowledge in C/C++ development.
49

51. Mosync
50
http://www.straightforward.se/storyserver/sites/straightforward.se.storyserver/files/images/MoSyncAppArchitecture.preview.png

52. Mosync
51
http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/

53. PhoneGap
52

54. PhoneGap
• Popular mobile application development framework originally created by
Nitobi.
• Adobe Systems purchased Nitobi in 2011, rebranded it as PhoneGap, and
later released an open source version of the software called Apache
Cordova
• Enables software programmers to build applications for mobile devices
using JavaScript, HTML5, and CSS3.
• Because browser support for HTML5-based device access is not consistent
across mobile browsers, it embeds HTML5 code inside a native WebView
on the device.
• ?
53

55. PhoneGap
54
Architecture

56. PhoneGap
55
http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/

57. Frameworks Summary
56
http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/

58. Frameworks
57
http://www.1stwebdesigner.com/pros-cons-frameworks/

59. Efficiency
Tasks that usually would take you hours and
hundreds of lines of code to write, can now be
done in minutes with pre-built functions.
Development becomes a lot easier, so if it’s easier
it’s faster, and consequently efficient.
58
Pros

60. Security
A widely used framework has big security
implementations. The big advantage is the
community behind it, where users become long-
term testers. If you find a vulnerability or a
security hole, you can go to the framework’s
website and let the team know so they can fix it.
59
Pros

61. Cost - Support
Most popular frameworks are free, and since it
also helps the developer to code faster, the cost
for the final client will be smaller.
60
As any other distributed tool, a framework
usually comes with documentation, a
support team, or big community forums
where you can obtain quick answers
Pros

62. You learn the framework, not the language
If you’re using a framework and you know very
little about the language behind it, you will learn
the framework and not the language itself. The
way you code jQuery is different from the way
you code javascript. Simple put, if you know
jQuery, it doesn’t mean you know javascript.
61
Cons

63. Limitation
The framework’s core behaviour can’t be modified,
meaning that when you use a framework, you are
forced to respect its limits and work the way it is
required. Make sure you choose a framework
that suits your needs
62
Cons

64. Code is Public
Since the framework is available to everyone, it is
also available to people with bad intentions. It
can be studied in order to know how things work
and to find flaws that can be used against you.
63
Pros

65. Demonstration
• http://tax.moumie.org/ (mobile website)
• Genymotion (hybrid )
• Samsumg android (Hybrid)
• Desktop version (Website)
64

66. Conclusion
Whether you decide to build a native app or a
mobile web app a proper planning is required
and you should consider the following factors:
business objectives, target audience, technical
requirements and so on.
Nevertheless mobile web is the next big
Thing
65

67. References
1. http://venturebeat.com/2015/09/25/wait-what-mobile-browser-traffic-is-2x-bigger-than-app-
traffic-and-growing-faster/
2. http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/
3. http://bradfrost.com/blog/post/mobile-web-problems/ (See Mobile Web Cons slides
screenshoot)
4. http://floatlearning.com/2011/07/which-cross-platform-framework-is-right-for-me/
5. http://www.cssnewbie.com/best-free-css3-frameworks-2015/#.Vke8Ml6ScqL
6. http://www.1stwebdesigner.com/pros-cons-frameworks/
7. http://www.smashingmagazine.com/2014/02/four-ways-to-build-a-mobile-app-part3-
phonegap/
66

68. Questions
&
Discussion
67

69. Danke!
68