The epic tale of how loading your website with higher-caliber words & design will increase your conversion rates (and make you more loot)…as told by the dashing & debonair marketing ace & attention-thief, D Bnonn Tennant
It’s always nice to get fan-mail, and it’s especially nice to be asked for advice. Yong-Soo Chung wrote me recently to ask:
I’m interested in becoming a web designer myself (and selling things as you are). I’m dedicating 5-10 hours a day and going through books on xhtml, css, web design standards, etc. If you don’t mind, could you list the steps to get to where you are now (with web design)? I was thinking of learning in this order: html, css, web design standards, adobe cs5 (?), javascript, php(?).I actually became a web designer largely by accident. It started off as a compulsive need to save text in a format that looked good, and which I could edit without needing a word processor. (Hence my obsession with typography today.) Let me tell you the story. I promise it will be rambling, and contain no subheadings whatsoever; but it will also be interesting and helpful if you’re starting out in web design.
I quickly realized that saving Word documents in HTML format was not the solution to my problem. The first time I opened one of Word’s “HTML” documents, I threw up a little in my mouth, and had nightmares about being buried alive beneath a never-ending mountain of and tags.
So, realizing that HTML was really, really easy to learn, I spent a few hours getting to grips with the basic way that documents are structured, and what all the tags meant.
Then I wanted to style it, so I spent quite a lot of time learning CSS. I think the most tricky thing about CSS is the box model—understanding how browsers actually interpret your code to lay out elements on the page. In fact, this is still the thing I have the most trouble with when I’m designing a complex page, or I’m trying to do something a bit too clever. (A List Apart has a really good article on CSS positioning that I occasionally re-read just to stay sharp.)
Then it was a case of practice. Creating new pages of my own. Deconstructing how other people had done things. Any time I ran into a problem, I tried to find a website that already did what I wanted to do, and I looked at their code to see how they’d done it. That’s the real beauty of the web. People think you’re a genius if you can copy someone else’s code. I’d wager 90% of everything in this site’s markup was originally copied and pasted from someone else’s. That’s the way the web works.
For a while it was static HTML pages, painstakingly styled and tested in Firefox, with no regard whatever for Internet Explorer (since my audience consisted largely of me, that was okay.) But I was really interested in being able to update elements across several pages at once—like changing the navigation for the whole site, without having to edit each page individually.
Which took me to free blog platforms. I cut my teeth on “web design proper” by creating a custom Blogger theme for my then-blog. That was nasty. So nasty, in fact, that after I’d been away from it for a few weeks, I came back and wanted to make a few tweaks…only to realize I’d already lost track of how to do it. It was just too complicated.
So I bought a domain and switched to WordPress. Once again following my copy-and-paste method of learning, I managed to piece together a good enough understanding of JavaScript and PHP to create a theme that used lightboxes to bring up category lists and search boxes and the like. I was always interested in exposing only as much functionality as the reader really needed, and making getting at more features as easy as possible. I suppose that’s where my interest in conversion rate optimization began.
Probably the most significant development for my skills during this time was coming to a rudimentary understanding of the importance of typography—assuming you want people to read your content. Now, the theme I created was by no means an example of best typographical practices. Light text on a dark background and poor leading between the paragraphs are the two most painful mistakes that jump out at me now. I should have stuck to a grid, and I should have stuck with book colors. But the font was at least large enough to be generally legible. Sadly, even this wasn’t really to my credit; I had just learned that you could style font sizes using “x-small”, “medium” etc, and believed this was the better, more future-proof, more accessible way of doing it—and “small” seemed to small to me. (I guess I lose points on typography but gain them back on accessibility.)
By this stage, I was working at a high amateur level. My knowledge was still patchy, but I had a good grasp of the fundamentals of markup and styling. What I really lacked was the kind of polish, the details, that you need to work in design at a professional capacity.
That comes with two things: lots of study, and lots of practice. So when I made the decision to turn my hobby into a job, I made a commitment to both. I started doing design work—mostly my own to begin with—every day; and I started reading as many web design blogs, magazines, articles and so on as I could get my hands on. A List Apart, which I mentioned before, was a great starting point, but there are so many that I couldn’t possibly list them here (many of them I’ve probably forgotten as I have become far more selective in my reading today).
You’ll notice I haven’t made any mention of specific tools; nor of graphic design, which most people seem to think web design is really all about. Here’s why:
What tools you use is irrelevant unless you’re planning to work for someone else. Since I use Linux, I use Gedit for coding, Nautilus for file management, Firefox and Chromium for browser testing, a Windows 7 dual-boot arrangement for testing IE and Safari, and the GIMP for graphic design. If you’re planning to work for someone, I suppose you’ll have to sell out to the man and buy a Mac, because I get the distinct impression that this is a prerequisite of being a “real” designer, artiste or “creative” of any kind. Also some square glasses with arms the size of small construction beams. But if you’re working for yourself, as a highly recommend, you can use whatever the hell you want, and no one is any the wiser.
In regards to graphic design, I believe this is a skill best left till last. Web design is not graphic design. In fact, web design is 95% typography (that’s another site worth reading front to back, btw). So once you’ve learned the basics of styling, markup, and accessibility, what you should be spending every waking moment immersing yourself in is typography—not graphic design.