[pgo]

Since these threads pop up almost on a daily basis, I thought I'd post a sticky thread for advice for beginning (and not-so-beginning) web designers. Feel free to post suggested changes and links at liberty and I may add them to these two posts.

Understanding the Web as a Medium

Television is a medium. Print is a medium. Radio is a medium.

The web is also a medium. As an interactive information medium, the beauty of the web is it can do this instantaneously, globally, and to a variety of devices (a.k.a. user agents) like web browsers, iPhones, Nintendo Wiis, as well as assistive technology for the disabled such as screen readers.

Related Reading...

• Understanding Web Design - Jeffrey Zeldman - A List Apart

What Makes a Web Page?

There are three standards at work on any given web page.

1. HTML (Hyper-Text Markup Language)
   HTML is a markup language (it's right in the name). To "mark something up" is to give it semantic and structural meaning. Markup is used to show relationships between items of content and describe that content.
   
   When writing HTML don't think about "what do I want this to look like" - think about "what does this mean." This is what people mean by "semantics."
   
   
   
2. CSS (Cascading Style Sheets)
   CSS is a presentational language. It is used to alter the visual (and aural and printed) appearance of a web page. Fonts, colors, borders, padding, margins, layout, positioning - these are all handled by CSS.
   
   People used to use HTML tables to lay out web pages. This practice is out of date and frowned upon by the professional web development community. CSS was introduced in 1996 to provide web designers a way to make their websites look attractive.
   
   Due to browser limitations, it wasn't until the first years of the 21st century when we were able to use it more-or-less as it was intended! In other words, there has been no excuse to use a table-based layout for at least 5 years.
   
   
   
3. DOM (Document Object Model)
   The DOM is a bit more involved and confusing for beginners (and applies to more than just HTML). The DOM provides pathways and hierarchies for scripting languages (JavaScript, usually) to manipulate the structure and content of a document.
   
   If you can imagine an HTML document as a nested tree, then you have an understanding of the DOM. Don't worry too much about it until you understand the first two.

Related Reading...

• HTML Beginner Tutorial - HTML Dog
• CSS Beginner Tutorial - HTML Dog
• Developing with Web Standards - Roger Johansson - 456 Berea Street

[pgo]

Tips and Best Practices

1. Always build your websites so that they work in a standards-compliant browser like Firefox first. Then add "hacks" for Microsoft Internet Explorer (your worst enemy as a web designer) using conditional comments. Try to avoid hacks, but if you want to support IE6 and 7 (which, you would be a fool not to) you'll probably need one or two.
   
   It is standard practice to support CSS rendering in IE6+ only, but your content should be accessible to all browsers even if it's not as pretty.
   
   
2. Do not use HTML tables to lay out web pages. This bad practice has been out of date for half a decade, at least. Semantically, tables are only appropriate for tabular data - that is, data that can and should be displayed in inter-related rows and columns. Calendars are tabular data. Your bank statement contains tabular data.
   
   Concrete example:
   

   <table border="0" cellspacing="0" cellpadding="0">
     <caption>Favorites</caption>
     <thead>
       <tr>
         <th>Name</th>
         <th>Favorite Food</th>
         <th>Favorite Color</th>
       </tr>
     </thead>
     <tbody>
       <tr>
         <td>Sam</td>
         <td>Pizza</td>
         <td>Blue</td>
       </tr>
       <tr>
         <td>Jane</td>
         <td>Olives</td>
         <td>Red</td>
       </tr>
     </tbody>
   </table>

3. Use a good code editor and never trust what you see in a WYSIWYG ("What You See Is What You Get") editor.
   
   
   • Notepad++ - Free, Open Source - Windows.
   • E - TextEditor - Commercial, Windows.
   • TextMate - Commercial, OSX.
   • PHP Designer Professional - Commercial, Windows (really a PHP IDE, but has excellent client-side code editing capabilities).
   • Aptana Studio - Free, Open Source, Windows, OSX, Linux (Java application, based on Eclipse - Aptana is really an IDE, but it is focused on client-side development).
   
   
4. Most people use CSS floats to create columnar layouts. Alternatively, you could use CSS positioning, but this is generally not necessary and often confusing for beginners. It's a good idea to be aware of float clearing behavior (especially in IE).
   
   
5. Using a "CSS reset" can be extremely helpful. This resets your pages' appearance to a custom default in all major browsers. It gives you a baseline to begin your own styling rules. Personally, I use the Yahoo! Reset CSS, but CSS guru Eric Meyer his own reset CSS.

Generally Helpful Links

• Streamline Your Process: RSS Feeds, Bookmarks, Frameworks, Design Resources

[Zaoris]

Great post mate, cheers!

[Chris_Crew]

good post should help alot of the new people

[th88]

Originally Posted by pgo

never use a WYSIWYG ("What You See Is What You Get") editor.

Although the split code/design view in Dreamweaver is very useful, along with a lot of other things in DW as well (file access, server synching etc.).

I think what's important here is to emphasise designing from the inside out (that is, create and edit code to change presentation, not the other way round).

[pgo]

Originally Posted by th88

Although the split code/design view in Dreamweaver is very useful

Not really because its rendering (at least in my experience - which is through version 8) is sub-par and not comparable to any browser. It's even worse than IE6! Nobody browses the web using Dreamweaver, so I have to ask - what would be the point?

Otherwise, you're absolutely right. Dreamweaver is a good piece of software with some nice features.

[Hunch]

True, the rendering isn't entirely accurate, but there's more to it than just a basic preview. Split view's main advantage is that it's very useful for jumping to a particular element quickly when you have code running to hundreds or even thousands of lines.

Nice post though, and much needed around here.

[Do Gooder]

cheers pee gee ooh

I have found dreamweaver to be an excellent learning tool. I am slowly weaning myself onto the code view. While it is surprisingly pants, the preview lets me easily see what is happening quickly and really helps with selecting bit of code to tweaky.

[roto]

Thank fuck someone FINALLY put this together. I shall add a link to it in my sig, too. Very nice, Sir Patrick.

[edit]done[/edit]

How about instead of never use a WYSIWYG editor...never trust what you see in a WYSIWYG editor? I agree with Do Gooder that it's convenient for quickly jumping around in code, but tests in a browser are always of utmost importance.

[pgo]

Fine, fine, fine. Changed it to "never trust what you see" instead of "never use".

[roto]

...and be careful when you call yourself a web designer:

There's no such thing as 'Web design'

[herkalees]

My thoughts on Dreamweaver: Marc Amos: Dreamweaver Works for Me

[iblastoff]

Originally Posted by herkalees

My thoughts on Dreamweaver: Marc Amos: Dreamweaver Works for Me

unrelated to topic but since you're using textpattern, any reason you're not using clean urls? they not work on your server?

[herkalees]

Originally Posted by iblastoff

unrelated to topic but since you're using textpattern, any reason you're not using clean urls? they not work on your server?

I haven't really bothered to look at changing it - my concern for how the URL appears is quite minimal. I'll have a look at changing it soon, though, since it's been suggested to me a few times.

Yes, back on topic though.

[pgo]

Originally Posted by roto

...and be careful when you call yourself a web designer:

There's no such thing as 'Web design'

I agree whole-heartedly. This is why I'm moving to start using "Front-End Web Developer".

[roto]

Originally Posted by pgo

I agree whole-heartedly. This is why I'm moving to start using "Front-End Web Developer".

I've always fancied "Digital Construction Worker™".

But, yes, back on topic for the noobs...

[brooks]

Originally Posted by roto

I've always fancied "Digital Construction Worker™".

'Graphic Designosaur' for the win.

[brucec]

Cool post. The DOM takes a little while getting used to, but once you do, it's very handy!

[brucec]

I never heard of Notepad++, but it looks like it does a lot of good editing.

[dcypher.co.uk]

good stuff