Please Review my website

[jonnytheposhEsq]

Hi can you tell me what you think of this design. all comments welcome.

Please note that alot of the links dont work


thanks guys

[LJK]

Hi -
I like the muted colors and choice of having only a graphic for the logo/group.

Top links are indistinct and the side links too close to their header/title above.
[Also - are you expecting to have longer pages - thus bottom links to boot?]
Make the main links w/ some type of hover change, so people grasp the concept
quickly...and style the sub-links at left w/ a color that suits your site.

Once you're comfy w/ css, yourself [sans DW's version of it] drop the table-based layout w/ deprecated tags & you're on your way!

Have fun,
El

[jonnytheposhEsq]

Thanks for the tips. Do you think this page looks professional or do u think it looks amateur. I'm going to be keeping the page sizes relatively small

[JPnyc]

It's not bad and it adjusts to different screen size nicely, but add a hover state for the links. I would also maybe give a bit more breathing room between the content and the footer. But that's extremely subjective.

[somecallmejosh]

I really like the feel of the site. The colors are quite calming. I would recommend separating your style sheets from your document. This will make the site easier to update...

This is done in the head of your document.
<link rel="stylesheet" href="stylesheet.css" type="text/css" media="screen" title="Name of your style sheet" />


<br><br><br>
These tags are going the way of the do-do. You can use Style sheets to indicate margins (white space) between elements and avoid the use of the break tag altogether.

bottom-margin: 10px; in your style sheet vs. <br><br><br>

I would recommend checking out Dan Cederholm's books (Web Standards Solutions: The Markup and Style Handbook; and Bulletproof Web Design : Improving flexibility and protecting against worst-case scenarios with XHTML and CSS on Style sheets and XHTML). They're increadibly good resources that discuss issues like this. They're also quick reads.

You can also find great information at the following website:
www.alistapart.com

Good luck, and I hope this helps.

[jonnytheposhEsq]

super thanks very much guys am going to be putting all of your suggestions into the site. At present am just trying to get the look of the website itself before making sure the code all works correctly. Design wise thou do you think i could go professional as i am thinking of doing so in january with my own company.

[DeltaOne]

Hi there... I really like the coolness of your site.
But is the top image there a bit buggy or is just me? I feel that it has some... afterthings.

[jonnytheposhEsq]

The image i have is the one that is going up but is not optimized at the moment. I'm planning on opening my own web business but am unsure if i have the design for it or the talent. on the basis of looks what do u recon?

[Green-Beast]

You really need to add the alt attribute to your banner image and use the banner text and the alt-text.

Also, two of your images, strip.jpg (x2), are still being served by a path to your local machine and thus not visible.
<img src="file:///C|/Documents%20and%20Settings/Administrator/Desktop/Deliberate/images/strip.JPG" width="100%" height="1">
These should also have the alt attribute by the way, but the value should be null... alt=""
Curious about that "strip" images. Not sure what they look like, but shouldn't they be replaced by a styled HR element?

Mike

[dera]

increase the quality of http://www.deliberatedesign.com/image/newtitle.jpg the image is distorted around the text it looks bad.

[jonnytheposhEsq]

Hi there have made changes to the site please review.

thanks guys

www.deliberatedesign.com

[Green-Beast]

Better, but still no alt text on the banner :(

[jonnytheposhEsq]

Thanks Alt tag in now. Do you think the design is professional?

[Green-Beast]

Yes I do. It looks very nice, clean, and professional.

What you should do now is take the word "logo" (x2) out of the alt text and do consider making it an <h1></h1> element since you don't have any headings at all on your site, even on the About page (strong element used instead of proper headings h2 and h3 -- another fix needed). You should use resizable font sizes (% or em) instead of px. Then, put alt text, even if it's null, alt="" on your other image(s), and lastly, fix the other validation errors (http://validator.w3.org/check?verbose=1&uri=http%3A//www.deliberatedesign.com/) and CSS errors (http://jigsaw.w3.org/css-validator/validator?profile=css2&warning=2&uri=http%3A//www.deliberatedesign.com/index.htm), and then you'll be even more professional looking, on the surface and below it. A professionally built house sitting atop a solid professionally built foundation.

After that stuff, soon after, I'd suggest you bump up the Document Type to HTML "Strict" and make an even better foundation by scrapping the tables. They're completely unnecessary and actually improperly used since they're being used for layout instead data-containing as they are intended.

I hope this helps.
Mike

[jonnytheposhEsq]

Hi thanks for your advice, i re-wrote the page in XHtml 1.0 and tidyed the CSS up and formed the page. what do you think of it now? anything else i can do what do you think of colour on the menu.

www.deliberatedesign.com

cheers guys

[LJK]

Hi -
Just thought I'd whip-up a table-less design for you to check out...
unzip and see what you think! ;-)

El

[somecallmejosh]

LJK,

Is it possible for you to post this on the web somewhere?

[jonnytheposhEsq]

Hi wow cheers i'll have a look into doing that for this site. I like the bit u put in the left hand very nice. Do you think the page looks proffessional enought to sell to someone as am hoping to be doing this on a full time bases.

[LJK]

Hi -
Josh: why, are you having trouble with the .zip?
[Maybe just open the .html and copy/paste it...?]

Jonny: do i think the one i made looks pro - or your
original layout? personally, i look "under the hood" to
gague whether or not a site is prof.-looking but you'll
have to decide for yourself - compare to similar sites,
as a start.
If you're wanting to do it full-time, practice awhile with
diff. types of layouts - get your confidence and repotoire
built-up 1st ;-)

El

[jonnytheposhEsq]

My code is tight when it has to be, I dont see the point in spending alot of time making the code perfect when this is the Website review forum and not the CSS or HTML forum. You may actually find am more qualified in this field than you are, I'd appreciate not having the condesending attitude ;) The reason am using a tabled lay out is from an accessibilty point of view. I was mearly asking about my website and from a deisgn aspect. The look and feel of the site. Am not a Designer and am trying to come up with a basic professional looking site with a simple design. I'm used to being given alot of pictures and content and making something out of it but when your given very little to no pictures. I think this makes it hard so am trying to come up with a simple impressive design.

I appreciate all Feedback and thank you for your help but please be more constuctive on what you don't like about the look and feel of the site.

http://www.webdeveloper.com/forum/showthread.php?t=44403

[LJK]

Hi -
You've asked 5 times in this thread for people to tell you if your site is professional-looking. Was just trying to give you my criteria of "professional" and don't believe I said a word about your coding. [Did you mistake me for Green-Beast, who gave you some great advice, earlier?]

Sorry about hitting that nerve but not sure how it happened,

El

[somecallmejosh]

The site looks nice. Again, it's very clean. Blue seems to be a universal color in web design (kind of like the khaki pants of web design).

Under the hood... separate the CSS from the markup. It looks like you've done a good job compacting the styles. You're creating to much work for yourself in the management of your site by having a style sheet on every page.

[Green-Beast]

I'm confused :)

El, the .zip, that was for Josh's site?

Mike

[somecallmejosh]

The zip was not Josh's site...

[Green-Beast]

Jonny the Posh's? :confused:

[jonnytheposhEsq]

LJK, am not getting at you, your advice was well recieved. I'm just trying to give the feel and preception of the website to be percived in a minimalistic professional feel that's all. Don't appoligise, I just think that the consumer or the customer whom view the site isn't going to be concered with "Under The Hood". By going on about a professional am meaning the design and feel of the website, I think that it is the small things that can make or break a good design.

[jonnytheposhEsq]

Somecallmejosh, Hi yeah I have to agree with the color but am unsure what else i could use with the website. I was originally going to go for a white back ground and then the logo. The CSS is in it's own file referenced at the top of the pages,

<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" title="Name of your style sheet" />

The whole site is templated.

[Green-Beast]

The "under the hood" thing can also help the client's website be well received and better crawled. There are more benefits than what may be apparent on the surface of this subject. It's the job of the developer to do everything in his or her power to make sure their not just selling surface sheen.

The design is just fine. I like it. Just helping with the tying up of what I consider loose ends, from a developer's point of view.

Mike

[jonnytheposhEsq]

Thanks i recon i'm going to send this off to the client soon. Yes but this isn't the HTML or CSS forum, it's the Website Review forum. Comment, pending on the type of developer you are.This is the Web Development Business Issues, so therefore Time is money and I believe as long as the web page works in all the major browsers and previous editions i.e degrades gracefully,content is accessible, re-sizes nicely,useable and is fast to load. Under the Hood the website does all of this.
I'm unsure of your point.

[LJK]

Johny: A couple of small points ;-)

...degrades gracefully,content is accessible, re-sizes nicely,useable and is fast to load.

Yes, that's the goal most of us [all of us should] have!
I think the reason 3 people have suggested that you drop the table is because it isn't necessary for your design & actually takes a bit longer to load because of all the extraneous coding - among other issues.
The reason am using a tabled lay out is from an accessibilty point of view.
I'm not sure - how does a table-based layout structure aid in access. issues?

Yes but this isn't the HTML or CSS forum, it's the Website Review forum.
It is also the Web Developer's Forum, which [hopefully] means the folks who take the time to do reviews have an eye for how 'clean' the code is - and can spot waste a mile away! They also have their eye on the prize - helping everyone to get the best they can in terms of the look AND the coding - for the design they're currently working on.

You've already gotten rid of unecessary <br /> tags, inserted alt="" attributes for images and borrowed my idea of 'prettifying' the left side of your design. Most of these changes are not just cosmetic - they affect how quickly your site loads and how user-friendly it is. [Another reason that people often suggest separating content from styles is that it makes future updates a lot simpler.]

If you truly want to become a professional at this, think like one - that means providing your clients with the best work that you can for today: the exterior and interior aspects of the design. They'll thank you for it!

Good luck,
El

[Green-Beast]

Well said, El, I didn't really know how to respond further.

Mike

[jonnytheposhEsq]

Hi,

The reason i'm using table for lay out means that people with disabilities can navigate using the tab button straght to the main part of the text when using a screen reader and with the "Scope" tag placed in the table element means they can then read the main part of the text without having to listen to the menu and the rest of the contents on the page everytime they visit the page.
As I said before

On a tableless layout this is impossible to do. I believe making things easier for people with disabilities is a big thing as they may not beable to go out to the shops to buy things for them and will rely more and more on the internet.

<br /> tags are not unnessisary they still produce the same effect, thou it is slicker to use CSS It's preference I believe.

I did really like your idea that was something that i was lookinng for in feedback so thank you for that.

I think that as long as the website produced adheres to all of these points that i made earlier then i don't beileve it is going to make a difference to the client, as they just want something that works well. My code isn't perfect when am putting it up here but all am trying to do is improve the design of the website. I don't see the point of spending loads and loads of time prefecting my code so that you guys can tell me it is good code or not. That's not what am here for.

I think everyone here has a passion for website and want to show off about what they can do. Great but I think when review a site they way it looks and interacts with different browsers accessibility etc is far more important.

The end user isn't bothered if your <br /> tag is used instead of css as long as it does the job and the client is happy with the look that your trying to sell them.

I think Under the Hood is best left for the HTML and CSS forums personally.

[somecallmejosh]

I've read several books on Accessibility, and NONE of them support this concept. Including a "skip navigation" div to the top of your page will provide the results you mention, and save tons in markup.

Example:
<div class="hide"><a href="content" title="skip navigation" accesskey="2">Skip Navigation</a></div>

CSS:
.hide {
display: none;
}

And you've got an accesskey that allows the user to move past the navigation (or whatever section you want them to bypass) to the section labeled with an id of content (in this particular case).

On a tableless layout this is impossible to do. I believe making things easier for people with disabilities is a big thing as they may not beable to go out to the shops to buy things for them and will rely more and more on the internet.
Sometimes making things easier on oursleves is the first step to making things easier for others. Is it help that you're looking for?

The end user isn't bothered if your <br /> tag is used instead of css as long as it does the job and the client is happy with the look that your trying to sell them.
Informed clients care. Uninformed clients seek out the expertise of knowledgeable consultants, who they trust will deliver a valid product. They may not know about bandwidth, but they know they don't want to lose potential clients because superfluos code locks up their website. They know they don't want to have to purchase additional servers to house information that could essentially be stored on one server.

From Zeldman's book "Designing with Web Standards"

Spaghetti code, depply nested table layouts, <font> tags, and other redundancies double and triple the bandwidth required for our simplest sites. Our visitors pay the price by waiting endlessly for our pages to load. (Or they tire of waiting and flee our sites. Some wait patiently only to discover that when our site finally loads, it is inacessible to them.)....

If a site reduces its markup weight by 35%, it reduces its bandwidth costs by the same amount.

Think about your clients. That's what they pay us to do... well... that in addition to building a site that works for THEIR clients.

Speeking of accessibility, do you have a table summary on any of your tables, I didn't bother to look.

[Green-Beast]

I disagree with most of that [EDIT: which was post by Jonny, Josh is right on], and as far as skip nav and tables, that's just plain wrong. You can put an id on anything and target it accordingly. Look at my site (http://green-beast.com/) and using your keyboard tab onto the page to find mine. They are available to keyboard, screen reader, sans-styles, and text browser. Make a skip link like so.

<a href="#content">Jump to Content</a>

Then in the mark-up, use one of the following...

<div id="content">
<p>Your content</p>
</div>

<h2 id="content">First Content Heading</h2>

<p id="content">This is your content.</p>

Tables, breaks, all that crap should be done via CSS as that stuff makes your site slower and LESS accessible in reality, this is a fact, therefore your customer, while he or she doesn't know or care, is still best served with you knowing and caring. Currently your understanding of this is flawed.

Think of it this way. A automobile consumer may not know jack about the internal combustion engine or any of that "under the hood" stuff, yet they still want it to be the best money can buy and should be treated accordingly. And it's the responsibility of the car manufacturer to make the best "under the hood" stuff they can, evcen if the consumer is blissfully ignorant. In the case of cars the consumers understand mechanical wear and tear, fuel economy, safety, and other related stuff they don't totally understand but have an awareness of. In our case, they aren't aware of web development, it's even more mysterious than cars, and newer as well, but that doesn't give us, the developers, license to take short cuts and do borderline acceptable work. Think about it.

Just so you know, on EVERY forum I belong to, ALL OF THEM give this depth of critique on their review forums. A review is end to end. It is typically appreciated when someone goes under the hood and doesn't get lazy on reviewing (it takes time to write all this stuff for you). It is assumed the person seeking the review is interested in improving his/her web development skills. It's a community thing. So many people have helped me, I'm actually returning a favor... I wasn't born with this knowledge.

I hope this helps you. It's been the point all along.
Mike

[Green-Beast]

FYI: Hiding the skip link with CSS hides it for people who may need it (screen readers, etc). It is better to offset it with negative margin instead of display:none;

See Article on hidden focal navigation (http://green-beast.com/blog/?p=57) for more info about this.

[somecallmejosh]

Interesting.... You see, these forums are handy. Everything I've read explained it the way I mentioned. You've presented a new point of view to me. Thanks for the input, Green-Beast.

[Waylander]

People are always fighting valid and structured code in this forum, at first I thought it may have been perfectionist in someway and somewhat of a waste of time.....

But ive also found that once learning these concepts myself that there is no difference in development, you do the same development in order and generally the same amont of work sometimes less and its better without any significant amount of extra work, Like any skill you have to learn it first but once you have learned the skills it takes nothing to integrate them into your normal development process... you get all these benefits from doing and its not hard to implement them so why fight it? and then when people actually look under the hood there will only be more respect for your self and your work.

Sure every now and then you have to mess with something to get it to validate or learn a new doctype or changed rules but its not even close to dealing with un-manageable and hard to update code, messing with tables too they are hard to use they have worse silly rules than structured code does and its significantly easier to write code with out them.

I have found that having these skills enables you to think in an optimized and structured mindset whilst developing, something which I have learned over the years in programming and web development is vital to creating systems that work and are actually usefull, not even with specific relation to what ever issue in detail but in the overall development of systems.

Waylander.