This document summarizes a presentation about developing mobile websites using Magnolia CMS. It discusses how Magnolia allows content creation on tablets, instant publication to mobile, and supports features like multi-site development and native app integration. The presentation covers Magnolia's instant mobile publishing capabilities which automatically format content for any device. It also describes how developers can customize mobile sites by adding variations that control device detection, HTML structure, CSS, and images.

1. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Samuel Schmitt, Technical Account Manager @ Magnolia February 20, 2014
1
Developing for Mobile Devices in
Magnolia
Tuesday, March 18, 14

2. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.2
Mobile Devices and Magnolia
• Today mobile is everywhere
• We are all consuming information from a mobile device
• Publishing information from a mobile
• Using Web app or Native app
Tuesday, March 18, 14

3. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.3
Mobile Devices and Magnolia
• This presentation is a journey into the “mobile” aspects of
Magnolia
• Mobile authoring on a tablet
• Instant publication on mobile
• Multi mobile site development
• Native app with Magnolia
Tuesday, March 18, 14

4. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Create content wherever you are
4
Tuesday, March 18, 14

5. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.5
Create content wherever you are
• I’m a journalist for a news
website
• I have to write many stories
every day
• I’m never working from my
office
• Always on the road with my
iPad
Tuesday, March 18, 14

6. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.6
Create content wherever you are
Magnolia CMS allows you to create and manage
content on the tablet, just as easily as on the desktop
Whether you're on the iPad...... or at the desktop,
Magnolia gives you an optimized CMS user
experience
Tuesday, March 18, 14

7. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
7
•Create a new content app
•Create a dedicated workspace
•Create a form / dialog
•Create a new component
•Model returns list of Article
•Component set on a page
Tuesday, March 18, 14

8. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
8
Tuesday, March 18, 14

9. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
8
Tuesday, March 18, 14

10. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
8
Tuesday, March 18, 14

11. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
8
Tuesday, March 18, 14

12. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Publishing for mobile
9
Tuesday, March 18, 14

13. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.10
Publishing for mobile with Magnolia
• Go mobile instantly
• Content formatted and
optimized to match device
capabilities
• Out of the box. Standard
Templating Kit (STK) includes
mobile website templates
• Mobile preview for
smartphones and tablets such
as iPad
Tuesday, March 18, 14

14. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Instant mobile sites with Magnolia
11
Tuesday, March 18, 14

15. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Instant mobile sites
12
Tuesday, March 18, 14

16. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Benefits of Instant Mobile feature
• Publish for desktop and mobile at the same time
• Avoid duplication of content
• No multiple site to maintain
• SEO Friendly, same URL for mobile and desktop
• Already here!!
13
Tuesday, March 18, 14

17. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Deeper look at Instant Mobile
14
Tuesday, March 18, 14

18. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.15
Deeper look at Instant Mobile
Tuesday, March 18, 14

19. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.15
Deeper look at Instant Mobile
Tuesday, March 18, 14

20. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.16
Same page but different rendering
Variation:
•Control pages areas to display
•Define HTML Structure
•Define CSS, JS to use
•Control size of images
Tuesday, March 18, 14

21. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Variation: Control areas to display
17
Disable / Enable areas
by configuration
Tuesday, March 18, 14

22. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Variation: Define HTML Structure
18
Change HTML
of pages templates
and components
templates
Tuesday, March 18, 14

23. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Variation: Define CSS, JS to use
19
Mobile theme
Tuesday, March 18, 14

24. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Variation: Control size of images
20
Imaging module
Tuesday, March 18, 14

25. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.21
Variation and Site Definition
Tuesday, March 18, 14

26. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.21
Variation and Site Definition
Add a variation in a site definition
Tuesday, March 18, 14

27. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22
Deeper look at Instant Mobile
Tuesday, March 18, 14

28. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22
Deeper look at Instant Mobile
Tuesday, March 18, 14

29. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.22
Deeper look at Instant Mobile
Tuesday, March 18, 14

30. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Mobile Rendering Process
23
1. Info about mobile device set in the context.
Tuesday, March 18, 14

31. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Mobile Rendering Process
23
1. Info about mobile device set in the context.
2. Device channel resolved, set Channel / Variation name in the Aggregation state
Tuesday, March 18, 14

32. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Mobile Rendering Process
23
1. Info about mobile device set in the context.
2. Device channel resolved, set Channel / Variation name in the Aggregation state
3. Merge of the site definition with the variation
Tuesday, March 18, 14

33. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
Mobile Rendering Process
23
1. Info about mobile device set in the context.
2. Device channel resolved, set Channel / Variation name in the Aggregation state
3. Merge of the site definition with the variation
4. Render the content
Tuesday, March 18, 14

34. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
And now?
24
Tuesday, March 18, 14

35. All characters appearing in this
work are fictitious.
Any resemblance to real persons,
living or dead, is purely
coincidental
Tuesday, March 18, 14

36. Tuesday, March 18, 14

37. Few weeks after
Miami Amplify 2014
Tuesday, March 18, 14

38. In the office of the Big Boss
of a Super Great Website
done with Magnolia
Tuesday, March 18, 14

39. Tuesday, March 18, 14

40. Tuesday, March 18, 14

41. John, could you
come over here
Tuesday, March 18, 14

42. John, could you
come over here
Tuesday, March 18, 14

43. John, could you
come over here
Yes, Mr. Big Boss.
How can I help you?
Tuesday, March 18, 14

44. John, could you
come over here
Yes, Mr. Big Boss.
How can I help you?
I bought the
new Samsung
Galaxy to my wife
Tuesday, March 18, 14

45. John, could you
come over here
Yes, Mr. Big Boss.
How can I help you?
I bought the
new Samsung
Galaxy to my wife
And ???
Tuesday, March 18, 14

46. John, could you
come over here
Yes, Mr. Big Boss.
How can I help you?
I bought the
new Samsung
Galaxy to my wife
And ???
I just
realized that our
website is not
optimized for
Samsung
Tuesday, March 18, 14

47. John, could you
come over here
Yes, Mr. Big Boss.
How can I help you?
I bought the
new Samsung
Galaxy to my wife
And ???
I just
realized that our
website is not
optimized for
Samsung
Euh....And ???
Tuesday, March 18, 14

48. John, could you
come over here
Yes, Mr. Big Boss.
How can I help you?
I bought the
new Samsung
Galaxy to my wife
And ???
I just
realized that our
website is not
optimized for
Samsung
Euh....And ???
Please do something !!
Tuesday, March 18, 14

49. John, could you
come over here
Yes, Mr. Big Boss.
How can I help you?
I bought the
new Samsung
Galaxy to my wife
And ???
I just
realized that our
website is not
optimized for
Samsung
Euh....And ???
Please do something !!
Ok Big Boss !!
I come back to you in few
days with a solution
Tuesday, March 18, 14

50. Tuesday, March 18, 14

51. Few minutes later
Tuesday, March 18, 14

52. In the IT Department
Tuesday, March 18, 14

53. Tuesday, March 18, 14

54. Tuesday, March 18, 14

55. Tim, Jim!
We got a request from
the Big Boss
Tuesday, March 18, 14

56. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Tuesday, March 18, 14

57. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Tuesday, March 18, 14

58. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Tuesday, March 18, 14

59. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tuesday, March 18, 14

60. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Tuesday, March 18, 14

61. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Tuesday, March 18, 14

62. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
Tuesday, March 18, 14

63. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
Tuesday, March 18, 14

64. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Tuesday, March 18, 14

65. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
Tuesday, March 18, 14

66. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
We have to update the
device detection filter.
Tuesday, March 18, 14

67. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
We have to update the
device detection filter.
Add a new channel and a
new variation.
Tuesday, March 18, 14

68. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
We have to update the
device detection filter.
Add a new channel and a
new variation.
A new theme and
that’s it !!
Tuesday, March 18, 14

69. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
We have to update the
device detection filter.
Add a new channel and a
new variation.
A new theme and
that’s it !!
Great guys. I can see that
we have a solution.
Tuesday, March 18, 14

70. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
We have to update the
device detection filter.
Add a new channel and a
new variation.
A new theme and
that’s it !!
Great guys. I can see that
we have a solution.
How long it will take?
Tuesday, March 18, 14

71. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
We have to update the
device detection filter.
Add a new channel and a
new variation.
A new theme and
that’s it !!
Great guys. I can see that
we have a solution.
How long it will take?
Mmm...
Tuesday, March 18, 14

72. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
We have to update the
device detection filter.
Add a new channel and a
new variation.
A new theme and
that’s it !!
Great guys. I can see that
we have a solution.
How long it will take?
Mmm...
About 3 days
Tuesday, March 18, 14

73. Tim, Jim!
We got a request from
the Big Boss
WHAT??
A request??
Yes.We have to build a
new site for Samsung
Galaxy
Why
WT****
Guys, please.
We are using Magnolia.
It must be easy.
Tim?
Yes, Jim?
Do you
remember what
the French said in
Miami?
When? At the Bar
No during his great
presentation
Ah.Yes !!
We have to update the
device detection filter.
Add a new channel and a
new variation.
A new theme and
that’s it !!
Great guys. I can see that
we have a solution.
How long it will take?
Mmm...
About 3 days
Ok Great.Then I will
say to the Big Boss that it
will be ready in 2 weeks
Tuesday, March 18, 14

74. Tuesday, March 18, 14

75. Tuesday, March 18, 14

76. Tuesday, March 18, 14

77. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
What Tim and Jim did
31
New deviceDetection filter that handle Samsung device
Tuesday, March 18, 14

78. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
What Tim and Jim did
32
New “samsung” channel
Tuesday, March 18, 14

79. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
What Tim and Jim did
33
New variation “samsung” using another theme
Tuesday, March 18, 14

80. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Native App and Magnolia
34
Tuesday, March 18, 14

81. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.35
Native App and Magnolia
• Native app
• iOS App
• Android App
• Advantages compare to Mobile web app
• Take full advantage of all the device features
• Use the device’s notification system
• Can work offline
Tuesday, March 18, 14

82. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.36
Native App and Magnolia - Use cases
• I must be able to write articles even without internet connection
and publish them automatically to my site
• I want to enrich my native app with content coming from different
sites
Tuesday, March 18, 14

83. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
37
Create a
new iOS app
Tuesday, March 18, 14

84. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
37
Create a
new iOS app
Author
Magnolia
JCR
REST API
name: “image”, JSON
“properties”: [
{ “title”:”The title”,
“more”: “properties”
}]
Create a new
Asset in DAM
Tuesday, March 18, 14

85. Version 1.1 Magnolia is a registered trademark owned by Magnolia International Ltd.
How does it work?
37
Create a
new iOS app
Author
Magnolia
JCR
REST API
name: “image”, JSON
“properties”: [
{ “title”:”The title”,
“more”: “properties”
}]
Create a new
Asset in DAM
Display specific Asset folder
in a page
Tuesday, March 18, 14

86. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
OOTB
Template
Ipad Authoring
Apps
REST
Observation
Mutli mobile site
Theme
Variation
Native app
JSON
Channel
Device Detection
The Journey is Over
38
Instant Mobile
Preview
OOTB
Tailored Rendering
Tuesday, March 18, 14

87. Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1
Questions
39
Tuesday, March 18, 14