Web Analytics Made Easy -
StatCounter Please review my online tool - CodingForum

Announcement

Collapse
No announcement yet.

Please review my online tool

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Please review my online tool

    Hi,


    I created a website dedicated for online conversions.
    I put there many useful converters and calculators from different categories like unit, text, date and time, math and much more...

    Please review my site, tell me if you like it and what should be improved.

    My site: http://www.ConvertForFree.com

    Thank you!
    Last edited by gamestoenjoy; Sep 9, 2016, 11:51 AM.

  • #2
    Any feedback please?

    Comment


    • #3
      The white background doesn't feel consistent with the blue of the header, the header blue doesn't match the content, and the blue next to grey gives the menu this sickly yellow look.

      Width feels a little too small, almost like overcompensating for a lack of content... I'd consider on the homepage making those two headings and lists a sidebar next to that "Overview" when the screen is large enough.

      The small font and blue on grey text of the "all conversions" page is below accessibility norms on both font-size and colour contrast.

      Your document structure from an accessibility standpoint is just plain gibberish; like abusing an H2 for a tagline when you aren't creating a new subsection of the page, multiple H1 without section tags (article does and doesn't count depending on who you ask -- not that you HAVE articles to even have such a tag in the code), H3 doing H2's job, the ENDLESS POINTLESS static style in the markup is a train wreck laundry list of how not to code a website as of over 15 years ago, and on the whole the bloated mess that is the ridiculous 25k of HTML on the homepage to deliver 1.83k of plaintext and nothing that qualifies as content screams developer ineptitude of the highest order.

      Though most of that can't be blamed on you, so much as the poster child of developer ineptitude that is turdpress... which given the simplicity and nature of said site one really has to question what in blazes possessed you to abuse that bloated blogging system into creating the type of website it was NEVER meant to be used for in the first place...

      see idiocy like this:
      Code:
      <li id="menu-item-1272" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1272">
      ... that pretty well proves the folks at turdpress have zero business telling others how to build websites!

      Good concept, relatively clean, the functionality seems to work -- but it needs some visual tweaks and the ENTIRE codebase of HTML and CSS belongs in the trash.

      there is no excuse for that homepage -- with a monolithic stylesheet for the entire site included -- to break 48k in 3 files for the code and maybe 96k for the entire pageload; making the of 1.6 MEGABYTES spanning 54 files (hence the ~20 second pageload today since I'm sitting here having dinner at a fast food joint) an ungodly mess I sure as shine-ola wouldn't want to try and host, much less maintain or update.

      I'd also axe the dropdown menu -- or at least the third layer deep -- too big, leads to a condition called "link overload" and is a waste of bandwidth if people don't use it. Nothing wrong with drilldown navigation... and the scripttard show/hide search thing isn't all that useful if scripting is blocked or disabled... and the ABUSE of DIV with classes and pointless scripttardery for what should clearly just be a list of anchors? Derp. Pure unadulterated derp. You could mainline the stuff.

      I mean seriously, this:

      Code:
      <div class="row" onclick="location.href='http://www.convertforfree.com/math-conversions/';" onmouseover="this.style.background='silver';" onmouseout="this.style.background='#dddddd';">
      <div class="cell-image"><img src="http://www.convertforfree.com/images/math.png" alt="Math" height="32" width="32"></div>
      <div class="cell-text">Math</div>
      </div>

      Is some epic honking /FAIL/ at coding a site. DIV doing a LI's job, scripting doing an anchor's job, scripting doing CSS' job, presentational image in the markup, absolute URI's for nothing... just... NO. That's a giant pointless mess for what should probably just be:

      Code:
      <li class="math"><a href="/math-conversions/">Math</a></li>
      With EVERYTHING else you are doing there handled from the stylesheet. The EXTERNAL stylesheet, not some code slopped in any old way with style="" or <style>.

      Oh, and those manual line breaks look like garbage when font scaling kicks in since you appear to have some sections of %/em inside pixel width containers. Just let flow do it's bloody job! (reeks of having edited the content in a WYSIWYG editor, forgetting what you see is NOT what everyone gets!)

      It also seems most of your social media stuff other than FB and G+ are blocked or having their scripting fail here. Didn't even know you had those until I viewed the code. that static style on the DIV around them certainly not helping matters as some of it seems to be being shoved off the right side of the parent container. I'd probably axe all of them except facebook and google plus anyways, I can't see people tweeting about this a whole lot, nor do I see any relevance to pinterest since it's not an image gallery... and really, nobody but scammers and spammers seem to do anything with stumbleupon anyways.

      There is likely little legitimate reason for the markup of that homepage to be significantly more than:

      Code:
      <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8">
      <meta
      	name="viewport"
      	content="width=device-width,height=device-height,initial-scale=1"
      >
      <meta
      	name="description"
      	content="Looking for a specific converter or calculator? You are definitely in the right place. We have many conversions and calculations available for free."
      >
      <meta
      	name="keywords"
      	content="conversion,calculation,convert,calculate,free,online,tool"
      >
      <base href="http://www.convertforfree.com/">
      <link
      	rel="stylesheet"
      	href="template/screen.css"
      	media="screen,projection,tv"
      >
      <title>
      	Online Conversions -Find the converter you need
      </title>
      </head><body>
      
      <div id="top">
      	<h1>
      		<a href="/">
      			Online Conversions
      		</a>
      	</h1>
      	<ul id="mainMenu">
      		<li>
      			<a href="/">Home</a>
      		</li>
      		<li>
      			<span>Categories</span>
      			<ul>
      				<li><a href="/unit-conversions/">Unit</a></li>
      				<li><a href="/math-conversions/">Math</a><li>
      				<li><a href="/text-conversions/">Text</a></li>
      				<li><a href="/time-and-date-conversions/">Time and Date</a></li>
      				<li><a href="/miscellaneous-conversions/">Miscellaneous</a></li>
      			</ul>
      		</li>
      		<li><a href="/all-conversions/">All Conversions</a></li>
      		<li><a href="/about-us/">About Us</a></li>
      		<li><a href="/contact-us/">Contact Us</a></li>
      	</ul>
      
      	<form id="search" method="get" action="/">
      		<fieldset>
      			<label for="search_text">Search for:</label>
      			<input type="search" name="s" id="search_text">
      			<input type="image" src="http://www.codingforum.net/images/search.png" alt="search">
      		</fieldset>
      	</form>
      
      	<div id="content">
      
      		<div id="categories" class="subsection">
      			<h2>Categories</h2>
      			<ul>
      				<li class="units"><a href="/unit-conversions/">Unit</a></li>
      				<li class="math"><a href="/math-conversions/">Math</a></li>
      				<li class="text"><a href="/text-conversions/">Text</a></li>
      				<li class="time"><a href="/time-and-date-conversions/">Date and Time</a></li>
      				<li class="misc"><a href="/miscellaneous-conversions/">Miscellaneous</li>
      			</ul>
      		<!-- #categories.subsection --></div>
      
      		<div id="topConversions" class="subsection">
      			<h2>Top Conversions</h2>
      			<ul>
      				<li><a href="/twos-complement-calculator/">Two's Complement Calculator</a></li>
      				<li><a href="/ones-complement-calculator/">One's Complement Calculator</a></li>
      				<li><a href="/bitwise-calculator/">Bitwise Calculator</a></li>
      				<li><a href="/bcd-calculator/">BCD Calculator</a></li>
      				<li><a href="/query-string-splitter/">Query String Splitter</a></li>
      				<li><a href="/shannon-entropy-calculator/">Shannon Entropy Calculator</a></li>
      				<li><a href="/contest-winner-picker/">Contest Winner Picker</a></li>
      				<li><a href="/pixel-density-calculator/">Pixel Density Calculator</a></li>
      				<li><a href="/mac-address-generator/">MAC Address Generator</a></li>
      				<li><a href="/gray-code-converter/">Gray Code Converter</a></li>
      			</ul>
      		<!-- #topConversions.subsection --></div>
      
      		<div id="overview" class="subsection">
      			<h2>Overview</h2>
      			<p>
      				Looking for a specific conversion or calculation? You are definitely in the right place. Our site contains a variety of conversions in different categories, including: unit, math, date and time, text and much more. You can find almost every conversion you need in one place. They are all easy to use and were tested thoroughly so you will get exactly what you asked for without any error.
      			</p><p>
      				Using this online tool is the best option because you don't need to install anything and expose your device to malicious software.
      			</p><p>
      				Also, you can access this tool from every platform, including: desktop, mobile phone and tablet using the internet, and get the same interface. It performs tedious calculations with a click of a button and never makes mistakes like humans often do.
      			</p><p>
      				We have many useful converters and calculators, and we keep adding new ones per your requests. All of them are free and available online, so keep visiting and supporting us.
      			</p>
      		<!-- #overview.subsection --></div>
      
      		<div id="social">
      			<div>
      				<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.convertforfree.com%2F&amp;layout=button_count&amp;show_faces=false&amp;width=105&amp;action=like&amp;font=verdana&amp;colorscheme=light&amp;height=21" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:105px; height:21px;"></iframe>
      			</div><div>
      				<g:plusone size="medium" href="/"></g:plusone>
      			</div>
      		<!-- #social --></div>
      
      	<!-- #content --></div>
      
      	<div id="footer">
      		<ul>
      			<li class="rss"><a href="/feed" title="RSS Feed"><a href="/feed">RSS Feed</a></li>
      			<li><a href="/sentence-case-converter/">Random Conversion</a></li>
      			<li><a href="/about-us#advertise-with-us">Advrtise With Us</a></li>
      			<li><a href="/about-us#link-to-us">Link to Us</a></li>
      		</ul>
      		&copy; 2016 Online Conversions
      	<!-- #footer --></div>
      
      <!-- #top --></div>
      
      <script src="http://apis.google.com/js/plusone.js?ver=4.6.1"></script>
      
      </body></html>
      Apart from a poor choice of tools and a general ignorance of how to use HTML and CSS properly there's no real reason to have a whole lot more than that! You'll notice that's 1/5th the code. It is also well formed semantic code with logical heading orders and document structure, NOT just endless pointless DIV and classes for nothing leaving non-visual UA's going "what in blazes am I even working on?"
      Last edited by deathshadow; Sep 17, 2016, 06:43 PM.
      Walk the dark path, sleep with angels, call the past for help.
      https://cutcodedown.com
      https://medium.com/@deathshadow

      Comment


      • #4
        @deathshadow Great feedback, thanks!
        I will improve the points mentioned by you.

        I used WordPress because it is indeed simple easy to use.
        I mainly use it as a CMS as I have 150 converters and calculators.
        Indeed most of the code is based on their template and much of it is redundant, as you said.
        Last edited by gamestoenjoy; Sep 20, 2016, 10:50 AM.

        Comment


        • #5
          Personally I like it. It's a great idea to have a tool like this available for use. Ok, I understand that the accessibility from a visual standpoint is a bit lacking in sections but that's something that can be improved. One should usually will try to keep accessibility within the forefront of one's mind when building but it is understandable when points are missed. What is important is that it is thought of. That you as a designer, developer try your best to include everyone.

          Sure, Wordpress can insert some random seemingly needless markup into it's pages but you know the best way to test for accessibility? Get someone who uses assistive tech (whether it be screenreaders, magnification tools etc, assistive motor skills aids such as switch access buttons) to actually test your site. I have set up a few wordpress-based sites and have asked colleagues who use these specialist aids to test them for me and provide honest feedback.

          Automated accessibility tools are great but there is nothing like a real user to provide true user experience results. Best of luck with it!

          Comment


          • #6
            @danomah thank you for the feedback!

            Comment


            • #7
              i update the design and the layout of the site, it should look better now

              Comment


              • #8
                Hi your website looks good but you have to improve your website design and and there is more space in title between characters.
                please research on google

                Comment


                • #9
                  Originally posted by Adam01smith View Post
                  Hi your website looks good but you have to improve your website design and and there is more space in title between characters.
                  please research on google
                  Thanks, I already improved it.

                  Comment

                  Working...
                  X