Old 27-12-2007, 23:07   3 links from elsewhere to this Post. Click to view. #1 (permalink)
pgo
i'm done, son
 
Join Date: Jan 2005
Posts: 12,262
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 12:19.
  Reply With Quote
Old 27-12-2007, 23:18   #2 (permalink)
pgo
i'm done, son
 
Join Date: Jan 2005
Posts: 12,262
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 11:52.
  Reply With Quote
Old 28-12-2007, 07:18   #3 (permalink)
Zaoris
Design is freedom
 
Join Date: May 2007
Location: Romania, Europe
Posts: 94
Send a message via MSN to Zaoris Send a message via Yahoo to Zaoris
Great post mate, cheers!
  Reply With Quote
Old 28-12-2007, 07:51   #4 (permalink)
Chris_Crew
me
 
Join Date: Nov 2007
Location: Runcorn
Posts: 47
Send a message via MSN to Chris_Crew
good post should help alot of the new people
  Reply With Quote
Old 28-12-2007, 17:52   #5 (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 28-12-2007, 19:53   #6 (permalink)
pgo
i'm done, son
 
Join Date: Jan 2005
Posts: 12,262
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, 11:22   #7 (permalink)
Hunch
Grumpy old man
 
Hunch's Avatar
 
Join Date: Oct 2007
Location: North Japan
Posts: 1,462
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, 13:02   #8 (permalink)
Do Gooder
                         
 
Do Gooder's Avatar
 
Join Date: May 2007
Posts: 4,311
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, 14:16   #9 (permalink)
roto
This is it - ground zero.
 
roto's Avatar
 
Join Date: Apr 2003
Location: Paper St.
Posts: 4,200
Send a message via AIM to roto Send a message via Yahoo to 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.
__________________
fun: HGC v.4 | last.fm: DT | me | oi! f*ck u roto: ...via meebo!

New to interweb design? Your friends at dt can help.

Last edited by roto : 29-12-2007 at 14:31.
  Reply With Quote
Old 29-12-2007, 15:23   #10 (permalink)
pgo
i'm done, son
 
Join Date: Jan 2005
Posts: 12,262
Fine, fine, fine. Changed it to "never trust what you see" instead of "never use".
  Reply With Quote
Old 30-12-2007, 20:56   #11 (permalink)
roto
This is it - ground zero.
 
roto's Avatar
 
Join Date: Apr 2003
Location: Paper St.
Posts: 4,200
Send a message via AIM to roto Send a message via Yahoo to roto
...and be careful when you call yourself a web designer:

There's no such thing as 'Web design'
__________________
fun: HGC v.4 | last.fm: DT | me | oi! f*ck u roto: ...via meebo!

New to interweb design? Your friends at dt can help.
  Reply With Quote
Old 30-12-2007, 23:52   #12 (permalink)
herkalees
Semantics, yay.
 
herkalees's Avatar
 
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,088
My thoughts on Dreamweaver: Marc Amos: Dreamweaver Works for Me
__________________
  Reply With Quote
Old 31-12-2007, 06:46   #13 (permalink)
iblastoff
gotsa a malanga!
 
iblastoff's Avatar
 
Join Date: Apr 2006
Location: ottawa, canada
Posts: 488
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, 09:37   #14 (permalink)
herkalees
Semantics, yay.
 
herkalees's Avatar
 
Join Date: Nov 2005
Location: Salem, Massachusetts
Posts: 1,088
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, 10:32   #15 (permalink)
pgo
i'm done, son
 
Join Date: Jan 2005
Posts: 12,262
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, 11:11   #16 (permalink)
roto
This is it - ground zero.
 
roto's Avatar
 
Join Date: Apr 2003
Location: Paper St.
Posts: 4,200
Send a message via AIM to roto Send a message via Yahoo to roto
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...
__________________
fun: HGC v.4 | last.fm: DT | me | oi! f*ck u roto: ...via meebo!

New to interweb design? Your friends at dt can help.
  Reply With Quote
Old 31-12-2007, 11:31   #17 (permalink)
brooks
inventer of the left-hand
 
brooks's Avatar
 
Join Date: Aug 2006
Location: Leeds / Lincoln
Posts: 1,298
Quote:
Originally Posted by roto
I've always fancied "Digital Construction Worker™".
'Graphic Designosaur' for the win.
__________________
  Reply With Quote
Old 02-01-2008, 13:58   #18 (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, 14:03   #19 (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 03-01-2008, 06:32   #20 (permalink)
dcypher.co.uk
Creative Solutions
 
dcypher.co.uk's Avatar
 
Join Date: Jan 2007
Location: Bristol (UK)
Posts: 133
good stuff
__________________
  Reply With Quote
Reply


LinkBacks (?)
LinkBack to this Thread: http://www.designerstalk.com/forums/web-design/31828-beginners-web-design.html
Posted By For Type Date
Interactive Design » Uncategorized This thread Refback 17-04-2008 12:01
Interactive Design » Rose Armstrong&#8217;s First Post This thread Pingback 24-03-2008 00:22
Web Design Forum - tables vs divs and css, both worlds? This thread Refback 09-02-2008 14:03

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 - Top
Search Engine Optimization by vBSEO 3.0.0 RC8