Member Avatar for zabador

hello, I am trying to get my online business off the ground. We have a lot of good ideas however being the hardware geeks we are, we are hardly artists or web designers.

We could really use some oppinions on how to improve the design before we change our current to this one.
Thank you in advanced.

  • 5 Contributors
  • 6 Replies
  • 104 Views
  • 2 Weeks Discussion Span
  • Latest Post Latest Post by hbk619

Dani AI

Generated

Brief expert summary and practical fixes that build on points raised by , and : primary issues to address are the navigation behaviour (hover gaps and touch/keyboard support), image asset strategy and visual hierarchy (active states, banner size, readable fonts), and cross-resolution testing. The following snippets and notes aim to give concrete, low-risk changes that work across browsers and make the site easier to test and iterate.

A robust CSS-first dropdown (avoids the hover-gap that causes menus to close) and a small JS fallback for touch devices/older browsers:

nav li { position: relative; }
nav li > a { display: block; padding: .5em 1em; }
nav li ul {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  z-index: 9999;
  white-space: nowrap;
  margin-top: -1px; /* removes 1px hover-gap */
}
nav li:hover > ul,
nav li:focus-within > ul,
nav li.open > ul { display: block; }
// touch/click fallback: parent li should have class "has-submenu"
document.querySelectorAll('nav .has-submenu > a').forEach(function(t){
  t.addEventListener('click', function(e){
    var p = this.parentNode;
    var open = p.classList.toggle('open');
    this.setAttribute('aria-expanded', open);
    e.preventDefault();
  });
});

Image and layout guidance: convert logos/illustrations to SVG where possible; export photos at appropriate sizes and use srcset/sizes so mobile gets smaller files; include explicit width and height to prevent layout shift; lazy-load long pages. Example responsive image pattern:

<img src="banner-800.jpg"
 srcset="banner-480.jpg 480w, banner-800.jpg 800w, banner-1200.jpg 1200w"
 sizes="(max-width:600px) 100vw, 1200px"
 width="1200" height="300" alt="site banner">

Accessibility and testing notes: add visible focus styles, use ARIA attributes on expandable controls (aria-expanded, aria-haspopup), and test keyboard-only navigation. For implementation patterns and keyboard behavior see WAI-ARIA APG (menubutton) and CSS :focus-within docs: WAI-ARIA APG menubutton and MDN :focus-within.

Recommended Answers

All 6 Replies

Member Avatar for MidiMagic

The dropdown menus are not under the tabs that open them, so they close before you can get the cursor to them.

Member Avatar for zabador

What browser and resolution are you using?

Member Avatar for Racoon200

I would suggest that your "little man" image would be a .png, because gif's dont support further than 1-bit transparency, png's do (use photoshop/gimp to soften the borders). Then the image would look more clean. It would be usefull if you animated it with javascript instead of with flash, so the image would have a one by one degree rotation.

It would be nice if you added a different style to the active tabs, so people would know where they're standing.

The rest is exellent for me.

Member Avatar for somedude3488

Overall the site isn't bad. The banner is a bit big though and i would never use times new roman font for anything. I suggest arial for smaller font and arial black for bigger font. Your drop-down menu system is quite messed up. Your images need to be of better quality as well. One thing i do like is that you have kept the number of colors to a minimum. This makes the site look more professional and appealing to the customer. Your homepage is quite long and i suggest adding a "TOP" link towards the bottom. I would do this for all pages that are like that or add a footer.

Member Avatar for zabador

thank you kkeith29, i will take that all under advisement. I am working on the drop down menu problem however i do not have much experience in javascript/html and am have trouble making it compatbile with other resolutions and browsers. I do have quite a bit of programming experience in C languages, and so i understand the mechanics of programming however with this language and functions being reletivly unknown to me the proper method escapes me.

any help with this would be helpful

Member Avatar for hbk619

>
The webpage cannot be found


Not a good sign :-\

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.