single sourcing desktop and mobile websites

Magnolia is a registered trademark owned by Magnolia International Ltd.Version 1.1

Samuel Schmitt, Senior Developer 07.03.2013 at Miami Amplify

Single-Sourcing Desktop and Mobile Websites

1

Thursday, 7 March 2013

Version 1.1Magnolia is a registered trademark owned by Magnolia

International Ltd.

About Me

2

My name is Samuel

2 years at MagnoliaWorking in the service team

My role is to help partners and customers on their project



What you will learn today?

3



International Ltd.

In this presentation

4

Magnolia Instant Mobile feature

Channels and VariationsSetting up a mobile website in 5 minutes

Magnolia CMS: best choice for worldwide mobile presence



Are mobile websites necessary?

5



International Ltd.6



Yes, you need a mobile website!

7



70% of companies have not designed their websites for

mobiles

8



International Ltd.

What are the reasons

9

No mobile strategy

Another expensive and long projectAnother site to maintain

Extra work to produce content for mobileAsk your top management for more reasons



Instant mobile sites with Magnolia

10



International Ltd.

Magnolia Instant Mobile feature

11

Go mobile instantly

Same website rendered differently per deviceContent formatted and optimized to match device capabilitiesOut of the box. Standard Templating Kit (STK) includes mobile website templates

Mobile preview for smartphones and tablets such as iPad



International Ltd.12



International Ltd.

Benefits of Instant Mobile feature

13

Publish for desktop and mobile at the same time

Avoid duplication of contentNo multiple site to maintain

SEO Friendly, same URL for mobile and desktopAlready here!!



A look at Instant Mobile with Magnolia

14



International Ltd.

New core features

15

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)




Original Site Definition Variation

Variation overrides properties of the Original Site Definition, defines a new layout.



International Ltd.

New core features

17

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




Channel #1: it’s 3PM

Channel #2: it’s a mobile

Channel #3: he is French



International Ltd.

Instant Mobile uses Core features

19

Channel “device” that detects if the request comes from a smartphoneDefault site definition of STK comes with a smartphone variation

• Changes the main layout• Brings new CSS• Changes images size



Another look at Instant Mobile with Magnolia

20



International Ltd.

Instant Mobile uses Core features

21

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



Build a website for multiple devices with Magnolia

23



International Ltd.

When you build a website

24

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



International Ltd.

Build a website

25

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




Version #1 DesktopFrom home, the user is looking at what he can eat at the restaurant.




Version #2 TabletVisiting 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.




Version #3 MobileThe user is not at home. He sees that the restaurant is open and wants to book a table.




Identify the areas



International Ltd.

Build a website

30

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



A demo?

31



International Ltd.

Build a website - Summary

32

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



Apps and other Implementations

33



International Ltd.

Mobile applications

34

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



International Ltd.

More implementations

36

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



Questions

37



www.magnolia-cms.com

Samuel Schmitt, Senior DeveloperMagnolia International Ltd.

07.03.2013 at Magnolia [email protected]

38

Merci


http://www.magnolia-cms.com

http://www.magnolia-cms.com

mailto:[email protected]

mailto:[email protected]

single sourcing desktop and mobile websites

Documents

registered trademark

reasons magnolia

project magnolia

french magnolia

magnolia10 version

magnolia11 version

magnolia12 version

magnolia13 version