In the previous blog, Part 1: Sitecore Quick Guide for the Beginner, we covered essential Sitecore topics, including what Sitecore is, its key features, SXA, templates and their types, Standard Values, Helix and Habitat, and how Sitecore interacts with its SQL database. We also introduced important tools like the Content Editor and explained how Sitecore handles content management and delivery.

In this blog, we’ll continue exploring more important topics to help you gain a deeper understanding of how Sitecore works. Let’s dive into the next set of Sitecore concepts…

1. What is CMS (Content Management System) in Sitecore?

Sitecore CMS (Content Management System) is a platform that helps you create, publish, and manage content on your website. It makes it easy to create and update digital content, improving the experience for your users. A CMS is a tool that allows teams to work together to create, edit, and publish digital content like web pages and blogs.

2. What is Versioning in Sitecore?

In Sitecore, versioning lets you create multiple versions of any item, including different languages or variations. Using the Content Editor or Experience Editor, you can create as many versions as needed. There are two types of versions:

1. Numbered versions: These are versions of the item in the same language. For example, you might create a special version of your product page for a promotion, including a new image, and then switch it back after the promotion ends.
2. Language versions: These are versions of the item in different languages. For example, you can add an English version of a page and also create a French version. You would also need to create separate versions of any images to show in both languages.

3. Rendering in Sitecore.

In Sitecore, renderings are used to display content on a page or part of a page. Some types of renderings in Sitecore include:

• View Rendering: This is used for components that don’t need much logic or database interaction. It’s best for displaying content that doesn’t require complex business or presentation logic.
• Controller Rendering: This rendering involves providing a model, controller, and view. It’s used for displaying content that needs more complex business logic or presentation logic and relies on external data.

4. What is meant by the media library in Sitecore?

The Media Library in Sitecore is the place where you can store and organize all your media items, such as images, videos, audio files, and documents. You can upload and organize files like images (jpg, gif, png), documents (PDF, DOC, PPT), and media files, which can later be accessed and used in the Content Editor.

All your media files are kept in one place and can be organized in folders, similar to how content is arranged in the content tree. You can easily find media items using Sitecore’s search or by navigating through the folders in the Media Library.

5. What are tokens? And what types of tokens does Sitecore support?

As Sitecore developers, it’s a best practice to define Standard Values when creating templates. This allows you to set default or sample values for fields.

To achieve this, we can leverage Sitecore Tokens, which enable dynamic value insertion into fields based on the specific item created by the content author.

Sitecore provides several built-in tokens that can be used dynamically, including:

• $name: The name of the newly created item.
• $id: The ID of the new item.
• $parentid: The ID of the parent item.
• $parentname: The name of the parent item.
• $date: The current date in yyyyMMdd format.
• $time: The current time in HHmmss format.
• $now: The current date and time in yyyyMMddTHHmmss format.

Example of tokens

Here’s an example using the $name token. In this case, we have a field called “Heading.” When a new item is created, the value of this field will automatically be set to the name of the item being created.

6. What are the different publishing modes in Sitecore?

There are three types of publishing modes in Sitecore:

1. Incremental Publish: This mode only publishes the items in the publishing queue. This method is quicker because Sitecore doesn’t have to check or compare different versions of items before publishing them.
2. Smart Publish: This mode publishes only modified items since the previous publish. It compares the items in the master database with their versions in the target database, and if any changes are found, those items are published. However, this can be slow because it compares all items, which can take time if there are many items.
3. Republish: This republishes everything, even items that haven’t changed. It replaces every item in the target database with the one from the master database and deletes old versions from the target database. This is useful for updating the website with new content, restoring backups, or adding new languages or targets to the site.

7. Partial designs and Page designs

Partial designs: To reuse similar layouts for sections like the header, footer, and main content of a webpage, you can create partial designs in the page builder. These partial designs consist of components that can later be combined to form full-page designs.

Navigate to the path “/sitecore/content/{Your-Tenant}/{Your-Site}/Presentation/Partial Designs” in the Content Editor. Right-click and select “Insert” to add a “Partial Design” to the header.

Access the newly created “Partial Design” for the Header in the Experience Editor.

Page designs: A page design combines layout elements that help you organize your pages. For example, you can ensure that the header and footer always appear in the same place. You can also create different page designs for specific pages, like a blog page, landing page, or product page. Content authors can then add content to these pre-made layouts.

You can create page designs using the Content Editor and the Experience Editor.

In the Content Editor, go to the path /sitecore/content/{Your-Tenant}/{Your-Site}/Presentation/Page Design. Right-click and choose “Insert” to add a new “Page Design”.

In the Design section, choose the partial designs you wish to add, like header, footer, or metadata, click the right arrow to transfer them to the selected items list, and then save your changes.

The Designing section has a field called “Template to Design Mapping.” This field links page designs to templates. Pages are created under “Home” using the Page template by default. We will map the design accordingly since we want a consistent design throughout the website. I associated the Article page design with both the Home and Page templates.

Now, when you browse the website, you will see your page content along with the content from the partial designs.

8. What is Scriban in SXA?

I’ll provide a quick overview of Scriban, but I strongly recommend reading this great guide by Drew Taylor for more information.

Scriban is used in rendering variants to define your HTML layout and control how the data from your template is applied.

Scriban have their own language and rules for getting data from the source and combining it with logic, HTML, CSS, and JavaScript in a single file.

9. What is Cloning in SXA?

In SXA, you can quickly duplicate a rendering using the clone script. This creates an exact copy of the rendering definition, parameters template, data source templates, and branches. You can then change the name and modify the style. This is helpful, for example, when you need several Promo renderings with different styles.

I strongly suggest you check out Ankit Tawale’s blog for a better understanding of cloning in SXA.

10. What does a pipeline mean in Sitecore?

In Sitecore, pipelines consist of a sequence of steps or processes that are executed in a defined order to achieve a specific task. They are a core component of Sitecore’s architecture. In Sitecore, various processes, including authentication, request handling, publishing, and indexing, are managed through pipelines. Developers can modify these pipelines by altering patch files to add, remove, or change functionality within Sitecore.

To explore and study all the available pipelines in Sitecore, the best approach is to visit the following page:

https://<domain>/sitecore/admin/showconfig.aspx

In the example above, we have a pipeline consisting of three processors. If we need to enhance the functionality, we can insert a new step into the pipeline.

We can also completely replace an existing step, providing greater flexibility to customize the functionality and execution of that step as needed.

This post covers essential Sitecore concepts that will help you create, manage, and optimize your digital experiences. By understanding tools like versioning, rendering, and pipelines, along with features such as media management and SXA, you’re equipped to leverage Sitecore’s full potential. Keep exploring and experimenting to unlock even more possibilities with Sitecore!

Looking to become a Sitecore developer? You’re in the right place! Sitecore is the most popular .NET-based Content Management System (CMS) used by businesses around the world to build personalized and smooth digital experiences. Sitecore keeps improving with new tools for its users.

Let’s start by understanding what Sitecore is all about…

1. What is Sitecore?

Sitecore is a powerful digital experience platform (DXP) built on ASP.NET, used by businesses to create and manage websites with personalized content. It helps web editors and marketers handle everything from social media and blog posts to advanced personalization. Sitecore is adaptable, can grow with your needs, and works well with other systems. Since its launch in 2001, it has become popular for managing digital content, optimizing user experiences, and analyzing customer data from both online and offline interactions.

2. What are the key features of Sitecore?

Here are some essential features of Sitecore:

1. Personalized Customer Data: Sitecore tracks customer interactions and behaviors, helping you understand and engage with them better to boost revenue.
2. Sitecore Experience Database (xDB): Combines all customer data (from CRM and other systems) into one place, giving you a complete view of each customer’s journey.
3. Sitecore Experience Profile (xP): Creates individual profiles for each customer, showing their activity on your site, like what they buy and click on.
4. Multi-language and Multi-Site Support: Sitecore makes it easier to manage global websites with multilingual support, helping you maintain a consistent brand experience.
5. Marketing Automation: Helps marketers set up automated campaigns that respond to customer actions, like sending a thank-you email after a purchase.
6. Federated Experience Manager (FXM): lets you use Sitecore features on non-Sitecore websites, providing a smooth experience and consistent customer data across all your sites.

3. What is SXA (Sitecore Experience Accelerator)?

The Sitecore Experience Accelerator (SXA) is a tool that helps web development teams build websites faster by allowing them to reuse components, templates, and layouts across different sites. It separates the design from the structure, allowing front-end developers, content authors, and designers to work simultaneously.

This makes it easier to create and maintain multiple sites efficiently. For example, while the front-end developer works on the site’s design, the content author can add the content, and the developer can set up the data templates.

4. What is the Standard Value in Sitecore?

In Sitecore, Standard Values are the pre-set defaults for fields in a data template. These values are used whenever a new item is created, ensuring that specific fields have a default value unless manually changed. Standard values are saved in a child item called “Standard Values” under the data template definition. Sitecore will use the standard value if a field value is missing or NULL. For example, the default value for the “Sample item” template is saved in the “_Standard Values” section, which is a child of the “Data” template.

5. What is Helix and Habitat?

Helix

Sitecore Helix is a set of best practices for building Sitecore websites. It helps organize the structure of your Sitecore solution and provides best practices to make development easier. Helix focuses on reducing dependencies between different parts of the project, making it easier to test, extend, and maintain. It’s designed to be flexible and work with any Sitecore project.

Habitat

This Sitecore project uses the Sitecore Experience Platform and follows Helix’s best practices for design. It serves as an example to show how Helix works in practice, helping developers avoid building modules from scratch. It also provides a solid foundation for creating and improving new modules.

6. What is the meaning of templates, and what are the different kinds of templates in Sitecore?

Templates in Sitecore define the structure and layout for content, helping organize how data is entered and displayed. Below are the main types of templates in Sitecore:

1. Data Templates define the fields, field types, and structure for content items.
2. Branch Templates create multiple related items or a hierarchy of items instead of just one item.
3. Command Templates use Sitecore commands to create items through custom logic or wizards rather than following a predefined structure.

7. What are the databases used by Sitecore?

Sitecore CMS uses three primary SQL Server databases:

1. Core: This database holds Sitecore settings, including configuration files for the Sitecore user interface. It customizes Sitecore, adding new apps to the Sitecore desktop.
2. Master: This database stores all versions of the content. Business users can edit and update content here.
3. Web: This database contains the latest published version of content that has passed through the final stages of its workflow.

8. What is meant by a Content Editor?

The Content Editor (CE) is where you can edit and organize all the content for your website. Its appearance and features may change based on user roles, security settings, and any customizations made to your Sitecore setup. The Content Editor is divided into three main sections, which you can adjust to your liking:

1. Ribbon: This area gives you access to all the features of the Content Editor.
2. Content Tree: This shows all the items in your Sitecore site, organized in a tree structure.
3. Content Area: Here, you can make changes or edit the details of your items.

9. What is an ‘item’ in Sitecore?

In Sitecore, an item is any content that makes up a webpage, such as text, images, layouts, or media files. Each item has a name, a unique ID, and a template that defines what kind of fields it includes. Items can have multiple versions in different languages as well.

You can create, edit, and manage content using the Content Editor (for handling content) or the Experience Editor (for editing content that shows up on the website). Before editing an item, it needs to be in “editing mode.” To avoid others working on the same item at the same time, you can lock the item while you’re editing it.

10. What do CM (Content Management) and CD (Content Delivery) mean?

Content Management (CM): is the section of Sitecore where content editors can add, update, and manage the content on the website.

Only content editors can use this feature, accessed through the Sitecore Experience Platform. The dashboard offers different options based on the editor’s role. Ultimately, it’s the content editor that will be used to manage and make changes to the content, as shown below:

Content Delivery (CD): CD is responsible for selecting and displaying the right content in the correct format across all channels, ensuring a smooth experience for website visitors. Multiple content delivery servers can be set up to improve performance and scalability.

Once a content editor finishes and finalizes the content, they can make it “live” by publishing it. This process moves the content from the “master” database to the “web” database. The content is visible to everyone once it’s in the web database. Content delivery servers only pull content from the “web” database and not from the “master” database.

To continue exploring Sitecore’s key concepts, check out Part 2: Sitecore Quick Guide for the Beginner for further insights and information.

I’ve spent almost 30 years in web and digital, starting way back when the “world wide web” was full of under construction GIFs, <blink> tags, and visitor counters! Nobody misses those things!

While many bad user experiences have faded away, some daily annoyances still need to go. In the spirit of Seinfeld’s “airing of grievances,” here are 12 web trends that need to end in 2025!

NOTE: This list highlights issues with better alternatives, so there’s no excuse not to fix them!

1. Skeleton Screen Fake Out

The Issue: Many websites and apps use skeleton screens – boxes and lines as placeholders – to make it seem like pages load faster. However, too many sites have abandoned consistency, and their skeleton layout doesn’t match the final content.

The Fix: Ensure your web team updates the skeleton screen whenever the page design changes. Ideally, create the skeleton with the actual HTML structure and use CSS for styling before and after the content loads.

2. Preload, Disappear, and Reload

The Issue: You open a new screen, see content for a moment, and then – POOF! – it disappears. You’re left with a blank screen until the same or new content reappears, often losing what initially caught your attention.

The Fix: This issue arises when JavaScript loads content after the initial page load. To avoid this, add coding logic to prevent existing content from being wiped out. Instead, load new content only when the user requests it (by scrolling or clicking refresh) or append it to the existing content without disrupting the user’s view.

3. Layout Shifts During Page Load

The Issue: Layout shifts are tracked by many web performance tools. While quick-loading sites minimize this issue, slow-loading pages can lead to frustrating experiences, like text rewrapping or buttons moving unexpectedly.

The Fix: Teams should manage when content is loaded via JavaScript. Using server-side rendering can ensure the page loads with complete content. For new content added after user interactions, design a way to display it predictably. Additionally, always include height and width attributes for images and resources to prevent layout shifts during the initial load.

4. Hover Effects That Shift Elements

The Issue: This frustrating experience occurs when user interactions lead to unexpected behavior. For example, hovering over an expand/collapse icon might automatically open a sidebar, causing users to click inadvertently on links they didn’t intend to.

The Fix: Avoid animating large elements or shifting layouts on hover. If you must use this behavior, ensure that any newly animated content is not clickable. A dead click is preferable to an accidental page load.

5. Multiple Page Load Pop-Ups

The Issue: You visit a new site eager to explore, but are immediately hit with a cookie banner, a chatbot, and a newsletter sign-up that covers the main content. This is a classic case of “everything is important.”

The Fix: Recognize that not everything you want to communicate is important to the user. Prioritize which message matters most and use coding logic to control when and how these distractions appear. It’s okay to show a pop-up after users have been on the page for a while, but avoid placing it over content they’re trying to read.

6. Clickbait Disappointment

The Issue: Clickbait titles are everywhere because they work, but they often lead to disappointment. You click on a title like “Is the Web Dead?!?” only to find the content doesn’t match – leaving a bland conclusion that the web is alive and well.

The Fix: Aim for authenticity. When focusing solely on vanity metrics like clicks and views, you risk misleading your audience. Follow the “golden rule” by treating your readers as you’d want to be treated. Write your article first, then create a fitting headline, avoiding scammy tactics altogether. Or if you really want a shocking headline, then put in the effort to have content that is worthy (without being deceitful).

7. Auto-Playing Videos with Sound

The Issue: Unexpectedly auto-playing videos with sound can be jarring, especially if the user is in a quiet place or already listening to something else. This creates a chaotic experience.

The Fix: Avoid being obtrusive. What you want may not align with what your user prefers. While you may not get explicit praise for muting videos on load, irritating your audience could drive them away.

8. Unexpectedly Stealing Focus

The Issue: Webpage elements can have focus, typically for form fields or interactive elements. Setting focus correctly can enhance the user experience, but using JavaScript to change focus after users have engaged with other parts of the page can be extremely annoying.

The Fix: Use built-in HTML attributes to set focus on an element when the page first loads. Be cautious with JavaScript focus changes that should only occur in response to user actions, like clicking a button to open a modal. This is also important for accessibility and keyboard navigation.

9. Forms That Want Everything

The Issue: Research shows that shorter forms convert better. Long forms that require scrolling can feel overwhelming. For instance, an email newsletter sign-up should only ask for an email address. You don’t need a company name or phone number right away.

The Fix: While your company may want to collect detailed information, consider using alternative methods like progressive profiling. This approach enhances user experience and encourages ongoing engagement without overwhelming users upfront.

10. Premature Form Errors

The Issue: User input validation is crucial for ensuring correct data entry, like email formats and password security. While real-time validation can enhance user experience, it becomes frustrating if errors are flagged before users finish typing.

The Fix: Avoid marking input as incorrect too early. For example, if an email field turns red after the second character, it disrupts the flow. Instead, use “change” or “blur” events to validate input only after the user has finished entering their information.

11. Forgotten Form Input

The Issue: On-page user input validation is helpful, but server-side validation is essential for security. When the server detects an error, it often sends users back to the form. When done incorrectly, this can wipe out their previously entered input. This can be incredibly frustrating!

The Fix: Implement coding logic to retain the user’s original input when the page refreshes. While you may need to exclude sensitive information like passwords or credit card numbers, preserving other input will help avoid punishing users for minor mistakes.

12. External Link Targets

The Issue: It can be frustrating when clicking a link takes you away from the current site, especially if you’re not finished reading the content. You often want to return to where you left off, and you may get completely side-tracked and never return.

The Fix: While users can manually open links in new windows, it adds unnecessary effort. Content authors can set links to open in a new window using the “blank” target. An even better solution is to use a simple JavaScript function that automatically adds this target attribute to links that lead to different domains. This unobtrusive approach ensures a smoother user experience, even if authors forget to set it.

Conclusion

We often get so focused on our goals and metrics that we overlook the human aspect of the user experience. Many users simply “live with” poor experiences and may only complain to themselves. I’m a fan of delighting users and eliminating unnecessary frustrations.

I hope that sharing what “grinds my gears” inspires us all to improve user experiences across the web. With the spirit of Festivus in mind, let’s air our web grievances and commit to doing better in the new year!

……

If you are looking for a digital partner who has their eye on quality user experiences, reach out to your Perficient account manager or use our contact form to begin a conversation.

Edge Delivery Services empowers developers and authors to create lightning-fast, high-performing digital experiences that score a perfect 100% on Google’s Lighthouse metrics. With Edge Delivery, you can choose from two flexible implementation options – document-based authoring and WYSIWYG (What You See Is What You Get) – to streamline your development workflow and accelerate content authoring. 

Edge Delivery Services Setup

This blog will focus on document-based authoring, also known as Project Franklin, Helix, or AEM (Adobe Experience Manager) Live. To unlock the full potential of Edge Delivery Services and get started with local development, please refer to Adobe’s comprehensive guide for setting up Edge Delivery Services locally.

With this foundation, we will discuss the developer’s insights on document-based authoring in the subsequent section. 

Tips and Tricks

Be a Lighthouse Keeper

The overarching goal is to maintain a perfect Lighthouse score throughout the development process. To achieve this, regularly monitor the score at key milestones, such as the completion of each feature or block. Referring to the diagnostics and addressing suggested areas of improvement will help you maximize your score.

For instance, look at the items listed in the image below. By keeping a close eye on Lighthouse performance, you will significantly reduce the number of issues to address, resulting in a much shorter list. Regular monitoring helps identify and resolve problems early on, streamlining your development process.

Example of Google’s Lighthouse Diagnostics for a website.

Additionally, by adopting a mobile-first development approach, you can minimize rework and ensure a seamless user experience across all devices. This proactive strategy will eventually save time and effort.

Best Practices for Accurate Lighthouse Score Testing

When testing Lighthouse scores during local development, it’s essential to minimize external factors that can impact your results. Only enable necessary browser extensions, as they can negatively affect your score. If you’re unable to disable extensions, consider using the command line interface instead. To get started, refer to the steps below.

1. Install Lighthouse: Run the following command to install Lighthouse globally on your machine:

   npm install -g lighthouse

2. Run Lighthouse: Check your score using the following command:

   lighthouse <url>

3. Customize breakpoints (optional): To test specific breakpoints, pass options using the following command:

   lighthouse <url> --view --chrome-flags="--window-size=<windowWidth, windowHeight>"

   Replace <url> with the URL you want to test, and <windowWidth> and <windowHeight> with your desired dimensions.

Leveraging the Boilerplate Code for Enhanced Performance

Edge Delivery Services’ boilerplate code offers a range of functions designed to optimize code performance. To explore these functions and gain a deeper understanding of the code, review the scripts in aem.js and script.js. These scripts provide out-of-the-box (OOTB) functions that can significantly enhance your development workflow.

One of the noteworthy functions is the createOptimizedPicture(), which optimizes image delivery. Additionally, the buildAutoBlocks() function is a valuable tool for autoblocking, particularly on blog post pages or when creating common components for pages using the same template. This function can serve as an inspiration for your own custom solutions.

Naming Conventions for Blocks

To ensure seamless rendering, verify that the block name on the document matches the corresponding block folder and file names (CSS/JS) under the /blocks directory. For instance, if the block is named “social-media-links“, the folder structure should mirror this naming convention.

Example block folder structure.

On the document, the block can be referenced using the following variations, all of which will render the above-sown block successfully:

• social media links
• Social Media Links
• social-media-links
• Social-Media-Links

Example block authored in a table.

Note that while the naming convention is case-insensitive, it is sensitive to camelCase. Therefore, using “socialMediaLinks” will not render the block correctly. Maintaining consistent naming conventions ensures efficient block rendering and avoids potential issues.

Checkout the OOTB Block collection

Before building a new block from scratch, take a moment to explore the out-of-the-box (OOTB) options available with Edge Delivery Services. The Edge Delivery Services offers a comprehensive array of block examples that can serve as a foundation for your project, saving you time and effort. Although the OOTB blocks may seem comparable to core components, they serve a distinct purpose. Unlike core components, the block collection from the boilerplate code cannot be extended, and no updates from Adobe should be expected. Developers are free to utilize or repurpose any block from the collection or those found in the boilerplate code. By leveraging the OOTB collection, you can accelerate your development process and avoid reinventing the wheel.

Overcome New Edge Delivery Services Obstacles

By incorporating these tips and tricks into your Edge Delivery Services-based development routine, you’ll be able to overcome common obstacles faced by a new Edge Delivery developer. Remember, the key to success lies in continuous learning, adaptability, and a willingness to explore new approaches.

Stay curious!

More Edge Delivery Services Content!

New From Adobe: Next-Gen Composability

Adobe Edge Delivery Services POC