SlideShare a Scribd company logo
1 of 30
Download to read offline
CRAFTING AN IMPACTFUL HOME PAGE
THAT YOUR EDITORS WILL LOVE
Chrissy Wainwright - @cdw9

Six Feet Up
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:
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
DIAZO TEMPLATE
https://2020.pythonwebconf.com
DIAZO TEMPLATE - EDITING
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.
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
BROWSER VIEW
https://engineering.purdue.edu
BROWSER VIEW - EDITING
BROWSER VIEW - EDITING
BROWSER VIEW - EDITING
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
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
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.
CONTENT TYPE + TEMPLATE
Sandia
CONTENT TYPE + TEMPLATE - EDITING
CONTENT TYPE + TEMPLATE - EDITING
CONTENT TYPE + TEMPLATE - EDITING
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
CONTENT TYPE + TEMPLATE
Cautions / Suggestions

Add conditions to the template for each editable piece
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
MOSAIC
Sandia
MOSAIC - EDITING
MOSAIC - EDITING
MOSAIC
Purdue’s landing pages
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
MOSAIC
Cautions / Suggestions

Be careful not to make it too
fl
exible, give the editors parameters
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
CONCLUSION
I prefer the browser view and Mosaic layout option
s

Volto is the futur
e

Build for your editors
THANK YOU!
@cdw9 on Twitte
r

chrissy@sixfeetup.com

More Related Content

What's hot

AJ Klein Capstone Presentation
AJ Klein Capstone PresentationAJ Klein Capstone Presentation
AJ Klein Capstone Presentation
Alexander Klein
 
Building your first WordPress plugin
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress plugin
Justin Foell
 

What's hot (16)

4LL12
4LL124LL12
4LL12
 
GlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.orgGlotPress aka translate.wordpress.org
GlotPress aka translate.wordpress.org
 
10 things Not To Do With WordPress
10 things Not To Do With WordPress10 things Not To Do With WordPress
10 things Not To Do With WordPress
 
Transcript
TranscriptTranscript
Transcript
 
Beyond power point
Beyond power pointBeyond power point
Beyond power point
 
AJ Klein Capstone Presentation
AJ Klein Capstone PresentationAJ Klein Capstone Presentation
AJ Klein Capstone Presentation
 
Teaching Your Clients How to Use WordPress
Teaching Your Clients How to Use WordPressTeaching Your Clients How to Use WordPress
Teaching Your Clients How to Use WordPress
 
Building your first WordPress plugin
Building your first WordPress pluginBuilding your first WordPress plugin
Building your first WordPress plugin
 
The Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano EditionThe Child Theme Dilemma (EN) - Milano Edition
The Child Theme Dilemma (EN) - Milano Edition
 
Portfolio121109
Portfolio121109Portfolio121109
Portfolio121109
 
JavaScript - Web Development Fundaments Part 2 - DeepDive Learning Academy
JavaScript - Web Development Fundaments Part 2 - DeepDive Learning AcademyJavaScript - Web Development Fundaments Part 2 - DeepDive Learning Academy
JavaScript - Web Development Fundaments Part 2 - DeepDive Learning Academy
 
Getting Ready for Gutenberg
Getting Ready for GutenbergGetting Ready for Gutenberg
Getting Ready for Gutenberg
 
Buildappjsjq9:12 sd
Buildappjsjq9:12 sdBuildappjsjq9:12 sd
Buildappjsjq9:12 sd
 
How to deliver a WordPress website to your client ...the RIGHT way
How to deliver a WordPress website to your client ...the RIGHT wayHow to deliver a WordPress website to your client ...the RIGHT way
How to deliver a WordPress website to your client ...the RIGHT way
 
Staying Connected: Securing Your WordPress Website
Staying Connected: Securing Your WordPress WebsiteStaying Connected: Securing Your WordPress Website
Staying Connected: Securing Your WordPress Website
 
An Introduction to Gutenberg, WordPress's New Editor
An Introduction to Gutenberg, WordPress's New EditorAn Introduction to Gutenberg, WordPress's New Editor
An Introduction to Gutenberg, WordPress's New Editor
 

Similar to Crafting an Impactful Home Page That Your Editors Will Love

Drupal architectures for flexible content - Drupalcon Barcelona
Drupal architectures for flexible content - Drupalcon BarcelonaDrupal architectures for flexible content - Drupalcon Barcelona
Drupal architectures for flexible content - Drupalcon Barcelona
hernanibf
 
Drupal content editor flexibility
Drupal content editor flexibilityDrupal content editor flexibility
Drupal content editor flexibility
hernanibf
 

Similar to Crafting an Impactful Home Page That Your Editors Will Love (20)

Complete Website Development Guide by AMit P Kumar
Complete Website Development Guide by AMit P KumarComplete Website Development Guide by AMit P Kumar
Complete Website Development Guide by AMit P Kumar
 
CSS Eye for the Programmer Guy
CSS Eye for the Programmer GuyCSS Eye for the Programmer Guy
CSS Eye for the Programmer Guy
 
NAO Technical Discovery ITT National Audit Office
NAO Technical Discovery ITT National Audit OfficeNAO Technical Discovery ITT National Audit Office
NAO Technical Discovery ITT National Audit Office
 
Word press in 60 minutes
Word press in 60 minutesWord press in 60 minutes
Word press in 60 minutes
 
Demystifying web performance tooling and metrics
Demystifying web performance tooling and metricsDemystifying web performance tooling and metrics
Demystifying web performance tooling and metrics
 
Wordpress Workshop: Session One
Wordpress Workshop: Session OneWordpress Workshop: Session One
Wordpress Workshop: Session One
 
Netcat SiteSWiPE introduction presentation
Netcat SiteSWiPE introduction presentationNetcat SiteSWiPE introduction presentation
Netcat SiteSWiPE introduction presentation
 
How to do training and support for WordPress users - WordPress Day at NTC, Au...
How to do training and support for WordPress users - WordPress Day at NTC, Au...How to do training and support for WordPress users - WordPress Day at NTC, Au...
How to do training and support for WordPress users - WordPress Day at NTC, Au...
 
Device-Agnostic Content Strategy for Drupal
Device-Agnostic Content Strategy for DrupalDevice-Agnostic Content Strategy for Drupal
Device-Agnostic Content Strategy for Drupal
 
Drupal architectures for flexible content - Drupalcon Barcelona
Drupal architectures for flexible content - Drupalcon BarcelonaDrupal architectures for flexible content - Drupalcon Barcelona
Drupal architectures for flexible content - Drupalcon Barcelona
 
The Care and Feeding of Your WordPress Website - Hosting, Updates, Backups, S...
The Care and Feeding of Your WordPress Website - Hosting, Updates, Backups, S...The Care and Feeding of Your WordPress Website - Hosting, Updates, Backups, S...
The Care and Feeding of Your WordPress Website - Hosting, Updates, Backups, S...
 
WordPress 101
WordPress 101 WordPress 101
WordPress 101
 
Developing a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflowDeveloping a practical HTML5 magazine workflow
Developing a practical HTML5 magazine workflow
 
How to convert your website to responsive mode
How to convert your website to responsive modeHow to convert your website to responsive mode
How to convert your website to responsive mode
 
Drupal content editor flexibility
Drupal content editor flexibilityDrupal content editor flexibility
Drupal content editor flexibility
 
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition PerspectiveDesign Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective
 
How to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive WebsiteHow to Project-Manage and Implement a Responsive Website
How to Project-Manage and Implement a Responsive Website
 
Adobe.com Redesign: Powered by Day CQ5
Adobe.com Redesign: Powered by Day CQ5Adobe.com Redesign: Powered by Day CQ5
Adobe.com Redesign: Powered by Day CQ5
 
Wordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for ThemeforestWordpress theme submission requirement for Themeforest
Wordpress theme submission requirement for Themeforest
 
ASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big DealASP.NET 5: What's the Big Deal
ASP.NET 5: What's the Big Deal
 

More from cdw9 (11)

Debugging Your Plone Site
Debugging Your Plone SiteDebugging Your Plone Site
Debugging Your Plone Site
 
Contributing to Open Source (Lightning Talk version)
Contributing to Open Source (Lightning Talk version)Contributing to Open Source (Lightning Talk version)
Contributing to Open Source (Lightning Talk version)
 
Debugging with PDB
Debugging with PDBDebugging with PDB
Debugging with PDB
 
Introduction to Transmogrifier
Introduction to TransmogrifierIntroduction to Transmogrifier
Introduction to Transmogrifier
 
Contributing to Open Source
Contributing to Open SourceContributing to Open Source
Contributing to Open Source
 
The Future of [Plone] Theming
The Future of [Plone] ThemingThe Future of [Plone] Theming
The Future of [Plone] Theming
 
Unknown plone
Unknown ploneUnknown plone
Unknown plone
 
How to Get Started Theming Plone
How to Get Started Theming PloneHow to Get Started Theming Plone
How to Get Started Theming Plone
 
Making CSS and Firebug Your New Friends
Making CSS and Firebug Your New FriendsMaking CSS and Firebug Your New Friends
Making CSS and Firebug Your New Friends
 
Intro to TAL
Intro to TALIntro to TAL
Intro to TAL
 
Plone Theming in a Nutshell
Plone Theming in a NutshellPlone Theming in a Nutshell
Plone Theming in a Nutshell
 

Recently uploaded

Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
Joaquim Jorge
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
 

Recently uploaded (20)

Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot TakeoffStrategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
 
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live StreamsTop 5 Benefits OF Using Muvi Live Paywall For Live Streams
Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
 
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law DevelopmentsTrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
TrustArc Webinar - Stay Ahead of US State Data Privacy Law Developments
 
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
Apidays Singapore 2024 - Building Digital Trust in a Digital Economy by Veron...
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024Top 10 Most Downloaded Games on Play Store in 2024
Top 10 Most Downloaded Games on Play Store in 2024
 
Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024Axa Assurance Maroc - Insurer Innovation Award 2024
Axa Assurance Maroc - Insurer Innovation Award 2024
 
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
Deploy with confidence: VMware Cloud Foundation 5.1 on next gen Dell PowerEdg...
 
Artificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and MythsArtificial Intelligence: Facts and Myths
Artificial Intelligence: Facts and Myths
 
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdfUnderstanding Discord NSFW Servers A Guide for Responsible Users.pdf
Understanding Discord NSFW Servers A Guide for Responsible Users.pdf
 
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...Workshop - Best of Both Worlds_ Combine  KG and Vector search for  enhanced R...
Workshop - Best of Both Worlds_ Combine KG and Vector search for enhanced R...
 
Exploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone ProcessorsExploring the Future Potential of AI-Enabled Smartphone Processors
Exploring the Future Potential of AI-Enabled Smartphone Processors
 
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire businessWhy Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
 
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time AutomationFrom Event to Action: Accelerate Your Decision Making with Real-Time Automation
From Event to Action: Accelerate Your Decision Making with Real-Time Automation
 
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...2024: Domino Containers - The Next Step. News from the Domino Container commu...
2024: Domino Containers - The Next Step. News from the Domino Container commu...
 
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
 
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin WoodPolkadot JAM Slides - Token2049 - By Dr. Gavin Wood
Polkadot JAM Slides - Token2049 - By Dr. Gavin Wood
 
Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024Partners Life - Insurer Innovation Award 2024
Partners Life - Insurer Innovation Award 2024
 
AWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of TerraformAWS Community Day CPH - Three problems of Terraform
AWS Community Day CPH - Three problems of Terraform
 

Crafting an Impactful Home Page That Your Editors Will Love

  • 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
  • 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
  • 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
  • 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