content creation - md systems · content creation 20161114/mdi. miro dietiker miro_dietiker md...

49
Paragraphs & The Future Content Creation 20161114/mdi

Upload: others

Post on 23-Aug-2020

0 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Paragraphs & The Future

Content Creation

20161114/mdi

Page 2: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

MIRO DIETIKERmiro_dietiker

MD Systems - Founder

Initiative Leader

Switzerland

Page 3: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Digital First

Requirements

Page 4: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Simplicity

Rich content & Interactive

Content components & Modularity

Structured & Semantic

Content variations & Personalisation

Digital First - Requirements

Power to the writer

Page 5: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

A long way to goDrupal has great potential

Page 6: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Identify action itemsOutline a next milestone

X

Page 7: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Paragraphs

Status

Page 8: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity
Page 9: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity
Page 10: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity
Page 11: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Ready & StableComposite, Multilingual, Revisions, Nesting

ModulesStorage (ERR), Widget

Permissions, Demo

Many upcoming contribs

Paragraphs - Status

Page 12: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Alternative UI needed?

Backend UX & potential?

Language specific content?

Reuse Paragraphs?

Advanced Permissions?

A Collection of Paragraph Types?

Status - Questions & Outstanding

Page 13: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Paragraphs

Research

Page 14: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Don’t make me think!Simplicity: defaults, out of the box

Page 15: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Examples

Directory of sites

◦ Use cases◦ Share awesomeness◦ Know about applications

Reference cases for profiling

Don’t make me think!

1

Issue 2825545

Page 16: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Collection of Paragraph TypesFundamental Types

◦ Title + Body◦ Media◦ Action

Containers / Layout

◦ Grid◦ Slider

Don’t make me think!

2

Compositions

◦ Can be highly customIssue 2670768

Page 17: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Paragraph Row - 12 cols

Paragraph Column - 8 width

Paragraph - Type “Text”

Paragraph - Type “Image”

Paragraph Column - 4 width

Paragraph - Type “Image”

Paragraph - Type “Button”

Don’t make me think! - The Grid

Page 18: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Paragraph Slider

Paragraph Slide

Paragraph - Type “Text”

Paragraph - Type “Button”

Paragraph Slide

Paragraph - Type “Text”

Paragraph - Type “Button”

Don’t make me think! - The Slider

Page 19: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

http://developer.interactor.swisscom.ch

Page 20: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Drupal as publishing ChannelIntegrate with Content Creation tools

Woodwing Inception

◦ Beautiful Frontend UI◦ Component based

https://www.woodwing.com/en/digital-content-production

Don’t make me think!

3

Page 21: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

A DistributionImmediate use, out of the box

Based on Paragraph Types Collection

Kampaweb

◦ kampatools.com◦ CRM added later

Don’t make me think!

4

Page 22: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Frontend Editing

Page 23: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

QuickeditClean integration

◦ Item editing

New actions

◦ Add widget◦ Delete

Drag & Drop Media

Frontend Editing

5

Issue 2476863

Page 24: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Alternative UIhttp://www.elegantthemes.com/plugins/divi-builder/

https://siteorigin.com/page-builder/

https://mailchimp.com/features/email-designer/

https://vc.wpbakery.com/features/wordpress-editor/

https://mobirise.com/

https://craftcms.com/features/matrix

http://innovastudio.com/

And much more...

Frontend Editing

Issue 2692051

Page 25: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Workflow

Page 26: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Content Moderation

Drupal Core, experimental

Needs integration

States, Transitions

Forward revisions

Publish a revision

Workflow

6

Issue 2807371

Page 27: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Indicating ChangeDiff Module - revision summary

Visual inline / HTML Diff

Workflow

Issue 2433099

Page 28: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Deprecate Field Collections?Paragraphs to rule them all

Page 29: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

“I have tried Paragraphs.It worked okay, but it is UGLY.

NancyDru

Page 30: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

What needs improvement

Single Paragraph Type UX

Default Paragraph

Field Group support

“Paragraphs” agnostic

Deprecate Field Collections?

Issue 2784931

7

Page 31: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Core UI LimitationsDestroying Creation Experience

Page 32: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Field overloadCluttered UI

Too many…

◦ non-content fields◦ action buttons

No grouping

Core UI Limitations

Page 33: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

IndentationEating content space

Core UI Limitations

Page 34: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

New patternsProposals for discussion

Page 35: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Perspectives◦ Content◦ Layout

New Patterns

8

Issue 2825557

Page 36: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity
Page 37: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Collapsible action icon

New Patterns

9

Issue 2825570

Page 38: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Drag & Drop ModeMove freely across fields

New Patterns

Issue 2825575

10

Page 39: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity
Page 40: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Flattening (optional)

Remove indentation

Full width for content

New Patterns

11

Issue 2825577

Page 41: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Field root + Container hierarchy

Sticky Header

New Patterns

12

Issue 2825581

Page 42: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Duplicate Paragraphs

New Patterns

Issue 2826631

13

Page 43: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Icons

New Patterns

14Paragraph Type Icons

Issue 2826690

Related Contrib https://www.drupal.org/project/paragraphs_browser

Page 44: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Add Widget

New Patterns

15Paragraph Type Icons

Grouped by type

Related Contrib https://www.drupal.org/project/paragraphs_browser

Issue 2236905

Page 45: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Paragraphs Library (optional)

New Patterns

16

Issue 2414865

Page 46: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity
Page 47: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity
Page 48: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Templates (optional)

Same structure, different content

◦ Paragraph templates▫ A composition of Paragraphs▫ Pick in Add widget

◦ Page templates▫ When starting a new document▫ Example: A full article layout

New Patterns

17

Issue 2826687

Page 49: Content Creation - MD Systems · Content Creation 20161114/mdi. MIRO DIETIKER miro_dietiker MD Systems - Founder Initiative Leader Switzerland. Digital First Requirements. Simplicity

Thanks!

ANY QUESTIONS?