My First Proper Web Design Job

@loonsmadJan 26.2003

I have always designed websites for personal use, but this is the first time I have been hired by someone to design their website.

This is my first shot, all suggestions would be very welcome and constructive criticism is also appreciated.

Don’t rate it on the pop ups though, that is just my testing server.

The url is…

~~[url]~~http://pkphobia.hypermart.net/e4u/splash.htm[/url]

to post a comment

HTML

23 Comments(s) _↴

@JonaJan 26.2003 — #Not bad, but can you make it a little wider? You're probably using a 640×480-bit screen resolution, huh? Standard (I think) is 800×600. ?

I like the colors, though..

@swonJan 26.2003 — #Yes, not bad, and indeed the standard is 800x600, so make it a little bit wider!

@loonsmadauthorJan 27.2003 — #thanks. I'll take getting it wider into account and make an effort to view it in different browsers.

Glad it is not bad!

@jpmoriartyJan 27.2003 — #Yeah looks okay to me - you shouldnt really be using tables though because they're very unpleasant for non graphical viewers, and also I'd suggest you have a look at style sheets too to save you all that coding. Odd that you make a lot of use of them for that loons mad website and then dont use them at all here.

I did originally ask if you'd ever used dynamic web sites (ASP, PHP etc), but if you did make that loons site then I see that you have. If you didnt though, then I'd worry more about the automation side of things than the graphical look - that can always be tweaked at a later stage. The programming side of it is what's going to give you headaches for weeks to come...

@W8_4meJan 27.2003 — #I have always designed websites for personal use, but this is the first time I have been hired by someone to design their website. [/QUOTE]

Same here.....never been hired though. I'm waiting until I learn ASP before I become a fully fledged webdesigner. Well actually I'm more of a coding nut, I leave the graphics to my mate.

I always use 1024x768 screen resolution, so naturally I create my websites in that screen resolution. I don't mind making websites for any screen resolution, but it's only a matter of time before I get sick of changing between the two!

We have a website, called Seizure Collective. I did all the coding, my mate did all the graphics. Personally I don't rate much for the graphics but he's a "qualified graphic designer" (which he likes to remind me of, very very often).

You may not notice but when you load the below link, a javascript determines your screen resolution and then redirects you to either main1.htm or main2.htm

main1.htm = 800x600

main2.htm = 1024x768

The difference between the two is the position of a div layer.

www.seizurecollective.cjb.net

@RibeyedJan 27.2003 — #hi,

just to add to this post. It is possible to make your website expandable, meaning it fits the screen when in 800x600 or in 1024x768. Designing your site to look good in both screen sizes is surely better than designing it to look good on one and not the other.

@W8_4meJan 27.2003 — #I realise that, but I had to position the div layer pixel-specific, meaning I couldn't use percentages.

Before SC, I never tried to position content in the center of the screen and also use pixel-specific positioning.

The center of the screen varies user-to-user, so what would look ok on my screen would look misplaced on everyone else's.

@loonsmadauthorJan 27.2003 — #Thanks for the advice. How should I go about this, just do everything by percentages?

@W8_4meJan 27.2003 — #Yeah, try to do everything in percentages. The only time you'd probably need to use pixel-positioning is if you have large images.

@JonaJan 27.2003 — #[i]Originally posted by W8 4me [/i]

[B]

I always use 1024x768 screen resolution, so naturally I create my websites in that screen resolution [/B][/QUOTE]

My site (computermasterminds.tk) was made in 1024×720 resolution, but in 800×600 the white "CMM" is a little off to the side--out of view unless you scroll right. I always use higher screen res. I think I should make a function: if the screen res is 1024×720 keep fine, else (if it's smaller) redirect to another page..

Only problem then is I'd have to create a whole nother section for my site :eek:

But then again, it looks fine in 800×600.. but better in 1024times;720. All Web sites should fit at least two of the three main screen resolutions.

@King_PellinoreJan 28.2003 — #Some things I'd like to note:
[list]

[*]You need a [FONT=courier new]<!DOCTYPE>[/FONT] declaration at the start of every HTML page. For correct DOCTYPEs look here:

http://www.alistapart.com/stories/doctype/index.html (a very popular page)

[*]The [FONT=courier new]<MARQUEE>[/FONT] tag is illegal. It was made by Microsoft and will not look the same in any other browser. Try to use JavaScript if you want to retain the scrolling text, but many people hate all kinds of moving objects on a web page.

[*]Tags like [FONT=courier new]<font>[/FONT] and attributes like [FONT=courier new]bgcolor[/FONT] are deprecated, which means that you are discouraged to use them. They are still ok in a page with a Transitional doctype, but illegal to use in any other documents. Besides, with CSS, it is easier, faster and more fun to achieve the same effect and even more than you can do with plain HTML. For example, you use

[FONT=courier new]<font face="Verdana, Arial, Helvetica, sans-serif" color="#3399FF">[/FONT] and [FONT=courier new]</font>[/FONT]

pair 20 times on your page, when you could just specify the font and the colour of the link in CSS using 2 lines. Eg:

a {font-family: Verdana, Arial, Helvetica, sans-serif;
 color: #39F;}

[*]Using tables is bad form. Again, like was said before, use CSS.

[/list]

That's it for now, there's more if you ask.

Next...
[i]Originally posted by Jona [/i]

All Web sites should fit at least two of the three main screen resolutions.[/QUOTE]Correction: all web sites must be available to be viewed with any screen resolution AND any other technology that complies with the W3C specification, which may not include a display.

Now, loonsmad, I like the way you have the page width. That is good, as it can be seen with most of the now existant resolutions, but the next time you make a web page, plan to use a fluid layout. It may be too late this far in the progress to change the whole layout now.

@jpmoriartyJan 28.2003 — #Also...

standard screen resolutions are in the ratio 4:3. There are alternatives (the apple mac widescreen screen is in 16:9 I think) but they're fairly rare. Your website states "Note: This site is best viewed with a 1240×720 screen resolution. ", which as far as I'm aware doesn't exist, (admittedly it's close to 16:9 so maybe that is what the mac screen runs on...), but it wont be available to 90% of users.

I'd agree with the above comment and add that there should be no such thing as "best viewed at" statements. your site should look good at all resolutions - and if you get into CSS (as I have done after a couple of well deserved beatings from the CSS gurus!) then you'll find that it's really not that hard to do, and it's much easier to code than all those bloomin tables.

@jpmoriartyJan 28.2003 — #further to the above...

I note on your site :
If you have many products to sell, and many new ones often, or many of them taken off and replaced with another often, you will want to find a Web Developer who will give you cheaper rates to keep up with the site. Probably around $50 per page update. [/QUOTE]
Anyone who uses a site to sell things or show their products should really be using a server side language like PHP or ASP, driven from a database - if they add products regularly or update prices etc then it's a MUST. If you've not used or heard of then before then have a search around (but you may want to check out www.php.net, www.asp101.com, www.phpbuilder.com for starters), because they're good fun to learn and mean that anyone can update pages easily. The idea being once the code is up and running you never need to edit a line of HTML again - it all flows beautifully from the database.

@W8_4meJan 28.2003 — #I don't know about anyone else, but I rely on tables......heavily. At first they gave me a headache but now I use them on all my websites (where necessary). Give me a valid and legal alternative and I'll stop using tables.

@jpmoriartyJan 28.2003 — #oh dear - let the flood gates open...

but for starters, why not have a look at some of these:

[i]Originally posted by charles in [URL]http://forums.webdeveloper.com/showthread.php?s=&threadid=2837&highlight=tables+stefan+layout[/URL] [/i]

From http://www.w3.org/TR/html4/struct/tables.html#h-11.1

Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
[/QUOTE]

[i]And again from Charles in the same post:[/i]

In certain places and under certain conditions you are required to make your page accessible to persons with disabilities. And mis-using tables makes your page inaccessible. A bad web developer can land his or her client in court.[/quote]

Anything in the thread [URL=http://forums.webdeveloper.com/showthread.php?s=&threadid=228&highlight=tables+layout]CSS to replace tables for layout[/URL] (before I became a convert! - actually, i think it was when i became a convert!)

If you want more, then just ask - I'm sure the css police are on their way over for a good whooping anyway ?

@W8_4meJan 28.2003 — #Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.[/quote]

Could you give me an example of "non-visual" media?

I have absolutely no problem with tables, I even have the opportunity to check my websites on 4 computers other than my own in the same screen resolution, and it looks just as it should.

Unless I'm working on my own project, I create websites in 800x600. There is never any horizontal scrolling, or screwed up layout. I position everything just right. As for tables...well to be honest I don't see the urgent need to convert to CSS for my layout requirements. However I will keep it in mind should browsers become unable to read TABLE tags.

@JonaJan 28.2003 — #Were y'all ciriticising my site? OK, I meant 1024×768, but whatever. That is my favorite screen resolution. And just because I don't use DOCTYPEs, and other stuff like that, doesn't mean that I'm doing it wrong. The people who are *supposed* to come to my site usually have no problem with it. What I said was right about screen resolution: you cannot please everyone. I go with favoritism when it comes to the Browser Wars, or Screen Resolution Wars, as you may call them. I like to use 1024 or 800, and anyone who uses 600 can simply have a hard time at my site. I do not care. If they are using Netscape, the page will most likely not format for them correctly. Again, I do not care at all. They can keep Netscape and their money: as for me, I'd rather have Internet Explorer. Netscape stinks and that's the bottom line. *Draws a line*

I do not dare, but I challenge you: step across the line.

Whether or not I make the pages "proper" according to the W3C documentation makes no difference to me. If it looks fine to me, the page is fine. If no one else can see it, that's their own problem. They should be using what I use. Explorer 6+ with 1024 screen resolution.

Wanna keep arguing? I think I've made myself quite clear. You cannot change my way of thinking. I am stubborn enough to work the way I like.

My site looks fine to me. It looks fine to everyone else that knows nothing about computers: and my clients 95% of the time, know nothing about computers. I do not have to worry. Sheesh! You'd think these guys were really serious about keeping all that W3C standard documentation and stuff in order!

My common page loooks like....

<HTML><HEAD><TITLE>some title</TITLE>

<SCRIPT>

//script goes here, notice I do not use 

</SCRIPT>

<STYLE>

/* Style here,

again, I do not use the comment tags */

</STYLE>

</HEAD>

<BODY>

<table><tr><td>

<p> alalalalal text text text</p>

</td></tr></table>

</body></html>

I sometimes don't even close the <P> tags. But I do not care, it looks fine to me.

@W8_4meJan 28.2003 — #I was the same, I never close the P tags and I never used to *shudders* use speech marks.

It depends where your priorities lie....I want to be able to make alot of money out of webdesign, so I have to keep to some kind of standard.

Not all of my future clients will be so keen to let me get on with it....they may request that I conform to all sorts of standards. I suppose I'd better start closing those P tags....

@jpmoriartyJan 28.2003 — #i dont want to get bogged down in an argument - life's too short. Out of interest though, if you're only concerned about how the site looks to you then why bother publishing it at all? You could just keep it on your hard disk and look at it all you like?

Non-visual media is, unsurprisingly, media which is not visual: so text readers (for people who are partially sighted or blind) are getting more and more common. Believe it or not, it's not just the perfectly sighted who like to use the internet.

For your interests sake though, you may want to give CSS a go - I used to use tables for layout a lot, until i got a similar ear bashing to the one you're in the process of getting. So i decided to give it a go - "there's no point in ignoring it just cos i didnt think of it i thought" - and now i use them loads. The amount of time I'm saving through not having to bother with all those blooming <td>,<tr> commands, not to mention the font coding that then had to go into every cell... It made my life as a coder so much easier, and it had the added bonus of enabling more people to visit my site - be they perfectly sited or otherwise. It also has the benefit of looking good at any resolution - so no need to be designing differnet pages for differnt resolutions Jona.

I'm not a W3C enthusiast like some out there - and they've very sensibly decided to steer clear of this thread - but i do see that it's a guideline that's there for a reason. They're there to make everything available to as many people as possible, and therefore people [i]should[/i] try to at least understand the sentiment behind their existence. AS you've stated, it's up to you to decide to stick to them, follow them loosely, or ignore them completely. But if you do have a look at them, you'll probably realise that they actually help the coder as much as the reader - and that things like tables arent as powerful for layout as CSS because they will only work on a limited number of systems.

It's a bit like seeing your neighbour washing his car with a kitchen sponge. He'll be doing a great job and his car will be clean at the end of it - but if you offer him your car sponge that's three times the size, he might just thank you for it.

Dont take everything so personally - noones out to get at you, most people are just offering their advice. And there are some pretty knowledgeable people here who've made quite a bit of money from making websites - I'm here cos i want to learn from them, and hope that someone might learn from me. In the same way, i hope that's why you guys are here and hope that we can all get along in the future - maybe next time you'll be answering my coding questions for me, cos heaven knows i have a few!

@W8_4meJan 28.2003 — #So using css instead of tables is quicker for the coder....I'll look into it.

@W8_4meJan 28.2003 — #Well I'd like to look into it but I don't seem to be getting anywhere on http://www.w3.org/TR/html4/struct/tables.html

@spufiJan 29.2003 — #http://www.w3.org/TR/REC-CSS2/ is the specs for CSS. Read those and then check out http://www.meyerweb.com/ and pick up his book called Eric Meyer on CSS to see CSS used in a pratical sense.

And yes, add my name to the list of people who used to use nested tables for layout, but now use CSS.

@StefanJan 29.2003 — #[i]Originally posted by spufi [/i]

And yes, add my name to the list of people who used to use nested tables for layout, but now use CSS. [/B][/QUOTE]

Actually, EVERYBODY wants to use CSS instead of tables, they might just not know it yet... ?

CSS beats table based layout on basicly every point there is, and as soon as you learn enough about how to code with CSS you will drop tablebased page layout in a second and never look back.

It's the initial obstacle of giving up your old trusted friend you might have made webpages with for the last 5-10 years that is the hard part.

A good link to read that pretty much sums up the advantages of CSS vs table is this one

http://devedge.netscape.com/viewsource/2002/wired-interview/

Also in #HTML _↴

HTML Icon Selection Code???Image/table problem.Images will not display?

Success!

Help @loonsmad spread the word by sharing this article on Twitter...

Tweet This

My First Proper Web Design Job

23 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

My First Proper Web Design Job

23 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #HTML _↴