PDA

View Full Version : Website review


Interstellar Icon
10-16-2008, 12:07 PM
Hi All,

I recently completed my third website, and since I'm fairly new to web design, I'm hoping some of you can provide some input and feedback on how and where I can make improvements. You can view the site here:

http://www.nthdegreeconsulting.com/

This website was built with tables, and will be the last one built as such. :shock: I do have some specific questions regarding this site:

1. I'm in the process of learning CSS, and plan to build my next site with XHTML/CSS instead of tables. From a layout perspective, is there anything about the design of this site that could not be rendered using a CSS layout?

2. I'm still waiting for content on two of the inner pages ('Success Stories' and 'Partners'). I set it up so that these two buttons do not light up on mouseover, but I don't like the way it looks. I included 'coming soon' in the alt text for both, but on my websites, the alt text doesn't pop up in Firefox - only in IE. This issue has two related questions:
2a) I've seen the alt text on other sites pop up in my Firefox browser, but it doesn't on my sites. Any ideas as to what may be causing this, and what I can do to correct it?
2b) I'm considering changing these buttons so that they light up, but the button text changes to 'Coming Soon'. Thoughts?

Thanks in advance for any goodies you can send my way, and I'm open to any and all input that will help me to improve this site in particular and/or my skills in general. :)

Sam

domedia
10-16-2008, 02:05 PM
1. I'm in the process of learning CSS, and plan to build my next site with XHTML/CSS instead of tables. From a layout perspective, is there anything about the design of this site that could not be rendered using a CSS layout? Not really. You'll be using the right tool for the job so it's less restricting.

2. I'm still waiting for content on two of the inner pages ('Success Stories' and 'Partners'). I set it up so that these two buttons do not light up on mouseover, but I don't like the way it looks. I included 'coming soon' in the alt text for both, but on my websites, the alt text doesn't pop up in Firefox - only in IE.
2a) I've seen the alt text on other sites pop up in my Firefox browser, but it doesn't on my sites. Any ideas as to what may be causing this, and what I can do to correct it?
I think you are confusing the ALT attribute with the TITLE attribute. The ALT attribute is not supposed to pop up anywhere. It's simply an alternative text if people can not see the image.

2b) I'm considering changing these buttons so that they light up, but the button text changes to 'Coming Soon'. Thoughts? If there is no page, do not include a button or link or coming soon.

Rob_Che
10-16-2008, 04:57 PM
I like that site...

As Domedia says CSS is less restrictive but I think the design is easy enough to render either way. Once you realise what can be done with CSS you'll start designing sites differently... probably.

I like it - nothing much to add about your 'issues' that Domedia hasn't already touched on... but...

'Dead Buttons' are a no-no in my eyes... Coming soon sections are a bit grim too - Whenever I see a 'Coming Soon' page I always think that the designer has no intention of adding anything in there or will probably never get round to it..

I like it though...
RC

Interstellar Icon
10-17-2008, 02:25 AM
Thanks guys! A couple more questions/comments:

I think you are confusing the ALT attribute with the TITLE attribute. The ALT attribute is not supposed to pop up anywhere. It's simply an alternative text if people can not see the image.

I think you're right! Good to know moving forward. However, my alt text does pop up when I hover over an image in IE - is IE somehow interpreting it as a TITLE attribute, and if not, why is this happening?

'Dead Buttons' are a no-no in my eyes... Coming soon sections are a bit grim too - Whenever I see a 'Coming Soon' page I always think that the designer has no intention of adding anything in there or will probably never get round to it..RC

I have a feeling that this project is not as important to my client as it was when they hired me, so it may be awhile before they provide the content for these pages. It's important to me, however, that the site look as good as it can, and I understand that the best solution is to remove the dead buttons. Any suggestions as to how I can do this simply, without a major redesign of the nav bar?

One other quick question: Do you usually have a "target size" (in KB/MB) for your pages that you try not to exceed?

Thanks again for your input - I appreciate it. :)

Sam

Corrosive
10-17-2008, 06:11 AM
I think you're right! Good to know moving forward. However, my alt text does pop up when I hover over an image in IE - is IE somehow interpreting it as a TITLE attribute, and if not, why is this happening?

Hi Sam. You are correct, IE does flash up alt tag text when you hover over it. Not sure why Dom has told you it doesn't. This is perfectly natural for IE. Alt tags do not tend to show up in compliant browsers like Firefox. If you hover long enough though you may get a title tag pop up, as Dom says.

One other quick question: Do you usually have a "target size" (in KB/MB) for your pages that you try not to exceed?


As small or 'optimised' as you can. Try not to go much over say 150kb.

coloeagle
10-19-2008, 02:51 AM
I agree with the others, nice site. Job well done. CSS and div's is the way to go.


I have a feeling that this project is not as important to my client as it was when they hired me, so it may be awhile before they provide the content for these pages.
Consider taking this time and converting the site from tables to div's? A fairly straight forward and simple design like this should be fairly easy.
It's important to me, however, that the site look as good as it can, and I understand that the best solution is to remove the dead buttons. Any suggestions as to how I can do this simply, without a major redesign of the nav bar?
Can you simply remove the buttons, move the active buttons over or replace them with blank images?

domedia
10-19-2008, 05:49 PM
Hi Sam. You are correct, IE does flash up alt tag text when you hover over it. Not sure why Dom has told you it doesn't. I didn't say it doesn't, I said it's not supposed to :) This is the job for the title attribute. If you are relying on the alt attribute to make a tooltip, you're doing it wrong.

Interstellar Icon
10-20-2008, 07:15 AM
Hey All,

First off, thanks so much for all your input and feedback. And thanks, too, to those who said they like the look of the site. I'm here primarily to learn how and where I can improve my work, but it's always nice to hear that those "in the know" see merit in it. 8)

A couple of additional questions and comments, to keep the ball rolling...

Alt tags do not tend to show up in compliant browsers like Firefox. If you hover long enough though you may get a title tag pop up, as Dom says.

Is there a field or CSS property in Dreamweaver to include the title attribute, or does it need to be hand-coded? I found what looks like a downloadable extension here (http://www.game3rd.com/en/dreamweaver/info/46.htm), but the link send me to a 404 page in what looks like Japanese. It's from 2003, so I thought Adobe may have added the functionality since.

Consider taking this time and converting the site from tables to div's? A fairly straight forward and simple design like this should be fairly easy.

Can you simply remove the buttons, move the active buttons over or replace them with blank images?

I'm definitely going to convert my existing sites to CSS/XHTML once I'm up-and-running, and it's GREAT to hear that it should be "fairly easy". Regarding the nav bar for this site, I like the idea of moving the active buttons to one side, with perhaps a blank area to the far-left or far-right. I was really hoping not to have to redesign it, but I don't think there are probably any other options.

Thanks again to everyone. I'm beginning the design of my fourth site, and I plan to build it properly "from the ground up". And I'm sure I'll have lots of questions... :wink:

Sam

domedia
10-20-2008, 01:07 PM
Is there a field or CSS property in Dreamweaver to include the title attribute, or does it need to be hand-coded?
It's not CSS, it's an attribute for a HTML tag.
It should be present in your window panel for the link.
If you want to handcode it, it goes like this:
<a href="file.html" title="this is my awesome link">link</a>

Interstellar Icon
10-21-2008, 05:40 AM
It should be present in your window panel for the link.

Is it somewhere in the Properties window, or a different window? I've hunted around and been unable to find it. :roll:

Thanks,
Sam

edbr
10-21-2008, 06:32 AM
in properties panel >Link

Interstellar Icon
10-22-2008, 07:13 AM
in properties panel >Link

Sorry to be so obtuse, but I'm having a hard time finding this. Here are the two places I've looked in Dreamweaver:

http://i237.photobucket.com/albums/ff183/DesignDude/dreamweaver_screenshot_01.jpg

http://i237.photobucket.com/albums/ff183/DesignDude/dreamweaver_screenshot_02.jpg

Am I in the right place, or is there somewhere else I should be looking? :confused:

Thanks,
Sam

edbr
10-22-2008, 07:38 AM
i just checked and im sorry it isnt there you will have to handcode

Interstellar Icon
10-22-2008, 07:54 AM
No worries. At least I know where I stand. :) Kind of surprising they haven't included it in the Properties panel, considering how common it is and how many versions they've released.

domedia
10-22-2008, 01:00 PM
It only shows up when you Insert>Hyperlink and in the quicktag editor. DW has multiple ways of editing/adding links, and most of them does not display the title attribute.

You could find an extension that creates a title panel, surely someone must have one installed?

Interstellar Icon
10-23-2008, 02:46 AM
It only shows up when you Insert>Hyperlink and in the quicktag editor. DW has multiple ways of editing/adding links, and most of them does not display the title attribute.

You could find an extension that creates a title panel, surely someone must have one installed?

The 'Insert -> Hyperlink' solution works for me. Thanks! :)

I would've thought there would be an extension, as well, but the only references I could find were one from 2003, which leads to a 404 page, and this (http://www.accessify.com/tools-and-wizards/accessibility-tools/dreamweaver-mods/), which seems to reference an "acronym title" attribute.

Interstellar Icon
01-30-2009, 08:13 AM
Hi All,

As I've posted here on more than one occasion, I've been working through a lynda.com CSS tutorial so I can design my sites with XHTML/CSS as opposed to tables. I've recently completed the tutorial, and I'm in the process of designing my first CSS-based site. I have a couple of questions that I'm hoping you folks may be able to answer:

1. Converting from tables-based to CSS-based design seems as if it will signifcantly change my workflow. Does anyone have any suggestions as to the best and/or most efficient way to set up a workflow for CSS-based design, or can you recommend any resources? I've searched Adobe Support pretty thoroughly, but didn't really find anything applicable.

2. I'd like my pages to validate (with w3c) for both XHTML and CSS, and based on what I've read, using Dreamweaver for design does not make that automatic. Any ideas on how much "clean up" I'll need to do in order for my pages to validate, and also how much of a difference there would be between validating for Transitional vs. Strict?

Thanks in advance, and for all the help in the past. :-D

Sam

Rob_Che
01-30-2009, 02:00 PM
Hey Sam - welcome back....

What do you mean by workflow ? I made my transition from tables to css pretty cleanly with no change in work practices...

The best way to check validatin is to create the page and run it through the Validator (mwhahahah)... http://validator.w3.org/ See what the errors are and read the explanations of why it has failed...

Get back to us with more info on 'Workflow' - cheers... Rob

domedia
01-30-2009, 04:29 PM
1. Converting from tables-based to CSS-based design seems as if it will signifcantly change my workflow. Does anyone have any suggestions as to the best and/or most efficient way to set up a workflow for CSS-based design, or can you recommend any resources? I've searched Adobe Support pretty thoroughly, but didn't really find anything applicable.
After a while you probably will be writing the HTML document first, and then the CSS file as opposed to only write a HTML page with tables.

2. I'd like my pages to validate (with w3c) for both XHTML and CSS, and based on what I've read, using Dreamweaver for design does not make that automatic. Any ideas on how much "clean up" I'll need to do in order for my pages to validate, and also how much of a difference there would be between validating for Transitional vs. Strict?I would only worry about validation during development. If the page is live and works in all your target browsers you're good.

Rob_Che
01-30-2009, 10:18 PM
If I'm starting a site from scratch I would create a folder called Mysite.com > then an index.htm page, then css file.
I start editing them together...

Sam - I joined this forum 8 Months ago with no CSS knowledge, I'm not particularly studious (I only do this for a hobby) and I can now create a valid cross-browser CSS page in..ooh... 9 weeks !... (ok, maybe 1hr)

In fact me and Corrosive have set a challenge together of a one hour CSS page. We might show our results in the Cafe maybe? We'll create any imagery we require beforehand but the whole page and uploaded in one hour... but this s your thread, sorry!

Rob

Corrosive
01-31-2009, 07:11 AM
If I'm starting a site from scratch I would create a folder called Mysite.com > then an index.htm page, then css file.
I start editing them together...

Sam - I joined this forum 8 Months ago with no CSS knowledge, I'm not particularly studious (I only do this for a hobby) and I can now create a valid cross-browser CSS page in..ooh... 9 weeks !... (ok, maybe 1hr)

In fact me and Corrosive have set a challenge together of a one hour CSS page. We might show our results in the Cafe maybe? We'll create any imagery we require beforehand but the whole page and uploaded in one hour... but this s your thread, sorry!

Rob

MSN me when you've got a 'diary window' and we'll crack on with this. Welcome back Sam btw. Glad to hear you are getting your CSS 'wings' at last.

WallyJ
01-31-2009, 11:50 PM
A few thoughts...

1. Nice site. Overall it looks pretty good.
2. A little on the basic side of things. Pretty much all black text and standard blue links. I would use some CSS to make the larger headers and the links the darker green color found in the graph of the banner.
3. Don't get down on tables too quickly. I think CSS has some major strengths and will probably one day replace tables for the most part, BUT, I've seen plenty of forum posts saying stuff like "My CSS is not formatting correctly on my page. My pictures and text are not showing up correctly", so there is a learning curve. Sometimes functionality with ease is better than ease without functionality.

My $0.03 (Inflation)

Interstellar Icon
02-01-2009, 06:32 AM
Hey All,

Thanks very much for your input and feedback. A couple of thoughts on your thoughts:

What do you mean by workflow ? I made my transition from tables to css pretty cleanly with no change in work practices...

I guess I'm basically referring to how an external style sheet would fit in to my process. For tables, I've basically designed a comp in Photoshop, created slices, then created an HTML page with tables and added the slices. I'm wondering how the CSS sheet would fit into this process: Would I create it before or after I create the HTML page, or would I create both at the same time and then build them simultaneously?

After a while you probably will be writing the HTML document first, and then the CSS file as opposed to only write a HTML page with tables.

When you say "writing the HTML document first", are you referring to the entire document (including images, slices, etc.), or just creating the basic code?

I would only worry about validation during development. If the page is live and works in all your target browsers you're good.

The main reason I'd like my finished pages to validate is so that I can sell them as such. It seems that most business people (the ones I've encountered, anyway) don't have a clue about web standards, so I thought this would be a good way for me to definitively prove that my pages are standards-compliant, and set myself apart from the competition. Good idea, or wasted time?


Sam - I joined this forum 8 Months ago with no CSS knowledge, I'm not particularly studious (I only do this for a hobby) and I can now create a valid cross-browser CSS page in..ooh... 9 weeks !... (ok, maybe 1hr)

In fact me and Corrosive have set a challenge together of a one hour CSS page. We might show our results in the Cafe maybe? We'll create any imagery we require beforehand but the whole page and uploaded in one hour... but this s your thread, sorry!

Rob

That's very good to hear. :-D I was originally thinking that building CSS-based sites would take more time, but if I can get the CSS part down to an hour, I'll be golden.

Looking forward to seeing what you and Corrosive come up with... 8)

I would use some CSS to make the larger headers and the links the darker green color found in the graph of the banner.

Good ideas, and I'll implement them when I redesign the site.

Don't get down on tables too quickly. I think CSS has some major strengths and will probably one day replace tables for the most part, BUT, I've seen plenty of forum posts saying stuff like "My CSS is not formatting correctly on my page. My pictures and text are not showing up correctly", so there is a learning curve. Sometimes functionality with ease is better than ease without functionality.

The main reason I want to build with CSS is so that my sites are standards-compliant. I'm not expecting CSS to be a cure-all, but based on the challenges I've had with tables, it seems as if anything would be an improvement. :wink:

Sam

Corrosive
02-01-2009, 11:20 AM
The main reason I want to build with CSS is so that my sites are standards-compliant. I'm not expecting CSS to be a cure-all, but based on the challenges I've had with tables, it seems as if anything would be an improvement. :wink:

Well said mate. That is exactly the reason to use CSS over tables.

Rob_Che
02-01-2009, 12:16 PM
That's very good to hear. :-D I was originally thinking that building CSS-based sites would take more time, but if I can get the CSS part down to an hour, I'll be golden.

It's all relative. The more elements, the more time it takes. If you have a number of elements that have the same style you can add this as a "class" and apply it to more than one div.

I've just been styling a PHP based blog and it's taken me AGES!
It's something you'll keep coming back to... I often find that once I've finished the HTMl page I rarely go back to it, I just open the CSS to keep tweaking it.

CSS has some quirks like tables though - although nothing is as infuriating as a 1px gap in a table that never wants to leave, I'm sure we've all chased those for a few days ! :roll:

Happy to help though, keep asking questions. There are some VERY talented coders on here that give up their time to help others from all over the world, it still amazes me.

Rob

domedia
02-01-2009, 04:48 PM
3. Don't get down on tables too quickly. I think CSS has some major strengths and will probably one day replace tables for the most part, BUT, I've seen plenty of forum posts saying stuff like "My CSS is not formatting correctly on my page. My pictures and text are not showing up correctly", so there is a learning curve. Sometimes functionality with ease is better than ease without functionality. I'll be the first to admit that I don't have monopoly on the truth, but I would claim that in the professional world this change has happened already, and it happened a couple of years ago. Web Standards are accepted and embraced by the industry.

I'm not saying a website has to comply with standards to be successful. There's surely more important factors to succeed for a business than what technique was made in making their website :)


When you say "writing the HTML document first", are you referring to the entire document (including images, slices, etc.), or just creating the basic code? Just the HTML document. Once you get some kind of Wireframe completed or accepted, you should be able to write the HTML document without even thinking about the design.
I slice from PS while I write my CSS file, but always have to go back to the HTML file and make adjustments, typically a CSS hook here and there to have something I can assign certain CSS classes to.



The main reason I'd like my finished pages to validate is so that I can sell them as such. It seems that most business people (the ones I've encountered, anyway) don't have a clue about web standards, so I thought this would be a good way for me to definitively prove that my pages are standards-compliant, and set myself apart from the competition. Good idea, or wasted time?
Personally I think it's a wasted time. :)
If they don't care about standards, and most don't, then there no use trying to create a want for this in them.

Figure out why they need a website and what they're looking for.
When it comes to web dev, my experience is that:
1. The larger the company the more they're looking to reduce risk. If you can come across as reliable and professional during the initial contact with client, and your bid is the highest one or one of the highest ones, you'll get the job. In their eyes they get what they pay for.

2. Show the client that you care about their business, figure out how they can utilize the web, ask questions etc. This has *always* worked for me. I think the client immediately feels that I take an interest in the business, which I do, and that we're partners in making the website successful.

3. Never do business with real estate agents :)

4. Dress professionally.

Rob_Che
02-01-2009, 06:01 PM
4. Dress professionally.
Have no fear DoMedia, I don't even sign in without at least putting some underwear on.

Interstellar Icon
02-01-2009, 07:04 PM
Thanks again, guys.

CSS has some quirks like tables though - although nothing is as infuriating as a 1px gap in a table that never wants to leave, I'm sure we've all chased those for a few days !

Yeah, that's a good one. I think my personal favorite is when the page displays properly in IE, but not Firefox. So I begin a'tweakin', and manage to get it displaying properly in Firefox. But now it doesn't display properly in IE. :shock:

Once you get some kind of Wireframe completed or accepted, you should be able to write the HTML document without even thinking about the design.

Sorry, but could you define "Wireframe"? I haven't heard that term before.

Personally I think it's a wasted time. If they don't care about standards, and most don't, then there no use trying to create a want for this in them.

Figure out why they need a website and what they're looking for.
When it comes to web dev, my experience is that:
1. The larger the company the more they're looking to reduce risk. If you can come across as reliable and professional during the initial contact with client, and your bid is the highest one or one of the highest ones, you'll get the job. In their eyes they get what they pay for.

2. Show the client that you care about their business, figure out how they can utilize the web, ask questions etc. This has *always* worked for me. I think the client immediately feels that I take an interest in the business, which I do, and that we're partners in making the website successful.

3. Never do business with real estate agents :)

4. Dress professionally.

Good stuff, man - thanks! I guess I just assumed that any serious businessperson would want "the best" for his or her website, but I think we all know what happens when we assume... ;-)

Have no fear DoMedia, I don't even sign in without at least putting some underwear on.

Would underwear alone be sufficient for face-to-face meetings, or would jammies be more appropriate?

Thanks again,
Sam

domedia
02-01-2009, 07:44 PM
Would underwear alone be sufficient for face-to-face meetings, or would jammies be more appropriate? As long as you have a suit over it you're fine :mrgreen:

domedia
02-01-2009, 07:50 PM
Sorry, but could you define "Wireframe"? I haven't heard that term before. A Wireframe, in my experience, is the next step after determining all the content that has to go on the site and the Information Architecture (if you don't know this term either you need to do some studying:) ). A wireframe tries to outline where things go on a page. I start with pen and paper, and once I have something that works, I use MS Visio to make a cleaner looking version. What's great about this when working with clients, is that they start to understand that a website is not just a pretty picture. We're not even doing design, we're creating a usable layout and interface.

The findability guy, Aaron Walter is making one in this video:
http://my.safaribooksonline.com/9780321626592
Wikipedia had a shoprt description as well:
http://en.wikipedia.org/wiki/Website_wireframe

d a v e
02-01-2009, 08:14 PM
"We're not even doing design, we're creating a usable layout and interface."
isn't that an integral part of design?
funny how often we think of design as just being the way things look rather than being the way they work as well ;)

domedia
02-01-2009, 08:18 PM
"We're not even doing design, we're creating a usable layout and interface."
isn't that an integral part of design?
funny how often we think of design as just being the way things look rather than being the way they work as well ;)
My bad, it *is* design!
I meant to say we're not creating any pretty pictures yet :)

WallyJ
02-02-2009, 03:45 PM
I came back to review the discussion which all of a sudden went from undies to information architecture... I need Advil...