1. Single-Sourcing Desktop
and Mobile Websites
Samuel Schmitt, Senior Developer 07.03.2013 at Miami Amplify
Magnolia is a registered trademark owned by Magnolia
1 Version 1.1
International Ltd.
Thursday, 7 March 2013

2. About Me
My name is Samuel
2 years at Magnolia
Working in the service team
My role is to help partners and customers on their project
Magnolia is a registered trademark owned by Magnolia
2 Version 1.1
International Ltd.
Thursday, 7 March 2013

3. What you will learn today?
Magnolia is a registered trademark owned by Magnolia
3 Version 1.1
International Ltd.
Thursday, 7 March 2013

4. In this presentation
Magnolia Instant Mobile feature
Channels and Variations
Setting up a mobile website in 5 minutes
Magnolia CMS: best choice for worldwide mobile presence
Magnolia is a registered trademark owned by Magnolia
4 Version 1.1
International Ltd.
Thursday, 7 March 2013

5. Are mobile websites
necessary?
Magnolia is a registered trademark owned by Magnolia
5 Version 1.1
International Ltd.
Thursday, 7 March 2013

6. Magnolia is a registered trademark owned by Magnolia
6 Version 1.1
International Ltd.
Thursday, 7 March 2013

7. Magnolia is a registered trademark owned by Magnolia
6 Version 1.1
International Ltd.
Thursday, 7 March 2013

8. Yes, you need a mobile
website!
Magnolia is a registered trademark owned by Magnolia
7 Version 1.1
International Ltd.
Thursday, 7 March 2013

9. 70% of companies have not
designed their websites for
mobiles
Magnolia is a registered trademark owned by Magnolia
8 Version 1.1
International Ltd.
Thursday, 7 March 2013

10. What are the reasons
No mobile strategy
Another expensive and long project
Another site to maintain
Extra work to produce content for mobile
Ask your top management for more reasons
Magnolia is a registered trademark owned by Magnolia
9 Version 1.1
International Ltd.
Thursday, 7 March 2013

11. Instant mobile sites with
Magnolia
Magnolia is a registered trademark owned by Magnolia
10 Version 1.1
International Ltd.
Thursday, 7 March 2013

12. Magnolia Instant Mobile feature
Go mobile instantly
Same website rendered differently per device
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
Magnolia is a registered trademark owned by Magnolia
11 Version 1.1
International Ltd.
Thursday, 7 March 2013

13. Magnolia is a registered trademark owned by Magnolia
12 Version 1.1
International Ltd.
Thursday, 7 March 2013

14. 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!!
Magnolia is a registered trademark owned by Magnolia
13 Version 1.1
International Ltd.
Thursday, 7 March 2013

15. A look at Instant Mobile
with Magnolia
Magnolia is a registered trademark owned by Magnolia
14 Version 1.1
International Ltd.
Thursday, 7 March 2013

16. New core features
Variation
• A variation defines what a site looks like by controlling
what areas and components are used
• The principle is that the same content is used for all
variations
• You can add a variation on a site level (site definition) or
on a page level (template definition)
Magnolia is a registered trademark owned by Magnolia
15 Version 1.1
International Ltd.
Thursday, 7 March 2013

17. Original Site Definition Variation
Variation overrides properties of the Original Site Definition, defines a new
layout.
Magnolia is a registered trademark owned by Magnolia
16 Version 1.1
International Ltd.
Thursday, 7 March 2013

18. New core features
Channel
• Delivery mechanism for content
• Content delivered in various forms and formats
• Configurable for any type of output
• Can be a device, a medium or a location
• Once resolved a specific variation of your content is
rendered
Magnolia is a registered trademark owned by Magnolia
17 Version 1.1
International Ltd.
Thursday, 7 March 2013

19. Channel #1: it’s 3PM
Channel #2: it’s a mobile
Channel #3: he is French
Magnolia is a registered trademark owned by Magnolia
18 Version 1.1
International Ltd.
Thursday, 7 March 2013

20. Instant Mobile uses Core features
Channel “device” that detects if the request comes from a
smartphone
Default site definition of STK comes with a smartphone
variation
• Changes the main layout
• Brings new CSS
• Changes images size
Magnolia is a registered trademark owned by Magnolia
19 Version 1.1
International Ltd.
Thursday, 7 March 2013

21. Another look at Instant
Mobile with Magnolia
Magnolia is a registered trademark owned by Magnolia
20 Version 1.1
International Ltd.
Thursday, 7 March 2013

22. Instant Mobile uses Core features
As long as your pages use STK templates, your site is
automatically smartphone-optimized
• Page layout is rearranged to promote important content
• Image sizes are reduced
• Unnecessary CSS and JavaScript is excluded
Step by step process
Magnolia is a registered trademark owned by Magnolia
21 Version 1.1
International Ltd.
Thursday, 7 March 2013

23. Magnolia is a registered trademark owned by Magnolia
22 Version 1.1
International Ltd.
Thursday, 7 March 2013

24. Build a website for multiple
devices with Magnolia
Magnolia is a registered trademark owned by Magnolia
23 Version 1.1
International Ltd.
Thursday, 7 March 2013

25. When you build a website
Think mobile
• Everybody has a mobile
Think information, Think content
• What is relevant for the mobile user
Think layout
• How do you want to shape your mobile website
Think Areas
• Since Magnolia 4.5, Core Templating lets you create
easily new areas in your templates
• Areas can easily be moved and highlighted in a page
Magnolia is a registered trademark owned by Magnolia
24 Version 1.1
International Ltd.
Thursday, 7 March 2013

26. Build a website
A customer needs to create a website for his restaurant
• Desktop version
• Tablet version
• Smartphone version
Each version answers a specific need
• You don’t expect the same information when you visit a
website with your smartphone or with your desktop
Magnolia is a registered trademark owned by Magnolia
25 Version 1.1
International Ltd.
Thursday, 7 March 2013

27. Version #1
Desktop user is
From home, the
looking at what he can
eat at the restaurant.
Magnolia is a registered trademark owned by Magnolia
26 Version 1.1
International Ltd.
Thursday, 7 March 2013

28. Version #2 Tablet
Visiting a city, the user
is in the street with his
iPad. He found the
restaurant on internet
and need a map to find
his way to it.
Magnolia is a registered trademark owned by Magnolia
27 Version 1.1
International Ltd.
Thursday, 7 March 2013

29. Version #3 Mobile
The user is not at home.
He sees that the
restaurant is open and
wants to book a table.
Magnolia is a registered trademark owned by Magnolia
28 Version 1.1
International Ltd.
Thursday, 7 March 2013

30. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

31. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

32. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

33. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

34. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

35. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

36. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

37. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

38. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

39. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

40. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

41. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

42. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

43. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

44. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

45. Identify the areas
Magnolia is a registered trademark owned by Magnolia
29 Version 1.1
International Ltd.
Thursday, 7 March 2013

46. Build a website
Areas are identified
Start the configuration of the website
• Create a site definition
• Update the mobile variation
• Create a tablet variation, channel resolver is already
configured to return a tablet variation
• Create a variation for the address component
Magnolia is a registered trademark owned by Magnolia
30 Version 1.1
International Ltd.
Thursday, 7 March 2013

47. A demo?
Magnolia is a registered trademark owned by Magnolia
31 Version 1.1
International Ltd.
Thursday, 7 March 2013

48. Build a website - Summary
One single website to edit
Content is correctly tailored for any kind of output
• Layout is changed
• Image size is reduced for mobile
• HTML, CSS and JS are optimized
Magnolia is a registered trademark owned by Magnolia
32 Version 1.1
International Ltd.
Thursday, 7 March 2013

49. Apps and other
Implementations
Magnolia is a registered trademark owned by Magnolia
33 Version 1.1
International Ltd.
Thursday, 7 March 2013

50. Mobile applications
Mobile Internet is consumed through Mobile Applications
• Apple applications
• Android applications
Feed your application with content coming from Magnolia
• Create new channel returning an XML variation of your
content
• Parse the XML data and feed your application
Magnolia is a registered trademark owned by Magnolia
34 Version 1.1
International Ltd.
Thursday, 7 March 2013

51. Magnolia is a registered trademark owned by Magnolia
35 Version 1.1
International Ltd.
Thursday, 7 March 2013

52. More implementations
Device-based channel
• Mobile, Tablet, Apps
Location-based channel
• Regional campaigns
User-based channel
• Intranet, personalize view based on user group
Time-based channel
• Promote a product in the morning and another in the
evening
Magnolia is a registered trademark owned by Magnolia
36 Version 1.1
International Ltd.
Thursday, 7 March 2013

53. Questions
Magnolia is a registered trademark owned by Magnolia
37 Version 1.1
International Ltd.
Thursday, 7 March 2013

54. Merci
Samuel Schmitt, Senior Developer 07.03.2013 at Magnolia Amplify
Magnolia International Ltd. samuel.schmitt@magnolia-cms.com
www.magnolia-cms.com
Magnolia is a registered trademark owned by Magnolia
38 Version 1.1
International Ltd.
Thursday, 7 March 2013