A Designer’s Guide to Dev Handoff – General Guidelines
General Guidelines for Interactive Layout
IVA Layout Guidelines
Most IVAs are designed for use on the iPad. The iPad has a set resolution of 1024×768 pixels. However, when designing for the iPad, your layouts should be developed for retina displays. While an iPad only displays at 1024x768px, a retina display doubles the density of the pixels. So, when designing for a 1024x768px retina display, your content should actually be laid out at twice the size, or 2048x1536px. Keep in mind that when developers resize the content for use on the iPad, the positioning of elements will also rely on ½ the original dimension. To ensure design consistency in development, verify that all positions in the layout are divisible by 2. This will prevent the interactive version from having to adjust for ½ pixel measurements during the programming of the piece.
If animations are expected within the IVA, depending on the animation, a beginning, middle and completed state should be provided within the artwork. More complex animations will either require additional layout elements be provided, or a video of the animation be broken down into frames for animation.
If an IVA supports more than a single layout because the platform allows for screen rotation, an alternate layout for all slides/screens is required.
HTML Email Layout Guidelines
Best practices dictate that the maximum width of your email template should be 600px, with the most relevant information put in the first 250px (which is also the general dimension of a client’s preview panel).
Images are not a substitute for your content; they are there to convey it better. If a user has image downloading disabled in their email client, how will the branding message be conveyed before they even choose to download the images that your layout requires?
The value in using color in an email over background images can be pretty great. Hexadecimal colors are supported by all email clients and are a web standard. If a solid color can be used in place of an image you will have a greater chance that your layout will be rendered on the user’s email client than not. While it is okay to break images up in development to achieve multiple clickable areas in the header, for stylish navigation or even repeatable borders, certain creative techniques are a common “no go” when it comes to email development:
- Tiled background images or large background images. These are not supported in older email clients (especially Outlook), and your design will likely not hold true. If these are required ensure that the client is aware that a solid color may be all that is displayed in place of the tiled/background image on older email clients.
- Drop shadows, rounded corners or other dimensional effects. These are achievable through the use of images, but not through the HTML alone. These design choices can also greatly affect download times and overall campaign “weight” if the email blaster has set size standards.
- Violator images should be kept to a minimum unless the overall width of the email can be narrowed to accommodate the over hanging images. If violators exceed the 650px acceptable limit then they will likely be missed in the email client’s preview pane.
Web safe fonts should be used for all HTML emails. Since users may open the email on any number of devices and email clients. Only use the default web safe fonts in emails unless you intend the text to be contained in a graphic. We cannot insert custom font faces. Only those users with the same custom font face installed on their machine/device will be able to properly render the custom font.
- Custom kerning is not widely supported in native email clients and should be avoided – unless the copy can be included as a graphic.
- Font-smoothing and other techniques applied to fonts in Photoshop and even web browsers will be ignored in many email clients so fonts may not appear as crisp (or pixelated).