Pin Me

Tips for Designing Web Pages in InDesign

written by: Bruce Tyson•edited by: Amy Carson•updated: 9/15/2010

Designing Web pages in InDesign is an interesting idea because designers can create print and online versions of documents that look the same.

  • slide 1 of 4

    InDesign and Web Pages

    Dreamweaver is the Web design platform that comes with the Adobe Creative Suite software collection, but other programs within the suite such as Adobe InDesign also have some capabilities for producing web pages. The desire to make a Web page from a document layout formatted for print is understandable because the document will have a consistent look in both formats.

    At first InDesign had no capacity to directly export layouts to HTML, but recent versions, including InDesign CS5, now sport that capability.

    Unless you talk about exporting the most basic InDesign layouts, however, users will normally be disappointed when they see the results. As an example, let's look at this newsletter template downloaded from the Adobe Exchange to illustrate.


    In the InDesign environment, this newsletter looks as though it will print well enough to be a decent newsletter. Suppose, however, that you wanted to make a Web page to coincide with the distribution of the printed edition.

  • slide 2 of 4

    Saving InDesign Layouts as a Web Page

    To save your InDesign layout as a Web page, click "File" and then "Export for" and then choose "Dreamweaver."


    You may now name your Web page and click the "Export" button to save your layout as a Web page. As you may have suspected, designing Web pages in InDesign isn't quite that easy. Open the Web page you just created and you will see.


    All your formatting is gone and you are left with text mingling with images, a Web page that looks quite different from your layout. Perhaps this is why Adobe calls this option, "Export for Dreamweaver" rather than "Export as a Web page." You clearly cannot use this export without investing some additional time and energy refining it using that other Creative Suite application.

  • slide 3 of 4

    Tips for Designing Web pages in InDesign

    If you still want to pursue designing Web pages in InDesign, there are a few ways that you can improve the outcome of your exported layout.

    1. Think Web design first. Get focused on how your file will look in its exported form. This means that you should probably start the layout of your design from scratch to make sure that you do not have any incompatible elements.

    2. Place content in your page in a sequential manner. A linear approach will minimize the confusion that results when your InDesign layout is exported. This means that you should avoid layers and use tables for alignment and columns rather than built-in InDesign functions. Also, keep one page to each file rather than inserting pages into the same layout. Don't use text boxes for images and don't use the InDesign text wrapping features.

    3. Add your hyperlinks by selecting text or images and then using the Hyperlinks & Crossreferences options from the "Type" menu.indesignweb04 

    4. Use the XHTML options in InDesign to help control formatting of the exported layout. This way you can automatically create CSS and link to javascript as part of the export process, potentially saving time in rework.

  • slide 4 of 4

    Where to Go from Here

    As implied by InDesign itself, your layout as exported by InDesign will likely require significant rework in order to restore it to a similar appearance as your printed layout. Dreamweaver is a very capable platform in which to do this, although, many designers may be unwilling or unable to invest the additional time that designing Web pages in InDesign ultimately requires.

    As an alternative to designing Web pages in InDesign, you may wish to consider options that are more conducive to preserving your layout. For example, Exporting your document as a PDF or JPG will allow you to post your document online without losing any of its appearance. indesignweb05 Designing Web pages in InDesign is possible, but all but the most enthusiastic power users should consider either designing Web pages using Dreamweaver or displaying layouts online in alternative formats.