Your editors want a fancy home page in Plone with all the whistles, but you want to make sure that it's still functional and easy to edit when need be. What is the best way to build a home page that has both? In this talk we'll walk through the available methods for achieving this, such as templates, content types, or using a layout editor like Mosaic. I'll also show some custom things you can do with Mosaic, and talk about Search Engine Optimization. Throughout I will show actual working examples from websites we have worked with.

1. CRAFTING AN IMPACTFUL HOME PAGE
THAT YOUR EDITORS WILL LOVE
Chrissy Wainwright - @cdw9
Six Feet Up

2. WHAT THIS TALK IS ABOUT
Diazo templat
e
Browser view templat
e
Content type + templat
e
Mosaic
The various techniques for creating a home page or landing page i
n
Classic Plone:

3. REMEMBER SEO
Home page should be updated regularl
y
Include your keywords everywher
e
Build a good site structure for navigatio
n
Speed, speed, spee
d
Alt text for images and video
s
Responsive Design

4. DIAZO TEMPLATE
https://2020.pythonwebconf.com

5. DIAZO TEMPLATE - EDITING

6. DIAZO TEMPLATE
Pros Cons
Can be edited through the we
b
Very
fl
exible in what can display
Requires someone comfortable
with HTML to updat
e
May require a code releas
e
No templating language, you are
limited without setting up a
bunch of Diazo rules.

7. DIAZO TEMPLATE
Why was this method was used?
Limited tim
e
Started as a single page site, dynamic bits added late
r
Allowed for TTW editin
g
When is this method useful?
When your editor is good with HTML, but not version control or code releases

8. BROWSER VIEW
https://engineering.purdue.edu

9. BROWSER VIEW - EDITING

10. BROWSER VIEW - EDITING

11. BROWSER VIEW - EDITING

12. BROWSER VIEW
Pros Cons
Less chance of the layout getting
broken (depends on your code
)
Easily connect to view class with
custom programmin
g
Very
fl
exible in what can displa
y
Pieces can still be editable TTW
Requires a tech-savvy person to
update some of the sections
May require a code releas
e
Sections not all editable in the
same place

13. BROWSER VIEW
Cautions / Suggestions
Add conditions to the template for each editable piec
e
Add an edit link for each section, so editors don’t have to
remember where to go to update content

14. BROWSER VIEW
Why was this method was used?
All sections in the layout should always display and keep their stylin
g
Most sections dynamically update themselve
s
When is this method useful?
When you need to throw a template together quickly, and don’t need
everything to be editable.

15. CONTENT TYPE + TEMPLATE
Sandia

16. CONTENT TYPE + TEMPLATE - EDITING

17. CONTENT TYPE + TEMPLATE - EDITING

18. CONTENT TYPE + TEMPLATE - EDITING

19. CONTENT TYPE + TEMPLATE
Pros Cons
Easy for editors - everything is in
one plac
e
Template allows for editable
sections that still get updated
dynamically
Single-use content typ
e
Layout isn’t
fl
exible, still uses a
template

20. CONTENT TYPE + TEMPLATE
Cautions / Suggestions
Add conditions to the template for each editable piece

21. CONTENT TYPE + TEMPLATE
Why was this method was used?
Initially set up TTW for a proof of concept for the client to try ou
t
When is this method useful?
When the editors need a single place to update the homepage content
without much
fl
exibilit
y
When the custom add-on is used on multiple sites

22. MOSAIC
Sandia

23. MOSAIC - EDITING

24. MOSAIC - EDITING

25. MOSAIC
Purdue’s landing pages

26. MOSAIC
Pros Cons
Easy for editors - everything is in
one plac
e
Super Flexible layout
Not as foolproof as a content typ
e
Can cause slower page loads
Not as stable because of the JS

27. MOSAIC
Cautions / Suggestions
Be careful not to make it too
fl
exible, give the editors parameters

28. MOSAIC
Why was this method was used?
Editors wanted full
fl
exibilit
y
Many sections are reused in various place
s
When is this method useful?
When the editors don’t want to be bound to a speci
fi
c layout

29. CONCLUSION
I prefer the browser view and Mosaic layout option
s
Volto is the futur
e
Build for your editors

30. THANK YOU!
@cdw9 on Twitte
r
chrissy@sixfeetup.com