Reply Thread Tools Search this Thread
Old 28-12-2007, 04:07   #1 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
beginners web design

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...
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...

Last edited by pgo : 18-03-2008 at 16:19.
  Reply With Quote
Old 28-12-2007, 04:18   #2 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
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:
    HTML Code:
    <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

Last edited by pgo : 10-06-2008 at 16:52.
  Reply With Quote
Old 28-12-2007, 22:52   #3 (permalink)
th88
Registered User
 
Join Date: Dec 2007
Posts: 1
Quote:
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).
  Reply With Quote
Old 29-12-2007, 00:53   #4 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
Quote:
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.
  Reply With Quote
Old 29-12-2007, 16:22   #5 (permalink)
Hunch
Grumpy old man
 
Hunch's Avatar
 
Join Date: Oct 2007
Location: North Japan
Posts: 2,346
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.
  Reply With Quote
Old 29-12-2007, 18:02   #6 (permalink)
Rik
▓▒░
 
Join Date: May 2007
Posts: 12,058
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.
  Reply With Quote
Old 29-12-2007, 19:16   #7 (permalink)
roto
Well...BYE.
 
roto's Avatar
 
Join Date: Apr 2003
Posts: 11,862
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.
__________________

Last edited by roto : 29-12-2007 at 19:31.
  Reply With Quote
Old 29-12-2007, 20:23   #8 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
Fine, fine, fine. Changed it to "never trust what you see" instead of "never use".
  Reply With Quote
Old 31-12-2007, 01:56   #9 (permalink)
roto
Well...BYE.
 
roto's Avatar
 
Join Date: Apr 2003
Posts: 11,862
...and be careful when you call yourself a web designer:

There's no such thing as 'Web design'
__________________
  Reply With Quote
Old 31-12-2007, 04:52   #10 (permalink)
herkalees
Semantics, yay.
 
herkalees's Avatar
 
Join Date: Nov 2005
Location: Beverly, Massachusetts
Posts: 1,615
My thoughts on Dreamweaver: Marc Amos: Dreamweaver Works for Me
__________________
  Reply With Quote
Old 31-12-2007, 11:46   #11 (permalink)
iblastoff
gotsa a malanga!
 
iblastoff's Avatar
 
Join Date: Apr 2006
Location: toronto, canada
Posts: 521
Quote:
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?
__________________
  Reply With Quote
Old 31-12-2007, 14:37   #12 (permalink)
herkalees
Semantics, yay.
 
herkalees's Avatar
 
Join Date: Nov 2005
Location: Beverly, Massachusetts
Posts: 1,615
Quote:
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.
__________________
  Reply With Quote
Old 31-12-2007, 15:32   #13 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
Quote:
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".
  Reply With Quote
Old 31-12-2007, 16:11   #14 (permalink)
roto
Well...BYE.
 
roto's Avatar
 
Join Date: Apr 2003
Posts: 11,862
Quote:
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...
__________________
  Reply With Quote
Old 31-12-2007, 16:31   #15 (permalink)
brooks
Senior Member
 
brooks's Avatar
 
Join Date: Aug 2006
Posts: 1,361
Quote:
Originally Posted by roto
I've always fancied "Digital Construction Worker™".
'Graphic Designosaur' for the win.
  Reply With Quote
Old 02-01-2008, 18:58   #16 (permalink)
brucec
Podcaster on Web Design
 
Join Date: Jan 2008
Posts: 27
Send a message via AIM to brucec Send a message via Skype™ to brucec
Cool post. The DOM takes a little while getting used to, but once you do, it's very handy!
  Reply With Quote
Old 02-01-2008, 19:03   #17 (permalink)
brucec
Podcaster on Web Design
 
Join Date: Jan 2008
Posts: 27
Send a message via AIM to brucec Send a message via Skype™ to brucec
I never heard of Notepad++, but it looks like it does a lot of good editing.
  Reply With Quote
Old 15-01-2008, 00:33   #18 (permalink)
nini
incomputable
 
nini's Avatar
 
Join Date: Apr 2007
Location: Marylebone
Posts: 846
excellent link for beginners

here
__________________
  Reply With Quote
Old 15-01-2008, 03:36   #19 (permalink)
pgo
Senior Member
 
Join Date: Jan 2005
Posts: 12,163
Nice one nini. Added above.
  Reply With Quote
Old 21-02-2008, 10:53   #20 (permalink)
nini
incomputable
 
nini's Avatar
 
Join Date: Apr 2007
Location: Marylebone
Posts: 846
Also I recommend Total Training

Several years ago I learnt Flash to an intermediate level and After Effects in a couple of days using these videos. They have a great function where you can set talking to double speed, so although the narrator sounds like a chipmunk you can complete in double time.

Beats Lynda.com any day.
__________________
  Reply With Quote
Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools Search this Thread
Search this Thread:

Advanced Search


Contact Us - Web Design Forums - Archive
vBulletin © 2000-2009 Jelsoft Enterprises Limited.
Search Engine Optimization by vBSEO 3.0.0 RC8