Evaluate my website
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!
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.
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"
... 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:
You probably shouldn't be building websites.
<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">
<!-- .btn-navbar is used as the toggle for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<a class="logo pull-left" href="/" title="Home">
<img src="http://www.elasticpath.com/sites/default/files/elastic-path-logo.png" alt="Home" />
<div class="nav-collapse collapse">
<ul class="menu nav"><li class="first expanded dropdown"><a href="/products" class="dropdown-toggle" data-toggle="dropdown" data-target="#">
Just to illustrate, if I wrote that same section of code:
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.
<span><!-- image sandbag --></span>
So... needs some work. A lot of that work is going to be convincing Drupal not to vomit up crappy markup at every level.
Colors are, at least for me, too weak:
*** link removed by moderator - please do not spam this site ***
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)
Tags for this Thread