How to create a digital magazine: format, screen design, export and device tests

A digital magazine starts long before the upload: with a clear idea of who reads it, a format that suits them and files built for screens. This guide goes from the brief to files ready to publish; hosting, issue pages and distribution follow in How to publish a magazine online.

Step 1: Define the audience and the purpose

Before anyone opens a layout file, answer four questions:

• Who reads it? Their expertise and language set tone, depth and type size.
• Where do they read? Check the phone share in your website statistics, and ask a few readers.
• What should they do afterwards? Renew, buy, book. One main action per issue is easier to design for than five.
• How often can you publish? A reliable quarterly builds more of a habit than a monthly that skips issues.

Condense the answers into one sentence: "For [readers], who mostly read on [device], each issue should lead to [one action]; we publish [rhythm]." Add one or two measures, such as readers per issue or clicks on the main action; when the team disagrees later, the sentence decides.

Step 2: Choose a format for your readers and budget

Digital Magazines explains the formats; to choose, compare the work each adds to every issue, not just the cost of starting:

Start with what you already produce: for a print title, a PDF edition adds an export and tests; a web or app edition is a second production line. Add a second format for reach, not for completeness:

• SWISS Magazine, Swiss International Air Lines' magazine, ended its regular print edition in 2022 and has continued online since 2023 ^[1]; a 2025 print special sends readers to videos, images and tips on the website ^[2].
• McKinsey Quarterly puts all its articles online free, adds the mobile-first Five Fifty format and prints an edition for clients ^[3].

Step 3: Plan the issue and the workflow

Digital work gets squeezed at the end, when the print files are done. Plan it from the start:

• A digital column in the flatplan: links, media, and whether the story also runs as a web article.
• Alt text and link targets during editing, by the editor who knows why each image is there.
• Digital steps after print sign-off: screen export, link, accessibility and device checks, each with an owner and a date.
• Rules for AI tools, if the team uses them: what may be drafted with AI and who checks it (AI in magazine production).
• One folder per issue: layout, both PDFs, media, cover image and issue-page text.

The magazine publishing checklist follows an issue through these stages.

Step 4: Design for screens

An A4 page is 210 mm wide; CSS defines an inch as 96 pixels and a point as 1/72 of an inch ^[4], so the page is about 794 CSS pixels wide. On a screen 320 CSS pixels wide, the width WCAG's Reflow criterion works with ^[5], it shows at about 40 percent, and 10-point body text at about 5 pixels.

Treat every page as its own screen. An upright phone shows one page at a time, so check each spread as two phone-sized pages before the layout is locked. Template rules: How to design a magazine.

• Offer text readers can enlarge. Neither a fixed page nor a scroll mode reflows; a text version from your viewer or your key stories as web articles can. A digital-only title can size its pages for the screen.
• Check contrast against the real background. WCAG asks for 4.5:1 for normal text and 3:1 for large text, measured against what the text sits on; background images without enough contrast are a listed failure ^[6].
• Size tap targets for the scaled page. WCAG 2.2 sets 24 by 24 CSS pixels as the minimum target size at level AA, with links inside a sentence exempt ^[7]: about 16 mm on the A4 page.
• Keep text as text. Headlines set as images pixelate when readers zoom; WCAG recommends real text wherever possible ^[8].

Step 5: Add interactive elements with a purpose

Video, audio, galleries and 3D models can help an issue or hurt it:

Give each element one job you can name, such as a two-minute interview, and enter it in the flatplan; if you cannot name the job, drop it. Keep motion away from text people are reading, with a pause control. Where the media live changes the export:

• Inside the PDF. In InDesign's interactive export, Forms and Media set to Include All keeps movies, sounds and buttons working; Appearance Only keeps just their look ^[15]. Test them in the PDF apps your readers use.
• On top of the page, in a viewer. Viewnamic places videos, 3D models, slideshows and link areas wherever you mark the page and stores them separately, so the PDF keeps its size and media can change without a new export; they appear only in the viewer ^[16]. The plan sets how many; Publisher includes none ^[17].

More in Interactive magazines and How to create an interactive magazine.

Step 6: Export the files properly

Export the screen edition as its own file, from the same layout file as the press PDF.

The setting names below are InDesign's. Use Adobe PDF (Interactive) when media must play inside the file: it keeps buttons, multimedia, hyperlinks and bookmarks working, while Adobe PDF (Print) is for non-interactive files ^[18]. The print export also keeps hyperlinks and bookmarks and gives more control over colour, fonts, marks and bleed ^[19].

• Single pages. Choose pages, not spreads, under Export As ^{[19] [15]}: a viewer can pair pages on wide screens, but cannot split a spread for phones.
• No marks, no bleed. Turn both off under Marks and Bleeds ^[19].
• 144 ppi images. Adobe lists 144 ppi as a balanced choice for most interactive PDFs ^[15]; in the print export, downsample under Compression and turn on Crop Image Data to Frames ^[19]. Check your most detailed photo at full zoom.
• sRGB colour. Under Output, choose Convert to Destination and sRGB, the colour space CSS assumes for untagged images ^[20]; convert spot colours in the Ink Manager ^[19].
• Fonts embedded. Check your licences: a font marked for restricted-licence embedding must not be embedded without the owner's permission ^[21].
• Links and bookmarks. Turn on Hyperlinks and Bookmarks ^[19], and link every contents entry to its story.
• Tags, title and language. Turn on Create Tagged PDF ^{[19] [15]}. Set the language, so screen readers load the right pronunciation rules ^[22], and a descriptive title for the title bar or tab ^[23]. The interactive export sets both under Advanced ^[15]; with the print export, check them in the finished PDF's document properties.
• Lean and unlocked. Turn on Optimize for Fast Web View, leave Embed Page Thumbnails off ^[19], and set no open password on a public edition; if you restrict copying, keep text access for screen readers enabled ^[15].

If the file exceeds your platform's upload limit, lower the image resolution before splitting the issue.

Step 7: Cover the accessibility basics

Three layout settings decide whether screen readers and text views can follow the issue:

• Reading order. It comes mainly from the PDF's tags; without them, a screen reader may read a two-column page straight across both columns ^[24]. In InDesign, order the stories in the Articles panel and choose Use for Tagging Order in Tagged PDF ^[25].
• Headings. Map headline and subhead styles to heading tags in a logical order ^[26], under Export Tagging or with Edit All Export Tags ^[27].
• Alt text. Use the descriptions from editing: what the image means for the story, not just what it shows ^[28].

More in Magazine accessibility and the accessibility checklist.

Step 8: Test on real devices

Load the screen PDF into a private preview and read it the way your readers will:

1. Read a whole feature on a phone, upright and sideways; note every time you have to zoom.
2. Tap every link and button, including each contents entry.
3. Zoom to 200 percent. WCAG expects text to resize that far without loss of content or functionality ^[8].
4. Listen to a page with VoiceOver on an iPhone ^[29] or TalkBack on Android ^[30], both under Settings > Accessibility: swipe through one story to check order and alt text.
5. Try a weak connection: time the first page on mobile data.
6. Open the downloaded file on a computer: search for a word to confirm live text, and check the fonts.

Fix problems in the layout file, not in the PDF, or the next export brings them back.

Step 9: Hand over to publishing

The issue is ready when whoever publishes it has everything in one place:

Next: How to publish a magazine online, then How to get more readers for your digital magazine.