CSS Skills = Better Web Design?

by Kevin Yank

On the SitePoint Podcast #51 this week, we discussed what Sexy Web Design author Elliot Jay Stocks had to say about designers who don’t know their CSS from their elbow:

Honestly, I’m shocked that in 2010 I’m still coming across “web designers” who can’t code their own designs. No excuse.

Stocks went onto outline his position in a lengthy blog post. Here he mentioned how learning the HTML and CSS necessary to code his designs had been a liberating experience for him.

The unknown was holding me back; I didn’t appreciate how things worked and it scared me away from producing my best work. But with a little bit of technical knowledge […], I “got” the medium in which we work.

As a code junkie, I find it easy to go along with Stocks’s reasoning here. I worked very recently with a designer who didn’t understand the mechanics of CSS layout, and I found it very difficult explaining to him some of the important constraints that his design would have to take into account.

Surely designing a website without a strong grasp on how websites are constructed would be like designing a building without understanding how the construction materials respond to the forces of gravity, wind, and the occasional earthquake?

But I wonder, can ignorance be liberating too? An architect with no understanding of building materials might design an unbuildable building. Yet that initial design might feature fresh ideas that would never occur to a person whose thinking was bound by gravity, tensile strength, and static friction.

Perhaps some of the most exciting web design ideas are locked away in the mind of a non-code-savvy designer, waiting for practical interpretation by a talented developer.

We discussed this issue at some length on The SitePoint Podcast #51, and our listeners have responded with a bunch of thoughtful comments. Worthwhile reading!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.pixel-house.com.au justin-gray

    I believe that the most inspiring designs come from either two extremes. That is, a designer who does not have to worry about how the design will be coded, or a designer who is very confident with css and doesn’t let it interfere with their creativity. It’s always better to go all out and then tone it down than to restrict your ideas at the start.

  • jazkat

    I have to comment on this. I feel very strongly about this topic, as a general principle of good art and design.

    To be your best as an artist and designer you must be intimately familiar with the tools and materials of your trade.

    I have been a graphic artist for more than 20 years. I have worked with a wide variety of media and substrate materials; metal, foam, plastic, cloth, paper, wood, concrete, canvas, ceramic, glass, automobiles, the web, and skin. With each substrate the artist has to consider its unique properties and limitations. In addition to that, many substrate materials have very specific processes, media, chemicals, and equipment required to transfer or apply the design.

    Its not very often I can emphatically stand behind an “always” statement, but this time I am. I have always produced at a much higher level when I have done my homework and studied the materials and processes related to the substrate or media I am working with. This applies, especially, to the web and digital media.
    To all designers out there who think you can design without knowing how to hand-code HTML and CSS, your days of employment are numbered–that is just the reality of the digital age.

  • http://eftimie.com k3liutzu

    I’d argue that it really matters.
    If you know your CSS (and maybe JS) you can make *any* layout work.

    So to all of you designers out there, do whatever you want / need in terms of design, if your UI developer can’t make it happen, tell him to try again. If he still insists that it can’t be done, get a new one.

  • Kingsofweb.com

    I love tables, Tables for life! but i do use css to clean up the code.

  • tom_dot

    For a pure graphic designer, it probably doesn’t matter. And infact it could well be liberating to simply design without worrying about implementation.

    I’d imagine there aren’t that many projects where that’s a possibility though, as usability, accessibility, users needs, etc.. should probably all come into play by the design stage – so there are already a lot of limits on the designer.

    Alternatively, if the graphic design is just the starting point and can then be moulded into a workable design, that might work.

    But having a designer who’s aware of what is and isn’t possible with css would probably save some time on most projects, and be an advantage over any freedom that a lack of knowledge would bring.

  • Mats Svensson

    No HTML/JS/CSS -skills = more adobe sites = an increasingly sucking web

    I see sites every day where the designer obviously knows how to work miracles in photoshop, but have no idea what an a-tag is or what it is supposed to do.

    Yep, you definitely need to know how things work under the hood of web pages to design them, or sooner than later your work is going to blow.

  • Jeff

    I can’t imagine a person calling himself/herself a web designer without having a fairly intimate understanding of CSS.

    The question would be different if we were talking purely visual design, but we’re not. The structure of a site is integrally tied to its visual implementation, accessibility, load times, SEO — in fact, structural hierarchy is everything on the Web.

    In the initial design phase, I think it’s important to be free to throw ideas around without much concern about how they’ll be implemented. But that should be a very brief phase indeed, followed soon by prototyping that uses the same tools we use in the final construction.

    CSS contains some essential concepts needed not only for good visual design, but for the structured thinking and conceptualization that helps us to keep all our code as lean and as effective as possible, to design sites that work equally well for large screens and portable devices, and to keep styles consistent and easily manageable throughout.

    The “cascade” is an elegantly beautiful idea that makes more sense the more you use it. Those who don’t, and chain themselves instead to inflexible design with tables and Flash and funky uses of javascript, are going to harvest a lot of regret later. All these have their place, but it’s really important to know what that place is and to use them only where they make the most sense.

    Can you do it otherwise, focusing only on the look and feel you want to achieve? Yep. Frank Lloyd Wright did so with the home near Pittsburgh, Pennsylvania called “Falling Water,” and the owners have had structural problems with his design ever since. Undeniably beautiful, but you might pay a high price for it. If you can afford to pay that price, and keep paying it, that’s a choice you’re entitled to make.

  • http://www.ginteractive.com tgavin

    In my 14+ years building sites I’ve never placed a limitation on a designer because “you just can’t do that.” I’ve found that, generally, the less the designer knows about HTML the better the design because they’re not limited in their creativity.

  • Ennio Wolsink

    I’d have to agree with Jeff. I do think this means the front-end developer in charge of translating that design to HTML/CSS/JS would then have to have decent design abilities as well to make the translation as good as possible.

    In other words, in such cases the graphics designer and the front-end developer(s) need to be able to work together seemlessly.

  • http://www.lunadesign.org awasson

    I don’t believe that web designers need to know web development practices.

    It’s been my experience that great designers design and find ingenious developers to produce their work. I only know one accomplished designer who also works in code and is capable of building data driven high volume websites with decently optimized code. On the flip side I don’t know any really good coders who can produce decent designs.

    Amongst other things, I think what designers need to know is:
    1) How browser windows visually effect their designs. How a browser frames, restricts or allows their design to flow.
    2) How buttons, scrollbars and other elements can change from different OS/browser combinations.
    3) How some colours change when viewed from Mac to PC and vice versa.
    4) They also need to know what fonts are available and how we can use various embedding schemes if necessary and what the limitations are.

    Otherwise, their purpose is to design the look and feel to the best to their abilities.

    * It has also been my experience that designers often work directly with clients to establish the site navigation, widgets and architecture so it’s not like they just spend all day making things look pretty.

    Before we send designs out for proofing with clients, we do a quick review from a developers perspective to make sure there isn’t anything that will prove to be impossible to achieve with html/css. I find that this allows the designer a lot more freedom because they don’t worry about accomplishing gradiants, bleeds or transparencies; I do :^0

  • http://www.chapmusic.biz TBone

    An anecdote from an amateur:-
    I am a retired 75 year old music teacher and maintain a couple of private websites hand coded in HTML and CSS. It keeps my mind active.
    Recently I had a call from an acquaintance who provides businesses with interactive web sites for staff training purposes. He uses commercially available CMS templates. One of his clients requested some styling changes, and he was immediately out of his depth with the coding behind it so asked me to look at it. It was all sorted out fairly quickly with knowledge of CSS, and I received $100 for my trouble.

    My wife and I subsequently a few nice cups of coffee at upmarket coffee shops. Nice way to retire.

    Thanks for this site and the text books—a great source of info.

    CSS is not all that hard to get my head around, so why wouldn’t a professional come to grips with it?

  • http://nathanhoad.net nathanhoad

    I’ve always seen HTML/CSS/JS knowledge as a factor that differentiates graphic designers from web designers.

  • Erik

    I’m working both as a web designer and developer and have been doing that for 12 years.
    Graphic designers often make their designs in InDesign and hand me – as a free-lance web developer – pdf:s! So I have to make the work over again i Photoshop to make it look decent. I don’t do that anymore, though. I’m saying no to that type of work (now that I can afford it).

    If there is more than one person involved in the design/production, there should me an Art Director doing the overall visual concept. Then the web designer making the Photoshop originals and css.

  • http://www.lunadesign.org awasson

    @Erik: I feel your pain : )

    In house all of our designs are handled in Photoshop… It’s been like that for the 11 years I’ve been a partner/developer here. I also work with outside designers. The majority of them work in Photoshop but some work in Illustrator. I just get them to send me JPG’s at size and the AI files so if I need to I can extract images. For the most part I can work with a PSD loaded with JPG’s and then grab the detailed imagery from AI but I definitely prefer Photoshop.

    When I receive files from InDesign (I worked with 3 designers who work in InDesign) I either have them send me JPG’s at size, a PSD, or let them know that we’ll be doing additional work to deal with the InDesign files which will be an additional cost. I’ve never had a complaint and if I have to do more billable work, so be it.

  • bsmbahamas

    i’ve been coding sites for about 10 years now, and i don’t think it is necessary.

    i’m just learning css, mysql and ajax now, but i’ve pretty much mastered everthing else i can create pretty nice dynamic sites.

    of course you should endeavour to learn as much as possible about your trade, but even microsoft releases buggy software and then patches after the fact.

    it is a lot of work especially if you are a one man team, it’s probably best to havea team of specialists, but thenthe cost goes up.

    the biggest problem with css in particular, and javascript to a lesser extent, isn’t that the coding is not standard, it’s a combination of each person being able to code the same visual effect in several ways, even though there might a preferred way like how every one uses the list elements for navigation now, when before css everyone was using tables for the same effect, and nobody complained. the biggest problem is cross-browser compatibility.

    i must admit i prefer the scripting aspect over the visual design for that very reason, but still i wish to expand my skill set and have pledged to grab the bull by the horn. css is very impressive especially because you can bind images onto elements without embedding them in the code – love the way css zen does this, it’s almost magical.

    css is supposed to make our lives easier, and it does, but only after you learn all the nuances and intricacies and know the way each browser reacts to your code.

    php on the other hand will spit out an error if your coding is messed up, if css did this the world would be a better place.

    can anyone recommend an application that would analyze your css and say I.E. and Chrome don’t like this but Firefox and Safari do?

    or perhaps a listing of just the cross-browser safe parts of css.

    i mean you code simple navigation, only to find that i.e. adds padding where you don’t want it, or your list elements can’t have line breaks in the html code or some other stupid problem, and worse you don’t get any error message so you can fix it. granted html doesn’t spit out errors if you forget to close your title tag either, lolol.

    still, we must rise to the challenge, but i think it is a it much to say i can’t call my self a web designer cause i’m not a css master, after all it only adds style to your layout, but you could still build your layout with html and tables and million invisible images to line everything up just right the way everyone used to do before css. css is the newcomer to the scene not web design, we were calling ourselves web designers before css was born.

    as for me i refer to myself as a web developer not a web designer, because i prefer scripting, but will master the other areas soon.

  • http://www.lunadesign.org awasson

    @bsmbahamas: If you set all of your elements to 0 (zero) for padding, border & margin you’ll have taken care of at leat half of the IE shift battle.

    I use something like the following as a boilerplate stub and build from there:

    html, body, ul, ol, li, p,
    h1, h2, h3, h4, h5, h6,
    form, fieldset, a {
    margin: 0;
    padding: 0;
    border: 0;
    }

    Then I conditional comment a link to an IE6 specific stylesheet to take care of any extra IE6 specific stuff.

  • MauiMan2

    I think you can make valid arguments either way for a designer knowing what can currently be done with CSS, or not being restrained by such knowledge and making a great design that a great CSS person can translate into code. I think both scenarios could work.

    What I have had a problem with in the past is designers coming up with wacky designs then I, as the coder, am told, “Make this design work. Don’t ask any questions.” And the design is good but with a couple minor changes it could still be just as cool but infinitely more manageable with current CSS browser capabilities and also way more time efficient. But usually managers see the coder as a grunt who merely puts somebody else’s awesome design to work and they don’t want any input from you.

  • cazazz

    The web design process requires a mixture of lateral thinking (visual/creative design) and logical thinking (CSS/coding). Not everyone is good at both. You get the best results when people work as part of a team, and have a basic understanding each other’s skillset without being constrained by the nitty gritty. That way you’re more likely to do something original. Even if you work as an individual freelancer (as I do) you have to swap hats during the project, know when to engage the right or left brain.

    So… I believe a designer should have a working knowledge of CSS/html – at least enough to know what’s possible, and to know when you can push the boundaries. Equally, a web developer should have an understanding of typography, colour and layout principles (that side of the equation is often forgotten). I also believe web developers should be brought in earlier in the process, as they can often contribute ideas about technical possibilities that will influence the interface design.

  • Jeff D

    There was an IBM commercial a number of year ago where a kid out of school is showing the senior IBM staffer the cool spinnning logo he created. The staffer asks “What can it do for our business?” The kid shrugs and says “I don’t know”.

    Clealy while creative design is great for sites dealing with art or fashion; at some point creativity has to intersect with practicality. So, indeed a knowledge of CSS is vital in helping to bring that creativity ot life and make it useful as well.

  • Traditional

    Not learning CSS would be like not learning MySql after knowing PHP.

  • http://www.lunadesign.org awasson

    @Jeff D… I think what the IBM ad was saying is that a fancy gizmo some kid came up with won’t help your business unless it has a purpose and that the IBM staffer had the business experience and insight to see that right off the bat. I can’t quite connect the dots to make that an argument as to why an experienced designer should learn html/css. Design is more than making things pretty. There is a lot of business process that goes into UI design, wireframing, navigation flow mapping and of course page design & layout.

    @Traditional: Same goes for your statement. How is a designer not learning css like a developer learning php and not MySQL? I don’t see the connection.

    Perhaps if you are strictly a web designer and don’t have a part in the rest of the branding exercise then you are a bit limited in what you can offer… But in that case, I would suggest that the designer continue on their design path and get more overall design experience.

  • Virgil

    I am new to CSS and Xhtml, along with some understanding of Html and WYSIWYG background, but enjoy the challenge of learning to do all my own coding with some help from an author of a book I use for reference. My real challenge at this point, is not quite understanding why some CSS code can be included in the document for styling and other CSS has to be in a seperate file and linked to for layout. Why wouldn’t a Web developer not want to be equipped with more skills and abilities for his/her work??

  • MauiMan2

    My real challenge at this point, is not quite understanding why some CSS code can be included in the document for styling and other CSS has to be in a seperate file and linked to for layout.

    If you include CSS rules in the HEAD of one document it can only be used by that document. But if you link to a stylesheet in the HEAD of that document then that stylesheet can also be used by other documents.