Single-Sourcing Desktop                      and Mobile Websites           Samuel Schmitt, Senior Developer   07.03.2013 a...
About Me                  My name is Samuel                  2 years at Magnolia                  Working in the service t...
What you will learn today?                                 Magnolia is a registered trademark owned by Magnolia       3   ...
In this presentation                  Magnolia Instant Mobile feature                  Channels and Variations            ...
Are mobile websites                               necessary?                                        Magnolia is a register...
Magnolia is a registered trademark owned by Magnolia       6     Version 1.1                                              ...
Magnolia is a registered trademark owned by Magnolia       6     Version 1.1                                              ...
Yes, you need a mobile                                  website!                                          Magnolia is a re...
70% of companies have not             designed their websites for                      mobiles                            ...
What are the reasons                  No mobile strategy                  Another expensive and long project              ...
Instant mobile sites with                            Magnolia                                     Magnolia is a registered...
Magnolia Instant Mobile feature                  Go mobile instantly                  Same website rendered differently pe...
Magnolia is a registered trademark owned by Magnolia      12     Version 1.1                                              ...
Benefits of Instant Mobile feature                  Publish for desktop and mobile at the same time                  Avoid ...
A look at Instant Mobile                              with Magnolia                                         Magnolia is a ...
New core features                  Variation                         • A variation defines what a site looks like by contro...
Original Site Definition                                 Variation                         Variation overrides properties o...
New core features                  Channel                         • Delivery mechanism for content                       ...
Channel #1: it’s 3PM                           Channel #2: it’s a mobile                           Channel #3: he is Frenc...
Instant Mobile uses Core features                  Channel “device” that detects if the request comes from a              ...
Another look at Instant                            Mobile with Magnolia                                           Magnolia...
Instant Mobile uses Core features                  As long as your pages use STK templates, your site is                  ...
Magnolia is a registered trademark owned by Magnolia      22     Version 1.1                                              ...
Build a website for multiple               devices with Magnolia                               Magnolia is a registered tr...
When you build a website                  Think mobile                         • Everybody has a mobile                  T...
Build a website                  A customer needs to create a website for his restaurant                         • Desktop...
Version #1       Desktop user is       From home, the       looking at what he can       eat at the restaurant.           ...
Version #2 Tablet       Visiting a city, the user       is in the street with his       iPad. He found the       restauran...
Version #3 Mobile       The user is not at home.       He sees that the       restaurant is open and       wants to book a...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Identify the areas                                           Magnolia is a registered trademark owned by Magnolia      29 ...
Build a website                  Areas are identified                  Start the configuration of the website               ...
A demo?                                     Magnolia is a registered trademark owned by Magnolia      31     Version 1.1  ...
Build a website - Summary                  One single website to edit                  Content is correctly tailored for a...
Apps and other                           Implementations                                      Magnolia is a registered tra...
Mobile applications                  Mobile Internet is consumed through Mobile Applications                         • App...
Magnolia is a registered trademark owned by Magnolia      35     Version 1.1                                              ...
More implementations                  Device-based channel                         • Mobile, Tablet, Apps                 ...
Questions                                   Magnolia is a registered trademark owned by Magnolia      37     Version 1.1  ...
Merci           Samuel Schmitt, Senior Developer          07.03.2013 at Magnolia Amplify           Magnolia International ...
Upcoming SlideShare
Loading in...5
×

Single sourcing desktop and mobile websites

584

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
584
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
4
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Single sourcing desktop and mobile websites

  1. 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. 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. 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. 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. 5. Are mobile websites necessary? Magnolia is a registered trademark owned by Magnolia 5 Version 1.1 International Ltd.Thursday, 7 March 2013
  6. 6. Magnolia is a registered trademark owned by Magnolia 6 Version 1.1 International Ltd.Thursday, 7 March 2013
  7. 7. Magnolia is a registered trademark owned by Magnolia 6 Version 1.1 International Ltd.Thursday, 7 March 2013
  8. 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. 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. 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. 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. 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. 13. Magnolia is a registered trademark owned by Magnolia 12 Version 1.1 International Ltd.Thursday, 7 March 2013
  14. 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. 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. 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. 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. 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. 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. 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. 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. 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. 23. Magnolia is a registered trademark owned by Magnolia 22 Version 1.1 International Ltd.Thursday, 7 March 2013
  24. 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. 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. 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. 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. 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. 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. 30. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  31. 31. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  32. 32. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  33. 33. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  34. 34. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  35. 35. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  36. 36. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  37. 37. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  38. 38. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  39. 39. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  40. 40. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  41. 41. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  42. 42. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  43. 43. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  44. 44. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  45. 45. Identify the areas Magnolia is a registered trademark owned by Magnolia 29 Version 1.1 International Ltd.Thursday, 7 March 2013
  46. 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. 47. A demo? Magnolia is a registered trademark owned by Magnolia 31 Version 1.1 International Ltd.Thursday, 7 March 2013
  48. 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. 49. Apps and other Implementations Magnolia is a registered trademark owned by Magnolia 33 Version 1.1 International Ltd.Thursday, 7 March 2013
  50. 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. 51. Magnolia is a registered trademark owned by Magnolia 35 Version 1.1 International Ltd.Thursday, 7 March 2013
  52. 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. 53. Questions Magnolia is a registered trademark owned by Magnolia 37 Version 1.1 International Ltd.Thursday, 7 March 2013
  54. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×