Web template design best practices
Web templates can help increase a website's interactivity, boost conversion rates, and direct users' focus on specific content in an experience or experiment. When correctly designed, a web template can improve user engagement, drawing attention to promotions, subscriptions, email sign-ups, and other call to action (CTA) elements.
By following best practices, you can create a web experience or experiment that captivate users with visuals and functionality, while ensuring the timely delivery of relevant content or offers.
To avoid disrupting the user experience, especially for mobile users, we recommend that you avoid pop-ups on the first page, designs that obscure most of the web page, and any interstitials that disrupt the anticipated content display.
Here are a some web templates that you can use in a Sitecore Personalize experiment or experience, including some design recommendations and established best practices.
-
Alert bar - a bar that can be positioned on the top or bottom of your website, ideal for announcing sales, promoting new products, or displaying important messages.
-
Level of disruption - 1 (very low)
-
Image size - no image
-
Timings - upon entry to the website or page, after a certain point of scrolling, or triggered by an action
-
CTA - redirection
-
-
Corner pop-up - a card with an image and a CTA, appearing at the bottom-right corner of your website. Users can continue browsing while this pop-up remains open.
For mobile experiences, use short yet informative copy, choose smaller fonts, avoid images, and ensure controls are larger (at least 44 pixels squared) for easy tapping and to conserve screen space.
-
Level of disruption - 4 (high)
-
Image size - maximum 50% of location
-
Timings - upon entry to the website or page, after a certain point of scrolling, or triggered by an action
-
CTA - redirection
-
Header maximum recommended characters - 20
-
Body maximum recommended characters - 30
-
CTA maximum recommended characters - 10
-
-
Email capture bar - a minimally intrusive top or bottom bar designed to collect email addresses.
-
Level of disruption - 1 (very low)
-
Image size - no image
-
Timings - upon entry to website or page, after a certain point of scrolling, or triggered by an action
-
CTA - data request
-
-
Email capture corner - a corner pop-up designed to collect email addresses. Users can continue browsing while this pop-up remains open.
For mobile experiences, use only up to two input fields to prevent unnecessary mobile screen scrolling.
-
Level of disruption - 4 (high)
-
Image size - 30% of location
-
Timings - upon entry to the website or page, after a certain point of scrolling, or triggered by an action
-
CTA - data request
-
Header maximum recommended characters - 20
-
Body maximum recommended characters - 20
-
CTA maximum recommended characters - 10
-
-
Inactive tab - a flashing browser tab designed to lure users back to the page with promotions or special messages.
-
Level of disruption - 2 (low)
-
Image size - no image
-
Timings - while browsing in another tab
-
CTA - informative
-
-
Notifications widget - a sliding notification-style widget positioned at a page corner. It generates a teaser to grab the users' attention.
For mobile experiences, this widget is positioned at the top or bottom corner of the screen, and activates with a click from the user.
-
Level of disruption - 3 (medium)
-
Image size - a small icon or image
-
Timings - after a certain point of scrolling, or triggered by an action
-
CTA - informative
-
Body maximum recommended characters - 20
-
-
Pop-up takeover - an assertive type of pop-up that persists on the screen until a user manually closes it.
-
Level of disruption - 5 (very high)
-
Image size - flexible
-
Timings - upon entry to the website or page, after a certain point of scrolling, triggered by an action, immediately before exiting, or while browsing in another tab
-
CTA - redirection or data request
-
-
Side bar - a right-anchored vertical pane that usually includes an image, text, and a CTA.
-
Level of disruption - 4 (high)
-
Image size - maximum 60% of location
-
Timings - upon entry to website or page, after a certain point of scrolling, or triggered by an action
-
CTA - redirection or data request
-
-
Tooltip - a contextual pop-up text that explains or highlights an element or a feature on the webpage.
-
Level of disruption - 3 (medium)
-
Image size - no image
-
Timings - triggered by an action
-
CTA - informative or redirection
-