- Developing User Guide overview
- Introduction for Developers
- Getting Started Developing AEM Sites - WKND Tutorial
- AEM Core Concepts
- Structure of the AEM Touch-Enabled UI
- Concepts of the AEM Touch-Enabled UI
- AEM Development - Guidelines and Best Practices
- Using Client-Side Libraries
- Developing and Page Diff
- Editor Limitations
- The CSRF Protection Framework
- Data Modeling - David Nuescheler’s Model
- Contributing to AEM
- Security
- Reference Materials
- Create a Fully Featured Website (Classic UI)
- Designs and the Designer (Classic UI)
- Migration to the Touch UI
- Platform
- Sling Cheatsheet
- Using Sling Adapters
- Tag Libraries
- Templates
- Using the Sling Resource Merger in AEM
- Overlays
- Naming Conventions
- Creating a New Granite UI Field Component
- Query Builder
- Tagging
- Customizing Pages shown by the Error Handler
- Custom Node Types
- Adding Fonts for Graphic-Rendering
- Connecting to SQL Databases
- Externalizing URLs
- Creating and Consuming Jobs for Offloading
- Configuring Cookie Usage
- How to programmatically access the AEM JCR
- Integrating Services with the JMX Console
- Developing the Bulk Editor
- Developing Reports
- Components
- Core Components
- Style System
- Components Overview
- AEM Components - The Basics
- Developing AEM Components
- Developing AEM Components - Code Samples
- JSON Exporter for Content Services
- Enabling JSON Export for a Component
- Image Editor
- Decoration Tag
- Using Hide Conditions
- Configuring Multiple In-Place Editors
- Developer Mode
- Testing Your UI
- Components for Content Fragments
- Obtaining Page Information in JSON Format
- Internationalization
- Classic UI Components
- Headful and Headless in AEM
- Headless Experience Management
- Headless and AEM
- Headless Journeys
- Headless Developer Journey
- Understand Headless in AEM
- Learn about CMS Headless Development
- Getting Started with AEM Headless as a Cloud Service
- Path to your first experience using AEM Headless
- How to model your content as AEM Content Models
- How to access your content via AEM delivery APIs
- How to update your content via AEM Assets APIs
- How to put it all together
- How to go live with your headless application
- Optional - How to create single page applications with AEM
- Headless Content Architect Journey
- Headless Developer Journey
- Getting Started Guides
- Content Fragments
- Headless Delivery with Content Fragments and GraphQL
- Working with Content Fragments
- Enable Content Fragment Functionality for your Instance
- Content Fragment Models
- Managing Content Fragments
- Variations - Authoring Fragment Content
- Markdown
- Using Associated Content
- Metadata - Fragment Properties
- Structure Tree
- Preview - JSON Representation
- Delivery API
- Assets HTTP API
- Content Fragments REST API
- Content Fragments GraphQL API
- Managing GraphQL Endpoints
- Using the GraphiQL IDE
- Persisted Queries
- Optimizing GraphQL Queries
- Updating your Content Fragments for optimized GraphQL Filtering
- Authentication for Remote AEM GraphQL Queries on Content Fragments
- AEM GraphQL API with Content Fragments - Sample Content and Queries
- Hybrid and SPA AEM Development
- Hybrid and SPA with AEM
- SPA Introduction and Walkthrough
- SPA WKND Tutorial
- Getting Started using React
- Implementing a React Component for SPA
- Getting Started using Angular
- SPA Deep Dives
- Developing SPAs for AEM
- SPA Editor Overview
- SPA Blueprint
- SPA Page Component
- Dynamic Model to Component Mapping for SPAs
- SPA Model Routing
- The RemotePage Component
- Editing an External SPA within AEM
- Composite Components in SPAs
- SPA and Server-Side Rendering
- Enabling JSON Export for a Component
- Launch Integration
- SPA Reference Materials
- Development Tools
- Development Tools
- AEM Modernization Tools
- Dialog Editor
- Dialog Conversion Tool
- Developing with CRXDE Lite
- Managing Packages Using Maven
- How to Develop AEM Projects Using Eclipse
- How to Build AEM Projects using Apache Maven
- How to Develop AEM Projects using IntelliJ IDEA
- How to use the VLT Tool
- How to use the Proxy Server Tool
- AEM Brackets Extension
- AEM Developer Tools for Eclipse
- AEM Repo Tool
- Personalization
- Extending AEM
- Extending AEM using Adobe Developer App Builder
- Customizing Page Authoring
- Customizing the Consoles
- Customizing Views of Page Properties
- Configuring your Page for Bulk Editing of Page Properties
- Customizing and Extending Content Fragments
- Content Fragments Configuring Components for Rendering
- Experience Fragments
- Extending Workflows
- Extending the Multi Site Manager
- Tracking and Analytics
- Cloud Services
- Creating Custom Extensions
- Forms
- Integrating Services with the JMX Console
- Developing the Bulk Editor
- Extending Classic UI
- Testing
- Best Practices
- Best Practices Overview
- AEM Development Guidelines and Best Practices
- Development Best Practices
- Content Architecture
- Software Architecture
- We.Retail Reference Implementation
- We.Retail Reference Implementation
- Trying out Content Fragments in We.Retail
- Trying out Core Components in We.Retail
- Trying out Editable Templates in We.Retail
- Trying out Responsive Layout in We.Retail
- Trying out the Globalized Site Structure in We.Retail
- Trying out Experience Fragments in We.Retail
- Coding Tips
- Code pitfalls
- OSGI Bundles
- JCR Integration
- Code Samples
- Troubleshooting Slow Queries
- Mobile Web
Designs and the Designer
This article describes how to create a website based on the classic UI. Adobe recommends using the latest AEM technologies for your websites as described in detail in the article Getting Started Developing AEM Sites.
The Designer is used to create a design for your website using the Classic UI in AEM.
For more information about Web accessibility, see AEM and the Web Accessibility Guidelines.
Using the Designer
Your design can be defined in the designs section of the Tools tab:
Here you can create the structure required to store the design, then upload the cascaded style sheets and images required.
Designs are stored under /apps/<your-project>. The path to the design to be used for a website is specified using the cq:designPath property of the jcr:content node.
All the changes that are made on a page in design mode are persisted below the design node of the site and are automatically applied to all pages that have the same design.
What you will need
To realize your design you will need:
CSS - The Cascading Style Sheets define the formats of specific areas on your pages.
Images - Any images that you use for features such as backgrounds, buttons.
Considerations When Designing Your Website
When developing a website, it is highly recommended to store images and CSS files under /apps/<your-project> so you can reference your resources based on the current design like described by the following snippet.
<%= currentDesign.getPath() + "/static/img/icon.gif %>
The preceding example offers severals benefits:
-
Components can have a different look/feel based on each site using a different design path.
-
Re-design of the website can be simply done by pointing the design path to a different node at the root of the site from
design/v1todesign/v2. -
/etc/designsand/contentare the only external URLs that the browser sees protecting you of an external user getting curious about what is under your/appstree. The above URL benefits also aid your System Administrator to setup better security because you are limiting the exposure of the assets to a few distinct locations.
Resources
Adobe Account
