DPS & PDF tip: Make text hyperlinks easier to tap or click

The most common way to create hyperlinks in body text in an Adobe Digital Publishing Suite or interactive PDF project is to use the Type tool to select the text that should contain the hyperlink, right click, and choose Interactive > New Hyperlink (CS6) or Hyperlinks > New Hyperlink (CC) from the context menu. The trouble with assigning a hyperlink to selected text, is that the “tap zone” for the hyperlink is only the height of the text characters, which can make it difficult to tap accurately on a tablet.

A workaround is to position a generously-sized frame with no fill and no stroke on top of the type, and assign a hyperlink to the frame. This will make the tappable region as large as the frame. Easy enough. The trouble comes when you have many of these scattered through a long section of body text, and edits cause the text length to grow or shrink, and the frames no longer line up with their associated text..

The best way to deal with this it to anchor the frames to the text. Here are the steps I use: 

1. Draw a frame with no fill/stroke above the text that you want to be assigned a hyperlink. Make the frame the length of the text, but larger in height.

2. Right-click on the frame, and choose Interactive > New Hyperlink (CS6) or Hyperlinks > New Hyperlink (CC) from the context menu, and enter the url for the hyperlink. Or, use the Hyperlinks panel to assign the hyperlink.

3. Grab the solid square that is visible in the upper-right top edge of the frame, and drag it to just before the first character of your hyperlinked text. In my screenshot above, the square is red, because my frame is on a red layer. The square will be blue on a blue layer, etc. If you don’t see the square, be sure that your frame edges are displayed (View > Extras > Show Frame Edges) and choose View > Extras > Show Anchored Object Control.

4. This will anchor the object to the location just before the text that should be hyperlinked. The solid square is replaced by an anchor symbol, and if you choose Type > Show Hidden Characters, you will see a “yen” symbol indicating the location in the text where the rectangle is anchored.

5. Next, right-click on the frame and choose Anchored Object > Options. Fill in the dialog box as shown, so that the position of the object will move properly with the text. Your value for “Y Offset” may need to be slightly different, depending on the size of your text, leading, and frame size.

6. That’s it. Now, when the text becomes longer or shorter, the frame will move with the associated text.

It would save you some work to create an object style for the hyperlink frame, since an object style can memorize the Anchored Object Options.

This isn’t perfect. If the text that is to be hyperlinked breaks at the end of a line, the box won’t break with it. But it is helpful in most cases.

Webinar invitation: How to Build Your Final App and Submit It to the Apple App Store

On Tuesday, February 4, 2014 I’m presenting a live Webinar for Adobe called How to Build Your Final App and Submit It to the Apple App Store. Here is the the description:

"Once you've created your app content, the next step is to create the final app and submit it to the Apple App Store, Google Play, or the Amazon Appstore. This session will focus on this app creation and submission process. The focus will be on the Apple App Store process, but many of the steps are similar for the other marketplaces. You will learn:

* How to create the required icons, screenshots, and other app assets

* How to obtain security certificates and other details required by Apple

* How to use Adobe's App Builder to create the final app file for submission to Apple"

You can register for this free Webinar here.

New DPS app submission resource

Bart Van De Wiele has put together a really nice interactive PDF that can help you gather all the text bits (app name, sku, description, keywords, etc.) that are required when you submit an app to the Apple App Store. You can download the PDF from Bart’s blog.

Also, don’t miss Bart's article at over at CreativePro about How to Organize an Effective Adobe DPS Project Briefing.

Bart and I will both be speaking at PePcon again this year. I’ll be doing a pre-conference session about how to create content for DPS apps, and Bart will be doing a post-conference session on how to submit your app to the App Store. If you are interested in creating apps with Adobe Digital Publishing Suite, you won’t want to miss this!

Webinar invitation: How to Create Content for Adobe DPS Apps

On January 16, 2014 I’m presenting a live Webinar for Adobe called How to Create Content for Adobe DPS Apps. In this free one-hour Webinar I’ll be covering how to create interactive content for DPS apps from InDesign CC. I’ll be covering:

* How to organize and structure InDesign files for easy inclusion in an app

* How to include audio, video, and animated content in an app

* How to create buttons, multi-state objects, and other types of interactivity in InDesign CC

* How to get an immediate preview of your work in progress on your mobile device

…and more. You can register for this free Webinar here.

Illustrator guide tricks

Illustrator CC has a couple of new features for creating ruler guides:

1. Double-click on a horizontal or vertical ruler to create a guide at that location. Add the shift key when you double-click to snap the guide to the closest tick mark on the ruler.

2. To create both a horizontal and a vertical guide at the same time, drag from the intersection of the horizontal and vertical rulers while holding down the command key (Mac) or ctrl key (Windows).

Bonus tip: (This isn’t new in CC, and I don’t recall how many versions back this one works.) Normally, ruler guides span the entire canvas, which can be a messy problem if you are using multiple artboards. To create a guide that is limited to the current artboard, choose the Artboard tool (shift-o) and drag the guide out of the rulers with that tool.