Web Repurposing - Successful Republishing

[DTP Articles]
[Vector Articles]
[Bitmap Articles]
[Web Articles]
[3D Articles]

[Free Photos]
[Colour Management]
[Photo Sharing]
[Drupal Tutorial]
[Introducing CMS]
[Photo to Art Tutorial]
[3D Rendering Tutorial]
[Future of Web Design]
[Google Bourbon]
[Google Background]
[Adobe-Macromedia]
[Live Paint Live Trace]
[3D Materials]
[Extending Bitmaps]
[Image Modes]
[Elements 3]
[Flash Video]
[Flash Bitmaps]
[CD Authoring]
[Mac PC History]
[Best 3D App ]
[Photo Edit Roundup]
[Photoshop Patterns]
[Web Success]
[Texture Library]
[Web Stats ]
[Best Web App]
[Best Creative App]
[3D to 2D]
[Corel or Not?]
[Photo Bargains]
[2D to 3D]
[Creative Suite]
[CSS Positioning]
[Tablet PC]
[Pen Input]
[Acrobat Directions]
[HTML Tables]
[Illustrator_Plug-ins]
[RGB to CMYK]
[Filter Tips]
[Understand CSS]
[Photoshop Filters]
[Flash Usability]
[Web Fonts]
[2002 System]
[Font Formats]
[MX Explained]
[DTP Tagging]
[Image Resampling]
[Image Resolution]
[Data-Driven Design]
[Digital Video]
[Windows XP]
[Paper to PDF]
[Flash Animation]
[Page Imposition]
[Design Roundup]
[Graphic Roundup]
[eBook / ePaper]
[Image Management]
[Removable Storage]
[Understand Halftones]
[Web Buttons]
[XML Revolution]
[Bitmap Vectors]
[Image Enhancement]
[Windows 2000]
[PDF Workflows]
[Flash v LiveMotion]
[Advanced File Formats]
[Design Companies]
[Dynamic Filters]
[Site Structuring 2]
[BMP/TIFF/JPEG/GIF]
[Site Structuring 1]
[Image Hoses]
[Text Typography]
[Producing Panoramas]
[Spot Colour]
[SVG Format]
[Design Sites]
[Database Publishing]
[Vector Brushes]
[Layout Compositing]
[Brush Control]
[Web Repurposing]
[Digital Cameras]
[Automating Scripts]
[Stock Photography]
[Quark v Adobe]
[Bitmap Editability]
[1998 Applications]
[Photoshop 5 Colour]
[Asymmetric Grids]
[Bitmap Masking]
[Bug Hunting]
[Commercial Print]
[Vector Transparency]
[Scanning The Facts]
[Colour Print]
[Image Management]
[Preparing Print]
[Understanding EPS]
[DTP Grids]
[Layer Handling]
[NT or Not?]
[Hardware 1997]
[Microsoft Publishing]
[3rd Party Solutions?]
[Beyond CMYK]
[Acrobat v Immedia]
[Postscript 3]

[3D Rendering Tutorial]
[Acrobat Tutorial]
[Art Tutorial]
[Colour Management Tutorial]
[CorelDraw Tutorial]
[Drupal Tutorial]
[Flash 5 Tutorial]
[PageMaker Tutorial]
[Photo to Art Tutorial]
[Photoshop Elements 3 Tutorial]
[Photoshop Elements Tutorial]
[Photoshop Basics Tutorial]
[Photoshop Advanced Tutorial]
[Web Dreamweaver Tutorial]
[Web FrontPage Tutorial]
[Web Design / HTML Tutorial]
[Web Graphics Tutorial]


[Home / What's New]
[DTP / Publishing]
[Vector Drawing]
[Bitmap / Photo Editing]
[Web Design]
[3D Software]
[All Reviews]
[All Articles / Tutorials]
[Book Search / Shop]
[Site Map / Search]
[Contact]
 

you can help support the site with a direct donation or by shopping via the following links:

[Amazon.com]
[Amazon.co.uk]
[Amazon.ca]

Thank you!

 

 

Converting from Print to the Web

 Tom Arah looks at how far re-purposing for the Web has come and where it is likely to lead.

The PageMaker Save As HTML approach

It's becoming increasingly clear that the days of paper-only publishing are coming to an end. The benefits that web publishing offers are just too enormous to ignore with amazingly fast production turnaround at little to no cost combined with the potential of near universal access. It's also equally clear that the prophets of the paperless future were mistaken or at least premature. Paper is the one medium that everyone is comfortable with and the demand for it remains insatiable. The obvious conclusion is that web and paper publishing must develop hand in hand. In particular if information is worth publishing on paper then, almost by definition, it must also be worth posting on the Web. The obvious solution for this is re-purposing - taking the work already put into the print design and automatically converting it for use on the Web.

The major professional DTP-software developers have long recognised the importance of re-purposing and each has attempted to provide a simple catch-all solution by enabling its application to output directly to a web-friendly WYSIWYG file format. Quark's answer was its Immedia multimedia format. Immedia files are created through an XTension working within XPress and are viewable through a freely-available reader program. However the cost, proprietary nature, lack of Windows support and primarily bitmap nature of the format has meant that its take-up has been minimal. Corel's more open and advanced strategy was to use its Java know-how to produce a format - Barista - that all its applications could write to and which could be viewed natively within Java-enabled browsers. However, with relatively complex setup to get the system to work at all and less than 100% reliability when you have, this format has also found little favour.

Acrobat

Much more successful has been Adobe's WYSIWYG format, the Acrobat PDF (portable document file) which is viewable through its ubiquitous Reader program. Acrobat is built on Adobe's Postscript PDL (page description language) which ensures unrivalled quality and reliability even when dealing with advanced issues such as fonts and embedded vector formats. Crucially the format allows text to remain editable and so searchable while helping minimize file sizes. Better still, the files can be produced on any platform and by any application simply by running a Postscript print-to-disk file through the Adobe Distiller program. It was this open architecture that allowed Serif to cheekily claim in-built web re-purposing for its budget PagePlus application, a claim which at the time boiled down to nothing more than the universal ability to write a Postscript file to disk!

With other unmatched features such as page-on-demand downloading, multimedia support and form handling there's no doubt that the PDF has already seen off all rivals and, with the new Acrobat 4 due soon, its dominance should be complete. Even so, when it comes to re-purposing Acrobat can only claim to be a partial solution for two reasons. The first is that PDF file sizes are inevitably bigger than ordinary web pages leading to longer download times and so reader frustration. With faster Net access this problem should diminish but the second fundamental problem won't - people just don't like reading pages onscreen that were designed for print. The Acrobat Reader program offers various zoom levels and automatic thread following, but the truth is that trying to read a multiple column, multiple story, portrait, A4 page through a landscape, 640x480 screen window just doesn't make sense.

Convert to HTML

Acrobat files on the Web certainly have their place, but experience has shown that this is largely as a distribution medium in which publications are downloaded for long-term archive or for immediate print. Real re-purposing, on the other hand, must involve truly translating page-based publications to the very different medium of the screen. As such there's no alternative; the only truly successful web file format has to be HTML. At first sight this doesn't look like it should be too much of a problem, after all both web and paper pages are built up out of text and graphics. Surely, all that needs to be done is for the text to be extracted as ASCII, the graphics to be converted to JPG or GIF and any formatting tags to their HTML equivalent?

Sadly it's not quite as simple as that. The first professional DTP program that attempted to offer such a capability was PageMaker 6 and running its HTML Author plug-in was a chastening experience involving a continuous stream of "unsupported feature" errors. The problem of course was that HTML wasn't devised with design in mind. In terms of formatting this meant that all your carefully chosen fonts and point-sizes were immediately thrown out of the window, but more importantly so was the layout. While the PageMaker page was built around separate floating text blocks and graphics, the web page was built on a single stream of data. The two systems were impossible to resolve so that the ultimate positioning of graphics and even text in the web page was impossible to predict or control.

The freeform, design-intensive approach of DTP applications like PageMaker was intrinsically opposed to the streaming content-based philosophy of HTML, but other applications were more in tune. FrameMaker in particular had always taken a flowing text-stream approach and had long offered the ability to create electronic versions of publications for reading with its special FrameViewer application. FrameViewer's proprietary nature had limited its take-up, but with features like anchored graphics and even its own form of hypertext links, the conversion process of a FrameMaker document to HTML was comparatively straightforward and effective.

What made the process especially effective were the features that Adobe introduced in FrameMaker 5.5 to make the most of the program's highly-structured approach. In particular the ability to map given styles onto the six HTML heading tags meant the hierarchy of information remained clear, while the use of automatic mapping meant that relative levels could be preserved on each page while always starting at <H1>. Even better, FrameMaker enabled a given style to automatically begin a new page so splitting the long document into more manageable sections. With the use of user-defined HTML "macros" inserted at the beginning and end of each sub-document it became possible to automatically convert a publication into a working site complete with home page and all necessary navigation links.

The FrameMaker approach offered considerable re-purposing power, but again it was just a partial solution as it only came into its own for long, highly-structured documents where the information content was all-important. In particular the worthy-but-dull HTML it outputted wasn't going to keep the average reader browsing unless they absolutely had to. For more general re-purposing there had to be another HTML-based solution that somehow enabled more design control. Under intense pressure the developers duly came up with an answer - or rather a workaround.

HTML Tables

The implementation offered in PageMaker 6.5 was pretty typical with the revamped HTML Export dialog now offering two new important options: Preserve Approximate Page Layout and Preserve Character Attributes. When the first of these was selected, PageMaker automatically broke the page up into a grid of text and graphic blocks which it then recreated as an HTML table. When the second was selected it wrote tags into the HTML stream precisely controlling character attributes such as font colour and type style. Opening the end result was often a revelation with the layout of multi-column, multi-story pages mirrored almost exactly. Somehow the problem of HTML's poor design support seemed to have vanished - here was a way to recreate design-intensive layouts purely in HTML.

It seemed too good to be true and it was. To begin with some layouts couldn't be recreated at all leading to PageMaker's less-than-helpful "page ignored due to complex layout" error! In most cases pages would be produced, but you'd often find that while they looked fine initially, they actually needed tidying up. The problem was that this virtually impossible due to the complexity of the underlying HTML table. Without the ability to fine-tune web layouts, you simply had to cross your fingers and hope the process worked first time.

More insidious problems appeared with those pages that did appear to be completely successful, particularly those produced by budget applications such as Publisher, PagePlus and even Windows Draw. Closer inspection of these often revealed that where text and graphics blocks overlapped, the text had been automatically converted to unacceptably download-heavy bitmaps. Even worse, where typefaces and point sizes had been preserved this was due to the use of unofficial <FONT> tag attributes that might well not be supported by readers' browsers. In other words, while the page could be guaranteed to look near identical on the system that created it, in actual use when viewed on different browsers with different fonts available, the layout would be unpredictable and possibly unreadable.

Ultimately the use of HTML tables and character formatting proved useful for quick and dirty re-purposing of a publication, but it wasn't a long-term solution. In particular compared to Acrobat files they were less reliable, less permanent, less flexible and - without a zoom, bookmarks, thumbnails and so on - even less readable. Ultimately of course it was this lack of onscreen readability that was the real nail in the coffin - there's no point putting up information if it's not going to be read.

Dedicated Republishers

This apparent dead-end as far as design-intensive re-purposing was concerned represented an opportunity that was quickly seized upon by new developers such as Design Intelligence with its i-publish program. i-publish put re-purposing right at the heart of its functionality basing all its projects on intelligent templates and placeholders. Using a newsletter template, for example, you could create a publication with three main stories and graphics. Convert the publication to HTML and i-Publish would automatically produce a home page linked to the three separate story pages. Even better the text and graphics would all have been resized and repositioned appropriately to produce attractive web layouts.

At first sight the program seemed to offer exactly the sort of flexibility that re-purposing demanded. Unfortunately first appearances were again deceptive as in the real world the program acted more like a strait-jacket. When working on the print layout, for example, all stories had to be written to a certain length as if they were longer the only way they could be accommodated was for the point size to be shrunk. Once you had converted to HTML your options were even more limited without even the ability to resize graphics. Again you were expected to take exactly what you were given, a recipe for disappointment.

Microsoft Steps In

Like HTML tables then, i-Publish's heavily pre-determined and modular approach to re-purposing promised more than it delivered. Neither idea was dead, however, with a more flexible combination of the two offered by Microsoft Publisher. If you create a newsletter or brochure based on a Publisher 98 wizard it creates a sample layout with stories and graphics that you can edit and redesign just as you want. Using the Convert to Web Site command you can then convert your publication directly into an HTML table-based equivalent or let Publisher intelligently break the publication up into a home and linked story page. The latter option still produces table-based output but in a completely redesigned format well suited for onscreen reading and much more editable.

The Publisher solution is more effective than I-Publish's because it gives the user greater paper-based design flexibility. More importantly, after the publication has been converted to HTML it can still be worked on within the Publisher environment. In fact while working in Publisher's web mode, with its ability to add links and create previews on the fly, you are effectively working within a dedicated HTML authoring application. What's more with the ability, for example, to change the colour scheme throughout your entire site with one-click, in some areas it outclasses dedicated packages.

There's no doubt that Publisher with its dual paper and web modes is the one mainstream DTP package that has taken design-intensive re-purposing seriously and come up with a workable solution. Unfortunately, with its lack of support for commercial colour-separated print and for core web features such as frames and DHTML animations, it tends to fall between the two camps providing a level of power acceptable for the occasional SOHO user but inadequate for the professional.

The Real Thing

Ironically then while FrameMaker 5.5's vanilla-HTML approach provides a simple conversion to functional sites and Publisher 98's modular HTML-table approach has cracked the problem for cheap and cheerful sites, the market-leading power packages have all failed miserably in their re-purposing attempts. For a long time for the professional designer using XPress, PageMaker or Ventura, the only sensible route to converting from paper to web has been to take your text and graphics and start designing again from scratch with a program like FrontPage or Dreamweaver.

Maybe that's no bad thing. After all it's clear that a site produced with a leading-edge dedicated HTML package is always going to be able to offer more than an automatically produced re-purposed site and any designer worth their salt should already be seriously developing their web design skills. Even so the inefficiency of throwing away all the work done on the print design is galling and, for regular publications, near criminal. For a weekly magazine to be to offer a web-based version, for example, it's essential that the re-purposing process should be largely automated.

Fortunately it looks like hope is at hand as shown by the latest developments in Ventura 8. This has backtracked on the Barista front and has embraced HTML fully with some advanced features such as the use of frames. This means that when a publication is exported to HTML it's possible to automatically generate the near ubiquitous side frame to aid navigation. Even better in Javascript-enabled browsers, the resulting frame contains a drop-down list from which you can choose to see a linked table of contents, a list of chapters, a list of figures or even an index. With the program's support for automatic text flow, anchored graphics and tag-based mapping this means that Ventura leaves FrameMaker's technical re-purposing looking very old-fashioned.

The Future - CSS

For design-intensive work, Ventura 8 supports what many have called the holy grail for HTML - absolute positioning. By automatically generating <SPAN> tags any object whether a paragraph of text or graphic, is given a container precisely sized and positioned to the nearest pixel so enabling any layout no matter how complex to be recreated. The capability is definitely an important one for the future as it effectively provides universal Barista-style capabilities within HTML, but I have to say I was under-whelmed. Pages can only be outputted one at a time, are only viewable in the latest 4+ browsers, are virtually uneditable and - by replicating the paper layout - still difficult to read onscreen.

Ventura's ability to automatically reformat paper layouts to more screen-friendly designs before outputting certainly helps make absolute positioning more practical, but its use is still intrinsically at odds with HTML's go-with-the-flow principle. Much more in tune, and potentially much more revolutionary is Ventura's support for CSS (Cascading Style Sheets). Based on this extension to the official HTML format Ventura can create a separate CSS file with formatting information for each of its paragraph and character tags which can then be read and recreated by all the latest CSS-supporting browsers. The beauty of this compared to absolute positioning is that older browsers simply ignore the formatting information allowing the level of design to degrade reasonably gracefully.

To be honest at the moment, the formatting difference CSS makes isn't all that great as the only features Ventura outputs are the font, point-size, margins, colour, indent and style - most of which could already be specified with the unofficial <FONT> tag character attributes. The huge difference is that by separating off the style information into a separate file it is made easily editable. This is very important as it means that a publication re-purposed through CSS can be easily and radically redesigned. To give a publication its own web look, for example, all you have to do is change the font and width of the body paragraph and add in a background graphic to each heading tag. Even better, Ventura lets you link to an existing CSS when outputting so that your publication can be redesigned to your new house-style as it is re-purposed.

The strength of CSS is already clear but it's true potential is far greater as the style properties currently supported are only the beginning. Microsoft, for example, already offers a range of multimedia filters that can be used to add glow, transparency and shadow effects and style-based animation will only be a matter of time. Throw in image styles for handling picture placement, division styles for controlling browser layout and the ability to mix in blocks of absolute positioning whenever necessary and it's clear that HTML-based web design will soon be more than able to match the richness of paper design.

With the ability to control all such styles from within the DTP program it's also evident that the ability to automatically convert well-designed paper publications into well-designed web sites will finally be a reality. Its birth certainly hasn't been easy but re-purposing will soon completely change the way we think about publishing.

Tom Arah

February 1999


Hopefully you've found the information you were looking for. For further information please click here.

For free trials and special offers please click the following recommended links:

For further information on the following design applications and subjects please click on the links below:

[3D], [3ds max], [Adobe], [Acrobat], [Cinema 4D], [Corel], [CorelDRAW], [Creative Suite], [Digital Image], [Dreamweaver], [Director], [Fireworks], [Flash], [FreeHand], [FrameMaker], [FrontPage], [GoLive], [Graphic Design], [HTML/CSS], [Illustrator], [InDesign], [Macromedia], [Macromedia Studio], [Microsoft], [NetObjects Fusion], [PageMaker], [Paint Shop Pro], [Painter], [Photo Editing], [PhotoImpact], [Photoshop], [Photoshop Elements], [Publisher], [QuarkXPress], [Web Design]

To continue your search on the designer-info.com site and beyond please use the Google and Amazon search boxes below:

Google
Web designer-info.com

       
designer-info.com: independent, informed, intelligent, incisive, in-depth...
 


All the work on the site (over 250 reviews, over 100 articles and tutorials) has been written by me, Tom Arah It's also me who maintains the site, answers your emails etc. The site is very popular and from your feedback I know it's a useful resource - but it takes a lot to keep it up.

You can help keep the site running, independent and free by Bookmarking the site (if you don't you might never find it again), telling others about it and by coming back (new content is added every month). Even better you can make a donation eg $5 the typical cost of just one issue of a print magazine or buy anything via Amazon.com or Amazon.co.uk (now or next time you feel like shopping) using these links or the designer-info.com shop - it's a great way of quickly finding the best buys, it costs you nothing and I gain a small but much-appreciated commission.

Thanks very much, Tom Arah


 
[DTP/Publishing] [Vector Drawing] [Bitmap/Photo] [Web] [3D]
[Articles/Tutorials]
[Reviews/Archive] [Shop]  [Home/What's New]

Copyright 1995-2005, Tom Arah, Designer-Info.com. Please get in contact to let me know what you think about a particular piece or the site in general.