Easy Peasy PC's - resubmission.

Absinthe Minded · #1 (**permalink**) Sep 23rd, 2007, 21:53

Hello all,

Thanks to your help in this thread I'm pleased to announce that I've taken your advice on board and updated my site. I'm still new to all this, so I'm sure there'll still be some errors, or things people don't like.

Still, they're the comments I'm after as they're the ones that move us all to improve our sites! That said, you're all welcome to throw in a couple of positive comments too!

So, thanks to all of you that motivated me to re-write the site - I hope you like it.

Cheers,
Nick.

jonnymorris · #2 (**permalink**) Sep 24th, 2007, 10:16

One thing that immediately springs to mind is printing - black backgrounds? Not many people will thank you for using up all their ink! A simple link to a printer-friendly version of that page is a quick and easy solution (same page, but white background with black text, remove the links as they won't be needed).

Another point is your links - they blend seamlessly into the text, I had to hunt around with my mouse to find them. Personally I like links to be fairly obvious so that I can go straight to them - try larger text size, a shade of grey, bold, or even underline. Remember the sort of people who are likely to be using your site may not be too web-savvy.
I notice your visited links are yellow, that colour works well with the black and white and should, in my opinion, be the colour for visited and unvisited links (is there any need for a person to be reminded which links they've visited on this site? They would probably remember).

I would also consider using a fixed-width layout, having such long lines, particularly if a person is viewing it full-screen on one of the increasingly-popular widescreen monitors, makes it difficult to pick up the next line when scanning back across with the eyes. With this in mind, and the printing thing, you could have black text in a central white fixed-width column, flanked by black borders either side and perhaps a black menu area at the top, thus maintaining the cool black look but solving two problem areas.

Please don't take these crits too hard, it's just one man's opinion

Absinthe Minded · #3 (**permalink**) Sep 24th, 2007, 10:33

jonny,

Excellent advice from you there - I hadn't thought about printing. I'd be very unhappy if someone used up all my ink like that!

Also, the links - quite right, and I had wondered myself about the 'invisibility' of them, I suppose you can go too far in trying to make your site look cool and minimalistic!

Good thinking about the line length, I must look into doing that at a later date. I think for now that I'll take your advice re the links and printer friendly page - I'll then upload it to the proper address (minus the /new site) so all my customers (and hopefully some new ones), can see it.

Thanks for your advice - really good stuff!

Nick.

karinne · #4 (**permalink**) Sep 24th, 2007, 14:27

The design is simple but there is such a thing as a boring simple

It's just text! There's nothing to keep me interested in reading all that text. Add some colors, pictures, something!

Yes ... looking for links in there is ... well ... you know

About the code:

Get a proper doctype. HTML Strict would be good. There's a great article by MikeHopley on the subject of choosing the right doctype for your website that you might want to read.

The p element is for paragraph. Right now ... will all the p's that you are using to display your site, it's just as bad as using a table.

Even a 1-column layout has sections: branding (header), navigation, content, site info (footer)

HTML: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
   
<html lang="en-CA">

<head>
    <title>Some title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <style type="text/css">
    html, body, div { margin: 0; padding: 0; }
    
    body {
        margin: 0 auto;
        width: 770px;
    }
    
    #branding {
        background-color: #fcc;
    }
    
    #navigation {
        background-color: #900
    }
    
    #content {
        background-color: #090;
    }
    
    #siteinfo {
        background-color: #009;
        color: #fff;
    }
    </style>
    
</head>

<body>

<div id="branding"><h1>some header stuff here</h1></div>

<div id="navigation">menu here<br><br><br>all the way!</div>
    
<div id="content">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis feugiat. Curabitur condimentum ligula imperdiet lectus. Sed justo. Suspendisse faucibus. Morbi sit amet diam. Phasellus egestas elit ac ante. Suspendisse sed tortor. Mauris vel nunc et risus pharetra elementum. Phasellus accumsan risus non arcu. Phasellus mollis eros id lorem. Sed nec felis. In eget diam fringilla risus accumsan malesuada. Cras urna neque, convallis quis, consequat sed, tristique at, metus. Nulla tincidunt, lacus in feugiat posuere, diam pede mattis nisi, vulputate feugiat massa justo et arcu. Integer pretium tellus et dui.</p>
    
    <p>Vivamus sit amet lectus. Sed lorem tellus, sagittis vel, volutpat eu, sodales at, tellus. Nunc quis ipsum et erat malesuada suscipit. Integer urna mi, feugiat et, lacinia eu, suscipit nec, nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam iaculis magna eget nunc. Curabitur aliquam vestibulum enim. Duis mattis varius leo. Vivamus vel turpis. Quisque lectus massa, euismod mattis, aliquam at, feugiat at, massa. Vivamus eget enim eget felis congue fringilla. Phasellus nec nibh eget lectus pretium ullamcorper.</p>
    
    <p>Nullam eleifend. Fusce sed nunc. Ut consequat. Etiam interdum massa. Nulla aliquam, dui quis mollis eleifend, est massa pretium justo, a porttitor pede tortor at velit. Morbi tellus sapien, condimentum eget, sollicitudin nec, faucibus pretium, velit. Morbi eu odio scelerisque metus porta venenatis. Aliquam erat volutpat. Curabitur convallis, tellus eget scelerisque euismod, metus ligula molestie elit, a varius risus nibh sit amet mi. Mauris erat est, fringilla sit amet, pellentesque eget, dapibus vel, augue. Aliquam justo quam, varius non, ornare sed, lobortis sed, ante. Morbi rutrum.</p>
</div>

<div id="siteinfo">and some copyright bla bla here</div>

</body>
</html>

Absinthe Minded · #5 (**permalink**) Sep 24th, 2007, 20:42

Hi karinne,

Thanks for your suggestions.
I've been looking for pictures but somehow never find the right ones, they end up looking tacky, so I haven't bothered.

Also, I'm new to this and I'll have problems getting the layout right - I'll need more time to source and place the images.

I'm using Dreamweaver MX at the moment and I rely pretty heavily on it doing the coding for me - I've just gone with the default doctype. I do mess around with the code, just to see what is does and I have some success with editing it.

I just wanted a more professional site than the old one and I think I've achieved that (wasn't hard though, eh?)

After a while, I'll be able to fine tune stuff and hopefully make a better job of it all.

I think I might just take some of my own photos, maybe some macro shots of components and connectors and then place them in a wide screen format (all the way accross the screen but not too high), in place of the horizontalk rule that separates the page title from the rest of the text. What would you think of that? Should be easy to place as I won't need to wrap any text around it.

As for the p's, I get these whenever I press return twice, to break up the text. I tried deleting them but I just lose all my CSS formatting.

Anyways, I'll keep at it and try to improve the code and add some pictures.

Thanks for your help, it's all good.

Nick.

P.S. Just seen your portfolio - WOW, maybe I'll jack this in and just let you do it

.

jonnymorris · #6 (**permalink**) Sep 24th, 2007, 21:16

Quote:

Originally Posted by Absinthe Minded

I'm using Dreamweaver MX at the moment and I rely pretty heavily on it doing the coding for me - I've just gone with the default doctype. I do mess around with the code, just to see what is does and I have some success with editing it.

I don't want to tread on anybody's toes here but suffice to say you've just been given an excellent and complete HTML page - just paste the code into a .html plain text file, put the text from one of your pages in place of the random stuff and then view it in a web browser. You may be amazed at how simple this coding lark is, especially for a simple layout like yours. You wouldn't even need to use Dreamweaver, just a plain text editor will do the job. I find that Dreamweaver can be counter-productive sometimes and is not a good tool to learn code with, it's main strength is in creating and updating websites quickly.

The next step would be to read some of the beginner tutorials in these forums, they've helped me a lot!

Absinthe Minded · #7 (**permalink**) Sep 24th, 2007, 21:36

Hi jonny,

Yeah, first thing I did was to stick it in a text doc and rename the extension to .htm; looks great too!

I agree with you about DW being counter productive, I'm really going to try and learn some about HTML - hard going with the kids, 2 jobs, blah, blah, blah - but I'll get there.

At least for now I have a (not bad looking site), that's HTML and CSS validated - a long call from the original one!

As ever, thanks for your suggestions and encouragement!

Nick.

P.S. Links now updated as per your suggestion, I think it's much better and isn't it easy with CSS? Glad I learned that.

MikeHopley · #8 (**permalink**) Sep 24th, 2007, 22:24

Quote:

Originally Posted by jonnymorris

A simple link to a printer-friendly version of that page is a quick and easy solution.

Another solution is to provide a print stylesheet.

alexgeek · #9 (**permalink**) Sep 27th, 2007, 23:32

Could someone send link?
critique box has gone

Absinthe Minded · #10 (**permalink**) Sep 28th, 2007, 21:29

Hi alex,
Hmmm, that's odd!
It's here: http://www.easypeasypcs.co.uk/new_site/

Cheers,
Nick.

Absinthe Minded · #11 (**permalink**) Sep 28th, 2007, 21:30

Mike, the CSS idea is a good one - I must create one.

Thanks,
Nick.

alexgeek · #12 (**permalink**) Sep 30th, 2007, 08:47

It's looking quite good.
I think it's a little wide though.
maybe it just going across, 700/800px ?

Absinthe Minded · #13 (**permalink**) Sep 30th, 2007, 11:13

Hi alex,

Glad to hear that somebody likes it!
I'll try out the 7-800 pix width and see how it looks. Busy fitting a new kitchen at the mo but will post here when I've done it.

Also, (to all of you), re the printer friendly pages. Should these just be in text, or should I include an image for the banner? Any other ideas welcome. I want to make the print friendly pages look good without filling them up with pointless colour.

Cheers all,
Nick.

alexgeek · #14 (**permalink**) Sep 30th, 2007, 22:47

Don't bother with a banner
It's like using readers ink for a pointless advert. if you get me

Lchad · #15 (**permalink**) Sep 30th, 2007, 23:59

Hey, the site is pretty nice!
You've gotten great advice above so when you schedule frees itself you have some things you can work on!

If you are going to use images as your links, have a set of text links at the bottom so you can at least get some SEO benefits.

I'd also like to see you bring in the margins a bit. Or add padding to the edges because a site needs a little breathing room.

Yup.. a macro or components photos would help with raising the "interest level" of the site.

Nice improvement!!!

alexgeek · #16 (**permalink**) Oct 1st, 2007, 00:03

Quote:

Originally Posted by Lchad

If you are going to use images as your links, have a set of text links at the bottom so you can at least get some SEO benefits.

Or have text in a span set to display: none ?

Absinthe Minded · #17 (**permalink**) Oct 12th, 2007, 01:00

alex, lchad - great to have your comments.

Kitchen is coming along now so I've spent some time shopping for and adding some images. Take another look and tell me what you think please.

As for page width - I'm thinking of sorting a fluid design for it, but I've no idea of the code, or CSS.

Great advice re: the SEO benefits, I never thought of that.

So, jobs are - SEO and page width... (and the dull kitchen), I'll be back ASAP.

Cheers,
Nick.

alexgeek · #18 (**permalink**) Oct 12th, 2007, 07:10

Centered text is awful, put your text in a div (say 800px wide), and the center the div with the text aligned to the left.
The code would look like:

Code: Select all

#content {
margin: 0 auto;
text-align: left;
width: 800px;
}

Try to use longer paragraphs also.
Don't bother with the valid css and html either.

jonnymorris · #19 (**permalink**) Oct 12th, 2007, 08:19

There is a little trick you could use with your links, a CSS property which I believe can be used to add a glow to an irregular shape (i.e. your graphical links). Perhaps someone can fill in the gaps as I've never used it myself, and can't find the page I saw it on. At the moment your links look a bit static. The style has come on a lot though, good work!

Absinthe Minded · #20 (**permalink**) Oct 12th, 2007, 11:03

Hi alex,

Thanks for your comments as usual - why is centered text awful and what will it look like if I put it in the div as you suggest? Not saying I don't agree, I just wondered why you'd change it.

I'm hoping to add textual (is that a word), content so that should sort the paragraph length.

The validation lark took me forever so I'm leaving that in! Unless there's a really good reason not to. I put the links in originally to add some colour with something relevant, but then I had to validate all the pages too!

Cheers again,
Nick.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
EASY PEASY Displaying frame address in another frame question	molotov	JavaScript Forum	3	Nov 20th, 2007 17:29
bluefuzz (resubmission no2)	bengtec	Free Web Site Critique	24	Sep 24th, 2007 15:52
bluefuzz (resubmission)	bengtec	Free Web Site Critique	16	Sep 21st, 2007 16:37
easy	dean bob	Introduce Yourself	6	May 10th, 2007 21:31
is there an easy way to do this???	brock	Starting Out	2	May 7th, 2007 15:42

		Webforumz.com > Main Forums > Design Your Website > Free Web Site Critique
Easy Peasy PC's - resubmission.