Need a Critique and Advice on my Site to Make it Visually Appealing

The image is 950px by 523px, being scaled down to 80px by 80px. That’s distorting the image by changing the aspect. To keep the aspect correct, it should be around 146px by 80px.

But that image is 856kB in size, which is huge for a logo. You don’t want to make folk download that, especially if they’re on mobile or a slow connection. Here is the same PNG image resized to 145px by 80px:

That reduces the file size to 20.5kB. Converting it to a GIF format reduces the file size still further, to under 9kB.

I see no difference between the two, but those using an HD monitor might, so perhaps wait for a second opinion on which of those is better. Even 20.5kB is a vast improvement on 856kB. :smile: Hopefully, you can simply download and use one of those - unless @SamA74 or somebody else feels a different size would look better?

2 Likes

Okay, I made some changes to my site according to your suggestions. Can you please check out my site and see how well everything looks now?

The good news is, I prefer the light background and neutral colours. Much better.
The bad news is, there are some problems to address.
The logo image is not showing, check that your image url is correct or that the file is there.
The h1 is black text on a black background making it invisible.
The ul is black text on a dark grey background giving poor contrast.
There are still some validation errors and some improvements to be made to the code.

1 Like

Glad I am making some progress. That is good news!

Now, when you say the ul, are you referring to the navigation list?

Thanks so much for all the time you have taken to help me to make my site visually appealing.

No, the other ul, the one that starts with “We produce”.
The navigation is OK on dark grey because the links are white.

As for the h1, I did code the text as black. Is there a different color I should make the text for the h1 that would have a good visual appeal?

I’ve styled the ul on all pages where there is a list as black. Is there a better color I can choose?

Thanks again.

If you want to keep the black background on the h1 you need to make the text a light colour. Any light colour would work, it could be white or something else, for example a pale blue like#add gives it a bit of colour, but not too vivid.
Also with it having a background, it would benefit from a little more padding. padding: 0.5em will look better.

Because the background is a dark grey, the text need to be a light colour just like the h1. It does not have to be the same as the h1, but if it were it may seem more consistent. Too many different colours is bad.

Hi again. Today, I am making the finishing touches on my site based on the last suggestions I have received. I do have one question concerning the h1.

Now, I know you have suggested I add some padding to the h1 element on each of the pages to make it have a better visual look. So shall I add borders as well or just padding like the example below? (I used ( for < and ) for > so the code will be more readable in this post. I also put the code in between ‘’’ symbols.)

<a name="content"><h1 style="background-color:#000000;font-family:verdana;font-size:100%;color:#ADD8E6;padding:0.5em;">Waldorf PC: and Consultancy: Where Quality Is a Number One Priority</h1></a>

That is obviously just my h1; however, I have styled all of my headings using the background color element.

Another possibility is that I can omit the background color styling and just style these headings as I do all my paragraph elements. Will that work?

Thanks for allowing me to pick your brain.

Does the code in the above post for the headings look fine, and is it going to work well for visual appeal?

Apologies for not getting back to you sooner. I got distracted and then forgot all about it.

That blue on the black makes a nice, striking headline, in my opinion.

I’ve looked in detail at your page, and there are a number of issues you really need to clear up, including validation errors (as mentioned before). Also, some of your coding practices are very outdated, such as the use of inline styles. You really should move all styles to an external stylesheet, which also makes it much easier to maintain and update the site.

I’ve made a valid version of your index page, with the styles moved to an external style sheet. It uses the blue heading, but the rest is taken from the link in your first post. The logo image is broken on that page, so I used the GIF version I created previously. I have put that and the Copyscape image in a folder called images.

index.htm

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Waldorf PC - Home</title>
<link href="waldorf-styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<p><img class="logo" src="images/logo.gif" alt="Waldorf PC and Consultancy Logo Which Says Access for Everyone" width="145" height="80"><a href="#content">Skip to Content</a></p>

<ul class="nav">

<li><a href="http://www.waldorfpcandconsultancy.com/index.htm">Home</a></li>

<li><a href="http://www.waldorfpcandconsultancy.com/searchengineoptimizationservices.htm">SEO</a></li>

<li><a href="http://www.waldorfpcandconsultancy.com/contentproductionservices.htm">Content Production</a></li>

<li><a href="http://www.waldorfpcandconsultancy.com/training.htm">Training</a></li>

<li><a href="http://www.waldorfpcandconsultancy.com/technicalconsulting.htm">Technical Consulting</a></li>

<li><a href="http://www.waldorfpcandconsultancy.com/news.htm">News</a></li>

<li><a href="http://www.waldorfpcandconsultancy.com/webaccessibilityconsulting.htm">Web Accessibility Consulting</a></li>

<li><a href="http://www.waldorfpcandconsultancy.com/contact.htm">Contact</a></li>

<li><a href="http://www.waldorfpcandconsultancy.com/about.htm">About</a></li>

</ul>

<h1 id="content">Waldorf PC and Consultancy: Where Quality Is a Number One Priority</h1>

<p class="tagline">Waldorf PC and Consultancy is your number one resource for attaining guaranteed success hands down.</p>

<p>We are a 
multipurpose company seeking to meet a wide range of needs, making it so
 business people can come to one place and find all the tools they need 
in order to achieve their goals.</p>

<ul class="services">

<li>We produce <a href="http://www.waldorfpcandconsultancy.com/contentproductionservices.htm">top quality content</a>
 that will totally enhance your professional image, as our content is 
one hundred percent unique, error free, and engaging to readers.</li>

<li>We provide top-of-the-line <a href="http://www.waldorfpcandconsultancy.com/searchengineoptimizationservices.htm">search engine optimization and search engine marketing services</a> to clients in numerous industries.</li>

<li>We offer a wide array of <a href="http://www.waldorfpcandconsultancy.com/training.htm">training</a> courses to enhance success.</li>

<li>We consult with businesses regarding how they can make <a href="http://www.waldorfpcandconsultancy.com/webaccessibilityconsulting.htm">web technologies accessible</a> for persons with disabilities.</li>

<li>We offer <a href="http://www.waldorfpcandconsultancy.com/technicalconsulting.htm">technical consulting services</a>
 to help businesses find solutions that will enable them to stay 
connected and maintain a strong presence in their respective industries.</li>
</ul>

<p>We are 
always adding more services, so you will want to check back often. 
Waldorf PC and Consultancy is devoted to keeping up with the latest 
online business trends, facilitating us to provide services that will 
allow you to always be ahead of your competition.</p>

<p>&copy;2007-2016, Waldorf PC and Consultancy</p>


<p><a href="http://www.copyscape.com/originality-check/"><img class="copyscape" src="images/cs-wh-3d-120x60.gif" alt="Protected by Copyscape Originality Check" title="Protected by Copyscape Plagiarism Checker - Do not copy content from this page." height="60" width="120"></a></p>


</body>
</html>

waldorf-styles.css


body {background-color: #ffffff;
     font-family:verdana;
     font-size:100%;
     color:#000000;
     line-height: 1.5;}
     
 .logo {padding-right: 0.5em;}
 
 .tagline {font-weight: bold;}

h1 {background-color:#000000;
    color:#ADD8E6;
    font-size: 1.5em;
    padding:0.5em;
    }

ul.nav {list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }

.nav li {float: left;}

.nav li a {display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    }

.nav li a:hover {
    background-color: #111;
    }

ul .services {list-style-type:circle;}

.services li {padding-bottom: 0.5em;}

.copyscape {border: 0;}

I’ll try to indicate what changes I made, beyond simply removing the inline styles.

I added a doctype declaration and language, and changed the charset to utf-8, which is generally recommended, and also added the viewport meta tag for mobile devices.

The “Skip to content” link seemed a bit cramped where it was, so I’ve moved it to sit to the right of the logo, rather than above it.

The first paragraph <b> tags have been removed, and the bold font achieved with CSS. (A class of “tagline” added to the paragraph and styled as font-weight: bold.)

The <br> tags used for spacing have all been removed and replaced by a line-height declaration, and padding where extra spacing is required.

Class names added to the two lists so that they could be styled differently. The navigation list retains its dark background and white links, while the list of services is styled in accordance with the rest of the page - dark text on a white background.

I removed the obsolete “border” attribute from the Copyscape image, and set it in CSS instead.

I’ve added <p> tags to the copyright declaration and the Copyscape link as the easiest way to ensure both sit nicely on a new line with reasonable spacing. (I had to change the class name on the Copyscape image, because for some reason it wouldn’t show with the existing one. Somebody else may be able to explain to us both where the problem lies.)

There were a couple of typos which I fixed; a stray colon after PC in the h1 heading, and “toos” instead of “tools” in the second paragraph. There was also a malformed link in the fourth bullet point which I’ve fixed.

Hopefully that all makes sense. If you have any questions, or need help converting the other pages to use an external style sheet, please ask.

3 Likes

Wow! You really did take a lot of time and put in a lot of hard work and effort to help me. For this I am deeply touched! I never expected you to go above and beyond like this. I honestly do not know what to say.

Admittedly, I am not certified in HTML5 or CSS3, the most modern version of CSS. I did start to study the tutorials for those languages; however, life got so busy, and I unfortunately dropped my studies. I currently hold certs in HTML4.01, CSS2 and JavaScript.

I do desire to take time out to learn more and pursue my certifications once my busy schedule allows. I definitely will need to do this to keep up with current coding practices. I need to carve out some time. You guys have totally motivated me to go after these goals.

Now, I am familiar with using one external CSS stylesheet and pointing all of the web pages to it. I did that for one project that I worked on for a client in the distant past; however, I was always used to working with inline styles when it came to my own work. What I will likely end up doing is taking you all’s suggestions and creating a generic external stylesheet that all of my web pages can point to. I will standardise it to make my life easier.

Unfortunately, I will not be able to go totally modern just yet but absolutely do plan to once I teach myself enough. Then, I will be giving my website a total do over.

I appreciate you guys so much! If it were not for you, my site would still look like a total visual mess without any appeal for my prospects. I would not be close to opening my company at all and making my dreams come true.

1 Like

HTML5 and CSS3 are really not that different to HTML4 and CSS2.1, so it probably wouldn’t take you long at all to get up to speed. HTML5 introduces some new elements, but you don’t need to use them if you don’t want to. The page I wrote validates as HTML5, but doesn’t include any of the new elements; I kept your original structure.

One change I forget to mention above was to the target for your “skip to content” link. You’d wrapped your heading in an anchor tag with a "name=“content” attribute. It’s no longer necessary to do that. All current browsers support simply adding an id to an element and using that as the target, so I removed the <a> tags and added id=“content” to your <h1>. It works exactly as before, with a little less code.

When you’re ready to update your other pages, do feel free to ask for help. It’s what we’re here for.

Hi:

I am going to request your help converting all of my other pages. I seriously appreciate this as you do not have to do this at all. All of you are quite kind.

What I want to do is convert all my other pages and make a global stylesheet that will apply to the entire site. I am looking at your examples provided, and I am working from there.

Any help you offer is greatly appreciated.

1 Like

A wise move. Removing the in-line styles and using a global CSS will make maintaining the site much easier with consistent styling throughout the site.

1 Like

Whew! I spent the latter part of today updating and changing my site over to the new structure. I followed your examples which I am definitely thankful for. I will likely be uploading my revised site, including my global stylesheet, tomorrow. When I do upload the files, I will post here and ask for another critique.

Thanks so much to all of you again. My site would not have been a good success without your visual feedback.

4 Likes

We’re happy to help - it’s what we’re here for. :smiley: (It’s nice to have somebody who takes on board suggestions and genuinely wants to improve their code, rather than just cobble together a quick fix. :wink:)

Let us know when the new version is on-line.

3 Likes

I finally got my site uploaded! I feel like I can celebrate!

I hope all is well with everything.

Please let me know what you think.

1 Like

Apologies for the late response (again). The site is looking good, so congratulations there.

Just a couple of small points. Your logo image is huge and takes a long time to load. It’s 950px × 523px in size - and over 850kB - being scaled down to 145px × 80px. I provided two scaled-down images in post #18; you should really use one of those, or create your own at the correct size.

The text goes right up to the edge of the browser window, which makes it look crowded. Setting right and left padding of around 1em on the body will help that. A more complex solution would be to give the entire contents a wrapper div, and set a width of maybe 96% on that, with a max-width of, say, 60em to prevent the lines of text becoming too wide to read comfortably. (One drawback with that is that it will cause the navigation bar to wrap onto two lines and it might require a little more styling to look good. If you want to go down that route, we can help if needed.)

I didn’t proof-read the site, but I did notice a typo on your training page. I’m pretty sure the heading which reads “Training Schedule for the Developing Accessible Wet Content Course” should really be referring to a “web” course!

You do need to run your pages through the validator - see post #4 - as there are a few errors. If you need help fixing any of them, please ask.

I hope that helps.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.