Episode Sponsor - Magic Mind & Wix Studio
Magic Mind returns as an episode sponsor this week and we thank them for their support!
Limited time Magic Mind deal for our listeners!
https://magicmind.com/HTMLPOD20 - 20% off for one-time purchases and subscriptions (Use the link and code!)
Code: HTMLPOD20
Wix Studio: The Web Platform for Agencies and Enterprises
Wix Studio is the new web platform tailored to designers, developers and marketers who build websites for others or for large organizations. The magic of Wix Studio is its advanced design capabilities which makes website creation efficient and intuitive.
Check out Wix Studio today.
How to support the show
Patreon
Prices subject to change and are listed in USD
- Support the show from as little as ~$1/month
- Get a shoutout at the end of the episode (while supplies last) for just ~$3/month
- Help support the HTML All The Things Podcast: Click Here
Show Notes
Introduction
- Inspired by Webflow’s new page slots and component slots
- Page slots allow developers to define editable areas within a static design
- Pre-approved components can be added to these areas
- Component slots are used in reusable components. These components contain slots that can be customized with different content - keeping structure the same, but adding variation to a component where before an entirely new component may have been required
- Building these component and page variations used to be the job of the developer, a non-tech staff member would end up calling the development team for assistance
- Beyond Webflow’s new slots, WYSISYG page builders are extremely popular - with some supporting customizable widgets (ie Elementor) that a developer can create for their customer’s needs
- With more freedom developers may be engaged less…or will they? Will the increased complexity given over to non-tech staff result in more confusion, a less-clean webpage?
- If you give non-tech more power, if something goes wrong, then it may be a more severe problem in comparison to if you’d simply given them some basic CMS fields to fill in
The “New” Tools on the Block: CMSs, Page Builders, and Custom Sections
- Traditionally, CMSs like WordPress and Shopify have given non-tech teams the ability to update copy, images, and perform minor tweaks. But with new page builders and customizable CMS sections, non-techy staff can do far more—sometimes even building full pages.
- Developers can set up custom sections and components, allowing non-tech teams to drag-and-drop them as needed. This section will highlight how these tools can empower teams and shift the web content workflow.
Empowering Non-Tech Staff - Benefits and Less Calls to Developers
- Fewer Support Requests: When non-tech staff can make content updates, developers spend less time on minor changes, freeing them to focus on complex work. This reduction in support requests can be a major efficiency boost for the development team.
- Speed and Agility: Non-tech staff can quickly create or edit pages without waiting for developer availability. This agility is especially valuable for marketing teams who need to respond quickly to trends or launch time-sensitive campaigns.
- Reduced Developer Burden and Focus on High-Impact Work: Developers can dedicate more time to significant updates, bug fixes, and feature development, knowing that non-tech staff can independently manage day-to-day changes.
The Risks of Handing Over Control
- Design Consistency and Brand Integrity: With multiple editors working on the site, maintaining a cohesive design can be challenging. Inconsistent formatting or off-brand content can disrupt user experience and dilute brand identity.
- Technical and Structural Issues: Without the knowledge to keep pages performant and accessible, non-tech staff may unknowingly introduce issues. For example, adding too many large images or heavy widgets can impact site speed and performance.
- Security Considerations: Each additional editor has the potential to introduce unvetted third-party plugins or scripts, which could create vulnerabilities. Developer oversight can help mitigate these risks.
Importance of Good UX in a CMS for Non-Tech Editors
- Developer Responsibility for CMS Usability: When setting up a CMS, developers play a critical role in ensuring that the backend is intuitive for non-tech users. A well-designed CMS helps prevent errors and streamlines workflows.
- Balancing Customization and Simplicity: While custom fields and options can be powerful, too much customization can confuse non-tech staff. Developers need to strike a balance, creating enough flexibility for editors without overwhelming them with choices.
- Making the CMS User-Friendly for Efficiency: A CMS with a clear UX reduces the learning curve for non-tech staff, meaning fewer support requests and greater confidence in managing the site. This includes well-labeled fields, preview functionality, and content guidelines that help editors make updates accurately.
When Developers Should Be in Charge
- Critical Pages or Complex Site Features: Developers are best positioned to handle high-impact pages (like product or checkout pages) and intricate features. This ensures that these key areas are carefully optimized for performance and user experience.
- Maintaining Site Architecture and Performance: Developer oversight is essential to prevent bloated code and maintain an efficient, scalable website. This helps keep the site performant, especially as it grows.
Finding the Middle Ground - Collaboration over Control
- Using Templates and Guardrails to Empower Editors: Developers can create structured templates that allow non-tech staff to edit content while ensuring they stay within design and brand guidelines.
- Training, Documentation, and Regular Check-Ins: Providing training and clear documentation helps non-tech staff understand the basics of good web practices, such as image optimization, mobile responsiveness, and accessibility.
- Regular Review and Feedback Loops: Scheduled reviews can give developers a chance to catch and correct any issues early on, allowing non-tech staff to learn and improve with guidance rather than restriction.
The Future of Page Editing and Ownership in Development
- AI-Driven Content Creation and Editing
- Artificial Intelligence is already impacting many areas of web development, and page editing is no exception. With AI-powered page builders, non-tech staff could soon have assistance in generating content, choosing layouts, and even suggesting SEO improvements in real time. Imagine a scenario where a marketing team member drafts a landing page, and the AI suggests the best section arrangement or copy variations based on data trends and audience behavior.
- For developers, AI offers a new level of control by enabling “smart” templates or components that adapt based on user actions, content type, or seasonal factors. Developers could set these AI rules and create boundaries, allowing non-tech staff to benefit from guided assistance without compromising site performance or design consistency.
- Improved CMS and Page Builder Design
- The usability of CMSs and page builders continues to improve, with platforms increasingly designed with non-tech users in mind. Advanced design systems are becoming available to non-tech staff, often incorporating drag-and-drop elements that still adhere to brand guidelines and design standards. This trend allows for rapid page creation while maintaining a high level of design consistency.
- Additionally, we’re seeing the emergence of modular design systems where each piece of content, from headers to calls-to-action, is component-based. Developers can establish a library of pre-approved design components that non-tech staff can use. This modularity makes it easy for editors to build new pages and update content while maintaining alignment with the overall site architecture and branding.
- No-Code and Low-Code Platforms – Developer-Enhanced but User-Friendly
- The no-code and low-code movement is allowing users to build more complex pages without traditional coding skills. Platforms like Webflow, WordPress’s Block Editor, and tools like Figma are bridging the gap between design, content, and development, giving non-tech staff unprecedented access to page-building tools.
- For developers, this means there’s an opportunity to create robust templates, custom modules, or restricted components that editors can manage without breaking the site. Developers can even set custom rules or restrictions, so that the page-building experience is intuitive and limits errors.
- Voice-Activated and AR Page Editing Tools
- As technology evolves, we may see new ways for non-tech staff to edit and manage content—such as voice-activated commands or augmented reality (AR) overlays. Imagine using voice commands to quickly rearrange sections, pull in content from other parts of the site, or adjust SEO settings without even touching the screen.
- AR might also allow for real-time page editing previews where editors can “walk through” a virtual site layout, making it easier to see how content flows and how design elements fit together. For developers, these emerging technologies would require a rethinking of CMS and component designs to ensure they remain compatible and functional within these new interfaces.
- Enhanced Collaboration and Real-Time Editing Tools
- Future page-building tools will likely include even more robust real-time collaboration features, similar to what’s seen in Google Docs or Figma. Non-tech staff and developers could work on a page simultaneously, allowing developers to guide changes or troubleshoot issues in real time.
- This could also mean shared “drafting” spaces where non-tech editors and developers can comment, provide feedback, and make updates in sync. For example, a content editor could draft a page, tag a developer to review code-heavy elements, and both could finalize the page without needing to swap files or tickets.
- Automated Quality Control and Brand Enforcement Tools
- Automated quality control tools may soon provide on-the-fly alerts for non-tech staff, warning them if they add incompatible elements, break design rules, or fail accessibility checks. For instance, adding an unoptimized image could trigger an automated prompt to compress it, or missing alt text might bring up a reminder to add it.
- For developers, this provides reassurance that brand and accessibility standards are being upheld. With these built-in quality control checks, developers can focus on more complex tasks, knowing that common content errors are being flagged and addressed as part of the workflow.
Shoutouts!
Michael LaRocca
