13 Apr 2011 7 am eastern

How to work with a designer who is new to the web and wants to control everything

Q. Working with print designer who is just getting into web and they want to control everything. Any advice on how to deal with them? – @FossilDesigns

A. I ASSUME YOU’RE CODING what your colleague designs. Gently explain how pixel-perfect design falls apart on the web, using visual examples. Start with a design that looks great in the environment it was designed for. Your colleague will smile. “Yes, it does look nice here,” you will agree. Then move on to three or four common environments where that same design breaks or is unpleasant to use. As long as you are not being a jerk about your superior knowledge, your calm, friendly expertise together with a few examples should make your colleague amenable to learning more. At that point, there are dozens of resources in print and on the web. Start with gentle, introductory books and articles. (I wouldn’t plunge your friend into Mobile Boilerplate.) I leave it as an exercise to readers of this page to list articles and books that can help.

If your colleague remains adamant about pixel-perfect design, you’re working with the wrong designer. Relationships only work when respect flows both ways. If your partner will not listen, you need a new partner. If this is a freelance gig, find one. If it’s a job, and you simply can’t get through to your new colleague, involve your boss. Be firm but not threatening. You’re not trying to get your colleague fired, you’re simply trying to resolve a dispute in which only one of you has expertise. If you’re afraid to involve your boss, you’re in the wrong job, and your non-web-savvy colleague is merely a symptom of a larger organizational problem. Get out! You can do better.

Filed under: Best practices, business, Career, Compatibility, Design, The Essentials

33 Responses to “How to work with a designer who is new to the web and wants to control everything”

  1. Gareth Watson said on

    What if the designer doesn’t work for the same company as you? Say that your client has involved their rather excellent print designer to design their website, you receive it for the ‘build’ phase and realise that it very much is a web design done by a print designer? This has happened me twice in the last couple of months! Am near the point of refusing to work with 3rd party designers!

  2. ala_747 said on

    Although I’m not afraid to involve my boss, he doesn’t support my claims. So, I guess it falls into the last scenario anyway.

    Taking a deep breath and start thinking about it.

    Thanks for this answer, J.

  3. Marco Monteiro said on

    This article bring back some memories.. On my first job still has an intern I had to deal with this, but back then I was seen like the inexperienced young padwan :P

    Nowdays I don’t really have this kind of problems except on cases like Garath Watson pointed. I’d definitely loved to hear Zeldman thoughts on that case.

    Cheers!

  4. Not Naming Myself said on

    (This may be a rant)

    I had a previous serious fallout with 2 friends because of this (1 a designer, another a businessman). I wish I had encountered your article earlier and break things early.

    Last year I’m hired by 2 good friend (used to) to be a web developer in a 3 person partnership. Despite all my efforts to convince my designer friend’s on what’s good and bad for the web as well. It never got into their ears. I could talk about something, and they would just search the internet for another article that counters it. (e.g. Find an article that supports splash pages, find a beautiful website with 7–9px fonts, argues that broadband has made downloading so fast, whole website as an image is not a problem for speed.etc. There’s always an article on the web out there which supports these bad ideas most self respecting web professionals wouldn’t agree).

    Eventually I got sacked after spending lots of effort in building the website. They replaced me with another developer who simply do as they says, body text in images and all the really bad things I wouldn’t have done out of responsibility.

    Their business was a great success no doubt, but that’s due to the physical products they designed and not the website. Content saved them. But I couldn’t help but feels rather sad on how a close friendship just broke up like this. If only I break things early than to stay on in the partnership due to being friends, we might still have been good friends now.

  5. Joram Oudenaarde said on

    I tend to (somewhat) disagree when I hear people say that pixel-perfect design isn’t possible with websites. As long as the designer is capable of making a design that keeps the limits and possibilities of webdesign in mind, you can usually make it 99% pixel-perfect in my opinion. With IE6 and IE7 going the way of the Dodo, it’s not impossible to make a website that looks almost exactly the same in most browsers. :)

    Even better, I’ve worked with coders who seem to have trouble in using the line-height I specify in Photoshop when they code my designs. Now, I know I’m using pixels to emphasize the line-height in Photoshop. But I’ve, for example, used a 22px line-height (18px size) in my design, and I’ve made a briefing that explains in detail that the typography used in my PSD-file is leading. When the coder showed us the final website, the line-height was about 16px. Those are differences that I don’t really see necessary nowadays.

    In all fairness though, there are numerous print-designers who think that designing for a website is basically the same as designing for print… and it takes a lot of patience and explaining that those 2 things are very different beasts :)

  6. Jeffrey Zeldman said on

    Gareth Watson: Request a meeting with the client’s designer and have the conversation I outlined above. Then see if, together, you can brainstorm ways to make the site design “more interactive.” This is obviously only a half-measure. A designer who doesn’t understand the web shouldn’t design websites. As you know, look and feel is only the icing; user experience is the cake. A professional with no background in user experience isn’t designing websites, he’s only decorating them. If you can interest your client’s designer in user experience, great! If not, you need to explain the situation to your client, and involve the client’s designer less. That is, bring in the client’s designer after all the UX has been worked out, and work with him/her with the understanding that comps he/she provides are to be *interpreted*, e.g. you may translate his/her fixed pixel sizes into relative sizes that preserve the size *ratios* in the comps but are flexible in practice. If the designer is amenable and a fast learner, he/she may join you in experimenting with fluid grids and so on. A good designer can comp two or three site views (i.e. iPhone view, widescreen view, small screen view) which you can then code.

  7. Synchro said on

    I usually find anyone using Illustrator is going to be trouble. Illustrator’s resolution independence means that nothing is ever on pixel boundaries, so even simple things like rectangles (which should be done with CSS borders anyway) go horribly wrong.

  8. Ray Drainville said on

    Seeing that question, I couldn’t help but think “Today, in 2000″…

  9. Joram Oudenaarde said on

    @Synchro;
    As of Adobe CS5, it is possible to make pixel-based designs in Illustrator. But I personally wouldn’t recommend it as a lot of people don’t know how to use it :)

    As for creating site views for Responsive based webdesign;
    I’m personally very excited about the technique of Responsive webdesign, but I’m not a fan of actually using it. For me, being able to see a webdesign in all it’s glory and zoom in/out on elements as I (the user) see fit, is worth far more than seeing a website that changes it’s looks, feel and overal interface to accomodate mobile browsers/browsing. I’d rather have a fluid or fixed-width design where I (as a user) can decide on where to look/what to read, as opposed to having a website that changes according to the browser the user is using. It feels like a reverse world in that aspect.

  10. bronwen said on

    Thanks JZ! I have a meeting later today with a print designer who is insisting on a Flash-only website for her client, including such things as, *gasp* a hit counter. I’ve been thinking all morning about how to gently steer her in a web-friendly design direction. Your post came at the right time :)

  11. Create_28 said on

    Creativity will always be compromised to some point when it comes to design, whether it is print or web there will always be restrictions due to the format, layout and purpose you are working towards. However to divide the Print and Web realm is a must, you must have a very skilled and varied knowledge base to be successful in both demographics.

    Primarily as a web designer you must understand html/css/back-end coding/databases and browser compliance and best practice standards to produce the perfect result. It can be pixel perfect without a doubt, as long as the initial concept in Photoshop has at least catered for an effective and flexible DIV structure.

    As for print, many web designers are befuddled by the concept of digital vs litho, spot colours and pantones, many a web designer produces a bad high res PDF for print.. unfortunately i have been one of them in the past who has frustrated printers..

    Moral of the story is…Knowledge is power people!

  12. Michael Bernth said on

    Being a designer and coder I am able to see the problem from both sides, but that said, I believe that the blame for most parts are on the designer. I think the problem usually arrises when the designer for some reason hasn’t taken the time to investigate the medium for which he designs. That’s not only lazy, its bad craftsmanship. If you as a designer doesn’t familiarizes yourself with the medium, then you are not doing a good job. If I design magazines the way I design websites I would quickly run out of clients, and rightly so. But unfortunately it doesn’t seem to work the other way round.

    I think part of the problem is that many clients are still more used to print and as such has little knowledge of how design works on digital mediums such as websites. That can put the coder in a difficult position, where the client doesn’t understand why the beautiful design he approved can’t be realized on his website. Because of the lack of knowledge he will more often than not, side with the designer. I believe that, apart from educating the designer, you also has to educate the client so they will know what to expect and have better tools with which to judge the graphic design. Not an easy job.

  13. Gareth Watson said on

    Jeffrey – thanks so much for the feedback. I particularly like the line ‘A professional with no background in user experience isn’t designing websites, he’s only decorating them.’ – I am putting this on a t-shirt!

  14. Not Naming Myself said on

    @Michael Berth, you summarised what’s really in my heart as a coder. The problem of the client generally siding with the designer because the work they do does look better on the screen/paper and insist on things to be done just because it is technically possible. Afterall anything static can be done just including the site as an image *shivers* and broadband is partly to blame for some client’s and designer’s attitude on this sadly.

    I think the problems also lies sometime in us believing that we knows about technology. For example:

    The developer will laugh at the idea of having the whole site as an image or flash, because it’s not practical and bad for accessibility. He could not understand why the designer couldn’t follow some basic rules and giving up control when designing for the web like the other professional web designers he has met.

    The client will think the developer is trying to smoke his way to an easier job because he believe he knew at the very least what are possible with technology. As he has played video games, watched 3D movies, he knows what’s possible with technology. He has surfed websites which feature those effects too. So yes, those flashy effects are technically possible. But he doesn’t know about the context.

    The print designer will think somewhat like the client and may even find the developer opinions stupid. After all, he has been crafting every single printed design uniquely all the time. Attention to detail is the right thing to do, he believes utlising flash or having the body text in image (because the client doesn’t want to pay for typekit) is a perfectly worthwhile tradeoff to the maintainability inflexibility highlighed by the developer.

    I’m rather stumped at how could each side learn to understands more about the other sides. This lack of understanding will continue to plague us in our communications unfortunately.

  15. thewebcoder said on

    If all else fails, do it exactly as designed with the caveat that it breaks on a b c d e and f. Let the design limitation speak for itself.

  16. Jeff Allen said on

    Zeldman: Thanks for answering my question like this. I owe all I know about web standards to you a few others.

    Gareth Watson: Oh wow, I hadn’t thought of that, but it would appear Zeldman is no stranger to third party design.

    Joram Oudenaarde: Since you brought it up, and I’m not sure where to look, where do you specify line-height in Photoshop? Also, in your website designs are you declaring your font size in points, pixels, ems?

  17. Brian Artka said on

    Excellent post Jeffrey, but I also (sadly) concur with Ray mentioning , “Today in 2000″. I wish we did not have to even talk about this topic, but it is still extremely valid. As most of the community agrees with, there are print designers, and there are web designers. These are two completely different professions. Both professions can be inspired by “great” design (whatever you think this may mean to yourself) in any medium, but when it comes to working on either, one must understand the set of constraints and tools that are involved with each.

    Jeff Gothelf, at this past SXSW Interactive, had a panel called Lean UX: Getting out of the Deliverable Business. Jeff mentioned something along the lines that it was time for designers to stop being the hero. It was time for them to stop designing for the cool to win awards; neither of these actually help solve your client’s problems. Interactive design should be a hero-less field and (print) designers need to learn that they have constraints to work with and lose total control.

    Pixel-perfect transitions from a PSD file or Fireworks PNG file (preferred by myself) are never going to be 100% accurate. I try to be as close as possible when I cut a comp up, but there are always, and will always be differences. Hell, we deal with so many different browsers and OS differences (72 dpi vs. 96 dpi; yes, typefaces are not the same size.. or I am just crazy) that striving for a pure translation is aching to pull your hair out (trust me, I’m bald).

    I could go on and on about this, but instead, I’m going to list some books for print designers new to web:

    The Mac is Not A Typewriter
    This is more of a joke, but I cannot tell you how often I get content and other items with double spaces after a content sentence. It sucks.

    Designing With Web Standards
    A no brainer for us, but get the printies to read it; if they dont, as Jeffrey mentions, they are not taking their job seriously and try to find someone else (if possible) to work with.

    The Principles of Beautiful Web Design
    Jason’s book is geared towards developers who want to know more about design, but it may also be an easy read for print designers who need an overview of web design theory and how to apply it.

    Interact With Web Standards
    This book is meant to be a textbook replacement for a classroom setting, but it could be the ultimate “welcome to web design” along with Jeffrey’s Book mentioned earlier. The fact of the matter is being a web designer also means at the minimum, understanding some code and how it works.

  18. Joe Sak said on

    Wow, feel free to keep doing Q&A posts like this!

  19. Joram Oudenaarde said on

    @Jeff Allen;
    you can specify line-height in the Type-palet, just like Indesign and Illustrator. I have to admit that that line-height number can’t be copied one-on-one by the coder, especially if the coder uses line-height in em’s. But it’s a good guidance point for both the designer and coder to make sure that the line-height of the website has to look similar to the designed Photoshop file (or Fireworks if you use that obviously).

    My personal experience is that you can go véry far in getting a website pixel perfect up to a point that it looks remarkably close to what the designer and client intended/hoped for. It does take a lot of effort on all 3 parties though, because everyone’s interpretation varies. Sometimes that means that either the designer or the coder has to adjust an element by a few pixels to make things “match” again… but it’s definately possible :)

  20. Create_28 said on

    You have my sympathy! I get very frustrated when people think they can leap from print to web to programming to project management…etc, just because you are skilled at one doesn’t make you the Rhianna of the others. Do we all remember Keanu Reeves foray into the realm of music, the fact he was never that great at acting should have been a big clue! It is better to be a ‘master of something’ than a ‘Jack of all trades’!.

    Both Print and Web require a completely varied and experienced knowledge base to do either successfully. It is like being a pro at dancing ballet and break-beat…they might have similar steps, but you’d never put them in the same outfit!

    Not to say you cannot master both, but first you must understand them…

    It takes a wealth of knowledge and experience to become a successful Web Designer, the key is to look beyond the design and consider the functionality, in order to get the basics of design right you should have knowledge of HTML/CSS/Backend systems/databases and browser compliancy and best practice awareness, and this is really just the tip of the iceberg. You completely can get a pixel perfect layout on the web and cross platforms, as long as you have designed it properly in photoshop first taking into consideration the basic elements such as DIV structuring at least. Personally i think web designers should be front-end developers too.

    The same goes for Print, many a web designer is befuddled when it comes to digital vs litho, spot colours and pantone, hence a poorly put together high res PDF is sent to the printers and the final result is not as anticipated as it ‘doesn’t look like it did on my screen?’… i can say that as i was once one of those incompetent web designers that thought designing for Print was obvious… shame on me.

    So in response to the question at hand, incompetence should be challenged, a good designer will always look to improve their work and shouldn’t be offended by constructive criticism from others, as a ‘proper’ design critique is like ‘water off a ducks back’ for a designer. If you really feel the designer is wrong, then as long as you have logic to your criticism them why not challenge them, they might have a reason you have not considered…

    The moral of the story is… Knowledge is Power people!!!

  21. Ad-dev said on

    I work for an advertising agency, an industry that continues to struggle in the transition from print to digital. We have “Web Designers” of varying degrees here, some have actually coded HTML themselves whereas others still deliver comps in 300dpi. You can only educate these people as much as they are willing to listen, and even then there are savvy designers with less understanding Creative Directors, so even they just end up caving and insisting we use the dark arts (headlines as images, table layouts, hiding the scrollbar when the page is too wide).

    My favorite part is when they screenshot the webpage and lay it over their comp in photoshop… ugh!

  22. Cliff Huizenga said on

    I had this happen to many times at my previous job. The print designer would make a beautiful web site design in Illustrator, but then we had many issues making it work for the web. The designer was open to my suggestions, but when we started talking with the boss, the answer was, “We can’t change it. The client wants this. Make it work for the web.”

    I left that job almost six months ago, and am in the process of giving that print designer the tools needed to leave that job as well. All is well now.

  23. Mat said on

    Great thread. My take:

    New projects should always start with the question ‘Does the client understand UX design?’ If not then work with them at your peril. I got so fed up working with clients that would not pay for Information Architecture, and hired designers who don’t have at least a grounding in how their sites will be built.

    I wont take on a site without good solid I.A/Strategy/Research, and wont hire designers who cant code a simple standards-based table-less page. It shows they care, and they can work well with good devs.

    Print designers can go use Flash. It, like print, is expensive to update, is a closed system, and allows all manner of form over function. Only when I learned how to code HTML/CSS I realised that all that Flash has no place in the semantic web.

    Also for mobile UX, just ask the question ‘what is the difference between the web and the internet?’ that usually sorts the wheat from the chaff.

  24. Eli Gerson said on

    Great article.

    There are certainly differences between a “traditional” print designer and a “traditional” web designer. But, these days, what’s traditional anymore.

    Our industry is changing so fast that the lines between print and interactive HAVE to be blurred to stay on top. It is entirely possible to be an excellent print creative and still be able to intelligently design for the screen. Recently, I have found that programming for a print designer offers some very interesting challenges and forces you, as a developer, to think differently and find new solutions to achieve the design.

  25. Montagist said on

    I can only speak from my personal experiences, but I don’t feel this is really an issue of designers wanting “Pixel Perfection.” As someone pointed out in an earlier comment, it -is- possible to be relatively pixel perfect on today’s web. I’m probably just outting myself for the lazy f*ck that I am, but I can say that most of the requests made to me for Pixel Perfection usually came after I assumed a few pixels here and there wouldn’t matter, so I can’t even get mad.

    I think the -problem- is the designer with a shallow (or non-existing) understanding of user-interface patterns and things of that nature – people who do not make things that just “don’t work” for the web, but things that do not utilize the medium to it’s full potential. Then again, even on jobs where I was “just a codemonkey for a designer” – which are no fun, we’re all in agreement on that – I was still never told anything as specific as “this needs to all be one image” or anything like that, so maybe I haven’t experienced the worst of this, at least not in this particular team configuration.

    I think there’s a larger problem at play here, though. Why are there designers who can’t code their own sh*t? Why are so many of us ok with being “just front-end developers?” We can argue about specialization vs generalization all day but I don’t think a designer/developer hybrid is taking on too much at all, especially considering the fact that these are both creative problem solving skillsets.

  26. Simon Dennett said on

    Breaking the decoration is like breaking the fourth wall. Once you lose consistency on the decoration level you start to descend down the slippery slope of sloppy implementation. There really is no excuse for forsaking attention to detail at the decoration level when excellence in multi screen size layout adaptability and key flows are firing on all pistons.

    Very often I see the excuse thrown up by those that don’t care that, well it can’t be pixel perfect so it doesn’t need to be tight. I think the danger is that by taking a relaxed stance towards the decoration you get an ordinary or average result no matter how good the rest is.

    And lets face it, the decoration is really what puts the icing on that cake. A cake with amateur icing may taste nice but chances are if you are lazy with the icing you probably cut corners with the cake.

    So if you have to ask this question then you really need review what you are doing from first principles. If the decorator is in charge of the whole event but has only designed the flyers before, then the party will be over before it even starts. You will have yourself a pretty spectacular mess.

  27. Greg Smith said on

    “…others still deliver comps in 300dpi.” Wow.

    Make it a deadline/money issue with the client. Do your best to explain how and why it will take longer and cost more. In my experience, they’ll side with you and give you more control any time you can convince them that your way is more time/cost efficient… THEN get into all the philosophical touchy-feely responsive interface experience etc., etc. stuff.

  28. ¿Cómo formar tu equipo de desarrollo web? « Open México said on

    [...] al menos en edición de contenidos, programación, diseño gráfico especializado en web (Zeldman, 2011), usabilidad y aquitectura de información. Este equipo base podrá realizar proyectos web [...]

  29. Robin Massart said on

    For those who, in Jeffrey’s words are:

    “”A professional with no background in user experience isn’t designing websites, he’s only decorating them.

    I would recommend:

    1. Subscribing them to Jakob Nielsen’s Alert box: http://www.useit.com/alertbox/

    2. Getting onto their PC and setting their browser homepage to: http://www.useit.com/

    3. Lend them a copy of Jakob’s Designing Web Usability

  30. Gaurav Mishra said on

    Thank you Sir!
    For helping out. Last paragraphed helped a lot!
    Will always keep that in mind. Design is all been a revolutionary.

    But to hear that first YES, walking on the series of ‘No responses ‘ required.
    Walking & Moving from one No to another No on a series, i find that asking to require courage, patience & preserve.
    Or may be the designer’s intellect defense system work on the same automatically, without telling he/she the phase he/she is passing by.

  31. Benjamin Knight said on

    I’m wondering if anyone knows of any real world examples where a pixel perfect design does indeed fall apart when compared across environments. I’m sure they’re out there, but if I had to go through Jeffrey’s scenario tomorrow for example, I’m not sure exactly what I’d use as a subject of my demonstration.

  32. George Katsanos said on

    I so much like this kind of articles. It’s a kind of Go Ask Alice for Web Developers. Can I submit my question please? How do you convince your boss that the website won’t (and shouldn’t) look the same in all IE6, 7, 8, FF, Chrome, Safari & Ipad?
    I know I know.. progressive enhancement.. try explaining that :/

  33. AJ Kandy said on

    I’d also throw in Paul Boag’s Website Owner’s Manual as a great introduction for civilians, specifically for client-side managers tasked with getting a site (re)designed.

Comments off.