The document discusses strategies for modernizing SharePoint sites from classic to modern experiences. It recommends using the Modernization Scanner to assess sites for classic features no longer supported in modern. It also recommends the Page Transformation Engine to convert pages while preserving content using an XML configuration file. The key aspects of modernization are removing subsites and customizations not supported in modern, and rebuilding the information architecture using new structures like hubs and navigation.

3. ♡ ♡

4. Who am I?

5. •
•
•
•
•

8. •
•
•
•
•
•
•
•
•
•
Pic: https://spdesign.azurewebsites.net/

9. CLASSIC MODERN
Structure Hierarchical and fixed Flat and flexible
Multi-device PC and browser only, other stuff
needed customizations
Natively responsive and mobile-friendly (SP app or
browser)
Look & Feel “Can you make it look something else
than SharePoint?”
“Microsoft is putting the sexy into unsexy software”
Branding Highly customized, like a website A little bit more like other tools (email, group
collaboration)
Platform Just SharePoint, everything there Office 365 connected, integrated part of workplace
Governance Centralized with specialized content
editors
Decentralized, content is created in context by
those who are responsible
Intelligence … what do you mean? It knows who you are! Suggestions etc based on
Graph

10. What’s the
TECHNICAL
difference?
Modern
vs
classic
Structure
No subsites - hierarchy and connections
made with hubs & navigation
Pages and web parts New page type, new web parts – old
ones do not work on modern pages
Branding No masterpage or CSS but modern
themes + placeholders for extensions
Customizations Completely renewed model for
customizations (… yeah, again :)
Lists and libraries
Modern UI and features already
widely in use, some blockers still exist
Publishing Many classic publishing features
available but some still missing

12. • Old way
• Navigation hierarchy and inheritance made with subsites
• New way
• Every site is a site collection, joined via hubs
• How to do it
• Please - don’t use subsites!
• Create new site collections for old subsites and move / rebuild content there
• Create hierarchy and connections with hubs & navigation
• Hub to connect multiple sites to same context (Intranet Hub, Projects Hub, Archive Hub etc)
• Navigation to create hierarchy on site pages (traveling > travel expenses > daily allowances)

13. •
•
•
•
•
•
HR team
site
Project X
team site
IT
Training
Portal
Finland
IT team
site
Info
Unit A
intranet
SG team
site
Intranet
Home
Fun Club
HR
Benefits

14. HR team
site
Project X
team site
IT
Training
portal
Finland
IT team
site
Info
Unit A
intranet
SG team
site
Intranet
Home
Fun
Club
Benefits
HUB
HR
•
•
•
•
•

15. • Old way
• Fixed page layout with page content area, metadata fields and classic web parts
• New way
• Modern site pages with new authoring canvas, no fixed page layouts
• All content is created with new modern web parts
• Metadata can be filled in Page details and shown with Page properties web part
• How to do it
• You need to change page type AND content (web parts)
• Old content modules (web parts) do not work on modern pages
• Rebuild or use Page Transformation tool
• Configure layout and web part mapping

16. • Old way
• Old themes or custom masterpage and CSS + JavaScript injections to modify DOM
• New way
• OOB responsive! Modern themes and SPFx application extensions
• How to do it
• Get rid of custom masterpage & CSS
• Replace old themes with modern ones
• In team sites old themes still kind of work, but… It’s better to switch to modern themes
• Replace script-based UI customizations
• with OOB features if possible (footer, megamenu etc)
• Rewrite with new SharePoint Framework (SPFx) Extensions model (restricted areas and means to
modify DOM)

17. • Old way
• Lots of injected / embedded JavaScript, add-ins and even full trust code
• New way
• SharePoint Framework apps and extensions
• Add-in model (app parts) still work on modern
• How to do it
• Evaluate new modern OOB features and web parts and use them when possible
• Check out PnP collection as well: https://github.com/SharePoint/sp-dev-fx-
webparts/tree/master/samples
• Rewrite customizations
• JSLink / Custom list menu items → SPFx Field Customizer extension / Custom Formatting
• Custom Action / Script Link → SPFx Application Extension
• Script Editor web part → Modern OOB webparts / SPFx web parts (Community Script Editor)

18. • Old way
• Classic UI and features in lists and libraries
• New way
• Modern UI (copy, move, Flow, PowerApps, filter, in-place views etc)
• How to do it
• Most of the lists and libraries appear already in modern UI
• Some list types are not yet supported – use modern replacements if possible
• Tasks → Planner, Posts (blog) → News, Discussion → Teams / Comments, Survey → Forms etc..
• Get rid of features that are not supported or might prevent using modern UI
• Column types; publishing (html), geo location
• Customizations; JSLink, custom ribbon actions
• Views; webparts in view pages
• Features; metadata navigation, document sets (rolling out!)

19. • Old way
• Publishing feature activated on site; masterpages, scheduling, variations etc
• New way
• No specific feature, functionality natively available on modern sites
• How to do it
• Multilingual UI supported
• but no automatic translation / variations (check 3rd party solutions if needed)
• Publishing approval OOB feature with Flow, scheduling coming soon
• Custom page layouts (templates) available already in target release mode
• Target audiences coming soon

21. 2 Run Modernization Scanner3 Plan and Prepare
4 Make it flat
7 Move list and library content
1 Move it to the Cloud
6 Prepare sites
8 Transform pages
5 Create new sites

22. •
•
•
•
•
•
•
•
•
•
•

23. •
•
•
•
•
•
•
•
•
•
•

24. Modernization Scanner
• Free tool by Microsoft
• First version 1/2018, getting updates frequently
• Cloud only! Cannot scan on-prem!
• Download and run from your machine
• Gives great insight about classic features in use

25. •
•
•
•
•
•
•
•
•

26. •
•
•
•
•
•

27. DEMO
Modernization Scanner

28. •
•
•
•
•
•
•
•
•
•
•

29. Cross-site
vs
in-place
modernization?

30. •
•
•
•
•
•
•
•

31. Page Transformation Engine
• Free tool / code base available in PnP github
• Allows you to transform existing classic page to a new
modern site page
• Note: publishing pages came in April, still in preview
• Creates a copy of the page with modernized content
• Transformation can be controlled with XML
configuration file

32. •
•
•
•
•
•
•
•
•
•
•
•

33. DEMO
Page Transformation

34. •
•
•
•
•
•
•
•

35. •
•
•
•
•
•
•
•
•
•
•
•
•