adobe experience manager (aem)as.nyu.edu/content/.../documents/aem_implementation... · adobe...

45
Adobe Experience Manager (AEM)

Upload: others

Post on 05-Aug-2020

8 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 1

Adobe Experience Manager (AEM)

Page 2: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Before We Begin •  Please silence your devices •  Please refrain from checking email during the presentation

Objectives

2

Page 3: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 3

Redesign & Migration Overview

Page 4: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

NYU Faculty of Arts and Science current web presence:

•  Arts and Science umbrella site •  Graduate School of Arts and Science •  College of Arts and Science •  Liberal Studies

Redesign & Migration Overview

4

Page 5: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

All sites in the following subdomains are migrating:

•  as.nyu.edu (name.as.nyu.edu) •  gsas.nyu.edu (name.gas.nyu.edu) •  cas.nyu.edu (name.cas.nyu.edu) •  ls.nyu.edu (name.ls.nyu.edu) •  fas.nyu.edu is no longer a valid subdomain

[update all communications]

Redesign & Migration Overview

5

Page 6: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Sites which will remain unchanged:

•  NYU WordPress sites (wp.nyu.edu/name) •  I4 server sites (nyu.edu/as/name) •  NYU blog sites (blogs.nyu.edu/name) – this service is retired •  All .org and .com sites

Redesign & Migration Overview

6

Page 7: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

The Numbers

•  Approximately 100 websites that represent A&S departments, programs, centers, institutes and international houses

•  35,000 pages, give or take

Redesign & Migration Overview

7

Page 8: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

The Redesigned Front End Includes…

Redesign & Migration Overview

8

Page 9: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

…Integration of NYU visual identity guidelines and standards,

Redesign & Migration Overview

9

Page 10: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

…Incorporation of NYU global navigation,

Redesign & Migration Overview

10

Page 11: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

…Single site presence,

Redesign & Migration Overview

11

Page 12: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

…and, Responsive design.

Redesign & Migration Overview

12

Page 13: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Timeline

Redesign completed Construction completed Content migration & “soft launch” completed Training January & February 2017 Content clean up January through May 2017 Launch of websites to public June 2017

Redesign & Migration Overview

13

Page 14: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Redesign & Migration Overview

14

Placeholders:

Please remove/update all placeholder content and imagery during site review!

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Page 15: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 15

Fundamentals of AEM

Page 16: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

What is Adobe Experience Manager (AEM)?

•  Part of Adobe Marketing Cloud •  A web-based system for content creation, management,

and publishing

Fundamentals of AEM

16

Page 17: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Compatible with all browsers:

We recommend Chrome!

Fundamentals of AEM

17

Page 18: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Fundamentals of AEM

18

Authors can create and edit content

Approvers review, activate and publish content in addition to

creating and editing

There are two role types in AEM:

Page 19: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Templates

17

Templates: •  Re-usable page layouts, i.e. Faculty Profile page •  Comprised of components that are built-in •  Some templates can be added customized with extra components •  Template assignments are permanent

Page 20: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Components

20

Components: Designed to present specific types of content including: •  Text Block •  Links •  News •  Images •  Videos

Page 21: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 21

Site Architecture & Navigation

Page 22: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Site Architecture & Navigation

22

Parent Sites Individual Sites Child Pages

A&S sites are organized in a tree structure under the 4 Parent Sites: •  Arts & Science (A&S) •  Graduate School of Arts and Science (GSAS) •  College of Arts and Science (CAS) •  Liberal Studies

Page 23: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Site Architecture & Navigation

23

Parent and Child Pages

Page 24: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Site Architecture & Navigation

24

A page can be simultaneously a parent and a child. If a page is deleted or moved, so are all of its children.

Page 25: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Site Architecture & Navigation

25

Dynamic Navigation When a page is added to the tree, it is automatically added to the navigation

Page 26: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 26

Digital Asset Management (DAM)

Page 27: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Digital Asset Management

27

Digital Asset Management (DAM) •  Images, videos, audio files, and

documents (including PDF, Excel, and Word) are called Assets which live in a centralized and shared repository

•  Once uploaded, an asset may be referenced many times

Page 28: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Organization is critical •  Use folders and create

subfolders as necessary

•  Use human-readable and searchable file names

•  Image and document files not larger than 2MB

Digital Asset Management

28

Page 29: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Demo: Sites/Assets Console UI Page Editor UI/Components Blank Page with Title Upload image to DAM Article Page Publish, Move/Rename, Hide, Delete

29

Page 30: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 30

User Interface

Page 31: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

User Interface

31

Sites Console

Action bar

Content area

Global navigation bar

Left Hand Rail

Page 32: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Content area

User Interface

32

Assets Console

Action bar

Global navigation bar

Left Hand Rail

Page 33: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 33

Faculty Directory & Course Listing

Page 34: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Faculty Directory

Faculty Directory page Faculty Profile pages

55

Page 35: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Faculty Directory •  Contents automatically generated from central directory

•  Faculty profile pages are shared

•  Access to edit profile pages must be requested

Faculty Directory

35

Page 36: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Course Listing

52

Page 37: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Course Listing

53

Course Listings

•  Contents of Course Listing Page derived from its child pages

•  Course Detail Pages are automatically created using a daily query from UDW

•  These pages cannot be edited in AEM; updates must be made in Albert

Page 38: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 38

Events

Page 39: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Events

Event Listing Page Event Detail Pages

111

Page 40: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Events created in AEM can be pushed to LiveWhale

Events

40

Page 41: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

4/12/17 41

Best Practices

Page 42: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Content Creation for Mobile: •  The AEM sites support 3 breakpoints:

Desktop, Tablet, and Mobile •  Remember that mobile has limitations

(screen size and bandwidth) •  Prioritize content ruthlessly!

Best Practices

42

Page 43: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Best Practices

43

URL Nomenclature: •  Keep the URL short and lowercase •  No special characters •  Use dashes rather than underscores •  Try to keep the URL limited to a maximum of five levels •  Ensure the URL matches the directory structure •  Human-readable URLs are more likely to be listed at the top of search

results page

Page 44: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Do’s:

• Keep content as relevant and concise as possible• Leverage visuals• Be cognizant of page length• Reduce the amount of scrolling needed to access content• Keep formatting clean and simple• Think about where you put new pages in the content tree

Best Practices

44

Page 45: Adobe Experience Manager (AEM)as.nyu.edu/content/.../documents/AEM_Implementation... · Adobe Experience Manager (AEM) ... Integration of NYU visual identity guidelines and standards,

Don’ts: •  Bring in inconsistent/foreign styling •  Use pages as a historical archive •  Use tables – these break down on mobile devices •  Use short text links rather than long URL paths:

i.e. ‘GSAS Standing Committees’ rather than ‘http://gsas.nyu.edu/page/grad.aboutgsas.standingcommittees’

Best Practices

45