Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8

Thread: Review our site

  1. #1
    New to the CF scene
    Join Date
    Mar 2019
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Review our site

    Hi,
    Would love any feedback on our website redesign here!

    There are still a few missing pages that we are finalizing, but would love any input on the overall design and functionality of the site. It's designed for a B2B audience. Feel free to provide blunt feedback good or bad!

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    8,035
    Thanks
    37
    Thanked 1,076 Times in 1,072 Posts
    Not about the design, which looks good, but about the hover effect. Looks like you have to fetch the second image and causes a delay. A little off putting.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New to the CF scene
    Join Date
    Mar 2019
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I notice it as well, but I'm not sure how to go about fixing it! It's via CSS not javascript, which might be part of the issue. Thanks for the feedback, I will play around with it.

  4. #4
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    8,035
    Thanks
    37
    Thanked 1,076 Times in 1,072 Posts
    This style sheet address:
    href="./css/css_cat_17.css"
    This just what needs to be replaced;
    Code:
    .image25 {
        background: url("../images/P08/08_094_JFF_2008Shoot_0095_c.png") no-repeat;
        background-size:cover;     background-color:rgba(246, 245, 246, 0.66);
    }
    .image25:hover {
        background: url("../images/P08/08_094_JFF_2008Shoot_0102_c.png") no-repeat;
        background-size:cover;     background-color:rgba(246, 245, 246, 0.66);
    }
    Hover image called on hover -Use this:
    Code:
    <style>
    .image25 {
      background-image: url("http://www.jffuniforms.com/website_2019/images/P08/08_094_JFF_2008Shoot_0095_c.png");
      background-size:cover;     
      background-color:rgba(246, 245, 246, 0.66);
    }
    .image25::before {
      content: url("http://www.jffuniforms.com/website_2019/images/P08/08_094_JFF_2008Shoot_0102_c.png");
      width:0;
      height:0;
      visibility:hidden;
    }
    .image25:hover {
      background-image: url("http://www.jffuniforms.com/website_2019/images/P08/08_094_JFF_2008Shoot_0102_c.png");
      background-size:cover;     
      background-color:rgba(246, 245, 246, 0.66);
    }
    </style>
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  5. #5
    New to the CF scene
    Join Date
    Mar 2019
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you! I'm also researching using sprites (put both images into a single png, and then just reference the coordinates of each part of the file), any thoughts/feedback on your approach versus sprites? All of the css is generated via php and the database, so both options are not a big deal to implement.

  6. #6
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    8,035
    Thanks
    37
    Thanked 1,076 Times in 1,072 Posts
    sprites are the first thing I thought about, but that's a javascript solution. That's why the above, pure CSS
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  7. #7
    Senior Coder deathshadow's Avatar
    Join Date
    Feb 2016
    Location
    Keene, NH
    Posts
    3,374
    Thanks
    4
    Thanked 483 Times in 471 Posts
    First off, serif fonts -- and italics on extremely small serif fonts in the menu -- compromises legibility.

    The lack of hover effects or other visual queues means many users wouldn't even see the menu AS a menu.

    Next the static image is too big to even fit a single screen at 1440, use something smaller since you're wasting bandwidth on something 90%+ of the world can't even see all at once.

    I see people talking about a second image... WHAT second image?!?

    Overall it is overly plain, I rarely say this but it needs to be spruced up a bit.

    The real issues with it lie under the hood. You're server is sending windows-1252 as the character encoding, but in the markup you declare both utf-8 and iso-8859-1... which is it? At this point in 2019 you should pretty much be using UTF-8 to the exclusion of all others. Stylesheets are similarly inflicted since if you have to declare @charset you're doing something wrong. (stylesheets should when possible stick to ASCII7 so that the character encoding doesn't matter!)

    The content-language META is outdated, use <html lang="en"> instead... and don't block google translate from letting people translate it!

    You have multiple stylesheets for nothing increasing handshaking slowing the page-load time, and making the server work harder. Worse you have no MEDIA targets meaning you are sending your screen media layout to ALL devices -- which is usually gibberish for print, and a waste of time on aural/speech/braille. At minimum those LINK tags should have media="screen" on them, though media="screen,projection,tv" would be the ideal (even if HTML 5 validation complains about the latter two being 'outdated').

    Your layout is so simple, and your use of numbered headings prominent enough that there is no reason to use HTML 5's pointlessly redundant HEADER, FOOTER, or SECTION.

    Technically when you open SECTION you are supposed to be back to H1 depth, but that's usually allowed to slide... but even if using the old 4 Strict structural rules, those H3 in the footer are gibberish since they are clearly not subsections of "Unique Uniform Concepts" -- aka what a H3 after a H2 means. Just as a H4 means the start of a subsection of the H3 preceding it. It appears you chose your numbered headings for fonts in different weights and sizes, and that's not even close to what they are for. Likewise you have an HR for nothing, since the H2 and section that follows is providing that semantic thematic break. HR / horizontal rule (aka a grammatical rule) does NOT mean draw a line across the screen, that's just its default appearance.

    The default look of tags should have absolutely nothing to do with why you choose them!

    Your main menu lacking block-level containers is treated by screen readers and braille readers as a run-on sentence.

    There is NO reason to EVER declare ./ in href or src.

    Do not inline presentation, that style="" thing? 99% of the time you see style="" and 100% of the time you see <style>, someone is doing something WRONG!

    The classes for nothing, SPAN for nothing, and so forth aren't winning any points either... and you appear to be trying to close more DIV than you opened! Oh, I see, you are trying to close your <li> with </div> -- that's wrong.

    Also don't try and shove new windows down the users gullet with target="_blank" -- that's broken accessibility and if the user wants a new window, let them make that decision. There's a reason target was deprecated in 4 strict, and it's mind-numbingly dumbass it was allowed back into HTML 5.

    The stylesheets are also a bit convoluted, I suspect a good chunk of that could go in the bin if you stopped using floats where they aren't needed and eased up on the 'classes for nothing'.

    Finally you have no viewport meta and zero mobile plan, not acceptable any time over the past decade."

    Cleaning up the issues in the markup would likely go something like this:

    Code:
    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta
    	name="viewport"
    	content="width=device-width,height=device-height,initial-scale=1"
    >
    <link
    	rel="stylesheet"
    	href="screen.css"
    	media="screen,projection,tv"
    >
    <title>Insert title here</title>
    </head><body>
    
    <div id="top">
    
    	<h1><a href="/">JFF Uniforms</a></h1>
    	<ul id="mainMenu">
    		<li><a href="industries.php">Industries</a></li>
    		<li><a href="customlooks.php">Custom Looks</a></li>
    		<li><a href="stocklooks.php">Stock Looks</a></li>
    		<li><a href="category.php?ind=0&cat=2">Casino</a></li>
    		<li><a href="fabrics.php">Fabrics</a></li>
    		<li class="alternate"><a href="#">Subscribe</a></li>
    	</ul>
    	
    	<div id="content">
    		<h2>Unique Uniform Concepts</h2>
    		<p>
    			JFF Uniforms provides the perfect garments for your employees to look and feel their best!  We offer both stock and custom programs for a variety of industries.  Here are just a few examples:
    		</p>
    		<ul>
    			<li>Custom cocktail and dealer uniforms for casinos</li>
    			<li>A stock program for your bar or restaurant</li>
    			<li>Ride operator or concession uniforms for amusement parks</li>
    			<li>A unique look for Hollywood's latest blockbuster movies</li>
    		</ul>
    		<p>
    			We are a custom manufacturer, making uniforms and related items right here in southern California.  We can also manufacture custom garments or provide stock items from our overseas manufacturing facilities as well if you prefer.
    		</p>
    		<a href="industries.php">
    			<img
    				src="images/P18/trio.png"
    				alt="DESCRIBE THIS, ALT IS NOT OPTIONAL!"
    				class="plate"
    			>
    		</a>
    
    	<!-- #content --></div>
    
    	<div id="footer">
    		<div id="customerService">
    			<h2>Customer Service</h2>
    			<ul>
    				<li><a href="aboutus.php">About Us</a></li>
    				<li><a href="faq.php">FAQ</a></li>
    				<li><a href="#">Made in the USA</a></li>
    				<li><a href="#">Garment Sizing</a></li>
    				<li><a href="#">Contact Us</a></li>
    			</ul>
    		</div>
    		<div id="connectWithUs">
    			<h2>Connect with us</h2>
    			<ul>
    				<li><a href="https://facebook.com">Facebook</span></a></li>
    				<li><a href="https://instagram.com">Instagram</a></li>
    				<li><a href="https://www.pinterest.com">Pinterest</a></li>
    				<li><a href="https://twitter.com">Twitter</a></li>
    			</ul>
    		</div>
    	<!-- #footer --></div>
    	
    <!-- #top --></div>
    	
    </body></html>
    Though I would consider moving the image before the content, scaling off the viewport size (vw, vh) using max-width and max-height, and floating it to the right of the content text... stripping off that formatting using media queries when the display size shrunk. Leveraging the semantics and source-order for your CSS selectors would mean all the classes and excess tags I removed are simply not needed.

    You also have a lot of just plain invalid CSS, such as accidentally using "=" instead of ":".
    “There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies.” – C.A.R. Hoare, The 1980 ACM Turing Award Lecture
    http://www.cutcodedown.com

  8. #8
    New to the CF scene
    Join Date
    Mar 2019
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Wow, thank you for the in-depth analysis! Lots to chew through, but I will definitely go through it line by line!


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •