Release 11.16 marks the beginning of our path towards offering complete responsive design tools in Standards. Rather than working quietly for half the year before dropping one huge release all at once, we’re breaking this effort into separately staged releases. This update is the first in the series, and includes some crucial quality of life enhancements to support our subsequent updates. Read on to learn about what’s new in the app today, and what’s around the corner.

In-body controls

Add system

Our system for adding new content to projects has been completely redone. We have removed individual add points, favoring hover-based indications. Additionally, adding content to some locations will require multiple selections to define, though may be skipped by holding ‘CMD’ or ‘CTRL’ while adding. This is a carefully considered enhancement that we believe is simpler, more intuitive, more performant, and facilitates a better responsive design experience in the future. For more information, check out our new guide.

Repositioning

Adding isn’t the only in-body control that has been revamped. We’ve also made it much easier to control the position of elements by simply dragging and dropping. Moving elements from one Column or Row to another is effortless, and elements can now be aligned within Columns directly in-body without using Position settings in the right sidebar.

Resizing

Finally, resizing has been improved, and we now allow resizing of elements within Columns directly in body, rather than by solely using the Sizing settings in the right sidebar. We’re thrilled with the results, and encourage you to experiment by simply dragging elements around, adjusting their size, and aligning them all visually, without carefully choosing a series of settings.

Effects

General effects

We’re opening up even more design control with a new settings group called Effects. We’re launching this feature with four generic options: Strikethrough, Drop shadow, Rotate, and Stretch, now available on most elements. Use these to quickly demonstrate brand Don’ts, or get creative and express your brand with more detail and intention. We’re excited to see how these effects are used to build clearer, more expressive guidelines. For more information, check out our new guide.

Text effects

In addition to the four effects available globally, we’ve added three unique text specific effects: Baseline, X-height, and Cap height. These are great for articulating leading standards, or detailing the characteristics of your brand typefaces.

Additional updates

UserWay accessibility plugin

We now support the inclusion of the UserWay accessibility widget on any published project. You can easily turn on this interactive widget, offered for free from UserWay, from the Project Settings; allowing viewers to adjust the various styles of your site to improve accessibility when browsing. You can adjust the styling parameters of the widget with a separate UserWay account. For more information, read our guide.

Clip edges

Last but not least, we’ve added a setting to clip content at the edges of Columns. We previously allowed rounded corners set on Columns, but did not support clipping of the enclosed content elements.

Responsive design roadmap
Stage 1

Complete

Why we started here

By enhancing and simplifying the in-body controls for adding, resizing, and repositioning, this functionality becomes more flexible, and can be more easily translated between different editing environments. This brings a more stable and consistent experience that is required for designing responsively.

Using the previous add points required pinpoint precision, and in some cases the desired add destination was impossible to select due to overlapping points. These issues are exacerbated when designing in small spaces, and would become quite common after our next release when we’ll introduce custom grids and wrapping layouts.

Get in touch

If you have questions about this process, need a rough time estimate for the rollout of features, or want to know what else we’re thinking about, don’t hesitate to reach out.