www.webdeveloper.com
Results 1 to 4 of 4

Thread: Evaluate my website

  1. #1
    Join Date
    Jul 2014
    Posts
    1

    Evaluate my website

    Hi!

    Just want to ask about my website. It's a big help if you have any opinions about it. I am the one who maintain this website since it's started. I just want to know if the color choices visually accessible? (For example high enough in contrast to assist the colorblind and visually impaired in reading the site appropriately)Are the fonts easy to read on a various screen resolutions? I want my boss like my work. Here's the site, www.elasticpath.com

    Everything you can add please let me know. Thank you!

  2. #2
    Join Date
    Jul 2014
    Location
    Rostock
    Posts
    15
    Test color blindness: http://colorfilter.wickline.org/

    Test responsive design: http://www.responsivedesigntest.net/

    font-size 11px is really too small for small devices (checked with my site http://www.responsivedesigntest.net/), you should think about adjusting those.

    The framework I am using to built my sites is ZURB Foundation and the minimum font-size I would use is 1rem (1 root em which equals 16px in most browsers)

    Colors are, at least for me, too weak.

  3. #3
    Join Date
    May 2014
    Posts
    813
    The biggest problem is the site isn't elastic/dynamic. You've declared pixel widths on things and content fonts in pixels, and as such it sends users like myself diving for the zoom, only to encounter a broken/hard to use site once zoomed in enough to read anything.

    The WCAG says to use %/em fonts for a reason after all. PX fonts on content areas is accessibility /FAIL/

    The different scaling font sizes is even worse -- an accessibility mess that results in fonts WAY too tiny for my mobile device, and of course being mobile zoom is even more painful. I don't know who started telling people to change the font size based on screen width, but they need a serious kick in the junk. Just makes sites harder to use, not easier.

    Your heading orders are just gibberish -- you've got H2 before there even is a H1, multiple H1's without HTML 5's garbage SECTION tag nested properly (not that I'd use SECTION in the first place), H4 without H3 or even h2 for them to be subsections of... Attempts to use heading navigation is a joke.

    To see how banjaxed the heading orders are, open up the page in FF and use the "web developer toolbar"
    https://addons.mozilla.org/en-US/fir...web-developer/

    ... and go into information -> document outline.

    You might also want to look at information -> document size

    At over a two megabytes in 86 files, it's pretty heavy so it's not exactly going to be fast loading everywhere. For every person that is about to chime in with "ignore that it loads fine here" there's likely more people for whom that page will take so long to load, they'll bounce before it even finishes. The file count alone could result in the page taking almost two minutes to load for some folks thanks to connection limits and so forth.

    Peeking under the hood, the code is entirely what I expect when I see a HTML 5 doctype -- and that's not a good thing. Static scripting inlined in the markup, static style in the markup, endless pointless IE CC's for christmas only knows what, the typical off the shelf CMS "let's throw a dozen classes at tags that shouldn't even have classes" one usually finds on the like of Drupal or Turdpress (seems to be Drupal, so... yeah). Seriously, if you don't know what's wrong with:

    Code:
    </head>
    <body class="html front not-logged-in no-sidebars page-node page-node- page-node-3 node-type-page ecommerce-software-digital-commerce-api"  data-spy="scroll" data-target="#navbar1">
        <header id="navbar" role="banner" class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
    
                  <a class="logo pull-left" href="/" title="Home">
              <img src="http://www.elasticpath.com/sites/default/files/elastic-path-logo.png" alt="Home" />
            </a>
          
          
                  <div class="nav-collapse collapse">
              <nav role="navigation">
                              <ul class="menu nav"><li class="first expanded dropdown"><a href="/products" class="dropdown-toggle" data-toggle="dropdown" data-target="#">
    You probably shouldn't be building websites.

    Just to illustrate, if I wrote that same section of code:

    Code:
    </head><body>
    
    <div id="top">
    	
    	<h1>
    		Elasticpath
    		<span><!-- image sandbag --></span>
    	</h1>
    	
    	<ul id="mainMenu">
    		<li><a href="/products">
    No joke there is NO real excuse for that entire section of code to be a heck of a lot more than that, other than using JS to do CSS' job, and a complete lack of progressive enhancement, proper use of HTML tags, and the classic "let's throw classes at EVERYTHING" which pretty much shows a complete lack of understanding selectors or inheritance.

    So... needs some work. A lot of that work is going to be convincing Drupal not to vomit up crappy markup at every level.
    Java is to JavaScript as Ham is to Hamburger.

  4. #4
    Colors are, at least for me, too weak:

    *** link removed by moderator - please do not spam this site ***

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles