As mentioned a few weeks ago, we're moving forward with redesigned聽WMS call to action blocks聽(including the "enhanced" call to action block style).
What's changing
The new blocks will have a more open, brand-aligned style; limited use of the 91丝瓜视频 red; and more deliberate use of left-aligned versus centred text. We also added new options for聽button and heading styles, and put some thought into how to improve the mobile experience with the blocks.
Button styles
To create more pleasing, content-centric layouts, the regular call to action blocks will now use聽different button styles for the call-to-action (CTA) link. The style used will depend on the size of the block, which generally correlates to the level of visual emphasis desired.
- The聽full-width聽versions will use 91丝瓜视频 red.听
- Generally a full-width call to action block is used to call attention to an important item on the page, so the red CTA will help these blocks stand out.听
- The聽half-width聽will use a solid black button.听
- This will reduce visual clutter, while still providing important visual emphasis for the CTA聽buttons.听
- The聽third-width听补苍诲 sidebar options will use a transparent button with contrasting text and outline (also called聽a "ghost" button)
- This makes the CTA button聽easy to find, but minimizes聽visual competition between elements.
For text-only full-width blocks, including enhanced call to action聽blocks, the CTA link will use a typography-based styling. The larger type and thick underline give聽a balanced look with more visual appeal. Here's a comparison of a mixed-block layout in the original design (at left) and the updated design聽(on right).
Heading sizes
All call to action blocks (regular and enhanced) will now allow display your choice of heading style (heading 2, heading 3, etc.) used in the "body" area of the block. Previously, all heading styles were displayed as a "heading 3," regardless of your selection. Now, you can use different styles to add structure and visual hierarchy to your block layouts.
This means that you should聽verify that the blocks on your site聽use the heading style that's appropriate for the content. In particular,聽check your half- and third-width blocks聽to ensure that the heading styles match the block(s) directly beside them. If the heading styles are mismatched, the blocks may look a little odd!聽
Mobile experience
On desktop, full-, half-, and third-width blocks typically correspond to very, moderately, and less important content in the page鈥檚 hierarchy. The button styles (and perhaps your choice of heading sizes) help reinforce this. However, the length of the blocks and the size of the screen make this hierarchy less evident on mobile. For this reason, we removed聽images for third-width blocks on mobile.听These blocks聽lead聽with the typography instead, which creates聽a sense of visual hierarchy, reduces page length, and has the potential to lighten page load times.
Left聽versus centre alignment
Our new call to action blocks use left-aligned text and buttons in all blocks that include images. This generally has a more modern look, and aligning the text with the left edge of the page (anchored by the image) creates an obvious visual grouping and facilitates users鈥� typical page-scanning behavior. It also allows us to fit slightly more information on a single line of text, helping shorten block-heavy layouts. For these reasons, we鈥檙e trying to make left-alignment our 鈥渄efault鈥� in the WMS, and limit centred text to specific instances where we want to 鈥渂reak鈥� the pattern.
When a block has no image (on desktop or聽mobile), the typography becomes more important. We thought centering the content for these blocks made sense, since the change in alignment would add visual interest and help聽create a clearer聽visual grouping.听
The changes to alignment聽mean that call to action blocks聽will look best when following typical use patterns: using square or rectangular images (square being the preferred format for our new branding) and/or including some supporting information, like a heading or descriptive text in addition to the button. If you're looking for more flexibility or to accommodate a different use case, we suggest building a custom layout with ghost buttons.听
What's next
One of the next things on our radar is聽widening the WMS聽to a more modern page width. In addition to making more efficient use of screen real estate, this allows us to rethink (and add!) space between elements in the WMS. This will affect the call to action blocks above, as well as most other features of the WMS. Stay tuned!
Questions?
For more information on how to use call to action blocks, check out our original articles on regular听补苍诲 enhanced call to action blocks.听
If you have any聽questions, concerns, or urgent support requests, please聽 through our new self-service IT Support site.听For consultation services, fill out the聽request form.
