Introduction

Specly is the best way to document, envision, and share digital design specs. It defines a set of constructs and conventions that lets everyone easily envision and share accurate, comprehensive specs for even the most sophisticated digital designs.

Specly Notation—the “language” of Specly—is a set of intuitive keywords and symbols, arranged in a logical order alongside values. Specly Notation empowers us to easily envision and share specs for digital designs without resorting to ad hoc diagrams, lengthy descriptions, or animated explanations.

A simple line of Specly Notation might look like this: 300x250. Too easy? Okay, a more sophisticated example might look like this P:768x1024 & L:1024x768 or this [300-320]x50 / 300x[250-300]. Don’t worry if any of those examples are illegible right now; the following documentation will have you reading and writing even more sophisticated Specly Notation in no time.

After a brief orientation, Specly Notation is immediately readable. It can therefore be incorporated seamlessly into any digital production workflow, adding new layers of efficiency and expanding creative possibilities.

After using Specly in your next project, you may wonder what you ever did without it!

Specly uses the following six design constructs to describe digital designs of virtually any type:

Static Design
Simple designs with a fixed-size layout.
Flexible Design
Designs with layouts whose width and/or height may vary within ranges.
Orientation-Aware Design

Designs with layouts prepared specifically for portrait and landscape device orientations.
Responsive Design

Designs with panels (or orientations) containing two or more layouts.
Multi-Panel Design
Designs with multiple panels, each displayed individually or simultaneously, on the same screen or on separate screens.
Combination Design

Designs that use more than one of the above techniques. (Very common.)

Specly also provides strategies and solutions for several other key issues related to digital design specs:

Pixel Density
Other Measurement Units
Inconsequential Dimensions
Safe Areas
Rounded Corners

Let’s dive in!


Pixel Density—What It Is and How Specly Notation Addresses It

Since a pixel is the smallest physical element that can be controlled on a digital display, Specly Notation uses pixels as its primary/default unit of measure. Pixels have long been used by digital designers to specify sizes. But the question of what size the pixels actually are has become a bit thorny with the widespread adoption of high-density displays— screens that pack more, smaller pixels into the same amount of space so graphics can appear more crisp.

Learn More about Pixel Density
If not already familiar with the topics of pixels, pixel density, and resolution, please read Sebastien Gabriel’s Designer’s Guide to DPI. Lea Verou’s DPI Love also explains these topics nicely and provides a pixel density calculator.


Until 2009, nearly every mobile, tablet, and computer screen had a pixel density of about 72 pixels per inch (PPI). Imagine dividing one inch on a ruler into 72 little slices. These “classic” screens—still very much in use today—are used as a baseline for digital designers and are said to have a pixel density of 1, or 1x.

Digital designers refer to pixel density using “@“ notation such as “@1x”, “@2x”, “@3x”, etc. Today, higher-density displays with 200+ PPI (@2x), 400+ PPI (@3x), and higher are common on handheld and tablet devices, and are also appearing more regularly on laptops, desktops, and even televisions.

The variance in pixel size across different screens can quickly create ambiguity and confusion when design specs are communicated: “What size pixels are we all referring to?”

In order to prevent misunderstandings with regard to pixel size and density, Specly Notation applies the following rules:

  1. Specly Notation uses pixels as its primary/default unit of measure.
  2. Specly Notation always uses the classic definition of a pixel: @1x.
  3. If you see a number with no unit symbol in Specly Notation, that number represents @1x pixels.
  4. Specly Notation never refers to higher-density pixels.

Using Other Measurement Units within Specly Notation

Using @1x pixels as the unit of measurement for most digital designs is often appropriate. Pixels are therefore the primary/default unit of measurement in Specly Notation. But other measurement units such as percentages, ems, points, and centimeters can be used in Specly Notation when they express something that pixels cannot.

When necessary, use other units of measure in Specly Notation by adding the unit name to the end of every number, just as a web developer might use them in CSS code. For example, writing 3em, 100%, [80pt-100pt], or even 18cm, in a line of Specly Notation would each be technically valid.

Using other units of measure in Specly Notation is somewhat experimental at this stage, so caveat emptor. Care should also be taken not to mix different units of measurement within a single line of Specly Notation—the only exception is percentages; although rarely necessary, percentages can theoretically be mixed alongside other units (including pixels).


Static Design in Specly Notation

Figure 1 (below) illustrates a simple, static design documented with Specly Notation. The design has a static/fixed width of 300 pixels and a static/fixed height of 250 pixels.

On the left side of Figure 1, the line of Specly Notation representing the design is shown in the larger blue text; it reads: 300x250. The diagram with the rectangle on the right side is a visual representation of the same design.

Figure 1

Concept Review

  • The x symbol is used in Specly Notation to separate width dimensions from height dimensions.
  • In English, the x symbol is read aloud as the word “by” as in, “three-hundred by two-fifty.”
  • Width dimensions are always listed first (before the x symbol); height dimensions are listed second (after the x symbol).
  • Each set of width & height dimensions surrounding an x symbol is referred to as a layout. Further examples illustrate how a single design may contain multiple layouts.
  • A group of one or more layouts is called a panel.

As you can see, Specly Notation adopts commonly used conventions but institutes them as standards for documenting digital designs with its intuitive system of constructs and conventions.

Flexible Design in Specly Notation

Creating digital designs that accommodate a range of dimensions is a common scenario. For example, if an app designer was tasked with creating a design that would fill the screen of an iPhone 4 and an iPhone 5, the designer may choose create a flexible design that accommodates both sizes.

Figure 2 (below) illustrates how Specly Notation is used to document flexible dimension ranges within a design.

Again, the line of Specly Notation appears on the left side in larger, blue text: 320x[480-568]. The diagram on the right is a visual representation of that same design.

Figure 2

Figure 2 (above) documents a design with a static width of 320 pixels, and a flexible height range of 480-568 pixels. In theory, this design could vertically shrink and grow at all the possible heights within the specified range: 480, 481, 482, 483, ...and so on, up to... 566, 567, and 568.)

Concept Review

  • Specly Notation surrounds flexible dimension ranges with square brackets: [ and ].
  • The minimum and maximum dimensions in the range are separated by a dash character: -. The minimum dimension appears first, to the left of the dash; the maximum dimension appears after the dash.
  • In English, the dash symbol - is read aloud as the word “through” as in, “four-eighty through five-sixty-eight.”
  • Dimension ranges are inclusive of the minimum and maximum limits of the range
  • Dimension ranges can be specified for widths, for heights, and for both simultaneously.

Orientation-Aware Design in Specly Notation

Many mobile and tablet screens can be used in either portrait (tall) or landscape (wide) orientation.

Figure 3 (below) illustrates how Specly Notation is used to document a design containing an orientation-aware panel.

Figure 3

Figure 3 documents an orientation-aware design that (inherently) includes two layouts. The first orientation is prefixed with the P: symbol to indicate the layout(s) within it are for portrait orientation. The second orientation is prefixed with the L: symbol to indicate the layout(s) within it are for landscape orientation. The ampersand symbol & is used to separate the portrait and landscape orientations.

Concept Review

  • The ampersand symbol & separates portrait and landscape layouts in orientation-aware panels.
  • In English, the & symbol is read aloud as the word “and” as in, “portrait layout and landscape layout”
  • The P: and L: prefix symbols are used to indicate the device orientation that each layout is used for.
  • In English, the P: symbol is read aloud as the word “portrait” and L: symbol is read aloud as the word “landscape”
  • Whitespace (space character) is technically optional in Specly Notation. However, a space added between layouts and between panels can help with readability.

Bonus Q&A: Why use a dual-layout orientation-aware design instead of a single-layout, flexible design?

The design shown in Figure 3 (above) could conceivably be documented using a single, flexible design of [768-1024]x[768-1024]. However, such a notation may not provide a sufficient level of detail in other circumstances.

For example, what if each orientation’s layout had to accommodate its own unique range of heights? Such a situation can only be described with a line of Specly Notation, such as: P:768x[900-1024] & L:1024x[600-768]. Using a flexible, single-layout design instead ([768-1024]x[600-1024]) would likely lead to different design and/or development decisions, and would also not reveal details like the minimum height in portrait orientation being 900 pixels (in this theoretical example). A device’s orientation is often important for overall user experience considerations as well

Specly generally favors using the most specific and informative method for documenting a design.


Responsive Design in Specly Notation

Responsive designs consist of two or more layouts within a single panel. Responsive layouts are separated by breakpoints. Specly Notation uses the forward slash / to indicate breakpoints within a panel.

Figure 4

Figure 4 (above) documents a responsive design that includes four static layout sizes, each separated by breakpoints. Such a design might be useful for creating a single document that adapts responsively to various environments.

It should be noted that this example does not use flexible design techniques. Breakpoints indicate that the design will responsively “snap” between the layout sizes, not flexibly shrink and grow between them. For more information, please read the next bonus Q&A, below.

Concept Review

  • Specly Notation uses the forward slash symbol / to separate layouts within a responsively-designed panel.
  • In English, the / symbol is read aloud as the word “break” as in, “layout 1, break, layout 2”
  • When using Specly Notation to document responsive panels, order each layout within a panel in a logical way—often (but not exclusively) “smallest-to-largest” based on each layout’s width then height.

Bonus Q&A: What’s the difference between flexible design and responsive design?

Flexible design serves different purposes from responsive design. As we’ll see later, flexible and responsive techniques can even be used simultaneously within the same design.

The example shown in Figure 4 (above) could conceivably be satisfied in a number of different ways that would yield a design compatible with the same four target sizes; for example, using a flexible design with a single layout of [300-320]x[50-300] would accomplish just that. However, such a flexible design would also (in this example) be “unnecessarily” compatible with many additional sizes such as 320x300 and every possible height between 50 and 300: 51, 52, 53, etc.

There is nothing inherently “wrong” with either spec, but they do carry different meanings. Creating a design that is compatible with unneeded sizes may take more time and resources for designers and developers.

Specly’s power lies in the ability it gives us to express differences such as these and communicate exactly what we mean.

Multi-Panel Design in Specly Notation

Multi-panel designs use separate panel areas in the finished piece of work. The separate panels might be displayed one at a time, or multiple panels might be visible simultaneously. In some cases, separate panels may be shown on the same screen. In other cases, separate panels may be shown on different screens. Specly Notation has ways to help us communicate such scenarios.

One common example of multi-panel design is an expandable advertisement—an ad where a user interacts with one panel of an ad to reveal a second (usually larger) panel of the same ad. Other examples include mobile or tablet apps that can “cast” app content to a second screen, or so-called “companion ads” where two digital ads on the same page might display marketing messages in concert.

Specly Notation provides two ways to document multi-panel designs: using either the to or with keywords.

  • The to keyword is used when separate panels are displayed individually, one at a time. One panel might cover or simply replace the other panel, or an animation may provide a visual transition between the two panel states.
  • The with keyword is used when panels are displayed simultaneously, at the same time, whether they appear on the same screen or on different screens.

Figure 5 (below) illustrates an example multi-panel design whose panels are displayed individually, one at a time. This example might be representative of the design for an expandable advertisement appearing on a mobile phone.

Figure 5

Figure 6 (below), illustrates an example multi-panel design whose panels are displayed simultaneously, at the same time. This example might be representative of the design for a mobile handset app that “casts” content to an HD television screen.

Figure 6

Concept Review

  • The to keyword is used when separate panels are displayed individually, one at a time. One panel might cover or simply replace the other panel, or an animation may provide a visual transition between the two panel states.
  • The with keyword is used when panels are displayed simultaneously, at the same time, whether they appear on the same screen or on different screens.
  • Specly Notation never indicates the positions of panels on the page, the screen, or in relation to one another. Positioning of each panel is often subject to external factors that may vary at display time.

Bonus Q&A: Are orientation-aware designs a type of multi-panel design?

Multi-panel designs are a close cousin to orientation-aware designs, but each design method serves an entirely different purpose. Orientation-awareness is applied to individual panels that contain a portrait and landscape layout. A multi-panel design could therefore include multiple orientation-aware panels. Upcoming examples will illustrate such a case.

Combination Design in Specly Notation

The previously described Specly Notation techniques for Static, Flexible, Orientation-Aware, Responsive, and Multi-Panel—can be combined, to form even more powerful Specly Notations, as shown in the Combination Design examples that follow.

Responsive Designs Containing Flexible Designs

Flexible layouts are often used within responsive panels. Figure 7 (below) illustrates a simple example.

Figure 7

Concept Review

  • Flexible designs can be applied to layouts that are within a responsive panel.

Multi-Panel, Orientation-Aware, Responsive, Flexible Designs

Figure 8 (below) illustrates a multi-panel, orientation-aware, responsive design that uses both flexible and static layouts.

Figure 8

Although it may seem somewhat complex at first, this Specly Notation serves as the design for an “expandable” ad unit that could be served into numerous rich media mobile and tablet ad placements in apps and websites.

Within panel #1, the initial (collapsed) banner sizes that this expandable ad unit would be compatible with are shown to the left of the to keyword: [300-320]x50 and 728x90. 300x50 and 320x50 are common ad placement sizes for handset apps and websites. 728x90 is a common ad placement size on tablet apps and websites. Panel #1 in this design is not orientation-aware simply because orientation-awareness is not required there.

Within panel #2, the “expanded panel” sizes are shown to the left of the to keyword. A single, orientation-aware panel encloses two pairs of responsive layouts, one pair for the portrait orientation and another pair for the landscape orientation. This expanded panel design happens to be compatible with many mobile browser and app ad placements on iOS handsets and tablets. The flexible layouts ensure that the panel will fill the entire browser viewport or the full screen of the device, when possible.

Perhaps it’s not difficult to imagine extending this example to add compatibility for 320x250 placement sizes as well; to do so, we would add a 2nd breakpoint / to panel #1, followed by a 3rd, static 300x250 layout, all before the to keyword.

Concept Review

  • Flexibility, responsiveness, and orientation-awareness are each separate design techniques with their own purposes.
  • It is exceptionally important not to mistake the separate purposes of the / and the & symbols.
    • The / symbol is used to separate layouts within the same orientation of a panel.
    • The & symbol is used to separate the portrait layout(s) from landscape layout(s) in orientation-aware panels.

Inconsequential Dimensions in Specly Notation

In some cases, a particular design dimension, or one of the limits of a dimension range, are not important to the end product. For example, in web design, the overall height of page content may vary depending on article length, the text size, column width, and other factors. And since vertical scrolling is a generally assumed navigation technique in web browsers, the overall height of a web page itself is often inconsequential to the design.

For this reason, websites that use responsive design techniques often base their rendered appearances solely on the width of the browser viewport. The height of the viewport and the height of the web page itself are often outside the designer’s control anyway. Specly Notation allows us to document such cases with the [any] keyword.

  • The [any] keyword is used in place of numeric dimensions when all or part of a particular dimension range is inconsequential to the design.
  • The [any] keyword is used in place of upper or lower range limits that are inconsequential, often implying “zero” or “infinity” i.e., [any-480] or [1200-any]

The example in Figure 9 (below) uses Specly Notation to document the responsive design applied by Bootstrap 3, a popular CSS framework.

Figure 9

The Bootstrap 3 CSS framework defines a responsive grid system with five core layouts based on a web browser’s width (in pixels). Since the height of a web browser is variable and generally assumed to be of “sufficient height” to allow use of the website itself, the height dimensions are inconsequential to the design; Specly Notation’s [any] keyword allows such a situation to be clearly documented and easily understood.

The [any] keyword is also used in this example in the place of inconsequential dimension range limits. In Figure 9 (above), width range #1 [any-480] and width range #5 [1200-any] both use the [any] keyword to express inconsequential range limits.

Concept Review

  • The [any] keyword is used in place of numeric dimensions when all or part of a particular dimension range is inconsequential to the design.
  • The [any] keyword is used in place of upper or lower range limits that are inconsequential, often meaning “zero” or “infinite” i.e., [any-480] or [1200-any]
  • Since the [any] keyword is always implicitly indicative of a dimension range, it is always wrapped in square brackets.
  • Note that the example shown in Figure 9 (above) also combines flexible design with responsive design.

Safe Areas in Specly Notation

In some scenarios, a panel may be used in various places where portions of certain layouts in the panel are obscured or “cut off” in predictable ways. In these cases, designers can apply a “safe area” to keep the crucial elements in their designs—logos, text, buttons, etc.—visible at all times. It is expected that portions of non-crucial design elements—background images, etc.—that are outside the safe area may not be visible in certain scenarios.

Specly Notation uses the upper-case (S:) container—always wrapped in parenthesis ( and )—to indicate that a required, centered safe area should be applied to all layouts within the same panel.

Figure 10 (below) illustrates a simple example of applying a safe area layout to a panel design.

Figure 10

Design and production teams may choose to apply a safe area to their designs even when not required by external factors in order to save time and resources by creating a single, static design that can be applied to multiple settings.

Concept Review

  • Specly Notation uses the upper-case (S:) container—always wrapped in parenthesis ( and )—to indicate that a required, centered safe area should be applied to all layouts within the same panel.
  • In English, the (S:) container is read aloud as “safe area” as in, “safe area: seven-sixty-eight by seven-sixty-eight”
  • In Specly Notation, a safe area layout is always the last layout listed in a panel.
  • To assist with legibility, a safe area layout should be enclosed in parenthesis: ( and ).
  • A safe area is always a single, static size; a safe area never contains a dimension range.
    • The safe area width is always less than or equal to the smallest width of all other layouts in the same panel.
    • The safe area height is always less than or equal to the smallest height of all other layouts in the same panel.
  • The safe area layout is always vertically and horizontally centered within other layouts in the panel.
  • When a safe area is included as part of any Specly Notation, it indicates that the safe area is required.

Rounded Corners in Specly Notation

Layouts are sometimes required to have round corners. Specly Notation provides a simple method for indicating such scenarios.

Specly Notation uses the upper-case (R:#) container—always wrapped in parenthesis ( and )—to indicate that the preceeding layout has rounded corners.

Figure 11 (below) illustrates a simple example of applying rounded corners to a layout.

Figure 11

Rounded corners are expressed as a radius whose centerpoint is equidistant from its respective edges.

Radius notation can also be used to express fully circular layouts and shown in Figure 12 (below). That example might be the specification for the screen of a wearable device.

In the case of round screens, the numeric value of the radius should never exceed one-half the smallest width or height dimension of the layout it applies to.

Figure 12

Concept Review

  • Specly Notation uses the upper-case (R:#) container—always wrapped in parenthesis ( and )—to indicate that the preceeding layout has rounded corners.
  • In English, the (R:#) container is read aloud as “radius” as in, “radius: fifty”
  • The numeric value of the radius should never exceed one-half of the smallest width or height dmension of the layout it applies to.
  • When a layout radius is included as part of any Specly Notation, it indicates that the radius is required; any design elements that fall outside that radius may be truncated.
  • Although rare, rounded corners may also be applied to only a safe area layout, such as 300x300 (S:300x300 (R:50)). Note how the (R:#) container is nested within the parenthesis of the (S:) container.

Glossary

Specly Notation Terms

layout A layout is a set of width and height dimensions separated by the x keyword.
panel A panel is a set of one or more layouts, potentially including a safe area layout as well.
orientation An orientation, is a set of one or more layouts presented in one of a screen’s two aspect ratios. Portrait refers to the screens “tall” aspect ratio. Landscape refers to the “wide” aspect ratio.

Specly Notation Keywords and Symbols

x The x character—spoken in English as “by”—is used to separate width dimensions from height dimensions. Width is listed first, to the left of the x. Height is listed second, to the right of the x.
[ ] Pairs of square brackets [ and ] are used to enclose a dimension range—a range of width dimensions or a range of height dimensions.
- The dash - character—spoken in English as “through”—is used to separate minimum and maximum dimensions within a width or height range, such as: [300-320].
[any] The [any] keyword is used in place of numeric dimensions when all or part of a particular dimension range is inconsequential to the design. The [any] keyword is also used in place of upper or lower range limits that are inconsequential, often meaning “zero” or “infinite”, i.e., [any-480] or [1200-any]. The [any] keyword is always wrapped in square brackets.
/ The slash symbol / is used to separate two or more layouts in a responsive panel. The slash symbol is referred to as a breakpoint and can be spoken in English as “break”.
& The ampersand symbol &—spoken in English as “and"—separates portrait and landscape layouts in an orientation-aware panel.
P: The upper-case P: prefix is used before the portrait (tall) layout(s) in orientation-aware panels.
L: The upper-case L: prefix is used before the landscape (wide) layout(s) in orientation-aware panels.
to The to keyword is used when multiple panels in a design are displayed individually, one at a time. One panel might cover or simply replace the other panel, or an animation may provide a visual transition between the two panel states.
with The with keyword is used when multiple panels in a design are displayed simultaneously, at the same time, whether they appear on the same screen or on different screens.
(S:) The upper-case (S:) container—always wrapped in parentheses—indicates that a required, centered “safe area” should be applied to all layouts within the panel. A safe area is a horizontally and vertically centered space intended to contain the “required elements” of a design, such as logos, text, and interactive elements that should always remain visible. It is implied that any elements or background images positioned outside the safe area may not be visible in certain scenarios.
(R:#) The upper-case (R:#) container—always wrapped in parentheses—indicates the radius of required rounded corners for the preceeding layout. The numeric value of the radius should never exceed one-half of the smallest width or height dmension of the layout it applies to.
% The percentage symbol % is placed immediately after numeric dimensions to express a relative dimension instead of an absolute dimension. Using percentages in Specly Notation is less specific and therefore uncommon.
px, pt, em, cm, etc. Although Specly Notation uses @1x pixels as its default unit of measure, other measurement units are not forbidden, as long as: (1) they are inserted immediately after the numeral they apply to, and (2) the line of Specly Notation does not mix units. Using non-pixel units in Specly Notation is a less explored area of research, so it should be considered in “alpha” stage. Caveat emptor!