Crafting an Impactful Home Page That Your Editors Will Love

•

0 likes•249 views

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.

Technology

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

What's hot

4LL12

João Cabral

GlotPress aka translate.wordpress.org

Marko Heijnen

10 things Not To Do With WordPress

Ricky Blacker

Transcript

Irfan Baig

Beyond power point

University of California, San Diego

AJ Klein Capstone Presentation

Alexander Klein

You’ve probably seen it happen- someone complains because they just got a website, but they don’t know how to use it. Their designer or developer or project manager just left them high and dry without some type of direction or documentation. Let’s face it, as a designer or developer or project manager, you’re definitely going to run into someone who isn’t really that familiar with WordPress. In fact, you’ll encounter all sorts of user levels when it comes to working with clients. How do you teach your client how to use their WordPress website? How do you figure it into your project’s scope? If you don’t like teaching them, what can you do to make sure your relationship with your client ends on a good note because you were diligent to give them the tools they need to continue on their own? I’ll be going over strategies to help you put together a plan on teaching your clients how to use WordPress. Let’s decrease the frustration together and allow your clients to become enthusiastic WordPress users that are making money.

Teaching Your Clients How to Use WordPress

Nile Flores

Building your first WordPress plugin

Justin Foell

The Child Theme Dilemma (EN) - Milano Edition

Torsten Landsiedel

Portfolio121109

Katariina Nyberg

JavaScript - Web Development Fundaments Part 2 - DeepDive Learning Academy

Parag Mujumdar

Getting Ready for Gutenberg

Chris Lema

Buildappjsjq9:12 sd

Thinkful

How to deliver a WordPress website to your client ...the RIGHT way

Cath Hughes

Staying Connected: Securing Your WordPress Website

Raymund Mitchell

An Introduction to Gutenberg, WordPress's New Editor

Andrew Marks

What's hot (16)

4LL12

GlotPress aka translate.wordpress.org

10 things Not To Do With WordPress

Transcript

Beyond power point

AJ Klein Capstone Presentation

Teaching Your Clients How to Use WordPress

Building your first WordPress plugin

The Child Theme Dilemma (EN) - Milano Edition

Portfolio121109

JavaScript - Web Development Fundaments Part 2 - DeepDive Learning Academy

Getting Ready for Gutenberg

Buildappjsjq9:12 sd

How to deliver a WordPress website to your client ...the RIGHT way

Staying Connected: Securing Your WordPress Website

An Introduction to Gutenberg, WordPress's New Editor

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

Complete Website Development Guide by AMit P Kumar

Amit P Kumar

CSS Eye for the Programmer Guy

Dennis Slade Jr.

NAO Technical Discovery ITT National Audit Office

stephenadenaike1

Word press in 60 minutes

Michelle Castillo

Web performance has been one of the most talked about web development topics in the recent years. Yet if you try to start your journey with the speed optimisations, you might find yourself in a pickle. With the tooling, you might feel overwhelmed—it looks complex and hard to comprehend. With the metrics: at first glance all of them seem similar, not to mention that they change over time and you cannot figure out which of them to take into account.

Demystifying web performance tooling and metrics

Anna Migas

Wordpress Workshop: Session One

WP Web Wizards

Netcat SiteSWiPE introduction presentation

Tym Lawrence

How to do training and support for WordPress users - WordPress Day at NTC, Au...

jasonking

We all know the importance of designing websites for mobile. But what about designing content for mobile, or for the myriad of devices that could be used to display a website. Typically, we think of adapting the style of websites on small devices, but we don't think about how our content strategy needs to work for different devices. In this session, we'll look at creating a device-agnostic content strategy, and how this effects our approach to Drupal site building. These slides were presented at Drupal GovCon and DrupalCamp Montreal 2017. Topics will include: Doing a mobile content strategy assessment Content formatting strategies Considerations for media Content previewing challenges Navigation issues Landing pages and long-format content

Device-Agnostic Content Strategy for Drupal

Suzanne Dergacheva

We got to the point where the old Drupal mantra of creating content first to see it later is not enough to suceed with content editors. Drupal is competing and replacing other CMS and platforms where the lack of flexibility is the problem #1 for content editors. They are expecting full flexibity on how content is created, displayed, approved and published. However this introduce a common problem for web developers and site builders: how can you provide this full flexibility without having to be constantly on the hook for further development or configuration. Modules like panels and panelizer, projects like Spark and distributions like panopoly and demo framework helped change the panorama in Drupal and the expectations that are set when sites are built. In this session we will look to a set of common problems and real examples when creating content and layout for pages with demanding editorial teams. We will look and evaluate common options and recipes. How can complex content and rich pages be structured ? Free HTML format in different fields? Structured data in complex fields? Use paragraphs or field collection? Different content items in different items/entities? How to glue it all together? How can indivual page layout be managed providing flexibility but also control? Rely on templating system and view modes? Use contrib modules like panels and panelizer or display suite? Mix several approaches and modules? How can I add any content to any page and choose its display ? How can I have a list of curated widgets ready to use by the content team to deploy anywhere or in any section? How can pages and sections be managed before approved and published? Use preview systems and inline editors? Use workbench or workflow for layout? Rely on more complex content staging systems? Use separated environments? These are daily problems that architects and developers face in every project. As a technical architect in Acquia it is uncommon a project where I am involved that does not need to solve one or more of these problems. In this session I will give some real examples and resume options and recipes that can be used to solve those problems today in Drupal 7 and look to Drupal 8 to explain how it can improve some of our possibilities and options and easy the life of one of our most important personas: the content editor.

Drupal architectures for flexible content - Drupalcon Barcelona

hernanibf

The Care and Feeding of Your WordPress Website - Hosting, Updates, Backups, S...

Cindy Cullen

WordPress 101

Laura Hartwig

Developing a practical HTML5 magazine workflow

Michael Kowalski

Nowadays, it's not only important to develop your clients' websites to look good on all browsers, and on PC and MAC, it's also a must that websites are viewable on tablets and mobile devices. A lot of people opt for making one version of their site for desktop and another for mobile. Others choose Responsive Design, a mix of fluid grids and layouts, flexible images and intelligent use of CSS media queries. There are quite a few sites dedicated to lending a hand with responsive grids, Gridpak, CSSGrid, Skeleton, and SimpleGrid, just to name a few.

How to convert your website to responsive mode

siavosh kaviani

We got to the point where the old Drupal mantra of creating content first to see it later is not enough to suceed with content editors. Drupal is competing and replacing other CMS and platforms where the lack of flexibility is the problem #1 for content editors. They are expecting full flexibity on how content is created, displayed, approved and published. However this introduce a common problem for web developers and site builders: how can you provide this full flexibility without having to be constantly on the hook for further development or configuration. Modules like panels and panelizer, projects like Spark and distributions like panopoly and demo framework helped change the panorama in Drupal and the expectations that are set when sites are built. In this session we will look to a set of common problems and real examples when creating content and layout for pages with demanding editorial teams. We will look and evaluate common options and recipes. - How can complex content and rich pages be structured ? Free HTML format in different fields? Structured data in complex fields? Use paragraphs or field collection? Different content items in different items/entities? How to glue it all together? - How can indivual page layout be managed providing flexibility but also control? Rely on templating system and view modes? Use contrib modules like panels and panelizer or display suite? Mix several approaches and modules? - How can I add any content to any page and choose its display ? How can I have a list of curated widgets ready to use by the content team to deploy anywhere or in any section? - How can pages and sections be managed before approved and published? Use prewiew systems and inline editors? Use workbench or workflow for layout? Rely on more complex content staging systems? Use separated environments? These are daily problems that architects and developers face in every project. As a technical architect in Acquia it is uncommon a project where I am involved that does not need to solve one or more of these problems. In this session I will give some real examples and resume options and recipes that can be used to solve those problems today in Drupal 7 and look to Drupal 8 to explain how it can improve some of our possibilities and options and easy the life of one of our most important personas: the content editor.

Drupal content editor flexibility

hernanibf

Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective

Inductive Automation

How to Project-Manage and Implement a Responsive Website

Jj Jurgens

Adobe.com Redesign: Powered by Day CQ5

Day Software

Wordpress theme submission requirement for Themeforest

Enayet Rajib

ASP.NET 5 is the next version of the incredibly popular ASP.NET platform and it’s one of the most significant architectural updates ever made to ASP.NET. How significant you ask? How about the ability to build cross-platform modern web apps that run on Windows, Linux and the Mac for starters. How about being able to build truly modular, lean, modern web apps that only use the system components that your application needs to use instead of using a large, monolithic library. There are 3 major changes being introduced in ASP.NET 5 including a new file based project system, a new cloud optimized core CLR, and the unification of MVC & Web API frameworks. In this presentation you will learn about what the future holds for ASP.NET 5 and how you can begin to get ready for it.

ASP.NET 5: What's the Big Deal

Jim Duffy

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

Complete Website Development Guide by AMit P Kumar

CSS Eye for the Programmer Guy

NAO Technical Discovery ITT National Audit Office

Word press in 60 minutes

Demystifying web performance tooling and metrics

Wordpress Workshop: Session One

Netcat SiteSWiPE introduction presentation

How to do training and support for WordPress users - WordPress Day at NTC, Au...

Device-Agnostic Content Strategy for Drupal

Drupal architectures for flexible content - Drupalcon Barcelona

The Care and Feeding of Your WordPress Website - Hosting, Updates, Backups, S...

WordPress 101

Developing a practical HTML5 magazine workflow

How to convert your website to responsive mode

Drupal content editor flexibility

Design Like a Pro: Building Mobile-Responsive HMIs in Ignition Perspective

How to Project-Manage and Implement a Responsive Website

Adobe.com Redesign: Powered by Day CQ5

Wordpress theme submission requirement for Themeforest

ASP.NET 5: What's the Big Deal

Recently uploaded

Screen flow is a powerful automation tool that is commonly designed for internal and external users. However, what about the guest users? We will dive into various methods of launching screen flows and understand how to make them publicly accessible, extending their usability to a broader audience. The presentation will also cover the implementation of security layers and highlight best practices for a smooth and protected user experience. Discover the potential of screen flows beyond conventional use and learn how to leverage them effectively.

Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade

CzechDreamin

We're living the AI revolution and Salesforce is adapting and bring new value to their customers. Einstein products are evolving rapidly and navigating their limitations, language support, and use cases can be challenging. Let's make review of what Einstein product are available currently, what are the capabilities and what can be used for in CEE region and how Rossie.ai can help to learn Salesforce speak Czech. We will explore the Einstein roadmap and I will make a short live demo (based on your vote) of some Einstein feature.

AI revolution and Salesforce, Jiří Karpíšek

CzechDreamin

I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.

"Impact of front-end architecture on development cost", Viktor Turskyi

Fwdays

Ever caught yourself nodding along when someone mentions "delivering value" in Agile, but secretly wondering what the heck they actually mean? You're not alone! Join us for an eye-opening session where we'll strip away the buzzwords and dive into the heart of Agile—value delivery. But what is "value"? Is it a mythical unicorn in the world of software development, or is there more to this overused term? This isn't going to be a sit-and-get lecture. We're talking about a face-to-face, interactive meetup where YOU play a crucial role. Come along to: Define It: What does "value" really mean? We’ll build a definition that’s not just words, but a compass for your Agile journey. Contextualise It: Discover what value means specifically to you, your team, your company, and your industry. Because one size does not fit all. Deliver It: Share strategies and gather new ones for uncovering and delivering true value—no more shooting in the dark!

Unpacking Value Delivery - Agile Oxford Meetup - May 2024.pptx

David Michel

IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx

Abida Shariff

How world-class product teams are winning in the AI era by CEO and Founder, P...

Product School

New customer? New industry? New cloud? New team? A lot to handle! How to ensure the success of the project? Start it well! I've created the 3 areas of focus at the beginning of the project that helped me in multiple roles (BA, PO, and Consultant). Learn from real-world experiences and discover how these insights can empower you to deliver unparalleled value to your customers right from the project's start.

Powerful Start- the Key to Project Success, Barbara Laskowska

CzechDreamin

Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application. In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics. Length: 30 minutes Session Overview ------------------------------------------- During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana: - What out-of-the-box solutions are available for real-time monitoring JMeter tests? - What are the benefits of integrating InfluxDB and Grafana into the load testing stack? - Which features are provided by Grafana? - Demonstration of InfluxDB and Grafana using a practice web application To view the webinar recording, go to: https://www.rttsweb.com/jmeter-integration-webinar

JMeter webinar - integration with InfluxDB and Grafana

RTTS

Agentic RAG What it is its types applications and implementation.pdf

ChristopherTHyatt

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...

Product School

This talk focuses on the practical aspects of integrating various telephony systems with Salesforce, drawing on examples from implementations in the Czech scene. It aims to inform attendees about the spectrum of telephony solutions available, from small to large scale, and their compatibility with Salesforce. The presentation will highlight key considerations for selecting a telephony provider that integrates smoothly with Salesforce, including important questions to support the decision-making process. It will also discuss methods for integrating existing telephony systems with Salesforce, aimed at companies contemplating or in the process of adopting this CRM platform. The discussion is designed to provide a straightforward overview of the steps and considerations involved in telephony and Salesforce integration, with an emphasis on functionality, compatibility, and the practical experiences of Czech companies.

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...

CzechDreamin

Unsubscribed: Combat Subscription Fatigue With a Membership Mentality by Head...

Product School

To Graph or Not to Graph Knowledge Graph Architectures and LLMs

Paul Groth

Already know how to write a basic SOQL query? Great! But what about an *aggregate* SOQL query? You know, the kind that uses aggregate functions like COUNT & MAX along with GROUP BY and HAVING clauses? No? Well, get ready to learn how to slice & dice your org’s data right inside your own dev console. From finding duplicate records to prototyping summary & matrix reports, learn the ins and outs of aggregate queries during this fast-paced but admin-friendly session on advanced SOQL concepts.

SOQL 201 for Admins & Developers: Slice & Dice Your Org’s Data With Aggregate...

CzechDreamin

The field of Information retrieval (IR) is currently undergoing a transformative shift, at least partly due to the emerging applications of generative AI to information access. In this talk, we will deliberate on the sociotechnical implications of generative AI for information access. We will argue that there is both a critical necessity and an exciting opportunity for the IR community to re-center our research agendas on societal needs while dismantling the artificial separation between the work on fairness, accountability, transparency, and ethics in IR and the rest of IR research. Instead of adopting a reactionary strategy of trying to mitigate potential social harms from emerging technologies, the community should aim to proactively set the research agenda for the kinds of systems we should build inspired by diverse explicitly stated sociotechnical imaginaries. The sociotechnical imaginaries that underpin the design and development of information access technologies needs to be explicitly articulated, and we need to develop theories of change in context of these diverse perspectives. Our guiding future imaginaries must be informed by other academic fields, such as democratic theory and critical theory, and should be co-developed with social science scholars, legal scholars, civil rights and social justice activists, and artists, among others.

Search and Society: Reimagining Information Access for Radical Futures

Bhaskar Mitra

In this insightful webinar, Inflectra explores how artificial intelligence (AI) is transforming software development and testing. Discover how AI-powered tools are revolutionizing every stage of the software development lifecycle (SDLC), from design and prototyping to testing, deployment, and monitoring. Learn about: • The Future of Testing: How AI is shifting testing towards verification, analysis, and higher-level skills, while reducing repetitive tasks. • Test Automation: How AI-powered test case generation, optimization, and self-healing tests are making testing more efficient and effective. • Visual Testing: Explore the emerging capabilities of AI in visual testing and how it's set to revolutionize UI verification. • Inflectra's AI Solutions: See demonstrations of Inflectra's cutting-edge AI tools like the ChatGPT plugin and Azure Open AI platform, designed to streamline your testing process. Whether you're a developer, tester, or QA professional, this webinar will give you valuable insights into how AI is shaping the future of software delivery.

Software Delivery At the Speed of AI: Inflectra Invests In AI-Powered Quality

Inflectra

Discover the essentials of performance testing in the IT sector with our concise guide. Learn about various testing types such as load, stress, endurance, spike, scalability, and volume testing. Understand key performance metrics like response time, throughput, CPU and memory utilization, and error rate. Explore top tools like Apache JMeter, LoadRunner, Gatling, Neoload, and BlazeMeter. Gain insights into best practices for defining objectives, creating realistic scenarios, automating tests, and optimizing performance to ensure user satisfaction, reliability, scalability, and cost efficiency. Ideal for developers, QA engineers, and IT professionals. Visit Expeed Software for more information. https://expeed.com/

In-Depth Performance Testing Guide for IT Professionals

Expeed Software

The standard Salesforce Approval process can be limiting in many ways, especially in complex scenarios. What if there was a way to implement very flexible approvals where one can use Apex code to make data updates in unrelated records, dynamically generate next steps details, and compute assignees on the fly? And still use UI-based configurations to implement concrete approval processes. In this session, we will share ideas behind such a solution and show a few lines of code to get you started.

Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder

CzechDreamin

Mission to Decommission: Importance of Decommissioning Products to Increase E...

Product School

In this session, we will showcase how to revolutionize automated testing for your software, automation, and QA teams with UiPath Test Suite. In part 1 of UiPath test automation using UiPath Test Suite – developer series, we will cover, Software testing overview What is software testing Why software testing is required Typical test types and levels Continuous testing and challenges Introduction to UiPath Test Suite UiPath Test Suite family of products Speaker: Atul Trikha, Chief Technologist & Solutions Architect, Peraton and UiPath MVP Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP

UiPath Test Automation using UiPath Test Suite series, part 1

DianaGray10

Recently uploaded (20)