UX & Web Design tutorial: Use QuarkXPress to prepare iPad-ready publications

A quick, cost-effective way into publishing via the App Store

The success of the iPad has proven there is a market for app publishing, but the costs and coding skills necessary to develop such apps have been a barrier. So Quark’s iPad Publishing Service for iPad, announced earlier this year, should offer an economic solution to creating apps. But it’s not the most intuitive program to use so we’ve put together this basic how-to guide.

You’ll need to contact Quark to sign up for the service. Quark will then send you the App Studio XTension from QPS. Essentially you design the layout as you would any other project in QuarkXPress and then use the App Studio to add interactivity to enrich your content. Note, you can only add interactivity to a picture box and you can’t mix the interactive elements with other design features.


You will need to make two layouts – one each for horizontal and vertical orientations so that the finished app can switch from one to the other depending on how the iPad is held. We’ve started with the vertical, using a page size of 768 x 1024 points, but you’ll have to test the horizontal layout as you go.


Find the App Studio underneath the Window menu, which brings up a palette with six media types: Audio, Button, HTML, Movie, Slideshow and Picture. Select any design element in a picture box with the Item tool and then click on one of these media-type boxes to add interactivity to that element.

Advertisement. Article continues below


The most obvious interactivity to add is with the pictures. Select a picture box and click on the Picture button in the App Studio. Type in a name for the picture, such as p2 Top and tick Enable Full Screen. If you type additional text into the caption box this will also be displayed when the image is enlarged.


Click the File option at the bottom right and navigate to the file to add it to the App Studio. Once you’ve done this the picture will appear in the window. It will also be added to the list of interactive elements, which you can see by clicking the arrow at the bottom of the screen.


You can also use the Pan and Zoom option to add movement to a still image, which is particularly effective with panoramic pictures. Grab the handles around the picture box to choose a detail to pan and zoom into, or use the slider across the bottom to determine how far the image should zoom in to the centre.

Advertisement. Article continues below


Click the Pan & Zoom button above the image and tick the Animate option. Then set a short delay, say around 50ms, before the animation starts. Remember to set a longer time for the zoom action itself, say around 500ms, to ensure there is the time to experience the full zoom effect.


Slideshow is one of the most powerful options as it builds up a visual kaleidoscope by embedding images without cluttering up the layout. You could add several stills to a film review. Select an image, click Slideshow, choose the Simple Slideshow option and click the Create the Slideshow button.


Type in a name for the slideshow. Tick Enable Fullscreen to give the slideshow more impact and also select Enable Scrolling and Show Page Control for better navigation. Use the File button near the bottom left to select the images to use. You can drag and drop between the images to change the order.

Advertisement. Article continues below


Click on the Slideshow button for the animation dialog and tick Enable Animatation. You can then determine how long each slide is displayed for, how long it takes to move to the next image and choose between a swipe or a fade transition. You have the same Pan & Zoom options used in step 6.


To add audio, first select a picture element to associate with the sound, such as the picture of the person speaking or draw a play button. Then navigate to the audio file. You can host sound and video files on a web server to limit the app’s file size but they will only be available when the iPad is online.


Adding movie files is a similar process. Use a still from the film and click on the Movie button. Type a name for the movie and navigate to the movie file to add it to the App Studio. Tick Fullscreen Only to maximise the impact of the clip and tick the Close at end option to prevent the film endlessly looping.

Advertisement. Article continues below


You can use buttons to assign actions, such as navigating to a spread or a web view or for creating a pop-up, as a way of adding extra elements. Click on the Button icon and type a name for the button. At the bottom of the window, by Add Action, choose Show Pop-Up from the drop-down menu.


Clicking Create will add the Show Pop-Up action to the main window, with another Create button. This then gives you the option to set up either a Simple slideshow, as in step 8, or a web view, which uses the same process as the HTML option that is described in the next step.


You can use the HTML button to open up a web page within a page view. Type in a URL address to the web page you want and tick the Interaction and Online options. You can specify an alternative image to show if there’s no web connection. There’s also a Pan & Zoom option for the image.

Advertisement. Article continues below


To allow the layout to change orientation, you could define the landscape as being a double-page spread or duplicate the layout for the vertical format and tweak the design accordingly. You’ll need to collect for output separately for each layout. Also, you’ll have to manually add all the non-print elements.


Nessan Cleary writes for our sister magazine, Macworld, on a regular basis.