Even though you can completely customize your TypeEngine article templates, there are certain best practices that we’ve found helpful.

Doctype

Be sure to declare an HTML5 doctype at the beginning of your template file.

<!DOCTYPE html>

Meta Tags

In the head of your template file, it’s a good idea to declare your character set, like so:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Adding this meta tag will help ensure your template’s scale and zoom level is correct.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

Enabling Single Article CSS Controls

You can enable users to add article-specific CSS, by supporting the ${{Css}} template tag. Do this by adding a CSS block just before your closing tag. Here’s an example:

…

?{{Css}}
   <style>
      ${{Css}}
   </style>
?{{/Css}}

</head>

Combating Horizontal Scroll

Be sure to avoid conditions that will cause horizontal scroll in your template. If the content in your article extends beyond the width of the available space in your viewport, this not only will cause a frustrating user experience for readers, but it will render the swipe gesture to open the menu inoperable. While readers would still be able to tap the back button to open the menu, it is important to avoid conditions that will cause horizontal scroll.

Setting a Maximum Width on Assets

The most common contributor to undesired horizontal scroll is improper image handling. To combat this, when the Markdown method of adding image assets to an article is used in an article, we wrap the img tag with an additional element, like so:

<div class="asset-container">
  <figure>
    <img src="yourImageName.jpg" alt="This is the caption" title="This is a description" />
    <figcaption>This is the caption</figcaption>
  </figure>
</div>

Doing this gives you an easy hook to add the following style to your CSS:

.asset-container img {
   max-width: 100%;
   height: auto;
}

This will ensure that any image within an element with a class of asset-container will only be as wide as it’s containing element, no matter how wide the actual image is.

Responsive Article Template Design

You will want to make adjustments to your template based on the device, viewport size, and screen capabilities that is viewing it. Do this by making use of media queries .

Device Support & Effective Resolution

Currently, TypeEngine supports devices running iOS 6+. Some of these devices have a retina screen, some don’t. There are also a variety of viewport widths to consider. Here is a matrix of devices TypeEngine supports, their viewport width, and whether they are retina screen-enabled:

Device Effective Resolution Retina?
iPhone 5s 320px x 568px check
iPhone 5c 320px x 568px check
iPhone 5 320px x 568px check
iPhone 4S 320px x 480px check
iPhone 4 320px x 480px check
iPhone 3GS 320px x 480px
iPod Touch (5th gen) 320px x 568px check
iPod Touch (4th gen) 320px x 480px check
iPad Air 768px x 1024px check
iPad (4th gen) 768px x 1024px check
iPad (3rd gen) 768px x 1024px check
iPad (2nd gen) 768px x 1024px
iPad Mini (2nd gen) 768px x 1024px check
iPad Mini (1st gen) 768px x 1024px

By targeting viewports using media queries in our CSS, we can create styles for the range of device resolutions and orientations. The possible breakpoints you might consider designing for are: 320 > 480 > 568 > 768 > 960 > 1024.

Here is one way to write CSS that targets iPod Touch and iPhone (all models) in portrait mode:

@media only screen and (min-device-width : 1px) and (max-device-width : 320px) {
   /* Write your CSS rules here */
}

Here is how to target iPod Touch and iPhone (3GS, 4, and 4S) in landscape orientation:

@media only screen and (min-device-width : 321px) and (max-device-width : 480px) {
   /* Write your CSS rules here */
}

And so on.

To target devices that have retina screens, regardless of their effective resolution, you can use this:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
   /* Write your CSS rules here*/
}