Shorthand User Guide
Jade Graddy is your designated Editorial Success Manager (or ESM). She can be reached via the Slack channels or by emailing success@shorthand.com.
Jason Roundtree is the Technical Support Engineer (or TSE) in the United States and can also be reached via the Slack channels.
10:00 a.m. – 7:00 p.m. ET
Contact US Staff via two Slack channels:
Off hours and emergencies:
Contact US, UK, and Australian staff via email: help@shorthand.com
The Shorthand team is happy to answer questions. But you’ll also find easy-to-follow instructions here:
Select ‘New Story’ to create an article.
Select ‘New Collection’ to create a list of content that you can embed in a Shorthand article. (Your list of content can include links to anything – not just Shorthand stories.). Learn more about collections here.
If you are creating a story then you will have the option to choose from either a blank story or a Shorthand template.
IMPORTANT: In all cases select the 'Blank story' option
For NBC News, select from one of the following:
For TODAY, select: TODAY
IMPORTANT: Do NOT select NBC Embed Method or TODAY Embed Method. These embeds are no longer used.
Here you can change the text and media to suit the story. Hover over the main image area to reveal action buttons shown in green:
Click the top-left EDIT MEDIA button to change the background image:
Upload a new image by clicking on the representation of the existing one in the media panel, and choosing a new one from your computer. Set the focal point of the image by clicking a location on the overlaid grid. Different images may be uploaded for wide and tall screens but this is optional.
Title text position is changed with the on-screen arrows.
Change the text on the page by clicking on or highlighting the existing text and typing or pasting in your new text.
A foreground image or video may also be placed in the section by clicking the button above or below the title:
To add a new section to the story, click the green + ADD SECTION button on the left of the screen:
As your story grows in the number of sections, options are provided to add new sections between any existing sections:
More detail about adding sections here.
This will then open the 'Add section' menu where you can select which kind of section type you want to add to your story. There are multiple section types to add, each described in the panel that opens when choosing to add a new section.
More information about each section type can be found here.
Sections of the story can be re-positioned by dragging them up or down the left side of the screen:
Each section type supports a number of options that change its overall appearance such as background colour, text colour or animation. These settings can be accessed and changed with the cog icon next to each section thumbnail in the left-hand column:
More detail about section options here.
You can now duplicate sections not only to copy them to the story you're working on, but also to reuse them in any other story in your Workspace!
A copy of the section will be added to your own set of copied sections, which is accessible from the Add a Section panel:
More detail about copying sections here.
To achieve this, click the box marked "ADD TO NAV" on the section thumbnail on the left-hand side of the screen, and give the section a label that will be used as the navigation link by typing the label in the box under the thumbnail where otherwise the section number appears:
More detail about story navigation here.
The player is smaller and more integrated with the text.
The player is much larger (approx. one whole screen size).
For NBC videos, use the custom HTML widget:
After clicking the INSERT HTML button, a code window will open, into which NBC embed code can be pasted:
This same method can be used to insert embed codes from Vimeo and other sources. Videos and images embedded this way will render at a maximum width equal to that of the text column.
The results of the inserted code can be seen by previewing the story.
For large-size NBC News videos, those from other partners or other services, use a custom HTML section, into which you can paste provided code.
The section is added in the same way as selecting other section types.
More detail about custom HTML sections here.
To correct this problem, we suggest processing the code with a tool called Embed Responsively.
IMPORTANT: For NBC News videos, select the "Generic Iframe" tab in the tool.
By default Shorthand has options for MP4 video and general "rich embeds".
These can easily be included within the body of a story by selecting the INSERT MEDIA button between text blocks:
The same can be done as a whole section. Simply add a 'Media section' to the story, then click the green EDIT MEDIA button in the top-left corner of the new section. In the pop-up window that results, choose the 'Video' or 'Rich embed'
More detail about embedding media here.
The AMP toggle is on by default, which means all stories will publish with AMP unless specified otherwise.
However, if your story has a number of custom HTML blocks, particularly blocks that contain JavaScript, it may not render well on AMP. In that case, you may want to ensure AMP is set to off. Please also see the 'Custom HTML in AMP' advice below.
IMPORTANT: Ignore the Canonical URL field. This field does not control the URL an AMP version of the story is published to, and if you set a value to this field it will overwrite the proper canonical URL that should be associated with a story.
The Custom HEAD and CSS fields are only for advanced designers with technical skills. If you need help with adding custom design styles, contact Robin Muccari or Jiachuan Wu on the dataviz team.
Most custom HTML sections will not render in AMP. This is not a limitation in Shorthand. It’s a limitation in AMP.
If your custom HTML includes NBC News videos OR a custom NBC News byline, it will render on AMP. But only if you insert this in front of the code:
<!-- amplify -->
When AMP can’t render custom HTML, it will be replaced with a button that reads “View This Graphic on SITE HERE” The button will link to the non-AMP version of the story.
If you do NOT want to display the standard “View This Graphic” button on AMP, you can replace it with a custom button, image or link.
OR if you do NOT want to display the custom code on AMP, you can replace it with a button, an image, some AMP-compatible HTML, or nothing at all.
If you have questions about how to take these advanced steps, consult the Shorthand team.
You can check how your story will render in AMP by choosing the AMP preview option. This will open the AMP preview in a new tab. Copy that URL and preview it on a mobile device and check that the story renders as expected.
Full publishing information can be found in the 'Publish' chapter below, however there are a few AMP specific things worth noting:
To give other people access to a story you are working on, you can assign them access from the dashboard by clicking the 'Collaborate' button in the green flyout menu on the story card:
You can also assign collaborators from directly within the story editor, by clicking the green + icon at the top-right of the editor screen.
Collaborators can be assigned as viewers, editors, or owners of the story. In all cases, the story card will then appear on their Shorthand dashboard.
More detail about adding and working with collaborators here.
There are multiple ways to preview your story: both virtually, and on other devices you have access to.
On the Shorthand dashboard, select the “Preview” option on any story card. You’ll see how the story will render for readers who use the same browser that you’re using.
Within the editor, there's a green PREVIEW button in the top right. The arrow on the right of the button enables you to choose to see a preview of your story as it will render on a phone or tablet in portrait or landscape mode, as well as desktop:
To preview your story on other devices you have access to (your phone, tablet etc) click the SHARE button at the top of the editor. It will pop open a modal window that contains a link to a story preview that you can email or SMS to another device. The same window also includes a QR code of the link. Pointing an iPhone or Android camera at the QR code will prompt to open the story preview in the device browser without you needing to copy, paste or send a link:
More detail about story previews here.
IMPORTANT: Properly setting this meta info is an important step to ensure good SEO
Ignore all the other fields!
IMPORTANT: In the Story Settings you may notice a 'PUBLISHING' section with a 'PUBLISHED URL' field. This field should be left empty as it does not control the URL a story is published to, and if you set a value to this field it will overwrite the proper canonical URL that should be associated with a story.
The following steps are optional:
Be sure to look at different break points, AMP, etc.
IMPORTANT: If you are publishing a story with an AMP version, once the publish process has finished you can click the 'Validate AMP page' button to check whether the AMP version is valid (the button links to this Google AMP validator). If there are any errors shown, Google will not index the AMP version of the story.