TYPO3 Structure
Purpose: To maintain a coherent and unified user experience across all sites, it’s essential that both page templates and content elements are standardized. TYPO3 offers a range of built-in, ready-to-use elements that can be implemented consistently.
Template Consistency
Uniform Design
Templates for similar types of pages (e.g., homepage, landing pages, information pages, event listings) should follow the same design and structural guidelines to ensure a consistent user experience.
Centralized Management
Utilize TYPO3’s template management to create, update, and distribute templates across all sites, ensuring that any design or layout updates are reflected uniformly.
Customization Within Limits
While slight modifications may be necessary for site-specific content, the overall structure, header, footer, and navigation areas should remain consistent.
Documentation and Guidelines
- Follow this guideline’s recommendations for each layout structures, grid systems, and placement of key elements.
- Define naming conventions and versioning for templates to streamline maintenance and future updates.
Content Elements Consistency
Ready-to-Use TYPO3 Elements
TYPO3 includes a diverse range of built-in content elements that should be used consistently.
Text Elements
- Standard Text
A paragraph should follow the font family, size, and line height defined in the typography section of this guideline. - Rich Text Editor (RTE) for formatted content
The RTE content should automatically inherit styles for H2, H3, and body text as defined in the typography section.
Media Elements
- Text & Image
- Pair descriptive text with an illustrative image.
- The text is aligned alongside the image, with consistent margins and spacing that match the design’s grid system.
- Image Gallery/Slider
- All images in the slider should have the same dimensions, consistent border styles or gradient overlay if applied, as well as navigation controls and bullets.
- Video Embed
- The video container should maintain a consistent aspect ratio, and a fallback image or caption should be provided as per accessibility standards.
Header Elements
- Page Titles and Section Headers
- These headers should use consistent typography, font size, color, and spacing to reinforce the site’s identity.
Lists and Tables
- Bullet List
- The bullet style, indentation, and spacing are uniform across all pages.
- Numbered List
- The numbering format and list styling are consistent across all pages.
- Data Table
- Data tables should have consistent borders, header styling, and cell padding to ensure readability and visual uniformity.
Custom Elements
HTML elements may be used for specialized content if needed, following accessibility and design standards.
Usage Guidelines
Consistency in Application
Use the same content element types for similar data presentations across all sites. For example, use the “Text & Image” element consistently for sections that combine visuals with text.
Visual and Functional Uniformity
Ensure that the styling, spacing, and behavior of these elements are aligned with the identity guideline. This includes using the same CSS classes, grid configurations, and responsive behaviors.
Maintenance
Standardized templates and content elements make it easier to update and manage sites over time, as changes to a core element or template will automatically propagate across the network.