Indesign To Website

Adobe Indesign Software Purchase
Indesign To Website Software
Indesign To The Website

If you’re using InDesign to create a web PDF for Flipsnack or for other purposes, there are a few things you should know. It’s all about optimizing your PDF to avoid any conversion errors and have the best image quality while keeping in check the file size. We have some tips for you, but before moving on, we have some good news, too.
We just launched a new extension:

InDesign to Web is a tool that helps create websites for Elastic-Design or better yet a mixture from Elastic-Design and Adaptive-Design.

You can now import your Adobe InDesign PDF files directly into your Flipsnack account. No more back and forth between Flipsnack and Adobe InDesign. Read more about the Flipsnack extension for Adobe InDesign and learn how to use it successfully.

Specifications for web PDFs:

PDF should be maximum 500 pages
PDF should be maximum 100 MB
flatten as bitmap any complex vector objects
use 150 PPI (pixels per inch)

Adobe InDesign is the industry-leading layout and page design software for print and digital media. Create beautiful graphic designs with typography from the world’s top.
Make your story stand out with eye-popping layouts for flyers, social posts, brochures, and more. Use InDesign to create professional publications with graphics, images, and typography. Boost your social standing with the power of Adobe Spark.
InDesign to Web is a tool that helps create websites for Elastic-Design or better yet a mixture from Elastic-Design and Adaptive-Design.

InDesign PDF export settings

Make your layouts and then Export. You will see 2 PDF options:

PDF Print and
PDF Interactive

Choose PDF Print, as this will allow you to create PDFs that will be ready for print and web.

We recommend you to use the “Smallest file size” preset and select “Optimize for fast web view”, which is perfect for web. Make sure the “include hyperlinks” and “compress text and line art” boxes are checked.

Alternatively, you could make your own custom preset for your PDF. A PDF preset is a group of settings that affect the process of creating a PDF. This will allow you to balance the file size with quality.

Adobe Indesign Software Purchase

Settings you should check for your web PDF export:

In the “General” tab:

Compatibility: Acrobat 6 (PDF 1.5)
Optimize for Fast Web View
Export Layers: Visible layers
Include Hyperlinks

In the “Compression” tab

Set all (colour, greyscale and monochrome) images to “Bicubic Downsampling” to 150 pixels per inch for images above 150 pixels per inch.
Select “Compress Text and Line Art”

Save your new Export Preset by clicking “Save preset” You can even name it “Flipsnack” and next time you want to export a file as PDF for FlipSnack, you can use this preset.

Now you can upload your PDF on flipsnack.com and add even more interactivity: audio, video and more.

More info here.

You know where to find us, should you have any questions.

If you had told me when I first started my web development career that I would one day use Adobe InDesign to design a site end-to-end, I would have said that is heresy. Sure, use Adobe Photoshop to create the graphics, but why take that a step further by then putting the layout into InDesign? Because actually it works. It’s amazing. And here is how and why I did it.

PS just for transparency there were a few other resources involved each of which played a key role:

David Ogilvy – Ogilvy on Advertising
Jim Collins – Great by Choice
Adobe CC – including InDesign, Photoshop, Illustrator, Stock
Jupiter Wordpress theme by Artbees – this was a big part of what made this project successful. That said, this methodology would work with any website platform that affords pixel level control.
The client – Cirrus10 (President Peter Curran) – Peter is an amazing leader, clear, calm and smart. Everything you want in a client or boss.

I’m not the only one doing this either, other designers discuss using InDesign for web development:

Why use InDesign to Design a Website?

In different roles throughout my career - as a manager, creative lead or marketer, I have always had a challenge when developing websites. It never seems possible to see the whole site at once while it is in development. Why should this matter, especially when not even the end user would ever see the whole site at once? It matters because good websites (actually any good software) are a cohesive whole. There is a consistency of vision, thought and experience.

This is a key idea referenced (in a slightly different context) in Jim Collins’ Great by Choice. The idea is to zoom in and then zoom out. When you are working on a project it’s very easy to get focused on the details right in front of you to the point where it’s a distraction that leads to failure. In order to retain perspective and to navigate through the challenges of a project it is necessary to step back and see the whole picture. I had never been able to do this on a web project on a single, legible page. I would find hacks to see the big picture instead. Like printing out all the different comped pages of the site and then taping them together on a wall. This has its own challenges – the need for a good color printer, the need for large unoccupied wall space, time enough to print everything.

What if there was a tool that presented an accurate version of the site with extremely high fidelity that could be viewed from up close or far away? So that you could see literally the whole site at once or just certain sections of it. What if that tool could also be used for the actual development of the design? Which is to say what if that tool could even be used to output the final .jpg or .png files for each asset on the site – from backgrounds to individual page graphics? And finally what if all of that were in a manageable file size? So that opening it wouldn’t use up several gigs of memory. (My laptop only has 4 gigs of RAM). InDesign delivered on all of this. I don’t remember how or why I got the idea to use that as my tool except that it reminded me of using Premiere to edit video. Premiere serves as the framework to hold and arrange all the assets of the film as well as adding effects and outputting the final work. Using just Photoshop (for example) to do the same thing for a website would result in file sizes that were way too big and the alternative - comping in code - would take too long and wouldn’t reveal the entire picture at once.

Image 1: The entire site viewed at once

So here is how I did this and how you can do it too.

InDesign’s maximum file dimensions are 15,000px by 12,000px. So start there. This provides a document with enough work area to mock up 6-to-10 long scrolling web pages with widths of about 1200px each.

Once I had the main document file created I went in and built rectangles that represented each of the pages. These were all the same width (1850 px) and were technically wider than the final page design. They were all the same length at first but could grow or shrink depending on the length of the final page design. They were to serve as the raw background for each page. In this case the raw background would be a dark gray. These I then locked because I knew I was going to make the core content areas 1200 px wide and that those areas would then float on the backgrounds.

As an aside - before doing anything - we decided what the job of the site was going to be using Clayton Christensen’s framework from The Innovator’s Solution. This informed how we would design the site overall. For context in this essay, the job that Cirrus10 was hiring the site for was the following:

Validate Cirrus10 is a major service provider in the ecommerce and CMS space by showcasing all services and technologies.
Increase the perceived scale and value of the company by presenting a lot of material and calling attention to the European and Latin American offices.
Generate new leads by inspiring potential customers to either email or call.
Provide Cirrus10 sales reps with concise easily accessible promotional offers. Want to get the relevance tuned on the search at your ecommerce website with a guaranteed ROI? You don't need to go to the site and browse through the site looking for the offer. It's right here. Easy, right?
Provide a platform for much better SEO using longer scrolling pages and long form copy.

What I learned – and this is what I would do again in the future when designing another site – is write as much copy beforehand as possible. Once you know what the main sections are for the site, take a shot at putting everything in writing. It’s like the rule of making a movie. If it’s not in the script it won’t be on the screen. Don’t make a website without scripting as much in advance as possible.

The Process

In broad strokes, here is the process I used to design the site using InDesign:

Make an InDesign file at maximum dimensions – 15000px by 12000px
Create rectangles that will extend slightly beyond the dimensions of what your final designed pages will be. Lay these out next to each other and lock them down. See above for why to do this and how use them.
Design pages whatever way you want. Just work within the dimensions you determined up front. (This is the most time consuming part and where all the heavy lifting comes in. It's where basically the whole site gets put together).
Now comes what I think is the most awesome feature of InDesign. When the site (or pieces of the site) is finalized, then it’s necessary to export the final assets that will go the final build.

Steps for exporting web-ready assets

Select the element to export. In the example below, I want to export the large image that will be the background on one section of the site.

Select Export from the File drop down menu:

Choose file format (in this example .jpg) and name the file. (InDesign will automatically assign the name using that of the whole file if you don’t change this – so make sure to rename for whatever will specifically identify this asset):

Indesign To Website Software

Select Export Selection and choose the quality. For the larger background assets, I went with medium and didn't feel like there was a compromise in image quality.

The final asset will be in your destination folder. In this example the file size is 108K for a 1200x675 file. Since the design of the site had anywhere from 4 – 8 of these backgrounds on each page, this file size kept the overall page size as low as possible.

Notes

During the process: There is a lot of back and forth between Photoshop and InDesign. As the site comes together it becomes clear that some images work better than others. You will usually want to sub things out which means getting new material from Stock, then doing any clean up to the source, pasting it into the area it belongs in the ID file and cropping as necessary.

Shortcuts: I know that there must be a shortcut for items that repeat and that need to stay in sync like the menu elements. As it happened, if a menu item on the nav was changed then I would need to change that item on each of the page layouts. If anyone has a recommendation of how to do this I would love to hear about it. Feel free to message me here on LinkedIn.

About Jupiter Wordpress theme. This is an amazing template. I feel like I could take almost any design comped in InDesign and pixel for pixel recreate it using just the tools in Jupiter. It’s only $59 and it’s capable of anything.

The finished project is here www.cirrus10.com and it looks exactly like it did in the design in InDesign. Cool.