... 0.0 ... http://www.computersforpeople.net/index.htm Computer Repair in Los Angeles
OK, I'm at the point where the content will go in set places. But I want to find the problems that I cant see.
I am sure they're there, and I can see some of them, but ignorance and slothfulness blind me to the error of my ways.
Any critiques are... hmmm any constructive... er... no... any critiques, yeah, any critiques are welcome.
From: Rochester, New York, USA Insane since: May 2000
posted 04-22-2004 05:56
For lack of better diction I am going to say that the site looks dated. It looks as thought it might have been designed during the boom. Your logo needs to be cleaned up badly, if it was scanned in it needs to be rescanned, if it was drawn try again. It just needs some work.
I don't know where you got your doctype from I haven't seen html 4.0 in a long time this should be updated to the latest version 4 standard which is 4.01. Even if you wish to use 4.0 your document is missing the actual link to the document type definitions.
Your code is a jumble. It is upper case and lower case all mixed together, you might want to think about setting it all to lower case that makes transition to xhtml much easier, and fits in line which where the standards are going.
You have a meta tag for a "generator" which is blank, you should just remove this.
I would reccomend getting rid of all your hardcoded values such as BGCOLOR and such for a CSS solution this is what CSS1 is really for, and it will save you a lot of time when it comes to updates and changes. FONT tags are dead and gone, stop using them and move to a CSS solution. It is just good coding practices. Your images need alternate text. You should really put this in, it makes for a better experience all around, even your blank ones should have blank alt text alt="" keeps browsers from thinking up their own solutions or displaying the "Red X of Doom" should you move your files by mistake and create a dead link.
On a whole I have to return to my first statement that the site looks pretty dated both looks and code, and very jumbled, a lot of different elements squished into a single page, without much cohegion. You have a lot to work with here, it just needs more time.
The dated look was kinda purposeful, sure cutting edge is nice, but sometimes dont you just yearn for the good old days, when the customer was always right, and people were not secondary to profit?
But Ya know, I really dislike the logo. The whole thing is coming from a previous design... I have been having a hell of a time cleaning the swirling thing up... Ive used the bezier pen thing in ps but... incorporating it back into the design hasn't been going as well.
I cant seem to remember where I put the psd that I made the jpg out of, so I am trying to match the layer style by eyeballing the jpg... not going so well. The swirl thing is up on the sign outside the shop... so I am kinda tied to it.
I have a cleaner edged version... But, when I try to get creative, my file size increases exponentially.
Or worse yet, I come out with crap like this;
[edit] OMG it looks ten times worse without a white background. Sorry ... just dont know what else to say...LOL![/edit]
Thank you for looking at the code... I thought the doctype declaration was just added extra spiffines... D'oh!
After reading the page you referenced I see where I had erred... Although I am not 100% sure what I am using. My code like you said is all jumbled. Much like my knowledge of HTML. I've just kinda picked some stuff up as I went along and now am kinda scratching my head as to what is correct usage and what has been updated. I think I need the tidy html thing... I recently did a browser compatibilty test through front page and it found a whole host of syntactical errors... ohh syntactical, is that even a word?
Either way, thanks for the heads up.
Deleted some of the generator crap... have to look through the code again... the old html tidy thing I was using changes the tags to Capitals... Lower case, eh? I guess I got some more tinkering to do... I really need to get focused on the product content. That has kinda slipped...
It's just I was a little concerned that no one could find the page through a search engine. I've been 100's of results deep without nary a mention of our little shop.
I'm going to start with this, because, honestly, it flabbergasts me. Yes, I said "flabbergast."
quote:UnknownComic said:
The dated look was kinda purposeful, sure cutting edge is nice, but sometimes
dont you just yearn for the good old days, when the customer was always right,
and people were not secondary to profit?
"Dated" does not mean "old-fashioned." "Dated" does not trigger nostalgia for better days. "Dated" means that the 90s called and they want their design back. How is poor design in any way related to how a company treats their customers? I do not understand the connection.
Since WarMage dealt with the code, I'm going to leave that alone and just focus on what I see in the browser in front of me...
1) Header... see WM's comments above.
2) What's up with the big white box on the sky blue background? I find it a bit jarring, to be honest. Also, you really need to learn how to use white space. Wall-to-wall text is just one of the many things that is making your site look dated. You definitely need to work some margins and padding in there.
3) The menus make me want to cry. Why do you duplicate menu items? Mac is in the top menu but not in the left menu, and repair, parts, and internet are all in the left menu but not in the top menu. And then there's the fact that the order is different, making things even more confusing. I honestly don't see why you need two menus--just stick with one organized menu and make it easier on your customers.
Then we come to the parts page. Why oh why do you duplicate the links on the page in the left menu, replacing the menu that was originally there (and, again, the links are in a different order)? What if I was navigating by the the left menu? Poof! My navigation method just went bye bye! There's not even a button to get back "home" (although instinct tells me that the bloated header at the top is more than just a hat rack... but others might not figure this out).
So I click the back button to restore the left-side menu and continue with my navigation...
OK, tell you what. There is a lot more that could be said, but I'm going to stop here because I think this is the area that you really need to work on. If navigating your site is anything but a smooth, painless experience, you will aggravate your customers. There's no reason why browsing through a website should be a puzzle. So, pick one menu and stick with it. Don't make that menu disappear when a visitor clicks on a certain link (especially when that link is in the menu itself). That menu should always be there, a warm, guiding beacon that reassures the visitor that they will always be able to find their way back home.
I said I wasn't going to make a comment on the code front, but I really must. You need CSS. Search the FAQ for CSS and you'll see a number of separate pages that will help you out. You said in another thread that you're still afraid of CSS... that's like a carpenter being afraid of his hammer. Now, imagine a carpenter who is afraid of his hammer trying to build a house. He's going to end up lashing the whole thing together. You catch my drift, right?
Sorry for the harsh crit, but things needed to be said. I wish you the best of luck in this project.
2) I guess the white space is an error stemming from not really knowing what was going to be put on each page. So, I kinda left a big box in the middle of my code and marked it off with <!--content--> tags. Then as I got the flyers and other info, I just plopped it in. I guess I'm just not sure how to get the relevant information into the page without using "wall to wall text".
3) Menu... Hmmm, so on the menu thing, you're saying trapping the left menu surfers within the sales folder is not a good thing, right? The kinder part of me said "wait, that's confusing." But, the manipulative part said "ha ha ha, now they'll have to buy somethig!"
I guess my page is conflicted...
I knew the menu navigation was messed up before I posted the page here, but a small part of me was hoping someone would see it as... unique? <!-- as I typed that last justification, or is it a rationalization? I can sense it is an excuse for mediocrity-->
As I look around on other "cool" sites, the page is a small box with tiny bits of text in some kind of flash wrapper. Then, on the other side, BestBuy and those ilk are just a conflagration built of sales banner, ads, and whatnots, almost always driving me to the search box... I wanted to be simple.. LOL...?
The thing is, the person I am doing it for, really likes it, which makes justifying time spent on design issues a little dicey. But, For my own personal goals, I fully intend to use my own time to make appropriate changes to design and layout. That's the reason I posted it here, to find out where I went wrong.
I've seen the critiques, and while sometimes harsh, they are without a doubt some of the most informed, specific, and well formed critiques. So let me just say, 'Thank You' for your opinions. Anyone willing to take the time to read through my code jumbles deserves to be listened to.
quote:If navigating your site is anything but a smooth, painless experience, you will aggravate your customers. There's no reason why browsing through a website should be a puzzle
I dont know which menu to do away with. The boss likes them both. I knew I shouldnt have gone there, but now that I have... I dont know how to get back. It started out with just ten pages, ten areas of commerce. Now, things keep getting added on and I dont know how to keep it all straight in my head. It has been said before... "I am in way over my head!"
How do I navigate through all the parts and accessories and training items without having a 30 page menu? Is a menu with 30+ different links ... ok?
Um, I guess a little clarification on what I mean by "white space" is in order. White space has nothing to do with what the content is, it's how it is presented. (Oh, and before we go any further, just want to make sure we're on the same page by saying that "white space" doesn't necessarily have to be white.)
Just pulling a random site out of memory here... go take a look at Happy Cog Studios (it's Zeldman's design firm). Notice the use of white space here... lots of room for the content to breath, right? Notice in particular the spacious left margin and the space around the inset box to the right (for instance, notice how the inset box doesn't sit right up against the edge of the content container). As far as personal sites go, I humbly present my own Liminality as an example of white space with a vengeance (then again, Liminality is a personal site, and I can afford to take up 40% of the screen with white space). I'm not saying you should go that far, but you need to give your content room to breath.
I know, I know, that's a catchy metaphor, but what does it mean? Well, in practical terms having "room to breath" means that it is easier for eye to follow the content and not get lost--ie, the content is easier to read. This is always a good thing.
So, with judicious use of margins and line spacing, you can make the content on your page a lot easier to read and follow. Of course, this is best achieved through CSS, which is why I think you should really start doing some research in that area.
As for the menus... hmm... that's a tough one. They both serve their own purposes, yet they overlap each other. The top menu looks nicer, but the left menu is more traditional. Position-wise, I would go with the left-hand side. You're going to have to find a way to combine the functions of both menus into one, and the drop-down technique you use in the top menu will likely come in handy (for listing parts, for example). What you really want is the best of both menus rolled up into one. How you do that, ultimately, is up to you, I suppose.
quote:It started out with just ten pages, ten areas of commerce. Now, things keep getting added on and I dont know how to keep it all straight in my head. It has been said before... "I am in way over my head!"
That's never a good sign. "Project creep," it's called. This is why you want to try to nail down the scope of the project early in the planning phase. You're always going to have project creep, of course, but the better you plan, the more you can minimize it. Guess you'll know for next time.
From: A graveyard of dreams Insane since: Mar 2001
posted 04-24-2004 17:22
Don't have much to add to what has been said above, except that I agree with both Suho and WarMage. Just thought I would mention that you should test the site in IE, Mozilla/Firefox and Opera before releasing it. The works in Firefox, but the top menu doesn't work in Opera...
_________________________
"There are 10 kinds of people; those who know binary, those who don't and those who start counting at zero"
- the Golden Ratio - Vim Tutorial -
quote:I don't know where you got your doctype from I haven't seen html 4.0 in a long time this should be updated to the latest version 4 standard which is 4.01. Even if you wish to use 4.0 your document is missing the actual link to the document type definitions.
errr... Several attempts at validation have left me scratching my head... cuz, I aint got no clue what version of html I am using.
The validators keep harping on the link to mapquest on line 24...
Then they say
quote:Line 45, character 52:
... "90" valign="top" background="images/MID_button_field.jpg" b ...
^Error: there is no attribute BACKGROUND for this element (in this HTML version)
blah blah blah, so on and so forth... pfft... it may not be valid but it works... but why?
Even an old version of frontpage express 2.0.2.118 from 1995 has the ability to assign an image to a cell background... so what version of html is it?
[edit] Oh yeah and the validators complain about giving a color designation to <hr>... why do the browsers use the designation if it isnt valid?
Oh yeah... 1 more thing w3c cant read my character encoding....
I knew I shouldnt have put this page here... D'oh [/edit]
______________
Is This Thing On?
Bleah...
From: Rochester, New York, USA Insane since: May 2000
posted 04-29-2004 16:15
So... I went to the W3 in an attempt to validate your page. And blammo I got a ton of errors about your use of the '&' symbol in your URL's. You might fix this by replacing all of your & symbols with either & or & I am actually not 100% sure how this would affect the URI. The cause of all the errors is that the & character is reserved in HTML. How fun moving on.
Your script tags need to have type="text/javascript" added to them. I don't know why you have "menumaker" just sitting in there. Do you mean class="menumaker" or id="menumaker" it really makes no sense.
As for the background issue. If you replace background="..." with style="background:...;" you should not have any errors. I have no idea why the validator doesn't like the background element, I thought in loose HTML 4.01 it was acceptable. You never know, now you have a fix.
You should add alt="" to line 46 or if the image is actually something not decorative you should add alt="sometext" I think the new thing for alt for decorative elements is alt="decorative" but I don't know anything about that. Someone else might be able to jump on that.
On line 120 you have a </font> tag which was never openned you might want to simply delete this.
One line 131 your <hr> problem replace color="#..." with style="color:#...;" and you should be in business.
139, 148, 155 you need to add alt="" since it is blank that is all that is needed.
This should get you started. If you simply do a search and replace for & and change it to & it should work. I looked into this issue and that was the said solution.
From: Rochester, New York, USA Insane since: May 2000
posted 04-29-2004 16:27
Onto the next topic which proves much bigger.
quote:Even an old version of frontpage express 2.0.2.118 from 1995 has the ability to assign an image to a cell background... so what version of html is it?
FrontPage is the most broke commercial HTML editor available. The further back in time you go the worse it is. I have heard rumor that newer versions are a bit better, but since it has such a poor history I was not about to try it.
The next issue is that web standards are just now coming into their own. This is "cutting edge" stuff in web design, and there is a huge community based push for it, i.e. web designers and developers. Standards were not followed back in the day all the different browsers did things their own way, and that is still found today. The way that you get the people who manufacture the popular browsers (i.e. Microsoft) is to design all pages using standards, this forces them to accept that the trend is away from proprietary code and towards the standards. This forces them to make their browser's standard compliant.
Next. Modern browsers have a mode call "quirks." If your web page does not have a correct doctype your page is rendered in quirks mode which accepts a whole lot of garbage code. This is good for keeping with rendering older pages, but also allows developers to think that their code is "correct" when it is really broken. The browser simply says, yep it is broken, but I will try to work with it anyways.
So standards are important. Learning to write code by hand in a text editor is also important. Choosing a good WYSIWYG editor is important. If you want to use a good WYSIWYG editor try DreamWeaver it is very good. I even used it at one of my jobs and I didn't hate it. I would much rather editplus2 but you use what you have or like to the best of your ability.
Older version of frontpage pre 2002 are all really really bad at writing code. Stay away from this like the plague!
I am using frontpage 2003 at this point ... because... I think it was called "project creep". Originally I did everything in Notepad. Then I used firstpage 2000, which changes thing a lot less than The front page series, to get the code formatted with nice tabs... LOL It capitalized everything. It has an option to decapitalize tags, whew, right? Nope, Frontpage, even 2003, once again capitalizes all my tags. I've gone back and forth with this capitalized tags thing several times... Hence the mish mash of tag capitalization. Once I got past 10 pages, I couldnt keep track of the pages for editing. So, I started using FP2003. I still dont like how it's design mode doesnt really gel with it's preview mode, but some of it's features are kinda handy.
I also found a <fomt> tag with the validator... I should have looked for the end tag and deleted that as well. I am pretty sure I meant <foNt>... LOL.
Right now, on my own time, I am working in notepad with a couple of pdf's I downloaded to make my css conversions... the auto converters just kinda leave me dumbfounded as to what was done. And, they dont necessarily make the right changes. Good for learning what the program thinks should be done though. I've got a couple pages looking the way I almost want them to be... but, I know I am not utilizing the true power of css. I've started by doing a search for <font> and exchanging it for a <span class=> or <p class=>. And maybe a <div> or two.
Going back through the pages with notepad, I can see where extra tags have been generated... For example, I found a <div align="center"> followed by a <center>. But, right before hitting the delete key I remember reading how some browsers dont support the div align feature... Am I reading old info dressed up as new?
My only concern right now is older browsers, I keep reading about how not all browsers are css compatible... fud, fiction, or fact?
quote:As for the background issue. If you replace background="..." with style="background:...;" you should not have any errors. I have no idea why the validator doesn't like the background element, I thought in loose HTML 4.01 it was acceptable. You never know, now you have a fix.
Can I do that inline? or do I have to declare it in my <head> or external css file first? Will funky browsers recognize it?
Oh by the way, I hate that element... probably one of the things making my page look dated. It just seems awkward with just a background color... and I'm not sure I know what else to put in it's place...
From: Den Haag: The Royal Residence Insane since: Jul 2000
posted 04-30-2004 01:07
You might wanna know more about current standards so i will point you some directions: www.w3schools.com -- a lot of good info about webstandards in plain english. www.w3c.org -- a bit academic but the home off the webstandards http://validator.w3.org/ validator from the guys who make the rules with some good features. w3schools html 4 reference --click on an element to learn more about it. w3c html 4.01 specs --this info should be in your head. w3c css(stylesheet)validator --when all the html is correct test your stylesheet(s).
When you use the w3c html validator page you can hit 'explain' for better understanding the errors.
In your case the error about the background would be
quote:# Line 45, column 64: there is no attribute "BACKGROUND" (explain...).
When you hit the explain button you will get this:
quote:"?there is no attribute ?FOO? for this element (in this HTML version)?
You have used an attribute with an element that is defined not to have that attribute. This is most commonly caused by using vendor-specific attributes without setting the document type appropriately."
With other words the TD element is not allowed to have the background attribute in html 4.01.
I you are planning to maintain the site i suggest you to use an externel stylesheet except when it cannot be avoided. Personally i only use an inline style (such as style="background:...;")while working an a project to see the quickchanges. Most browsers should not have problems with an stylesheet in the head or in an external file. Browsers which don't accept stylesheets in the head or in an external file are outdated an should not be developed for any more.
And do not forget the style sheet importancy rule:
Style-sheet in the head will override the external file.
Inline style overides an sheet in the head.
I suggest you to use an external stylesheet for the whole site, it will then be easy to change the color from the whole site at once. Instead off changing it page by page.... For older browsers (NN4) you could write an basic style sheet and copy it to the head. Now browsers who cannot read style sheets from external files will still have an basic style in the head and can be formatted.
I cant figure out how to get that stupid mapquest thing to validate.
and my attempts at using css for the table background image and height is going awry...
only 3 errors when I take out the stupid link.... anyone know an h, x, or any tml friendly map link?
[edit]Oh yeah it invalidates the first menumaker but not the second, but the damn script wont work when I take that word out... [/edit]
[1 more edit] Are these 3 errors the only thing keeping this page from being valid xhtml? [/edit]
______________
Is This Thing On?
Bleah...
I got it to validate, but without the height attribute on some of my tables, I have to hack in some <br />'s... We wont even mention the table structure on this one; http://www.computersforpeople.net/test/template.htm
I mangled the tables in notepad last night...
I thought CSS was supposed to take away table dependencies?
Oh well... 38 pages to go... and then I can fiddle with the design... EEK!
From: Rochester, New York, USA Insane since: May 2000
posted 05-02-2004 17:46
CSS does take away table dependencies. You don't need them for your layout and you would logically structure your page, and then use all CSS to model it.
Lets go with a little primer here. With your page you basically have (should have) only 4 sections.
1. Head
2. Menu
3. Content
4. Footer
In your current design you still insist on having two menu's which is still competely and totally confusing. So I am going to ignore that you are using two menus.
So you will then have a basic HTML (xhtml) structure that would resembel the following.
code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Computers For People</title>
<style type="text/css" media="all">@import "/style.css";</style>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
</head>
<body>
<div id="head">Header Markup</div>
With this design you then only use basic markup items for all the different sections. For example my header content would be something like this.
<div id="head"><h1>Computers For People</h1></div>
my css to display this would be.
#head {
position: absolute;
top: 10;
left: 10;
background: url("title.jpg") white no-repeat top left;
width: 468px;
height: 60px;
}
#head h1 {
display: none;
}
Or something like that. You might not be able to get away with the display: none in the #head h1 attribute tree, you might need to add a span around the h1 attribute to make things show up, but my instincts show me that this should work.
Your design if you ditch one of the menus is either a basic top down design - head on top of menu on top of content on top the footer - or a standard two column with a header and footer. The first is really easy to do with CSS, and the second is almost as easy, but there are variations on how you might go about it.
I now want to give you some awsome links.
1. CSS Zen Garden this site shows you how completely flexible CSS allows you to be.
2. Blue Robot a great place to go to see how to do CSS layouts.
From: 2 steps away from a los angeles curb Insane since: Nov 2003
posted 05-08-2004 07:40
LOL... Yeah it means about the same to me. But, I am expected to figure it out. "Project Creep" has taken an exponentially ugly turn, from "a little web page" to "hey can you contact the state certification agencies to get our classes certified for use with Department of Rehabilitation clients?
Once again I saw the life jacket on the beach, but it was tied to a post of ignorance. So, I left it there and waded in. It taunts me now as I wade into the deepening tide. My head bobbing up and down in this sea of confusion....
All the while the question resonates through my hollowed deranged skull....
From: Rochester, New York, USA Insane since: May 2000
posted 05-08-2004 17:30
It is really true, you do not want to be in over your head because it can lead to a lot of problems down the line. You don't want to burn bridges now because you take on a task that is too complicated for you.
Also with feature bloat, never feel bad about saying "No, that will not work," or "No, I do not have the skills to solve that problem, you should hire someone who does."
It is the stronger employee / contractor that can say no, you will gain more respect that way, and get the job done better.
posted 04-21-2004 23:09
