In Metro Publisher, landing pages (the homepage and all section/subsections) are laid out and managed using of a responsive grid system. Within the section editor, containers are arranged to define the grid layout, then those containers are filled with responsive “Sprockets” designed specifically for this use. As a result, there are a few key concepts to understand that have great impact on design.
Modular
The first important thing to consider when designing the look and feel of your sprockets is that they are modular. They can be used in a variety of places on a page. A carousel sprocket, for example, can be full-width at the top of the page or in a narrow column down further. The section editor is meant to allow for complex layouts in support of editorial decisions about how to promote content.
Example: Section landing pages with different grid layouts
The example above shows various complex layouts using sprockets. You can see that sprocket types are reused in different places. The look and feel of your sprockets should be designed with this flexibility in mind.
Global
In addition to being modular, sprockets can be reused throughout your website. A single sprocket can be placed on every page of your website or only in one page.
Example: The carousel sprocket reused within different landing pages, layouts, or columns and at varying widths.
Above you can see the same carousel sprocket reused on different page layouts and at varying widths. This global nature means that sprockets should NOT be “individually” designed for specific placements. Rather, the designs should be flexible and consistent so that editorial staff can reorder page layouts and reuse sprockets without rigid design limitations.
Carousel Example 01
This carousel design uses a full-width image in the background with text overlay on columns wider than ⅓ page. When the sprocket is ⅓ or less, it is not practical to show the title and the description. As a result, this design hides the description at that size.
Carousel Example 02
This carousel design uses a full-width image in the background but the text is positioned below the image at all sizes. This design allows the description to be seen at all column widths.
Whether to use one design versus the other is affected by the type of content you feature as well as personal taste. Throughout the launch process, a single global style for each sprocket will be agreed upon and implemented.
Additional Design Customizations
In general, the design should maximize flexibility and reuse. However, there are special cases where exceptions occur. For example, you may want to have one basic style for your list sprockets for content with large images and a special list sprocket for your “news” items that may not always have nice images.
Example: Two different styles for a list sprocket.
For these exceptions, we offer some “customizations” of your sprockets. This must be arranged with your launch project manager through the design process in order to define the style and scope.
Sprocket Types
Click the link below for a the full list of currently available sprocket types.
Find out more...
Comments