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

Design & UX
1

I am wanting some helpful advice and critiques on my website and its code. You see, even though I am a certified web developer, have built my own website from scratch and possess web development certifications in HTML4.01, CSS2 and JavaScript, I am totally blind so will need some help making my site visually appealing. Here is exactly what I am asking.

  1. What fonts should I use?

  2. What color should the font and background be so that it is easy on the eyes and appealing to read? I have tried researching this but am getting conflicting and unclear answers.

  3. What color should the headings be versus the body font?

  4. Does my navigation bar look okay?

  5. Do you have any suggestions as to how I should tweek my code?

My site can be found at www.waldorfpcandconsultancy.com

I thank you so much in advanced. I want to run this business in addition to my fulltime day job that I really love. I think it would be cool to put my talents to use in other venues.

If you want to learn more about how blind people use a computer, check out www.nvda-project.org where you can read about and download a screen reader for free. Also, you can go to www.w3.org and click on Accessibility from the home page.

2

Hi @WaldorfPC. The link in your post is invalid. Did you perhaps mean waldorfpcandconsultancy.com?

3

Yes, you are right! I am so dumb! I wrote the domain I originally thought of using instead of the actual one. LOL Thanks so much.

1 Like
4

Good - I’m glad we got that sorted out. So a few first thoughts here.

I have read somewhere (no idea where - it was a long time ago) that in general, people find it easier to read sans serif fonts on a screen. That’s certainly true for me. The odd heading or quote in a seriffed or fancy font is fine, but for blocks of text I’d recommend sticking to sans serif, as you have.

Personally, I find black/dark backgrounds very tiring on the eyes and difficult to read. I know that’s not a view shared by everyone, but I think dark themes tend to appeal to a younger audience. So unless you’re aiming your site specifically at a young audience, I’d go with a light background. Again, small areas of light text on dark background - such as your nav bar, is fine, but not the whole page.

The blue #0000FF text you have on the page is very hard to read against the black background, as there is insufficient contrast. WebAIM has a very good tool for checking colour contrast: http://webaim.org/resources/contrastchecker/

[quote=“WaldorfPC, post:1, topic:224758”]
What color should the headings be versus the body font?
[/quote]There’s no hard-and-fast rules here; it would depend on the overall design. Mostly I tend to use the same colour for both. (Two many colours on a page can look disjointed and jarring.)

It looks fine to me. The change in background colour on hover is only slight and not very noticeable (to me), but that’s a minor detail.

Always run your code through the Validators to check for errors: https://validator.w3.org/ (for HTML) and http://jigsaw.w3.org/css-validator/ (for CSS).

Also, I notice you are using a HTML 4 transitional doctype. While there’s nothing actually wrong with that, it’s very out-of-date. You should really be looking at getting to grips with the more modern specifications of HTML5. (The differences are not huge, so it’s not that daunting a task.)

I hope that’s helpful for a start.

Best of luck with your initiative. The more we can do to bring accessibility issues into mainstream web development discussions, the happier I am. :smiley:

5

I first of all want to thank you for providing your feedback. You are awesome!

Now, just to make sure I have this right, I do not have to make any changes to my navigation bar or the CSS to style it?

I will be removing the red colored headings and making them the same color as the text on the rest of the page, and I will make the background white with keeping the text blue.

Hope this will work. :slight_smile:

1 Like
6

In my opinion, no. Unless you want to provide clearer visual feedback on hover. As I say, the change in background colour is quite subtle, and might not be noticeable to somebody whose sight is not great.

That sounds like a good move.

The current blue #0000FF is a bit vivid for an entire page of text. You might want to tone it down to something like #000086 or #000065, which are still blue, but less vibrant.

If you don’t mind me asking, have you always been blind? I’m just wondering if you can remember and imagine colours, or if you’ve never seen them.

7

I do see one issue with the nav bar. The first item “Home” is slightly obscured by the image “Access for Everyone” which is positioned absolutely before the nav.
You could either give the nav a top margin to clear the image or change positioning mode to keep it in the natural flow.
I’m also curious about the images position, it has negative top and left values which make it overflow slightly off the page. I’m guessing it is has the absolute position to obscure the “Skip to Content” link, but part of that link is visible which seems a bit messy.
If that were your intention, it could possibly be better achieved by positioning the link rather than the image.

The blue text is a little confusing because that colour is the default colour of links which people naturally associate with being a link, whereas your links are more of a default text colour, white on black or black on white. So it is like the roles of the colours have been reversed.
Though there is no rule that links must be a certain colour, people do take visual cues, associating certain colours with certain roles on a page.

1 Like
8

To do this, I would place the link after the image and apply the following classes with this css:-

.topimg {
  position: relative;
  width: 5em;
  height: 5em;
  z-index: 10 /* ensures the image is on top */
}
.skip {
  position: absolute; /* takes the link out of the flow */
  top: 0;
  left: 0;
  margin: 8px;
  z-index: 0 /* places the link behind the image */
}

In the html I would add a break to the link text to shorten the width to fit behind the image.

<a class="skip" href="#content">Skip to<br> Content</a>

I changed the image size to the em equivalent size, so if someone has their default font size larger than normal (16px), the image will expand too, to cover the link.

Now the image is in the flow, so the nav will go below it.

1 Like
9

I have seen for a short time in my childhood so I do remember some colors.

Now, as for the font sizing, I have my font sized at 100%. I was told a long time ago that this was best. What is your opinion on that?

10

I first of all want to thank you for taking the time to provide sample code.

Now, I would like the Skip Navigation link to remain in the flow and not be hidden. I’d like the logo at the top left of the page and all the items on the navigation bar to be visible. Do you have any suggestions for this as far as CSS is concerned?

Thanks again in advance.

11

I believe that is the best approach. Then use em or rem to set any variation in size in headings for example, and avoid px for fonts. Anyone who wants to change the browser font size will be free to do so.

Where would you like the skip link to appear?
As things are, all three elements are partially obscured. The image is slightly off screen, the skip link is mostly covered by the image and the nav is slightly covered by the image.

1 Like
12

I would remove the positioning properties from the image to keep everything in flow and on screen. then move the skip link to come after the image.
With everything in normal flow it should all be fully visible.
Absolute positioning should only really be used when you want overlapping or displaced elements. That’s why I assumed you wanted to visually hide the skip link.
The image will not need css in this case, the size can be set via the html attributes which is generally better. Pixel values will be fine, as it is not trying to cover any text object.

13

[quote=“WaldorfPC, post:9, topic:224758”]
I have my font sized at 100%. I was told a long time ago that this was best. What is your opinion on that?
[/quote]I agree with @SamA74 that this is the best policy. It respects your visitors’ browser settings, rather than trying to impose a size on them.

[quote=“SamA74, post:11, topic:224758”]
the skip link is mostly covered by the image
[/quote]My apologies - I didn’t even see that link. (As I said, there is very little contrast between the blue and the background.)

14

So just to make sure I understand correctly, I should remove all the CSS from the image and strictly use HTML?

Thanks so much again. I do really appreciate all of the help you are giving me.

15

If you only need to set the height and width, use the html attributes for that. By all means do use css if required. Larger image will require css to be responsive, but at 80px that is not a concern.
Using the height and width attribute in an img tag helps the browser allocate screen space and render the page layout before the image loads, this avoids the layout “jumping around” while large images load.
I’m not a fan of in-line styling, keeping the styles in a global CSS is much easier to maintain throughout pages and the whole site.

16

Okay, thanks for that. I will be completely removing the CSS from the image and using HTML properties to set height and width. Now, would you have any suggestions as to what PX I should set the height and width of the image for the best visual appeal?

17

I should let you know this is just a simple logo.

18

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
19

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?

20

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