Please Review Webmaster Tools Site
I've just redesigned one of my sites and am looking for feedback. It's basically a bunch of webmaster tools that I add to regularly.
The previous design had each tool on a separate page, however I found it annoying to use myself so I figured that throwing them all on one page would be beneficial. I find it quicker to locate the correct tool with this layout. The previous design is at the same URL with a "/old" at the end.
Fixed width layout, inaccessible fixed metric (px) fonts, illegible colour contrasts -- the trifecta of /FAIL/ at web design. NOT an encouraging start to what's supposed to be webmaster tools.
Under the hood it has tables for nothing, tables for layout, and nothing remotely resembling semantic markup or a properly built form! You seem to have some form of content cloaking going on (either that or broken tooltips?) which is guaranteed to get your site slapped down for abuse by the search engines, and on the whole it's a laundry list of how not to build a website.
EVEN IF using tables for layout, you've got TD+H2 doing CAPTION's job, TD doing either TH or LABEL's job, H1 on an element it's unlikely the sidebars are subsections of, and tags like CENTER and FONT that have no business being used on a website any time after 1997.
... though that last part does an excellent job of proving what I'm always saying about HTML 5's target audience; that being it seems crafted for the people stuck in the late '90's and isn't for anyone who embraced HTML 4 STRICT, separation of presentation from content, semantic markup, progressive enhancement, or the dozens of other improvements of the past fifteen years.
I mean, you don't even have MEDIA targets on your stylesheet LINK!
I would throw it out, redoing it with semantic markup, in a semi-fluid elastic responsive layout. I'd probably also swing an axe at the GA nonsense since anyone qualified to make a 'webmaster tools' should be able to glean the same data from the server logs with tools like Analog or Webalizer... at the very least move the script out of HEAD and right before </body> so it can start loading sooner.
Hmm, I'd include how I'd have done the markup for that page, but it would blow past the post size limit. Tell you what, I'll toss together how I'd have written / designed that same page and toss it up on my server (don't worry, behind a robots.txt so I don't steal your link mojo) if I have time today. (something to do while everyone is over here getting readt to watch tonights WWE PPV).
Just to give you a small taste though:
<small>Free Webmaster Tools</small>
<li><a href="/index.php">WEBMASTER TOOLS</a></li>
<li><a href="/favicon.php">FAVICON GENERATOR</a></li>
<li><a href="/integration.php">SITE INTEGRATION</a></li>
<li><a href="/about.php">ABOUT US</a></li>
<div id="contentWrapper"><div id="content">
<form action="results.php?s=whois" method="post">
<h3>DOMAIN WHOIS LOOKUP</h3>
<label for="whois_domain">Domain Name:</label>
<input type="text" name="in" id="whois_domain" placeholder="domain.com" />
<input type="submit" class="submit" value="Go" />
This tool allows you to find the contact information for the owner of a domain name. It is also useful for determining if a domain name is currently taken or available for registration.
Please keep in mind that some information may be limited due to the specific registrar the domain has been registered through. A link for more information can generally be found within the whois results.
... and here's that rewrite; elastic, semi-fluid (well, kinda) and responsive.
As with all my examples the directory:
is wide open for access to the gooey bits and pieces.
I made a few changes like moving the flyouts to below so they're not chopped off by the side of the screen. They probably should be further tweaked in the media queries at really narrow display sizes... but since mobile doesn't even HAVE hover states...
I darkened the colors to meet accessibility minimums, go ahead and resize the screen to see the (simple) responsive layout in action... Semantic markup so it will gracefully degrade when things like CSS are missing/unavailable, elastic layout and font sizes so it will default to the user size preferences, logical document structure due to proper use of numbered headings and HR, well formed/complete FORM's... the markup changes not only improve accessibility, it may help with search as well.
Last edited by deathshadow; 06-29-2014 at 07:22 PM.
Thanks for the detailed response. I know that I'm still using ancient methods since I've been making sites since the 90s and haven't evolved much. I've adopted a few of the minor visual tweaks you've suggested, however I'm still trying to grasp many of the other major design changes. I'll do some more research and try to improve it.
I thought that the layout was great though responsive design is a must these days, people also like bright colours (though I respected the subtlety).
the functionality was awesome, I'm going to use your site in future. It was quick and simple and that is pretty ideal. Overall yeah I really liked it.
I've gone ahead and made a few of the changes that were suggested.
- Removed pixel based fonts
- Removed all tables in the layout
- Easier to read text (size/color)
- Added new tools
I know I haven't hit the responsive point yet, but it's slowly evolving.
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)