Print design for web does not work - a story of epic fail

guru24

Member
We know that print design does not translate directly to the web successfully. The are many reasons for this and without launching into a list of do's and don'ts, I'll just share a recent experience which illustrates a few of the problems quite nicely. Some of the things that cropped up on this project almost left me speechless.

As a developer - front-end and back-end - I often take the UI design from other sources and pick up the build from there. I always offer guidelines and advice when I feel it might be needed in the earlier design stages, particularly where a design is showing early signs of bad usability. Sadly this is still far too common, but that's another story.

For a recent project I was provided with some designs and artwork by an agency (producing for their client) which were obviously created by a print designer who did not have much understanding of the online/web browser medium. Here are some of the more remarkable issues which arose:

  1. visuals were created in Illustrator and supplied as EPS files, complete with images in CMYK - one page was over 35MB and it wasn't particularly complex. One of the many problems caused by web artwork/visuals in a vector format is that fonts in body type sizes are often way too small when the layout is sized to a typical 960px wide browser viewport. This throws the whole balance of the layout when you scale up the text to make it readable.
  2. the whole site used a background graphic, the design of which was fine diagonal stripes with a top left to bottom right gradation - basically non-tileable and the worst possible design for compressing in any file format. To look good, the background graphic was over 1MB and even compressed quite severely as a jpeg, it was over 300k.
  3. the client was not sure exactly what width they wanted the site to be. It was requested I use a width that matched what the client had seen when they viewed the PDF visuals on-screen. Of course, PDFs can be viewed at any size and even at 100%, different platforms and different viewers scale PDFs differently on screen. This one was unbelievable!
  4. the overall site layout had a fixed height with an internal scrolling frame, so to accommodate the main body content, I needed to use a 'scroll on overflow' DIV - looks like an iframe, but doesn't have the problems of an iframe. Because the fixed layout height was deeper than most browser viewports, this ends up giving you a double scroll bar scenario - one in the central content frame, plus the browser's main window scroll bar. Now, users who don't have a suitably high res display need to scroll the main web page to centralise the content frame, then scroll that frame to view all the content. Utterly crazy.
  5. the site was built on a CMS which was just about the only element of the project that worked successfully. The page layout incorporated fixed height design elements which of course didn't always accommodate the variable amounts of content they ended up containing.
  6. the layout had a fairly strict five tab main navigation. Some pages are reached via in-content links, but as these are not represented anywhere in the navigation, users end up finding themselves on a navigation island with no sense of where you are or what your current page belongs to.
  7. some of the content was supplied as MS Word docs, with the intention of being downloaded by users and read in Word! Even worse, these were placed in HTML pages on the end of a 'read more...' link with no warning that a Word doc would be downloaded and a bulky app launched. A PDF would have been slightly better, but there is still no reason why this content had to be downloaded and read outside of the browser environment. So, you read the first paragraph on a web page, then you need to download a file to read the rest of it!
  8. being a multi-lingual site, the main nav tabs would not accommodate translations such as German which has a much higher character count than English.
  9. to add insult to injury, they insisted on adding a Flash splash screen at the front door of the site. Sheesh!
I did what I could to deal with all of these problems despite the fact that the agency's client - I was way down the chain of command on this one - had been shown and had approved the designs before I saw them. So, I was required to meet that client's expectation.

By the way, all of this is true and all in one project! It's not unusual for some of these things to happen, but this project simply beggars belief.

Conclusion? What we already knew: it is absolutely vital for designers to fully understand the online and interactive mediums. Some print designers can move to Web successfully, but when it goes wrong, it can turn into a total train wreck.
 
That sounds like a nightmare project, a few of the points brought back memories from a design agency I worked in, they were in a similar position, all their experience was print based, it took many months of me working there and 'persuading' them that Photoshop/Fireworks was the best tool for creating web layouts! Even then we had one client who wanted to see a visual of every page of their site before approving it to be sent to the developers who were custom coding a CMS for the site, clearly the CMS and the developers could have generated many of these pages automatically, but the client and the print agency more so lacked the knowledge to do that!

Just be glad it's all over!! :)

It's scary how out-dated some design agencies can be with web design and more so the understanding of the platform, but yet offer themselves to clients as a full on web design and development agency.
 
I agree with Greg that you should be glad its all over... I completely agree that designers on the whole should understand both online and offline mediums, problem that I have encountered, far too many times, is that "web designers" know absolutely nothing (and I mean nothing) about print design, as if its a poor brother to the rich web design brother, and nothing but pity is shown to him. Its sad when I've had to go back to "web designers" and tell them that there design looks lovely on screen but I can't print it. Then a massive argument always ensued, management would get involved and then it would be down to the poor lowly print designer to make the shitty unprintable work, printable... sorry Rant over... just thought I would share.. :lol:
 
It certainly is a relief to get this project over and done with.

For a relatively small site, this one had more than its fair share of challenges. On top of the unsuitable design, which added a load of unnecessary work to what was already a tight deadline, I was implementing French, German, Spanish, Portuguese, Geek, Arabic and Chinese versions - requiring language-specific content and artwork.

Where needed I work with designers to help them understand the issues, but in this case there was no route back to the UI design stage and no time even if there was. The unsuitable designs were approved and there was little scope to change anything.

Even when you do get to work with designers to help them turn a print design into something that works online, you have to be extremely careful as any suggestion they got it wrong - and, heaven forbid, 'a non-designer knows better' - can cause a diplomatic incident.

There's nothing wrong with training people who are willing and able to learn, but this shouldn't happen on a live project where you need to fix a design that isn't going to work.

Design issues aside, it's worth mentioning that ExpressionEngine really helped me get this one out the door.
 
Expression Engine is a fantastic piece of kit.. was trying (in vain) to get this company I work for to pay for it.. but not to happen I guess...
 
chrismitchell said:
...problem that I have encountered, far too many times, is that "web designers" know absolutely nothing (and I mean nothing) about print design, as if its a poor brother to the rich web design brother, and nothing but pity is shown to him. Its sad when I've had to go back to "web designers" and tell them that there design looks lovely on screen but I can't print it...

The same applies in the other direction too - any 'web designer' designing for print must understand the medium, but I don't think it's very common for the work to go in this direction.

When you talk about printing a web page, do you mean exactly that - printing the page from a web browser? Print style sheets are important, but you get even less control over design and layout. This doesn't have much to do with designing for print, but everything to do with coding a web page so when it is printed, it looks as good as you can get given the constraints of print rendered markup and CSS.
 
What I mean by the printing stuff from a web designer is things like birthday invites and brochures etc ... none of which had the right resolution or crops or in some cases even the right size :eek:
 
chrismitchell said:
Expression Engine is a fantastic piece of kit.. was trying (in vain) to get this company I work for to pay for it.. but not to happen I guess...

Yes, EE is great and v2 should be a big leap forward for what is already an underrated CMS.

What baffles me about this is that some people still object to paying for the license. Surely any commercial project that can't stand a $250 license fee has probably got such a low budget that it's not worth getting involved with in the first place...

How I deal with this situation is to pay for the license myself and 'absorb' the cost. It usually ends up saving so much time that I'm more than up on the deal and if the client wants to buy the license from me later, it's even better.

There are often ways to bypass short-sighted thinking and still get a good outcome for everyone involved.
 
chrismitchell said:
What I mean by the printing stuff from a web designer is things like birthday invites and brochures etc ... none of which had the right resolution or crops or in some cases even the right size :eek:

Sounds like you are talking about web designers doing print design and making a total hash of it. I expect most of them would. Again, they need experience and an understanding of the medium.

Same issue as my original post but in the other direction, and just as frustrating I expect!
 
It is extremely frustrating.. I even taught a course on laying up for print at a design school in Auckland from being so frustrated by the problems...

yeah the license fee for EE is probably worth it .. but with saving for our wedding and the move to Milton Keynes, just couldnt warrent it :)
 
guru24 said:
Sounds like you are talking about web designers doing print design and making a total hash of it. I expect most of them would. Again, they need experience and an understanding of the medium.

Same issue as my original post but in the other direction, and just as frustrating I expect!

I feel your pain, we get it in this other direction. Most if not all of our print work is larger than A3 and despite needing lower resolution images than small format, or Litho printers we get a lot of files through our doors from people who just don't have the basic facts. I think it's pretty lazy to design a piece of work and not research the standard requirements for it's final output first. It only takes a couple of google searches to establish the basics, the information's out there.

Picked up a brief yesterday for an African Lodge company exhibition stand, final artwork to make up a 6m x 2m area, using mainly images supplied to us, available on their website, not only are they all at screen resolution, most of them are in a flash document on their site :D

It is frustrating, but it's all work at the end of the day, if you can justify the extra charges to right their wrongs, it's all good :)
 
Back
Top