training aem touch ui - phonak

Phonak.com & Phonakpro.com

Training AEM Touch UI

Table of Contents

• Switching between Classic UI and Touch UI (plugin)

• General System Training

• Templates PhonakPro

• Components PhonakPro

• Templates Phonak.com

• Components Phonak.com

• Rollout and Translation process

• Support

I Footer2 24/03/2020

Switching between Classic UI and Touch UI

Switching between Classic UI and Touch UI

Install Chrome plugin:

https://chrome.google.com/webstore/detail/aem-developer/hgjhcngmldfpgpakbnffnbnmcmohfmfc

It has a button to switch between touch and classic.

I Footer3 24/03/2020

https://chrome.google.com/webstore/detail/aem-developer/hgjhcngmldfpgpakbnffnbnmcmohfmfc

General System Training

• 2 Server – Test & Production

−P-Server (Production author – live system): https://prod-author.phonak.com

−Q-Server (Testsystem author – dummy): https://q-author.phonak.com

−Q-Server (Testsystem – publish) B2B: http://qa-www.phonakpro.com/com/en/home.html

−Q-Server (Testsystem – publish) B2C: https://q-publish.phonak.com/com/en.html

−Touch UI Q https://q-author.phonak.com/sites.html/content

−Touch UI P https://prod-author.phonak.com/sites.html/content

I Footer4 24/03/2020

https://prod-author.phonak.com/

https://q-author.phonak.com/

http://qa-www.phonakpro.com/com/en/home.html

https://q-publish.phonak.com/com/en.html

https://q-author.phonak.com/sites.html/content

https://prod-author.phonak.com/sites.html/content

Login, User Groups + Rights

• Tip: Use Firefox or Chrome

• Login: Windows Login + Password

• Please log in after this training to P-Server, we will create then the User Rights

• Every Content Manager will have the rights for his country only

I Footer5 24/03/2020

https://prod-author.phonak.com/

Frontend Structure B2B

Products: Hearing Aids + Wireless Accessories + Other (Batteries,…)

eSolutions: Solutions +Apps

Support: Product Support + Other Support (Downloads, Contact Addresses,…)

Training + Events: Product Training + Other Training (Webinar, Live Events)

Marketing: POS Materials, Images + Logos

Resources: Apps, Forms, Fitting + Counselling

I Footer6 24/03/2020

Frontend Structure B2C

Hearing loss: Basics about Hearing (Tinnitus, Understand Hearing Loss)

Hearing aids: Client Profiles (First Time User, Experienced User + Power User) and Products

Support: Product Support + Other Support (Downloads, Contact Addresses,…)

Hearing Test: Online Hearing Test for consumers

About: Mission, Locations, History and Press Center

I Footer7 24/03/2020

Structure Websites + DAM

Structure AEM

• Website / Digital Assets

• Website

−The page structure reflects the navigation:

I Footer8 24/03/2020

Structure DAM, Rules, Meta Data + Tags

• Structure DAM

−The DAM structure reflects the navigation and the page structure

−Always two folders: Image + Documents

• File-Name Rules

−Lower case

−No spaces: The sign “_” can be used instead of empty spaces

−No version number

−No Language Code (EN/FR)

−No special characters: / “ + & * ( ) = ! # @ ? : ; é è à

−No Umlauts: ä ö ü

I Footer9 24/03/2020

Structure DAM, Rules, Meta Data + Tags B2B

• Meta Data + Tags in DAM

− Title

− Description

− Tags (Asset Type, Product, Status,

Literature)

− Creator: Phonak or another company

− Content Owner Team

− Publication Date (today)

• Image with correct sizes

• Metadata for images

− Title

− Original MAM Name

− Expires date (find in MAM)

I Footer10 24/03/2020

Structure DAM, Rules, Meta Data + Tags B2B

Impact to the frontend

I Footer11 24/03/2020

Structure DAM, Rules, Meta Data + Tags B2C

• Documents

− Title & Description

− Tag (Asset Type, Product, Literature)

− Creator: Phonak or another company

I Footer12 24/03/2020

To keep the DAM clean and tidy, please deactivate and/or delete items from your local library if they are not

referenced to any component anymore

Structure DAM, Rules, Meta Data + Tags B2C

• Images with correct sizes

− Title & Description

− Original MAM Name

− Expires date (find in MAM)

− Indicate size in the file name:

e.g.300x300

− Indicate SAP number: 080-0505

− Example:

packshot_audeo_v_312_xsreceiver

_050-0187-q1_900x900.jpg

I Footer13 24/03/2020

Metadata provides the search engines and user detailed information about the asset

Replacing assets – e.g. documents

Replace with the identical file name in the overview

I Footer14 24/03/2020

1) Select folder

Select folder in which to replace the assets.

2) Drag and drop

Drag and drop the asset from your local drive to the

selected folder.

3) Notice of name conflict

Click “Create Version" to replace the asset.

Activate document

Activate the replaced documents in the library by

selecting the document and clicking “Quick Publish”

1

2

3

4

Website view

1) Additional Navigation:

This navigation can be used to show content tree,

information about the page adaptations or references.

2) Site map:

The site map shows the structure of the web page. If

a new page is created, this appears directly in the

selected level of the site map.

3) View menu:

Allows to change the view of the site map.

4) Menu bar:

The menu bar contains all the actions which can be

applied to the current page. These functions are also

available via the Context Menu, which can be called

up at any time via a right-hand mouse click.I Footer15 24/03/2020

4

1

23

Storing new pages

I Footer16 24/03/2020

1

Normally new pages are build by HQ Content Managers and rolled out to the countries. In this case you don’t have to build your own pages.

But if you need a country specific page which is only used in your country, you are able to build a new page.

Note: The page you create by your own is not inherited to the HQ pages. Local authors are responsible that the content is always updated.

2

1) Create new page

A new page is being stored in Sites. New pages are

always subordinate to a selected page.

Add following infos to a new page:

• Title: Title of the new page

• Name: Will be used in URL, please follow the URL structure rules

• Template: Select template depending on case of the page

2

3

2) Open page

To work on a page select page and click on «Edit»

3) Page Info

when selecting a page you can check page

information as Title, Name, Template and status

URL Structure

The URL (Uniform Resource Locator) is the address of an HTML document in the World Wide

Web. Ideally, the URL describes the content and structure of a website for visitors and search

engines. A clear and concise URL structure can influence the organic rankings in a positive way.

Best Practices:

−Use Keywords within the URL structure

−Different words within the URL structure should be separated by a hyphen

−Words should not be separated by underscores, space or other characters

−URLs should be descriptive and as short as possible (max. 2.083 signs)

−URLs should not contain figures or special characters

I Footer17 24/03/2020

Process page

I Footer18 24/03/2020

1) Change view

Select List View to get a better overview.

2) Published

Check in column «Published» if the page is live or

deactivated.

«Not published» can be a new (not published page)

or a deactivated page

3) Modified

See last modification date. If there is an

exclamation mark the page was modified since last

activation

1

23

Edit page: WYSIWYG* mode

I Footer19 24/03/2020

1) Side Panel

Find all assets from Asset Library, all

Components and the site structure in a Content

Tree.

2) Page Information

Find more information about the page here.

Among other functions you can open properties

and publish a page.

3) Page in edit mode

Changes to the page can be done in this area.

4) Edit

Change among different Edit views of the

page.

5) Preview

See how the page would look like when

published.

1

* What you see is what you get

3

4 52

Side Panel

I Footer20 24/03/2020

Assets – Filter

Search for a specific

asset with the filter

function

Components

Select from the range of

components. You can also

filter on a specific term, or

select a group.

Add component via

drag&drop to the page.

Assets – Types

Filter for different

Asset Types like

Images or Documents

Assets – Enter path

Search for a specific

asset by using the

path in dam

Page Information / Edit

I Footer21 24/03/2020

Page Information

1) Open Properties

Open page properties directly from the page

2) Publish Page

Quick publish to activate current page

3) View as Published

Opens page in a new tab as it would look when activated

4) View in Admin

Opens Sites consoles on the path of the current page

Edit

5) Edit

Mode to use when editing the page content

6) Live Copy Status

Check if inheritance of a component is disabled or enabled

1

2

3

4

5

6

Working with Page Versions

Create Version

1) Select a page

2) Open the Timeline column

3) Open menu by clicking the up-pointing arrow

4) Select Save as Version

5) Enter a Label and Comment if required.

6) Confirm the new version with Create

Reverting to a Page Version

7) Select page and Versions in dropdown in Timeline Column

8) Click on Version

9) Check Preview, Compare two versions or Revert to this Version

6

1

Versioning creates a "snapshot" of a page at a specific point in time. With versioning,

you can restore a page to a previous version in order to undo a change.

2

4

5

7

8

9

3

I Footer22 24/03/2020

Cancel inheritance and edit components

I Footer23 24/03/2020

Cancel Inheritance

1) Hover component and select «Cancel inheritance»

2) Confirm canceling

Configure component

3) Component is now editable

Re-enable Inheritance

4) Hover component and tab «Re-enable Inheritance»

5) Select «Synchronize after reverting inheritance» to get

content from master page back

Every content on an inherited page can be edited. For this you need to cancel inheritance.

1

2

3

4

5

Deleting and restoring components

I Footer24 24/03/2020

Delete component

1) «Cancel inheritance» and confirm

2) Hover component again and delete component

3) Placeholder for deleted componend appears

Re-enable component

4) Re-enable inheritance of deleted component

5) Click «Synchronize after reverting inheritance»

Delete a component from a Live Copy page when the content is not needed. A placeholder

for the deleted component appears in its place. If you decide that the content is needed, you

can restore the component.

3

1

2

4

5

Placing and moving components

I Footer25 24/03/2020

Place component from editing bar

1) Select on component you like to add a

new component above and click “+”

Place component from Side Panel

2) Go to Componets in Side Panel, search

for needed component and drag&drop it

to the page

Moving components

3) Move component by dragging them to

the new position while holding down left

mouse button

1

2

3

Templates PhonakPro

Templates PhonakPro

• Detailed information about

−PhonakPro Without Hero Page

−PhonakPro With Hero Page

• Short information about

−PhonakPro Hearing Aid Family Template

−PhonakPro Product Page

−PhonakPro Carousel Lightbox Template

I Footer27 24/03/2020

Templates PhonakPro

Page Properties (depending on the template)

−Title / Page Title / Navigation Title

−Description

−Tags (only for product)

−Content Owner Team

I Footer28 24/03/2020

Template – Without Hero Page

Use this template to create sub-pages and orphan pages that are not available from the primary

navigation. The background color you select should mirror other pages within the section.

I Footer29 24/03/2020

Template – With Hero Page

The “hero” section is the “splash” at the top of the page. Use this template for non-product pages

that require a hero. This template allows you to use the subnavigation, hero, headlines,

descriptions and tabbed page navigation features.

I Footer30 24/03/2020

Hero without

navigation

Use when

content

covers a

single topic.

Hero with

tabbed

navigation

Use when

content

includes sub-

topics.

Hero with

sectional

navigation

Use when

content covers

a single topic

and there are

other important

related links.

Hero with

sectional and

tab navigation

Use when

content includes

sub-topics and

there’s important

related content to

link to.

Other Templates PhonakPro

I Footer31 24/03/2020

• Hearing Aid Family Template

– Use this template to create a hearing aid product overview page

• Product Template

– Use this template to create a product overview page

for non-hearing-aid products such as wireless accessories,

batteries, cleaning and care, etc.

• Carousel Lightbox Template

– This template is used to create pages that are not directly visited by users. Instead, the template allows

for the authoring of content that will be displayed as part of a carousel or within a lightbox.

Components PhonakPro


I Footer33 24/03/2020

– Headline

– Text


I Footer34 24/03/2020

– Images

• Image component has option like hyperlinking, animated gif, define size and alignment.

– Button

• Buttons provide a stylized link that is used for important calls to actions. The various options allow for different visual

options to achieve the proper visual weighting and balance in page layouts.


I Footer35 24/03/2020

– Column

• The columns component provides flexibility in visual layout by providing various options for the horizontal

distribution of content. This is achieved by creating additional paragraph systems of various widths where

other components can be placed.

– Asset Item

• Asset items allow for the viewing, downloading and sharing of digital assets such as documents, videos, and

audio.


I Footer36 24/03/2020

– Forms 1) Start with B2B Form

2) Fill out “Start of Form” and “End of Form”

3) After submit the form

When submitting a form the submitter lands on a thank you page.

At the same time an email will be sent to the defined email address(es). This email includes the URL of the

submitted form, all the form values and an excel file with the values.


I Footer37 24/03/2020

– Teaser

• Teasers are used to provide important cross links to other pages on the B2B site. Teasers can be used by themselves

or within a Teaser Group which creates a multi-column layout of teasers.


I Footer38 24/03/2020

– Table

• This component provides a way to add tables to the site. Tables can be created in a number of pre-defined styles.


I Footer39 24/03/2020

– Lightbox Template

• This template is used to create pages that are not directly visited by users. Instead, the template allows for the

authoring of content that will be displayed as part of a carousel.


I Footer40 24/03/2020

– Grid

• A grid is a layout component that creates a multicolumn layout with grid lines separating the contained grid items.

Product Grid ItemA grid item for linking to a product. To simplify the

management of product tiles the information on the title is

configured from metadata of the product page for the item.

Generic Grid ItemA generic, reusable grid item.

Link Only Grid ItemA smaller sized grid item to allow for grids

in a more confined space.

Small Grid ItemA grid item with a single link.

Templates Phonak.com


Depending on the type of page template, different components can be used on the page

• Most used Templates

−Product Page

−Content Page

− Inform Page

−Accessory Page

−Lyric Landing Page

I Footer42 24/03/2020

Page Properties

• Title /Page Title

• Description

• Tags

I Footer43 24/03/2020

• Page titles and descriptions are important for SEO purposes


Product Page

• e.g. Bolero Marvel https://www.phonak.com/com/en/hearing-aids/phonak-bolero-marvel.html

I Footer44 24/03/2020


Content Page

• e.g. Hearing Loss https://www.phonak.com/com/en/hearing-loss.html

I Footer45 24/03/2020

https://www.phonak.com/com/en/hearing-loss.html


Inform Page

• e.g. Contact https://www.phonak.com/us/en/contact-us.html

I Footer46 24/03/2020


Accessory Page

• e.g. Phonak PartnerMic https://www.phonak.com/us/en/hearing-aids/accessories/phonak-

partnermic.html

I Footer47 24/03/2020


Landing Page

• e.g. USA Today Better Hearing https://prod-author.phonak.com/content/phonak/us/en/phonak-

landing-pages/phonak-usa-today-better-hearing.html

I Footer48 24/03/2020

https://prod-author.phonak.com/content/phonak/us/en/phonak-landing-pages/phonak-usa-today-better-hearing.html

Components Phonak.com


I Footer50 24/03/2020

• Visual

– A visual component combines an image, static image or video with text. The text can be aligned on the image.

• Page Title


I Footer51 24/03/2020

• Product Header

– A product header combines an image, static image or video with text.

• Title

– Title is <h1>, Subtitle <p>


I Footer52 24/03/2020

• Content Container

– Some components can only be used on a page if you drop them into a “content container”

• Multi Column Layout

– Define the number and proportions of the columns


I Footer53 24/03/2020

• Text (Wide) / Text (Column)

– The text component is available in column and in full width. Full width is the same width as the width of two

columns.

• Image

– Image component has option like hyperlinking, animated gif, define size and alignment.

Components

I Footer54 24/03/2020

• Button Bar / Button

– The button bar is a container component for button components. Use button within button bar.

• Quote (Wide)

Components

I Footer55 24/03/2020

• Video (Column) / Video (Wide)

– The video component is available one column wide and in full width. Video can be added by entering a video embed code.

• Video Tabs

– Possible to show up to 4 videos in the component.

Components

I Footer56 24/03/2020

• Downloads Container / Download

– Download links need to be placed in a container "Product downloads".

• Links Container / Link

– Links need to be placed in a container "Products links".

Components

I Footer57 24/03/2020

• Product Teaser Slide Show Container / Teaser (Wide, Small, Slide)

– The product teasers component is the container component for two small teasers, one wide teaser or a teaser slider

Components

I Footer58 24/03/2020

• Video Slider Container / Video Slide...

• A slider with teaser that contain Title, Description, Benefits, Button, Image or Video. Always use Content Container > Video Slide Container > Video Slide

Components

I Footer59 24/03/2020

• Benefits

– The product benefits component contains a list of product benefits and a background image.

• Models Container / Model

– Product models can be configured by using the product models container and the product model component.

Components

I Footer60 24/03/2020

• Mix and Match

– Product colors can be configured by using Mix and Match component with the Product ID of the product family

• Social Icons

Components

I Footer61 24/03/2020

• Form components

– Start each form with a Form Container

Rollout and Translation process

Rollout process

I Footer63 24/03/2020

hq_en/en

lang/de lang/eslang/fr • dk/da

• no/no

• pl/pl

• ru/ru

• se/sv

• jp/ja

• kr/ko

• …• com/en

• au/en

• ca/en

• fi/en

• nz/en

• sg/en

• uk/en

• us/en

• at/de

• ch/de

• de/de

• be/fr

• ca/fr

• ch/fr

• fr/fr

• es/es

Build pages/layout

Rollout to lang and gc

Translation

Rollout for lang/

en, de, fr, es, it, nl and

pt

lang/en lang/nl

• it/it • nl/nl

• be/nl

lang/it lang/pt

• br/pt

Translation process

I Footer64 24/03/2020

AEM

Translation

Memory

Clay

Tablet

NLG

Clay

Tablet

Linguistic

Reviewers

Review

System

Glossary

Content

Managers

Offline

Material

Support

Support material

• Find all support material incl. training presentation here:https://prod-author.phonak.com/content/phonakpro/Training/support-material.html?wcmmode=disabled

I Footer66 24/03/2020

https://prod-author.phonak.com/content/phonakpro/Training/support-material.html?wcmmode=disabled

Questions

• Please send all the questions to

−[email protected]

I Footer67 24/03/2020

Together,

we change lives