People often ask me how I learned web design. My first response is that I am still learning! The question comes from people who are curious about getting started in the field. In this blog I hope to share some techniques for learning web design especially aimed at beginners.

If you are interested in learning to design, build, and maintain web pages, read on. If you are already a web designer or developer, go build something, and use CSS to it’s maximum potential. (Jeremy Keith nails it again).

Web design is exciting, it changes day by day. It is a diverse field, and many have dabbled in it at some point in their online lives. As with web technology in general, there is room for a solid career in web design with potential for growth. Good web designers are very much in demand right now as the web expands and requires skilled people to build and maintain sites.

As with any career path, there are many ways to enter web design as a career. Most of my colleagues learned on their own, but I do know several web designers who took college courses and received degrees in computer-related fields. For the most part, though, web designers switched from other fields to dive into web design full-time. Web designers typically come from other backgrounds: graphic design, communications, journalism, art, business, and many more. Today, however, children and teenagers are exposed to web design early and are able to choose web design as a first career.

Whatever your current skill level or interest, there is a place for you on the web. The first thing to do is: try it! That is how I began: I signed up for a free Yahoo account (it was Geocities.com back then) and started my own web page. I enjoyed it, and eventually it expanded from a hobby to a full-time job.

I learned web design (and am still learning) through several methods: college classes, books, online tutorials, viewing source code, and experimenting. If you can do a little of everything, you will benefit from the variety of learning and teaching methods. Often designing a few web pages or sites on your own can be frustrating when you are a beginner, so team up with a friend, fellow student, colleague or family member. If they are an experienced web designer, so much the better. Looking over friends’ shoulders is another way I learned valuable web design skills.

College Classes

Take as many classes as you can. If your college offers a “webmaster” or web design degree, take it. Even if you think it’s too basic or hard, it will do you well.

Through my local community college I took basic computer programming, digital arts (Photoshop and Illustrator), and several web design-specific courses. I took one or two courses a semester, and was able to learn design and programming skills even as I was experimenting at home.

Books

There are lots of books out there. Here are some of my recommendations:

• Designing with Web Standards, by Jeffrey Zeldman (Amazon | Author’s site)
• Eric Meyer on CSS, by Eric Meyer (Amazon | Author’s site)
• Designing Web Graphics, 4th Edition, by Lynda Weinman (Amazon | Author’s web site)
• Web Standards Solutions, by Dan Cederholm (Amazon | Author’s site)

Online Tutorials

As with web design books there are many good online resources. They are mostly free, so take advantage of the wealth of knowledge out there. Here are some of my favorite web design blogs, tutorials, and references:

• A List Apart
• Digital Web
• ParticleTree
• HTML Dog CSS and HTML Reference
• SimpleBits.com

“View Source” and Experiment

One thing about web design is that most of your work is free for anyone to use: the HTML, CSS, and JavaScript is visible to anyone with a computer and a web browser. This can be bad, as plagiarism, piracy, and stealing code is a common practice. But it can also be good for web designers because you can learn from other designers’ methods.

On any web site, hit “View Source” in your browser to see the HTML (in IE it’s under “View” toolbar, “Source”. In Firefox, go to “View”, “Page Source”). For CSS, use Firefox’s Web Developer Extension or copy and paste the URL for the CSS file from the source code. Feel free to look at and experiment with code, just make sure not to take it and use it as your own.

Learn Solid HTML and CSS Skills

Finally, a big part of being successful in web design is mastering HTML and CSS. Hypertext Markup Language is the de facto markup language for formatting web documents and Cascading Style Sheets is the language that gives the HTML markup it’s beautiful colors, typography, layout, spacing, and the rest of the visual elements. If you are a beginner, start with CSS and HTML basics and build up your skills from there. A solid foundation here will give you full control over your web pages and a deep understanding of how they work.

Note: A good resource: HTML and CSS: An Absolute Beginner’s Guide

Moving from Design to Web Design

If you are already working in the graphic or print design field, making the step to web design isn’t very difficult. Your skills will come in handy, and you can apply many of the same principles used in traditional design to web design.

For you, I recommend additional reading:

• Jeffrey Zeldman’s Taking Your Talent to the Web is a great book for transitioning designers (Amazon | Author site)
• Designing for the Web article on Digital-Web.com

Go Forth and Code

Whatever your skill level or desire, web design starts with solid HTML and CSS, training, reading, and experimenting. Don’t ever hesitate to ask for more information.

In his recent article on Site-Reference.com, Mark Daoust reveals the truth behind ugly web design. It’s not about whether the site is ugly or not. The key is simplicity.

I am in total agreement here. My philosophy for web design is to create simple, usable, yet attractive sites. I feel odd emphasizing the contrast between those two worlds (ugly and simple), but it is a common misconception that simple means unattractive. This issue is what Mark’s article addresses. In my experience, simplistic design is sometimes very complicated and hard to achieve. Taking away details and revealing the core of a design is a difficult task.

So what makes a site’s design effective? If it let’s the visitor do what they would like quickly and easily, it is a successful site. That’s it. It can be as ugly or as pretty as you like, but the goal for effective web design is clear communication with your site visitors. A simple design gets out of a visitor’s way and lets them get on with their lives.

Some simple yet good looking sites: the newly re-aligned SimpleBits, GarrettDimon.com, WordRidden (which Jeremy recently redesigned to be simpler…), JeffCroft.com, Cornell University, and the ever-pleasing-to-look-at smallTransport.

Around Christmas I purchased Jeremy Keith’s new book DOM Scripting: Web Design with JavaScript and the Document Object Model. It has been amazingly good so far (I am on the sixth chapter). I have already found practical uses for the lessons in the book.

Jeremy nails the topic down with clear principles, examples that are easy to follow, and a fun but authoritative tone to his writing. I highly recommend this book to all web designers and developers.

If you’ve been doing JavaScript and client-side scripting for a while, you will learn new ways to make your code degrade gracefully and how to separate the scripts from your CSS and HTML code. If you are new to JavaScript, even better! This book will teach you the basics while giving you a solid education in unobtrusive scripting.

My experience is somewhere in between. I’ve been using JavaScript for some time, but I’ve never understood it very well. Until reading this book, I had also never written any scripts from scratch. Now that I see how easy it is to manipulate a document with the DOM, I will incorporate unobtrusive JavaScript into my daily workflow.

Tips and tricks

These are some of the lessons I have noted:

1. When considering JS for a project, or when writing scripts, a cautious, questioning attitude is desirable
2. A good practice: use double quotes in your JavaScript code, and use the \ (back slash) for escaping characters within a string
3. Some naming conventions: camelCase for functions, under_score for variable names
4. Good practice: use var when assigning a value to a variable for the first time, especially within a function. This forces it to be local in scope
5. Reminder for when manipulating the DOM: All nodes are objects
6. For conditional statements, if (something != null) can also just be if (something) to shorten the statement
7. The methods getAttribute and setAttribute only work on element nodes
8. Here are some useful methods used on the document object:
   • getElementById
   • getElementsByTagName
   • getAttribute
   • setAttribute
   • childNodes
   
   
   • firstChild
   • lastChild
9. Instead of browser sniffing, use object detection: if (!document.getElementsByTagName) return false;
10. Use safety checks to add object detection in functions to help separate code from markup. If id or class names change, the JavaScript won’t get called. It’s important to have these tests and checks both for backwards compatibility and for future use.

Some bad uses of JavaScript

Also, some of the wrong habits that I need to change:

1. Using javascript: pseudo-protocol to send links to a new window (for example)
2. Using inline event handlers
3. Relying on document.write and innerHTML for modifying markup
4. Avoid onkeypress if possible, since onclick works with both mouse AND keyboard!

Personal JavaScript Updates

Just as learning semantic markup for HTML documents and lean, clean CSS for style sheet use, there are now a lot of bad uses of JavaScript coming to my attention on sites that I own or operate. For one, I need to get all JavaScript out of the body element of my web pages. Next, inline event handlers need to be moved to the JavaScript file instead of being in the HTML.

Another example: I often use JavaScript to obfuscate email addresses and form action paths. Doing it in this way might not be unobtrusive (it doesn’t degrade nicely) unless I can figure out a way to return a statement of [at] type if JavaScript is not supported. This is worth pursuing more…Of course, there are always server-side solutions but I don’t always have access to the server on client projects.

Worth it’s Weight

I am only 6 chapters into DOM Scripting: Web Design with JavaScript and the Document Object Model, but it has already paid for itself. By the end of the book, it will be worth it’s weight in gold. Thanks Jeremy and hopefully others will find similar lessons in their own web work.

Visit the book’s companion web site and purchase the book on Amazon.com.

Still sending HTML emails? If you are, make sure to use images correctly. Many email clients block images by default and some don’t even show the alt text if you included it.

For some great tips on making the most of your images in HTML email, go read David Greiner’s article called Email Design Guidelines for 2006 | Articles/Tips on the Campaign Monitor Blog.

Just like with HTML-based design for a web site, it is important to know your audience when sending out HTML emails. David’s article will help you get there.

[UPDATE: fixed typographical error.]

Have you ever posted a blog entry, read it back to yourself, and found that you made some errors? Happens every day to most people!

I was listening to Tantek Çelik’s talk at WE05 entitled Meaningful XHTML and he talked about a meaningful way to update your blog posts.

The basic ideas is this: instead of updating a post by going in, editing, and then saving, Tantek recommends using semantic markup to show what has been updated.

The roots of this idea are in the trust and accountability of blogs and bloggers: once it’s posted, it stays. It goes along with the idea of permalinks, which are truly intended to be “permanent links”. If you use them what you are really saying is: this is up here and I am going to take responsibility for it.

Mistakes and errors occur often, of course. How to show that you aren’t changing the original post except to update it’s content? When you update the blog post, simply wrap the old content in <del></del> and wrap the new content in <ins></ins>.

Then apply some CSS (for example):

p ins,p del { display:inline }
ins {
  background-color: #ffc;
  font-weight: bold;
  text-decoration: none;
}
del {
  text-decoration:line-through;
  color: #999;
}

If you did this on my site, this is what an updated post would look like:

AJ took a great picture of a Monarch Queen butterfly in Arizona this week.

The blog post doesn’t change, it just gets updated with new information. I love that Tantek brought this up in his podcast because I haven’t been good myself at putting this into practice.

It’s a great idea because it not only reinforces using semantic markup but also helps promote honest and responsible blogging practices.

If you are interested in hearing his whole talk, go to the WE05 podcast page and download the audio file there. Then link to the slides (see above), listen, learn, and enjoy!

Do you work with CSS and (X)HTML all day long? If you do, then you need to use TopStyle for your coding. Written and maintained by Nick Bradbury of HomeSite and FeedDemon fame, TopStyle is the best CSS editor out there. It isn’t bad for HTML, PHP, JavaScript, and other languages, too.

Even if you don’t code CSS and (X)HTML all day, it’s worth having TopStyle around for the occasional blog post or web site update. It integrates nicely with HTML Tidy for clean code, and has lots of the built in features that users of HomeSite and later versions of Dreamweaver are already used to. In fact, Dreamweaver ships with a lightweight copy of TopStyle for CSS coding.

For those of you that already use Dreamweaver for your web coding needs, check out this great article: Working with TopStyle – Part 1 (on CommunityMX). It explains how Dreamweaver and TopStyle can be used together for top-notch web design and development. A lot of features that people ask for in TopStyle exist already in Dreamweaver; it’s a great combination in my opinion.

If you already have a copy of TopStyle, improve your skills by following Nick and company’s TopStyle Tips from Pro Users blog. I just learned recently about extending TopStyle to validate PHP with a TopStyle extension called “Lint”.

I have used TopStyle for over 2 years and can’t be happier with it’s ease of use and efficient features, especially for CSS. Check it out if you haven’t already!