It may be helpful to visualize how your email looks across various screen sizes. In the upper right corner of the Preview, click the Layout button and then select Card. You'll have the option to create separate previews with common device screen sizes. Note that Live "device" previews are actually just previews rendered at the specified screen dimensions. For real device previews, see Inbox Previews. You can easily differentiate between Live and Inbox previews by the colored label on each option.
Silent video of the full Parcel window. A sample email is displayed in the Editor and the Preview. The user clicks the "Previews" button above the preview window, which replaces the window with a new screen. This new panel has a search bar, filter button, and a long checklist of different devices divided into categories ("Mobile", "Desktop", "Web", "Tablet"). Next to each checkbox entry is a colored box reading either "Live", with a red background, or "Inbox", with a blue background. The user clicks the filter button, revealing a menu with options to include "Inbox Previews" and/or "Live Previews", the "Latest Versions" or "All versions" of the operating systems, browsers, and color scheme. The user exits this menu without changing any options, and then clicks the "Select all" checkbox for the mobile devices, which selects 20 devices. Some of the devices selected are labeled "Live" and others are labeled "Inbox". The user clicks the "Continue" button, and the device selection screen is replaced with a new screen. This new window has square-cropped previews of the email for each selected device. The "Live" previews show a preview of the email, while the "Inbox" previews are still blank. The user clicks the "Refresh" button at the top right of one Inbox preview. The blank square is replaced with a loading symbol and then again replaced with a square cropped screenshot of the email in Gmail. The user clicks on the Gmail preview, which is then opened full screen within the Preview window. After reviewing the preview, the user clicks the "Minimize" button at the top and is returned to the previous view with multiple previews.
Screen recording showing how to create previews
All of the Live previews will update automatically whenever changes are made to the email. You can view previews for HTML, Text, or AMP by switching to that tab - the previews will update to match. Inbox Previews only display the HTML/MJML part.
Silent video of the Parcel editor and Preview. A sample email is open in the editor. The Preview is in card view with previews for two iPhones. The user switches to the Text tab at the top of the editor. The HTML code in the editor is replaced with plain text, and both previews update to display the plaintext email instead of the HTML email.
Screen recording demonstrating support for HTML and Text previews
Rearrange the previews however you'd like.
Silent video of the full Parcel window. A sample email is displayed in the Editor and the Preview displays several "Live" previews. The user clicks the "Move" button above one of the previews, and drags the from the center position to the first. The user then clicks on the "X" button above a different preview. A confirmation dialog appears, asking "Are you sure you want to remove this preview?". The user clicks "Remove" and that preview disappears.
Screen recording showing how to rearrange and remove previews
Maximize any preview to view it more closely. Minimize it to return to the Card/Grid view.
Silent video of the full Parcel window. A sample email is displayed in the Editor and the Preview displays several previews in Card view. The user clicks on the "Maximize" button at the top of one preview, and it becomes the only preview shown. The user clicks the "Minimize" button, which returns the user to the Card view with several previews listed. The user selects a different device from the drop down menu at the top of the Preview window, and that individual preview fills the window.
Screen recording showing how to maximize and minimize previews
Select different previews at any time by clicking the Choose previews button.
Silent video of the full Parcel window. A sample email is displayed in the Editor and the Preview displays several previews in Card view. The user clicks the "Choose previews" button in the upper right, which replaces the previews with a new screen. This new panel has a search bar, filter button, and a long checklist of different devices divided into categories ("Mobile", "Desktop", "Web", "Tablet"). Next to each checkbox entry is a colored box reading either "Live", with a red background, or "Inbox", with a blue background. The user unchecks one device, checks another, and then clicks the "Continue" button. The Preview window is returned to Card view and the new device preview is shown.
Screen recording showing how to select new previews
You can apply Visual Impairments, Image Blocking, and Dark Mode to each separate preview individually (with the buttons at it's border) or to all previews at once (with the buttons above the full preview window). Screenshots can similarly be taken of individual previews or all of the previews at once. If you take a screenshot of all of the previews, you'll get a zip file containing each image.
Card View and Grid View
Switch between Grid and Card view via the view buttons at the top of the preview.
Annotated screenshot showing the card (left) and grid (right) view buttons
Card view displays each preview (both Live and Inbox) side by side in a single row. Each card is displayed in the dimensions and aspect ratio of it's device. Zoom out to see more cards at once. Scroll inside any card and all other cards will scroll to the same position. Click the "Maximize" button above any card to view that preview individually.
Screenshot showing the card view with an Inbox preview and two Live Previews. The cursor (not shown) is over the center preview, revealing the preview specific controls above it.
Grid view displays each preview (both Live and Inbox) as squares in a grid. Each preview is displayed as an equal sized square. Click on any preview to look at it individually.
Screenshot showing the grid view with an Inbox preview and two Live Previews. The cursor (not shown) is over the center preview, revealing the preview specific controls above it.
In both views, there are preview specific controls above each preview. Use these to remove, rearrange, or refresh the preview, take a screenshot, or apply a visual impairment.
