Learn how to design responsive HTML5 websites and applications, and learn how to choose the right tool for the job.

1. MULTI-SCREEN HTML5
Ron Reiter

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

7. Why Multi-screen?

8. OK, I WANT MULTISCREEN

9. CSS Media Queries

10. CSS Media Queries - Before
$(window).resize(
function()
{
if
($(window).width()
<
480)
{
document.body.className
=
“smartphone”;
}
else
if
($(window).width()
>=
480
&&
$
(window).width()
<
940)
{
document.body.className
=
“tablet”;
}
else
{
document.body.className
=
“desktop”;
}
});

11. CSS Media Queries - After
@media
(max-­‐width:
479px)
{
}
@media
(min-­‐width:
480px)
and
(max-­‐width:
939px)
{
}
@media
(min-­‐width:
940px)
{
}

12. CSS Media Queries - After
<link
rel="stylesheet"
type="text/css"
media="screen"
href="sans-­‐serif.css">
<link
rel="stylesheet"
type="text/css"
media="print"
href="serif.css">

13. CSS Media Queries - After
@import
url(responsive-­‐retina.css)
(-­‐webkit-­‐min-­‐device-­‐
pixel-­‐ratio:
1.5),
(min-­‐resolution:
144dpi);

14. Important media queries
• print
/
screen
• orientation
• min-­‐width
• max-­‐width
• min-­‐device-­‐width
• max-­‐device-­‐width
• -­‐webkit-­‐min-­‐device-­‐pixel-­‐ratio
/
min-­‐resolution

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

17. http://mediaqueri.es

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

21. HTML5 Mobile First Applications

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

24. jQuery Mobile Prototyping - Codiqa

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

26. How to use jQuery Mobile

27. What can jQuery Mobile do?

28. jQuery Mobile
• What can I do with jQuery mobile?
• Go to http://view.jquerymobile.com/1.3.0/
using your smartphone or tablet

29. Responsive Applications

30. Responsive Applications

31. Responsive Applications

32. Reflow Tables (web)

33. Reflow Tables (mobile)

34. jQuery Mobile Architecture &
Navigation

35. jQuery Mobile Architecture
AJAX
/
Preloaded
Web
NavigaMon
One
HTML,
Two
pages
Two
HTMLs,
Two
pages

36. AJAX Navigation
• Instead of changing the document location, we
use $.mobile.navigate (saves history)
$(“a”).on(“click”,
function(
event
)
{
event.preventDefault();
$.mobile.navigate
(
this.attr(“href”)
);
});

37. AJAX Navigation
• Once we navigate, a “navigate” event is fired
$(window).on(“navigate”,
function(event,
data)
{
//
load
new
content
using
AJAX
});

38. Navigating between loaded pages
JavaScript:
$.mobile.changePage(“#page2”,
“pop”,
false,
true);
$.mobile.back();
HTML:
<div
data-­‐role=“page”
id=“page1”></div>
<div
data-­‐role=“page”
id=“page2”></div>

39. Creating a page dynamically
JavaScript:
$(document.body).append('<div
data-­‐role="page"
id=”page2"><div
data-­‐role="content">'
+
content
+
'</
div></div>');
$.mobile.initializePage();
$.mobile.changePage(“#page2”,
“pop”,
false,
true);

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

42. PhoneGap Build
• Removes the need for compiling to all
platforms

43. Desktop?

44. Responsive Web Design

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

46. Twitter Bootstrap

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>

50. Bootstrap Grid (web)
span4
span4
span4

51. Bootstrap Grid (mobile)
span4
span4
span4

52. Example (web)

53. Example (mobile)

54. Initializr

55. Responsive Design Bookmarklet
http://responsive.victorcoulon.fr/

56. Viewport Resizer
http://lab.maltewassermann.com/viewport-resizer/

57. THANK YOU!