2. Who am I?
• Ron Reiter
• HTML5 Google Developer
Expert
• HTML5-IL
• Consultant, Freelancer
3. HTML5 != WEB
• HTML5 is a platform for writing
applications
• Browser + Server = Web
!=
4. Why mobile web?
• Global mobile traffic now represents roughly 13% of Internet traffic
• Gartner research: In 2013 more than half of users will surf the web via
smartphones
• Nearly 1/3 of UK page views are from mobiles and tablets
BECAUSE YOU
NEED TO DO IT
5. Why HTML5?
• Cross platform development
• FirefoxOS
• PhoneGap
• Desktops run JavaScript with great
performance
• Devices are only getting stronger
(Zuckerberg, kiss my *ss)
6. Why NOT HTML5?
• Millisecond grade interaction and animations
• HTML5 is not quite there yet
15. Why is this better?
• Declarative CSS allows hardware acceleration
• Browser Optimizations
• Less ugly
16. Viewport meta tag
• This viewport tag disables mobile viewport
resizing:
<meta
name="viewport”
content=”
width=device-‐width,
initial-‐scale=1.0,
maximum-‐scale=1.0,
user-‐scalable=no
”>
• Use it when you build responsive interfaces
18. App or mobile web?
• You already have your website, and now you
want to support mobile devices.
• Website
– Easier maintenance
• Application
– More abilities
19. What are my options?
• Change your current website to a responsive
web site
• Your original website + Special website for
tablets and smartphones
• Just make an app (HTML5, native, etc).
20. Responsive web UI Frameworks
Responsive
Web
Sites
Mobile
First
Twi$er
Bootstrap
jQuery
Mobile
22. Mobile First Web Applications
• Make a mobile website
• Mobile application development platform
UI
Frameworks
jQuery
Mobile
Sencha
Touch
jqMobi
DOM
ManipulaMon
Frameworks
jQuery,
Zepto
MVC
Frameworks
Backbone.js
Ember.js
Angular.js
23. jQuery Mobile
• Amazing mobile framework
• Themable
• Cross Platform
• Around for a while
25. How to start
• Create a new HTML page with:
<link
rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-‐1.3.0.min.css"
/>
<script
src="http://code.jquery.com/jquery-‐1.8.2.min.js"></script>
<script
src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-‐1.3.0.min.js"></script>
• Or use Codiqa to download your app
40. jQuery Mobile + MVC
• Angular
– https://github.com/tigbro/jquery-mobile-angular-
adapter
• Backbone – we need a special router
– https://github.com/azicchetti/jquerymobile-router
• Ember + jQuery Mobile is a bit harder since
both frameworks utilize a fair amount of
voodoo
41. OK, I want an app!
• PhoneGap / Apache Cordova – Gives
native API access from JavaScript
• PhoneGap was bought by Adobe, so that non-
Adobe development is done in Cordova
45. Responsive Web Design
• Web sites with a simple UI need to adapt to
multiple screen form factors
• Web sites are less complicated than web
applications, but still very similar
• jQuery mobile is also a tool for responsive
web design
– http://view.jquerymobile.com/1.3.0/docs/intro/
rwd.php
47. Twitter Bootstrap
• UI framework is more straightforward than
jQuery Mobile
• The UI elements are not as good for mobile as
jQuery Mobile
• Mobile browsers do not behave well with
advanced Bootstrap UI elements like jQuery
Mobile does
48. How to make Bootstrap responsive?
• Add this to your Bootstrap app:
<meta
name="viewport"
content="width=device-‐width,
initial-‐scale=1.0">
<link
href="assets/css/bootstrap-‐responsive.css"
rel="stylesheet">
• And you’re ready to go!
49. Twitter Bootstrap Grid
<div
class=“container”>
<div
class=“row”>
<!-‐-‐
columns
must
sum
up
to
12
-‐-‐>
<div
class=“span4”>
…
content
…
</div>
<div
class=“span4”>
…
content
…
</div>
<div
class=“span4”>
…
content
…
</div>
</div>
</div>