Web design advise

[sabbathpriest]

Hi Linuxers!
First of all: Thank you for reading my post.
I'm a non-techie Kubuntu user and lover. I happen to volunteer for a couple of non-profits, and one of them has just assigned me to be their webmaster... the thing is I know nothing at all about web design. I have told them about it but to no avail, they are actually even less IT gifted than I am (Serves me right for pushing Linux and Open Source apps. at every meeting).
Here's my question:
How do you start from scratch? What should I read first? What should I stay away from?
I already installed NVU on my windoze box at work and KompoZer at my Kubuntu box at home, and I just started reading up on (X)HTML... I have less than a month to take charge of the a website that has been (very badly) designed with whatever tools Yahoo provides... Any and all suggestions are much appreciated!
Thank you in advance, Linuxers!

[penguin.ch]

My two cent ;)

Depending on the content to be presented, you may either start from scratch, e.g. with this (http://www.oreilly.com/catalog/html6/) and that (http://www.oreilly.com/catalog/csstdg3/) book, respectively, at hand - or start from a template (http://wiki.splitbrain.org/wiki:dokuwiki) like the one I'm using for my own web site (http://www.penguin.ch/), featuring a flat file database as well as the option for collaborative management (formerly known as "chaos at work" ...).

[Goeroeboeroe]

One month??? I wish you a lot of luck and wisdom and patience ;D

Here are some very good quality online sources that may help:
http://www.w3schools.com/css/default.asp
http://www.w3schools.com/html/html_examples.asp

You can validate your code (css): http://jigsaw.w3.org/css-validator/
(x)html: http://validator.w3.org/

A validator not only validates, but helps to find errors.

And a good forum to ask questions: http://forums.htmlhelp.com/

[sabbathpriest]

Thank you both very much! Your suggestions are very reassuring as I already started reading HTML and CSS stuff (Just yesterday). I will also get the O'Reilly books, I have the "Linux in a Nutshell" and the "Running Linux" and they are both great.
Thank you again!

[DeathKitten]

If you weren't in Florida, I'd try to talk you into convincing someone to pay me to do the job. Being unemployed rocks. meh.

At any rate, I'd like to just second the suggestions of the w3schools site, as well as the validators listed. I'm not a huge fan of using books for reference on html and css, as they're still very much changing and books sometimes have a hard time keeping up on the quirks of the various web browsers, and I've found that Google will usually yield help quicker than attempting to dig something up in a book. However, if you are going to buy a book or three, I'd be inclined to trust the O'Reilly books as Linux in a Nutshell has proven to be quiet useful even if I've probably only cracked it open half a dozen to a dozen times in the two and a half years I've had it.

Also likely useful when you get rolling, if you use Firefox, are the CSS Viewer (https://addons.mozilla.org/en-US/firefox/addon/2104), EditCSS (https://addons.mozilla.org/en-US/firefox/addon/179), and HTML Validator (https://addons.mozilla.org/en-US/firefox/addon/249) extensions. CSS Viewer is quite helpful when you need to remember what class or ID you assigned to an element, what's nested inside what, and making sense of someone else's work (something you'll likely be fighting to do if someone else did a poor design job on the previous version of the site). EditCSS is awesome because it allows you to apply CSS to a webpage currently on the server (helpful when you have a dynamic page using PHP or other server or browser side scripting that prevents you from just viewing your CSS changes on your own computer). HTML Validator just sits down in the status bar on the browser and tells you if the page is valid, or if it has errors and how many. This last extension can be depressing if you leave it on the browser all the time because you'll see how horribly the majority of the web design world does at making sure their designs work correctly. meh.

You might also take a look at Quanta (available in the repositories) as it's designed with auto complete features, code highlighting and such that will help a newbie get a handle on things and try to encourage good html hygiene. I personally got annoyed with the auto complete stuff, and killed it all, but I've been building web pages in text editors for years and am not used to having to wait for the interface to complete stuff for me, and then having to keep myself from typing the closing tag myself since the interface already provided it.

[javierrivera]

Web Developer Toolbar.

https://addons.mozilla.org/es-ES/firefox/addon/60

This is THE firefox extension to develop web page ;).

Everything else pales ;).

Javier.

[DeathKitten]

Web Developer Toolbar.

https://addons.mozilla.org/es-ES/firefox/addon/60

This is THE firefox extension to develop web page ;).

Everything else pales ;).

Javier.


Too much extra stuff for my tastes, however I suppose making the original poster aware of it will allow them to choose if they like it or think it's too much. :)

[sabbathpriest]

Wow, it is always amazing to me how much help you get and how fast you get it in any Linux forum. With the great tips and detailed advise you guys have so kindly offered it's now only up to me to invest the time to get it right.
Thank you guys again, Linuxers rock!


PS: If anyone is interested in following my future progress, the site I'll have to maintain from late August on is www.browardatheists.com Right now it looks terrible, I hope that I can improve it a bit!

[DeathKitten]

One huge recommendation/request for change to that page. If you're leaving the videos on the front page, please don't leave them so they auto play like that. All other things aside, they have sound and a lot of people have other things they're listening to or don't want unexpected sound while web browsing.

[Goeroeboeroe]

Congratulations! For the first time in two months or so Firefox crashed on the site you're going to renovate. I think you've something to do ther ;D
I forgot: I use Quanta. It has a built-in (x)html validator, very handy. And with one shortkey you can look at the page your working on in Firefox (or Opera, or Konqueror).
I combine that with Web Developer Toolbar. In that you've the option Tools -> Display Page Validation. It validates every change, very handy to find mistakes.
By the way: the built-in validator and the Web Developer are supposed to work the same, but they find different errors.

[sabbathpriest]

Yup, terrible, isn't it? It even crashes Firefox!! That's quite an accomplishment... I am actually dreaming of learning enough to replace the whole thing with a site I'll build from scratch. I think those videos that auto-play are a terrible idea, the kind of thing that makes me never return to a website. And the navigation buttons, the layout, the fonts, the background color.... It all seems to me like a big turn-off. I hope I can put together a site that is at least not offensive to the senses!
Give me until August 15, and then you can scold me relentlessly!! ;D
:)Thanks guys, you are all great! :)

[Detonate]

I have built a couple of web pages for non-profits. It's easy as long as they don't expect real fancy stuff.

In 1995 I went to work for an employment agency that dealt in high tech head hunting, and placing people on a contract basis. They did not have a web page, and I could see that the web was the way to go in that business. So I bought a book on HTML on Friday night after work. There were no wysiwyg web authoring programs then, everything had to be done in a text editor. There were no friendly ftp programs either, you had to sign in to the ISP (dail-up) and transfer the files using the unix commands at the CLI. Seems simple now, but to a guy whose only experience was with DOS and Windows 3.1 this was a little daunting. To make a long story short, by the time I went to work Monday morning we had a running web page.

I kept up my web skills for a few years after that, but I am way behind now. Haven't really done anything in years, so PHP and stuff like that is a mystery to me. But I can still throw up a decent page using just html and still do on occassion.

[javierrivera]

BTW, I'm using Amaya to design web pages.

I'm not a designer, I mostly work with python and server apps and use designer provided templates for real HTML, but I like it more than Quanta.

Javier.

[askrieger]

You've gotten a lot of good advice, so I'll just add my three cents:
1) Do not use XHTML. It will be obsoleted soon by HTML5, so start with HTML4 and CSS.
2) Use CSS from the start (no tables for layout), it will be harder to add in later, and both HTML4 and HTML5 are designed for CSS.
3) There are a number of good sources to learn HTML, but the book that I use as a reference for CSS (even though I don't really like it) is "CSS, The Missing Manual" by McFarland. It has all the kluges that you need to use to make your webpages viewable with MSIE. I often feel like putting in a little note at the bottom of all webpages saying "If this page looks lousy, ditch MSIE and get a REAL browser!", but instead I use all the kluges from the Missing Manual book.

[pulpfile]

Looks like you got your work cut out for you. This is the ugliest website I've seen in a long time!

Two things that come to mind immediately:
1. Auto-loading videos are super annoying.
2. Having an animated logo is dumb.

I started looking at some other pages...it looks like the text is fighting with the graphics. Even more amazing is that there's two competiting site designs! Make sure all the pages have the same design. Create a template file with the menu, etc. that you'll have on every page. (The best way to do this is with Server Side Includes, but that requires some reading up on PHP. It's worth it, but you may not want to go into all that on your first project.)

[BlueFightingCat]

Hi

I definitely think you should use a Content Management system (CMS). It will speed up your work very fast. I personally use Joomla. www.joomla.org but there are lots of otherones available such as Drupal www.drupal.org.

Essentially these programmes work on your server and they prepare a kind of foundation for your website. All you have to do is customise the look and insert the content.

BFC

[pulpfile]

CMSes are definitely cool. They do save you tons of work. They're especially good for community websites, such as the one you're working on.

[Detonate]

I just installed this add on for Firefox. Have not used it yet, but looks interesting.

http://www.getfirebug.com/

[Antkin]

Hi

How did you get on? Is it finished by now?

I am professional web designer and can offer tips.

Antkin