How to Design for Arc XP Themes

To give sites unique styles, Arc XP recommends focusing on particular elements to achieve the unique look-and-feel for each site without requiring unique feature development. Examples of these kinds of changes include:

Arc XP also recommends that some elements remain consistent across all sites. This does not mean that customizations per site are impossible or even difficult. Customization of the following features will add complexity, time, and potential workflow complications:

Templates are combined with a resolver (regex pattern) to render all of a single content type on the same layout. All content using a template will have the same URL pattern.

Templates should be used for content types that do not have frequent layouts or content changes. Any change made to the template will affect all content rendering on that template.

Subtypes can be used for variations within a content type, but should be used strategically. Too many subtypes create edge cases and cause extra effort when making technical or editorial updates to the templates. For example, Sponsored Articles that are almost identical to standard Articles, having only one or two unique features, will require a unique template and subtype.

Arc XP recommends using templates for:

Pages are unique URLs with manually curated content. The layouts can be identical to templates (for example, a right rail layout can be used for both a template and page), but the features on the page are unique.

Pages are a powerful tool, but too many can cause a heavy technical and editorial burden.

Arc XP recommends using pages for:

Changes across breakpoints are critical to achieving an optimal user experience on a website. Below is a list of dos and don’ts for creating a good user experience across all three breakpoints on Arc XP.

Arc Blocks are features created and maintained by the PageBuilder Themes team. While they cannot be customized, many contain elements that can be configured. Configuration means that the Editor has choices about how to style the block within the PageBuilder Admin (the left side rail where the display of a feature is controlled in PageBuilder).

A Story Card pulls in data on a single Article and displays the relevant data (pulled from defined ANS fields) in a particular style.

Themes has story cards of various sizes that can be added and configured individually.

Arc XP Blocks can be used in conjunction with Content Editable - the feature that allows for the modification of fields in a story card that do not change the story content, only the display information on that page.

Story cards can also be customized. When evaluating the need to create a custom story card, ask the following questions:

Example:

An Editor selects the content for a top section in a layout. The Story Card used should emphasize the high quality image and include a large script for the headline. The Story Card may also include other fields like: subheadline, author, short description. However, when the Editor views the preview, the headline is too long and the image doesn’t focus on the part of the image they want to display. Furthermore, the page looks out of balance. Too many images are lining up on the left and the Desktop display looks unbalanced. The Editor can use the following to correct these issues quickly:

A flex feature is powered by a content source and displays a list of Story Cards from that content source. It’s a quick way to populate a section of a page that Editors do not want to manually curate.

Flex feature designs can be simple or complex. The important factor is to create as many as required by the Editorial team without creating too many. Variations in flex features can be helpful in creating unique User Experiences, but too many will clutter a site and add time to page creation.

For example, the same flex feature can be used to create the Author, Tag, and Search pages on most sites. This is a basic list flex feature - the only change is the content source.

You can select a combination of Story Card and Content Source to build the feature.

The PageBuilder Admin can include helpful features like:

Arc Blocks include the button to show more content where required. The fonts and colors will be pulled from the Design UI.

This block is provisioned with the current logos for the social media brands support by Arc XP. Any additional social media brands will require building a custom block.

This feature enables a global change that is updated from a single location. This is enabled through fragmenting - creating a feature on a page and then using the feature on various pages and templates throughout the site.

Fragmenting and global features are powerful tools for making quick updates on all relevant pages. They are easy to update because a single parent fragment controls all the child fragments. There are two major limitations:

Themes provides a standard Header and Footer Block.

Headers and Footers (and all features that involve navigation links) are controlled by hierarchies created in Site Service. These hierarchies are similar to Content Sources, they are a source of data that is controlled and manipulated in a single place but can be used to power multiple features.

For example, a hierarchy called Primary Sections could contain a link to the landing page of all primary sections of the website. This hierarchy could be used on a websites main navigation, but it could also power any list of primary sections.

If the same hierarchy is used in multiple features then changes to the hierarchy will cascade to all those features.

Chains are a quick way to link features together. They also serve as the way to sub-divide a layout in PageBuilder.

Subdividing a section of a layout allows for more unique layouts. By default, any feature added to a layout will expand to fill 100% of the space. By sub-dividing the layout, the feature logic does not need to change but the layout will become more customizable.

The blue outline in the image above shows sections in a Layout. The orange shows chains of features within that section (a ⅓ to ⅔ column split).

Chains also allow for content to move quickly around a page. Rather than moving individual features and resetting configurations, an entire chain can be moved or deleted as a single action.

See Themes - Using Arc Chains.

Content Sources do not directly impact designs, but they are important to understand when designing your features. They power features - particularly flex features. They are a fast way to populate a feature that does not require manual curation.

For design purposes it is important to balance the number of manually curated and automated features on a page. Pages that require a large amount of curation should be limited based on the size of the Editorial staff and desired outcome of moving to Arc XP. If the goal in moving to Arc XP is to streamline Editorial processes, then more frequent use of content source powered features is critical. When reviewing designs, ensure that the ratio of automated to manually curated is one that can be supported by the client.

There are three types of content sources: query based, external APIs, and Collections.

See Themes - Using Content Sources.

Arc XP clients use several different strategies to induce Users to circulate through their sites. Recirculation is critical for User engagement and for advertising revenue.

Arc XP recommends Related Content features and recommendation engines as the primary strategy for encouraging Users to stay engaged with content. These features can be moved on pages and templates to react to changing user engagement with little or no redevelopment effort. Efforts can be focused on creating features that are more enticing and responding to user feedback in Editorial work such as headline creation or selection of promo images.

Arc XP does not recommend paginating articles or infinite scroll as recirculation strategies. Both are a large effort to develop and maintain. They are also static in response to user engagement data. Generally, user data points to a steep decline in engagement in both models as scrolling or clicking is required.

An increasing number of Arc XP clients are moving away from traditional advertising as their primary source of digital income. Subscriptions is an increasingly important business model. For designs, it is important that the User experiences related to a paywall be integrated from the beginning.

All paywall models have at least two (sometimes three) distinct user experiences that should be displayed on all designs:

The paywall features will change based on two potential models:

Whichever model is chosen (and it is not required to choose immediately, both are supported by Arc XP Subscriptions) - designs are required for all of the following:

Arc XP recommends hiding the entire page or the entire article body when possible. It is the easiest solution to maintain across all pages and templates and avoids edge cases (For example: articles show 300 words, but the article is only 299 words long). This is also the easiest solution to implement across breakpoints. Furthermore, it is easy to change the status of content (paywalled or not) in Composer. It is also easy to change the layout of features on a template. It is much more difficult to change the logic or features in a Paywall. Changes to the paywall features should be relatively rare compared to other Editorial changes.

Content pulled in from APIs or sponsored articles usually requires clear labels for Users. These labels need to be included in the designs from the beginning.

Depending on the type of sponsorship, Arc XP can advise on the best strategy for reusing existing components to enable a consistent look-and-feel except for the legally required sponsorship markings.

Examples:

Advertising is a critical revenue stream for almost all Arc XP clients. Themes supports DFP advertising in an Arc XP Block. All other advertising providers and any custom sizes or behaviors will require a custom block.

Arc XP is a digital-first product. Print integrations all occur downstream from Arc XP products - this means that the “source of truth” for Arc XP is the digital version of the content.

Important to Note:

See Arc XP print integration.

Featured media is where content such as images, videos, and galleries are set on articles to display as the promo content on blocks. The following logic determines what featured media is displayed on a block when those blocks/templates are configured to display the promo content. Custom logic outside of this would have to be applied on a forked and/or custom block: 

Focal points can be optionally set within Photo Center, or as an override on promo images within Composer. 

Arc XP’s native player can be set up for a variety of user experiences.

Major questions for setting up the POWA player:

Videos can be used as the lead art in a story. Generally, when this choice is made the video will play in place (at the top of the article) and leaf pages may or may not be needed.

When using videos as lead art, the video can be the promo art in a Story Card of the Article. Or an image can be chosen if videos should not display on Story Cards.

See Lead Art – Arc Block.

Videos embedded within an article (not lead art) are part of the article body. These videos will display and act like any other video player with one notable exception: it is not possible to tell if an article has a video embedded in the article body when displaying the story in a story card.

Example

An editor selects a promo image for an article as the lead art. After the first paragraph of the story, they embed a related video into the article body. This story is added to the Section Front of the section in a Story Card and the promo image is displayed in the story card. However, the Section Editor wants users to know that there is a video embedded in the article by adding a kicker or label to the story. This is not possible unless the video is in the promo art position.

Videos can display in Story Cards when they are the designated lead art in an article.

If videos need to be embedded as promo art in a Story Card, several things should be taken into consideration for the user experience and design:

Video leaf pages are stand alone pages that include only a video, with a title and some basic metadata. Arc XP automatically generates a unique ID for all videos and creating a leaf page for videos is a simple process of creating a template and setting a resolver pattern.

These pages can be highly effective or confusing for users depending on the desired user experience.

The critical question that must be answered before setting up leaf pages: how will users reach the leaf page?

Positive Impacts of Leaf Pages

Negative Impacts of Leaf Pages

Arc XP Recommendations

Arc XP recommends creating leaf pages in the following circumstances: