On my website,  https://www.kirkbymicrowave.co.uk/

I have put a logo in the top left, which I want to keep. At the minute, the colours of the heading are

H1=red

H2=green

H3=blue

H4 = black

That looks pretty horrid I know, but I'm looking for suggestions for colours (preferably in #xxxxxx hex format), that would look reasonably well with the logo.

The menu structure has its own colour scheme too. I'm open to changes to that too, but I'm not so bothered about that, as I don't think it looks too bad. Bland yes, but not too alful.

I stuck a test page here, with all 4 headings in

https://www.kirkbymicrowave.co.uk/index6.php

Dave

 

did you miss my pdf from your logo post? #32B8B8

why would you have different colours for different  headings?! establish hierachy with font size (and weight) and use one colour or simply the dark grey

Web 1920 – 1.pdf

Sorry, I did miss it.

I copied your colour suggestion.

How do you get that green bar along the bottom? It looks quite nice, but I have no idea how to do it.

I guess I need to get a book on CSS. I just bought a book on WordPress, and some shopping cart add-on to WordPress, but now I am not so convinced I want to take that route. As others have pointed out, the sort of people my website are aimed at, are probably not going to be too fussed about the site, as long as it is functional.

Dave

The green bar at the bottom is a footer area. You can do the gradient colours with a bit of css.

this funky tool does it all for you: https://cssgradient.io/

 

linear gradient from 598080 -> #00FFFF

Cheers, I will give that a go. I have the kirkbymicrowave.com domain, which is hidden to Google, and only view-able on those on a certain (fairly large) range of IP addresses. I'll give it a try later on a test site. I don't fancy trying to implement that on a site live!

Dave

Hi

I had a go at making the boarder on a test site I set up

http://www.kirkbymicrowave.com/

thatś hidden from robots. The main site is still at https://www.kirkbymicrowave.co.uk/

I run into the problem that the footer gets in the way of the last few lines of the text in the page. This is what I have in the footer.php file, which gets in included on every page. The stuff related to the footer starts about half-way down.

<p>
<a href="https://www.facebook.com/Kirkby-Microwave-187942778457802/"><img src="/Facebook-logo.png" alt ="Kirkby Microwave on Facebook" /> </a>
<a href="https://www.linkedin.com/company/kirkby-microwave/"><img src="/LinkedIn.png" alt="LinkedIn-logo" /> </a>
</p>
<p style="text-align: right;" >
<a href="https://validator.w3.org/check?uri=referer">H</a>
<a href="https://jigsaw.w3.org/css-validator/check/referer/">C</a> </p>
<div class="footer">
  <p style="margin-left: auto; margin-right: auto; width: 50em; color: white; font-size: 1em;">Legal and other information<br/>
  Kirkby Microwave Ltd is registered in England and Wales, company number 08914892.<br/>
  Registered office: Stokes Hall Lodge, Burnham Rd, Althorne, Essex, CM3 6DT.<br/>
  EORI (Economic Operator Registration and Identification) number: GB023275054000<br/>
  Telephone: +44 (0) 1621 680100. e-mail: drkirkby@kirkbymicrowave.co.uk </p>
</div>

 

In a .css file, I have this.

.footer {
background: rgb(0,255,255);
background: linear-gradient(270deg, rgba(0,255,255,1) 0%, rgba(89,128,128,1) 100%); 
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 100;
}

Any ideas how I might improve matters, so the footer does not get in the way? I suspect that I have coded the paragraph wrong too, as I did not know any better.

PS, the site you gave me a link to (https://cssgradient.io/) is quite impressive.

 

Don’t have a fixed position footer. Let the browser manage how it displays (below the main content) and visible when you scroll.

Can you tell me know how to avoid having the footer fixed, but to let the browser manage it. I don't know how to do that. I looked on the web to see how to add  a footer, and came up with the way I did it, but I can see that works poorly.

Dave

Edited July 18, 20188 yr by drkirkby
typo

Just do this:

<footer>
  <p>Legal and other information<br/>
  Kirkby Microwave Ltd is registered in England and Wales, company number 08914892.<br/>
  Registered office: Stokes Hall Lodge, Burnham Rd, Althorne, Essex, CM3 6DT.<br/>
  EORI (Economic Operator Registration and Identification) number: GB023275054000<br/>
  Telephone: +44 (0) 1621 680100. e-mail: drkirkby@kirkbymicrowave.co.uk </p>
</footer>

footer {
background: rgb(0,255,255);
background: linear-gradient(270deg, rgba(0,255,255,1) 0%, rgba(89,128,128,1) 100%); 
}
footer p {
margin: 0 30px; max-width: 50em; color: white; font-size: 1em;
}

 

 

Edited July 18, 20188 yr by fisicx

Thank you. I think the site is looking a bit better than it did a few weeks ago, thanks to the help I have received here.

Personally I wouldn't have a gradient in the footer. But that's just me.

I would also add a menu with links to your about, legal, privacy and contact pages.

Also consider limiting the width of the main content. As it's for technically minded people aim for 16-18 words per line.

And increase the font size a tad.

And think about a full width header background colour. Look at how amazon do it.

In the main navigation made each top level item link to a new page - it's more intuitive. When I hover on Support for VNAs unless I know what those things are I won't know which one to click. But if you binned the dropdown and linked to a support page you could list all the support topics with a short explanation before a 'read more' link.

Consider maybe just having a single support page broken down into topic/products. Everything seems to be spread about over a number of places. Great if you know where to look but not so good for someone who has only just brought a VNA and doesn't know where to begin.

14 hours ago, fisicx said:

Personally I wouldn't have a gradient in the footer. But that's just me.

I'll think about that one.

14 hours ago, fisicx said:

I would also add a menu with links to your about, legal, privacy and contact pages.

Well, is the "About Us" pull-down menu not a set of links to legal, privacy, contact, and now bank details?

 

14 hours ago, fisicx said:

Also consider limiting the width of the main content. As it's for technically minded people aim for 16-18 words per line.

Surely that depends on what sort of device you look at it on.

14 hours ago, fisicx said:

And increase the font size a tad.

You surprise me with that comment. I was thinking it was perhaps a bit large. A look on Amazon for example finds most text smaller. Keysight, who sell VNA calibration kits too, have much smaller text on their page for one of their calibration kits

https://www.keysight.com/en/pd-1000002016%3Aepsg%3Apro-pn-85052B/standard-mechanical-calibration-kit-dc-to-265-ghz-35-mm?cc=US&lc=eng

 

14 hours ago, fisicx said:

And think about a full width header background colour. Look at how amazon do it.

I don't know how to do that, but I admit it looks quite nice.

14 hours ago, fisicx said:

In the main navigation made each top level item link to a new page - it's more intuitive. When I hover on Support for VNAs unless I know what those things are I won't know which one to click. But if you binned the dropdown and linked to a support page you could list all the support topics with a short explanation before a 'read more' link.

I'll see what others say about that one.

14 hours ago, fisicx said:

Consider maybe just having a single support page broken down into topic/products. Everything seems to be spread about over a number of places. Great if you know where to look but not so good for someone who has only just brought a VNA and doesn't know where to begin.

Based on experience, I find most people have some idea of what they want when they approach me. A VNA is not the sort of instrument you just go out and buy and not know much about one. Professional instruments range for a few thousand pounds to a few hundred thousand pounds - some might well be over £1.,000,000, but I am not sure about that.

Also, if someone looks on the "support on VNAs", they would know if they have just bought an Agilent instrument, an Anritsu instrument, a Copper Mountain instrument etc. The somewhat odd cases is HP, Agilent or Keysight, as originally HP made test equipment and many other things. Then test equipment and biomedical stuff was spit off to Agilent. Then the test equipment was split off to Keysight. I don't know how long Keysight will keep that name, before it gets split off once again.

The thing that seems to cause newcomers a bit of a headache is they buy a VNA with N connectors on it, so assume they need a calibration kit for N connectors. But the calibration kit should match the connectors on the device they are testing, not the instrument. I try to address that here

https://www.kirkbymicrowave.co.uk/FAQ/How-do-I-select-the-right-calibration-kit/

but I find people most confused about that topic.

 

 

The problem you have is you know all there is to know about VMAs but not everyone is the same.

They could be a researcher in a lab with the kit in front of them with a vague instruction from a supervisor to go get a widget and make it work. Your website needs to lead people to the information they need not assume they already know what they need. Hence my comment about the support page. A single page broken down into sections will give them a start. This can them lead on to other pages until they finally get to the 'how to' guide they need.

You linked to the calibration kit selection page but I'd never have thought to look in the FAQ page. My first port of call would always be 'support'. And in the FAQ dropdown you have General and Technical but both go to the same page which is very confusing especially as it's got sales in middle.

All the information is on the site - but you need to know where to look to find it. A simpler menu bar would help:

Home | Reviews | Sales | Support | Contact us

No dropdowns. Each link leads to a sub-page with links to deeper pages. Keep it simple.

To put a background behind the header, do the same as you did for the <footer>

Then set a max width for the main content to manage the number of words per line. The likelihood is most visitors will be using a desktop to access the site to build it for them.

Saw this: "This question has been answered in some other documents,..." but you don't tell me what documents or where to find them.

Edited July 20, 20188 yr by fisicx

Thank you for the suggestion. I can see where you are coming from, but it needs a pretty serious re-write. The main sellers of competivate products are the following companies, all of which are very large. At least Keysight has a turnover in excess of $1 billion / year.

Keysight https://www.keysight.com/us/en/home.html

Anritsu https://www.anritsu.com/en-GB/

Rohde&Schwarz https://www.rohde-schwarz.com/uk/home_48230.html

Rosenberger https://www.rosenberger.com/en/index.php

 

1 hour ago, drkirkby said:

Thank you for the suggestion. I can see where you are coming from, but it needs a pretty serious re-write.

Not really. It's just one page and the main menu you need to update. Everything else can stay the pretty much the same.

I took on board some of your suggestions, which are now at a test site

http://www.kirkbymicrowave.com/

That's hidden from Google with a robots.txt file.

The original site is at

https://www.kirkbymicrowave.co.uk/

I took the opportunity to change the name of a few URLs, and generally have a somewhat more structure directory layout. So there will be a good few broken links, but I think you get the basic idea.

 

Much much better. You are helping the lost and bewildered find the way to the information they need.

good job.

Okay, thank you for the comments. I'm make that test site the live one, once I have sorted out all the broken links, and put in all the redirects so there are not a ton of 404 errors. 

At the moment it is a struggle fixing the broken links, as when one if fixed, it generates a lot more!

Dave

 

 

Try this: https://www.screamingfrog.co.uk/seo-spider/

Will go find all those broken links for you

You should use 1 color for Headings with other sizes.

Personally, I would avoid using a gradient in the footer. I  also suggest including a navigation bar with links to your about, legal, privacy, and contact pages.

Consider restricting the width of the primary content as well. As it is intended for technically savvy readers, aim for 16-18 words per line and boost the font size slightly.

Consider a full-width header background color as well. Take a look at how Amazon does it. Make each top level item in the main navigation connect to a new page - it's more intuitive. If I linger over Support for VNAs, I won't know which one to click until I know what those things are. However, if you removed the dropdown and linked to a help page, you could list all of the support subjects with a brief description before clicking the "read more" button.

Consider having a single help page that is separated down into topics/products. Everything appears to be dispersed among several locations. Excellent if you know where to look, but not so useful for someone who has just purchased a VNA and has no idea where to begin.