Authored by Primate

A rather awesome, informative
and witty blog about all things web

Back to school: the only web designer in the world who doesn’t know markup


I was always a swat in school

A rather innocent question about my design process has lead to the inevitable revelation of my shameful secret: I don’t know html & css. Luckily, I’m willing to learn.

Just a couple of weeks ago Adam Wilson, a talented fellow designer, sent me a flattering email, complimenting me on this very blog (oh boy, was I blushing). He also asked about my process, whether I “found it easy to design on the fly using CSS” or if I still used Illustrator. I gave him the benefit of the doubt regarding Illustrator (anyone making the switch to digital should embrace Photoshop as their main tool), but in terms of CSS I decided it was time to own up: I don’t know CSS, and up until recently I have not written a single line of html.

You see, I’ve got a reasonable amount of experience as a designer, but in terms of web I’m still an infant and my css/html skills are limited as a result. Obviously, I work closely with my css-savvy colleagues to make sure everything ends up looking good, and this year I’ve taken the first steps towards learning a few things myself.

the burden of making small, tedious and sometimes annoying incremental steps towards typographical and graphical perfection requires the eye of a designer

Not because I think I will ever be able to replace a genius front-end developer, but because I want the skills and insight to be able to control – down to the pixel – the final, polished version of any design I’m responsible for without having to bother my hard working colleagues. Just like any print design requires artworking, there’s often a need for digital artworking too; the process of making small, tedious and sometimes annoying incremental steps towards typographical and graphical perfection. And this burden requires the eye of a designer.

Do you need to know css to design a website?

I could easily argue that the process of designing a web experience doesn’t require css or html skills. An architect doesn’t need to be a master joiner or even an expert at AutoCad, and a print designer needn’t necessarily be an inDesign wizard (though I’ll admit it helps!). My point is, of course, that ideas come from experience, process and applied thought, from random things you see in the street or from drunken conversations on a Saturday night – not from software or tools (albeit knowledge of both is in order in order to gauge the build complexity – and technical potential – of one’s solution).

However, I have many times bore witness to beautiful designs being lost in in translation, so to speak, after being handed over from designers to a development team situated in a different room, building, or even country(!). Who, then, makes the choice to between the two slightly different shades of green (inadvertently created by sloppy use of the eye-dropper), and who solves the problem of fitting over-run copy  into the feature area on the home page? The answer should always be the designer, but sadly this is seldom the case when the process is split between to camps.

The truth is, there are a myriad of micro-decisions to be made when building a website designed in Photoshop and unless the designer knows css (or the developer knows design), he relies on non-creative developers to make them. The alternative is, of course, to enforce a strict “no decisions policy” on the development team, demanding that they communicate with a designer every time a small issue occurs, but that’s just silly.

In order to achieve stylistic perfection, the designer should know css.

You can’t push what you don’t know exists

Another reason for designers to be dev-savvy is the amount of creative potential that lies hidden within exciting technologies, waiting to be unlocked and applied to the perfect idea. For example, this funky technique looks really cool, but in this case it adds little value to the content and thus it never really transcends being a visual easter-egg. In the original context, however, the technique has been applied with a designer’s intent and purpose, and the resulting experience truly reinforces the content of the article.

Now, I really don’t wish to knock Russ’s work here – I am aware he is a fellow designer, amongst other things – so let me add that I think the Lebowski quote looks friggin awesome and I totally wish I’d done it myself. I’ll also say that Dont Fear the Internet, which he did with Jessica Hische, is hilarious and delightfully patronising (in a good way!). What I’m arguing is this: It doesn’t really matter if all the developers in the world have an infinite amount of magic at their fingertips unless it’s being applied creatively, and how will the latter ever be the case if creatives are unaware of it’s existence?

In order to push boundaries, the designer should be aware of the current technologies.

Front-end for dummies

So, having established that I’ll benefit from learning more about front-end, where should I begin? In my previous job, the last stage of the design process involved sitting besides a front-end developer with a list of style tweaks derived from me playing around in firebug. This works – but it’s slow and wasteful (you really shouldn’t need two people to change a bit of syntax), so the natural first step in terms of my own process was getting to grips with css and doing post-build stylesheet amends independently.

The second step is supplying the front-end developer with a basic set of styles, including typography, colour variables and mixins, in order to reduce the amount of guesswork required to translate from photoshop to css. To my utmost delight we’re using Sass, one of the most revolutionary – and totally blinking obvious (I almost can’t believe that developers have struggled along without mixins and variables and nested styles for almost two decades) – contributions to a more beautifully designed, visually consistent web. Throw compass into the mix and the world’s an even better place.

Ultimately, this increase in efficiency means we can spend that little bit of extra time in all areas of our production – from content & design, to technical challenges and SEO strategy.

Thirdly I aim to start creating near-complete stylesheets, at least a solid set of variables and mixins, alongside working in photoshop. I already find it helps my design consistency as it forces me to consider the amount of styles and colours I’m applying, and needless to say it vastly speeds up the process of building the site for the developer. Ultimately, this increase in efficiency means we can spend that little bit of extra time in all areas of our production – from content & design, to technical challenges and SEO strategy.

It’d be tempting to add building static html as a fourth step of my re-education, but as I’m not trying to replace our front-end developers this is less of a priority. That said, ruby gems like Slim make it very attractive to play around with simple builds, even if only to increase my understanding of the craft. Anything beyond this I’ll leave to the real professionals – at least for the time being – though I’d quite like to expand my knowledge of Javascript at some point.

A designer at heart

Many of the issues raised in this article relate to web teams where designers and front-end developers are separate roles, and some of you might scowl at my reluctance to embrace the designer-front-end-developer-hybrid (also know as a web designer?). Lots of professionals combine the front-end developer and designer roles, and I’m not suggesting that the two crafts can never be combined successfully. However, as much as overlapping skills are a core part of our staff policy, I guess I’m a little wary of spreading myself too thin – you know, Jack of all trades and all that – and perhaps there’s a bit of an old dog in me. At the end of the day I’m a designer, and every moment I spend learning a different craft means less time doing what I do best – designing.

Perhaps I will even embrace some html prototyping as part of the crafting stage when I reach the required proficiency.

As I learn more of the technical side of web production I’m not adverse to the thought of refining my process though, especially in it’s latter stages. Making final tweaks in css is already a vital part of my process, and for certain projects I have no doubt it would be smoother to design typography using css as opposed to using Photoshop’s appalling controls (and screen-grabbing headlines from typekit is certainly a pain in the arse). Perhaps I will even embrace some html prototyping as part of the crafting stage when I reach the required proficiency.

We’ll see. In the meantime I’d love to hear from you designers out there – do you do your own front-end build, or am I the only web designer in the world who doesn’t know how to code markup?

If you liked this article then why not subscribe to our RSS feed.

Author: Espen Brunborg

Espen can easily ruin conversations with questions about chimneys.

Tags

, , ,

Comments

Showing 11 Comments

Leave a comment
  1. SudoSushi August 25, 2011 at 10:25 pm

    I hate to be pedantic, but it’s markup not code ;)
    You’ll pick up HTML/CSS quickly. It’s not as difficult as you may think.

    Great article too.

    • Espen August 26, 2011 at 10:01 am

      Alright, you got me – article amended. And you’re right, it certainly is a lot easier than I thought it would be when I started.

      • Ben September 5, 2011 at 5:38 pm

        You dont need to code …. from the look of this site you are a very talented designer who does’nt need to code ….. if you want to learn, go for it but remember, design is a huge area to conquer …. learning markup takes you away from your core area …. All you need is an understanding, you dont need to actually code

        • Espen September 6, 2011 at 8:30 pm

          ….and that’s pretty much the gist of my next article. I definitely agree on the core-area hypothesis.

  2. Reuben August 26, 2011 at 4:10 am

    These days, I’m a web programmer. Web design is not my thing. While I know a good looking design when I see one, I couldn’t tell you why it’s good, much less come up with a good one myself. So I work with a designer who deals with much more than just web. He knows a bit of basic HTML and CSS, but he also plays to his strengths. He’ll produce Photoshop files, and them over, and let me go nuts ; pulling it apart, and cutting HTML, CSS and whatever JS is required, plus doing all the functional stuff in the backend.

    I wasn’t always a web programmer. I used to do business stuff, where the front end was character based, or just extremely functional. So when I was asked to do web programming, I was very surprised that the designers didn’t cut their own HTML and CSS. I thought that the responsibility of the UI and UX would be up to the designer, and I’d do the back end logic. That was about 4 years ago, now. These days, I’m happy to take Photoshop files and make them come to life. There’s much satisfaction in placing the Photoshop image and the browser next to each other, and not telling them apart.

    So, a question for you, Espen, as one who is learning markup. What’s your personal take on Haml? I saw you mention Slim, which seems to provide an alternative to Haml, and can embed Haml. Is that something you’re likely to dive in to immediately, without having to do it the long way (HTML5, HTML or XHTML)?

    • Espen August 26, 2011 at 10:07 am

      As a complete non-programmer, Slim makes HTML extremely easy to navigate and I’ve just finished building my first simple page. It was a dream. In terms of Haml I have no idea – my colleagues use it on certain projects but I’ve never touched it. I doubt I’ll ever go the long way either, as I feel in order to master a subject like markup I’d have to spend too much time not practicing my subject of choice: design.

  3. Adam Wilson August 29, 2011 at 11:46 am

    Hey there its the aforementioned Mr Wilson here. I still don’t consider myself a ‘web designer’ in the slightest, but situations have brought me to ‘doing some web visuals for a client’. Yars ago I was clueless, but at least now I understand the basic concepts of supplying pixel perfect visual to our/someones web guys.

    I’ve got the admit the lack of flexibility even between Illustrator and Photoshop are annoying enough, and Adobe’s attempt to link all this into Dreamweaver are even more embarrassing. Which by the way, does anyone even use Dreamweaver? I certainly don’t and its aimed at someone like me.

    Spaghetti code is what has hindered my advancement into started to code my own CSS. I’d love to be able to start from scratch, still just seems like a minefield out there.

    Saying that, Firebug has been a god send and taught me more about CSS than any book so far.

    • Espen August 29, 2011 at 1:52 pm

      Totally agree on Firebug. Another ingenius invention that I find it difficult to understand the web community lived so long without. As graphic designers I guess we’re fortunate in that Adobe’s programmers spent ages perfecting software to do design with – the programmers of the web were too busy inventing the actual internet to worry about design interface…

    • Sukey March 1, 2017 at 8:40 am

      hallo, vielen dank fuer eure tollen intgfmarionen.oerne wuerde ich eure hilfe in anspruch nehmen ich bin ab morgen in sihanoukville.gruss fritzDiesen Kommentar finde ich gut oder finde ich nicht gut: 0  0

    • good aa quotes March 17, 2017 at 11:12 am

      Mr. Weston's so very insightful article should be displayed in every Western government building.But in todays politically correct climate, that is just wishful thinking! In this century, the West has given us only one leader of note in a world rapidly falling into chaos. That leader is the current Canadian Prime Minister who appears to at least, have more than a clue for what is happening within the Islamic world and is acting to defend Canadian interests abroad.Can you imagine Obama or Cameron acting in the same way?

    • http://www.publisheralabaster.biz/ March 27, 2017 at 1:31 pm

      Hej Michael, syntes det er en super god ide. Jeg nævnte lignende sidste år på Amino, for det er jo også muligt at man i fællesskab måske kan gavne MLM. Der var flere der var friske på et fælles møde, men desværre kom vi aldrig videre med ideen.MartinNu Skin

Leave a Reply