Please review my tech answers web-site ...

Over at :>

http://www.techanswers.info/

Any feedback welcomed ... :0)

Regards,
Tom Brett.

 

Oh, wow...
There are... so many things wrong here. First, the design. It's VERY 1995 - and retro is usually not good when it comes to web-design.
Looking at the code... it's not that much better. Actually, it's worse. Table-based layouts? In 2015? Sorry, mate, that's an F for effort. You need to update the code to at least resemble some kind of modern webdesign. Proper layout, CSS for styling (you have FONT-tags... no, just no) - basically - nothing to save (perhaps some of the server-side code, but that I have no control over or ability to see) - the HTML is, sorry to say, pure and utter crap. The worst bit is that the actual content would perhaps be quite a bit easier to write without the tables involved. Also, the forms for submitting questions and the text on the front page is bad - usually, Q&A sites also have a list on the front page with the last questions asked, answers given etc. The page is simply very empty. Current attempt: a fail grade. Try again.

 

Hi!

Thanks for the input :0) I will take this into consideration..

First up tho ... of course it's a retro design .. I *AM* totally an old school coder!
I've been coding since like 1997! LOL.. So my coding style is well - JUST OLD! LOL!
And this "old school style" is just what I like..

anyways ...

Your other point .... did you not see the Questions asked section on it?
it's over at http://www.techanswers.info/

Check it out again and you'll see this section ..
It's been updated a bit ......

I *might* consider changing the over-all design though...
Even though I just *LIKE* old-school! lol.

Thanks for your input,

Regards,
Tom Brett.

 

Well... it doesn't matter that you're "old school" - crappy, wrong use of HTML has always been bad, no matter when it was made. And your use of HTML is simply wrong. Sorry to say.
I made a mock-up using a bit more modern coding concepts: http://www.bergenpchjelp.no/techanswers/index.php
It's mainly the same site (yes, I know the box with the links to the subcategories aren't looking the same, but that could be fixed if it's essential) - you might also wanna look at having the content of that box in some sort of order - alphabetical, maybe adding more content (right now, content is what's lacking the most)

 

Hi,

Thanks again ... I see what you mean with your version of... tidier code really does make a difference huh? :0)

Regards,
Tom Brett.

 

It also makes a difference if you want the page to be available on mobile devices, being accessible to all users, etc. My version isn't entirely good, but with some minor changes you could have it work flawlessly on different screen-sizes, adher to different user demands, etc. A table-based layout will never work as well for different screen-sizes, and it adds a lot of redundant HTML - not to mention that tables for layout is not what a table is for - a table is for tabular data - like a list of addresses, names and phonenumbers or similar. This has to do with the semantic meaning of the HTML-tags, which should always be the first and foremost concern.

 

Popsicle is right. You should listen to him. Dump the tables! They are about as SEO friendly and browser friendly as a fish in a kettle.

There are many things wrong with your site. The title for starters. It's for a Title not for your URL! Add a proper more modern theme and people will return to your site.

At the moment that disgusting yellow box in the middle of the site is just given people a headache!

Sorry but I give your site a 1/10.

 

The only good thing I have to say is that you have a good domain name.

 

NOT really an excuse; I've been coding since 1977 and still write x86 and 6502 machine language; doesn't mean I can't use HTML properly.

It's funny as you basically have HTML 3.2 and the vendor proprietary tags that weaseled their way into the 'fake' HTML 4 of "transitional" in a 5 doctype. That's like mixing peanut butter and concrete. Even with the ridiculously loose train wreck of a "specification" -- Yes, I'm making air quotes with my fingers -- that is HTML 5, you've got tags like FONT and CENTER, mated to attributes like ALIGN, BORDER and CELLPADDING that really have no business on any website written in the past 18 years.

Even your use of tables -- some might call it tables for layout, but what you have there is far, FAR worse as it's "tables for nothing" -- since if there's only one <td> for every <tr> WHAT THE **** ARE YOU USING A TABLE FOR?!?

The rewrite done by @PoPSiCLe is a start, but leaves in a lot of foibles and doesn't correct a lot of what's missing.

First and foremost the purpose of HTML is to say what things ARE, NOT what they look like. During the idiocy known as the browser wars rubbish like HTML 3.2 and the vendor specific tags that followed -- in addition to the garbage added by Microshaft and Nyetscape in their constant one-upmanship of that era -- got us away from that, but HTML 4 STRICT and modern development techniques bring us back to that original concept. You say what things ARE so the user-agent (browser) can best determine how to show that MEANING. You want to customize what it looks for your screen targetS (yes, plural) that's CSS' job.

It's what people mean when they say "semantic markup" -- a sick euphemism for "using HTML properly" typically used as it's somewhat less offensive than saying "hey {string of expletives omitted}, use HTML properly!". It means numbered headings used to indicate the start of subsections (something you ALMOST did right!), it means paragraphs around grammatical paragraphs, it means lists around bullet points or other short lists of choices (like say a menu), and more importantly it means using tags like tables around ACTUAL TABULAR DATA.

It also means that doing things like having an empty anchor and slapping the logo in without images off graceful degradation is a no-no. That's why layout techniques like Gilder-Levin exist.

Of course you're also wasting space on adverts that don't show up for anyone with more than two brain cells to rub together, have massive spacing that's very iffy, way too much whitespace between elements without enough whitespace to make any of your content actually clear (basically it's in the wrong places) and that oddball "off the screen to the right" with a massive rounded corner looks more like a rendering error than intentional design. I think some of that may come from relying on the default appearance of a lot of your elements and using double-breaks to do padding's job.

Remember, if you choose your HTML tags based on their default appearance or because of how they make something look, you are choosing all the wrong tags for all the wrong reasons! (hence why FONT, CENTER, ALIGN, BORDER, BGCOLOR, etc no longer even exist)

... it's also been incorrect to use upper case for tags since 1998 as well; and you might want to ease up on the "absolute URI's for nothing"

If I were writing that same page it would like this:

<!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"
	type="text/css"
	href="screen.css"
	media="screen,projection,tv"
>

<!-- on subpages put subpage name followed by a hyphen before site title -->
<title>
	TechAnswers.info
</title>

</head><body>

<div id="top">

	<h1>
		<a href="/">
			TechAnswers.info
			<span><!-- image sandbag --></span>
		</a>
	</h1>

	<div id="content">

		<form
			method="get"
			action="http://www.techanswers.info/search2.php"
			id="searchQuestions"
		>
			<h2>Search already answered questions:</h2>
			<fieldset>
				<label for="searchFor">Search for answers containing:</label><br>
				<inputa
					type="text"
					name="searchfor"
					id="searchFor"
					placeholder="examples: PHP, HTML, harddrives"
				>
				<input type="submit" value="Search">
			</fieldset>
		</form>

		<p>
			<a href="/submit1.php">Ask us about absolutely <strong>anything</strong> tech-related</a>, and we will do our best to answer all questions within 24 hours <em>completely free of charge!</em>
		</p>

		<div id="questionsAnswered">
			<h2>Questions asked (and answered)</h2>
			<ul>
				<li><a href="/answers/PHP">PHP</a> 2 answers</li>
				<li><a href="/answers/C++">C++</a> 0 answers</li>
				<li><a href="/answers/HTML">HTML</a> 0 answers</li>
				<li><a href="/answers/Visual Basic 6">Visual Basic 6</a> 0 answers</li>
				<li><a href="/answers/JavaScript">JavaScript</a> 0 answers</li>
				<li><a href="/answers/.NET">.NET</a> 0 answers</li>
				<li><a href="/answers/Java">Java</a> 0 answers</li>
				<li><a href="/answers/Hacking">Hacking</a> 0 answers</li>
				<li><a href="/answers/Gaming">Gaming</a> 0 answers</li>
				<li><a href="/answers/E-Commerce">E-Commerce</a> 0 answers</li>
				<li><a href="/answers/Web Design">Web Design</a> 0 answers</li>
				<li><a href="/answers/Use internet to..">Use internet to..</a> 0 answers</li>
				<li><a href="/answers/Multi-media">Multi-media</a> 0 answers</li>
				<li><a href="/answers/XML">XML</a> 0 answers</li>
				<li><a href="/answers/Security">Security</a> 0 answers</li>
				<li><a href="/answers/CSS">CSS</a> 0 answers</li>
				<li><a href="/answers/C Sharp">C Sharp</a> 0 answers</li>
				<li><a href="/answers/Hardware">Hardware</a> 0 answers</li>
				<li><a href="/answers/Macintosh">Macintosh</a> 0 answers</li>
				<li><a href="/answers/PC Hardware">PC Hardware</a> 0 answers</li>
				<li><a href="/answers/Audio">Audio</a> 0 answers</li>
				<li><a href="/answers/Jailbreaking">Jailbreaking</a> 0 answers</li>
				<li><a href="/answers/Hackintosh">Hackintosh</a> 0 answers</li>
				<li><a href="/answers/iPhone">iPhone</a> 0 answers</li>
				<li><a href="/answers/iPod">iPod</a> 0 answers</li>
				<li><a href="/answers/iPad">iPad</a> 0 answers</li>
				<li><a href="/answers/Android">Android</a> 0 answers</li>
				<li><a href="/answers/MP3">MP3</a> 0 answers</li>
				<li><a href="/answers/Open-source">Open-source</a> 0 answers</li>
				<li><a href="/answers/Linux">Linux</a> 0 answers</li>
			</ul>
		<!-- #questionsAnswered --></div>

	<!-- #content --></div>

	<div id="footer">
		<hr>
		Copyright &copy; 2015 <a href="http://www.toms-creations.com/">Toms-Creations.com</a>
		<ul>
			<li><a href="/">Home</a></li>
			<li><a href="/about.html">About</a></li>
			<li><a href="/terms-of-service.html">Terms of service</a></li>
			<li><a href="/privacy-policy.html">Privacy policy</a></li>
			<li><a href="/contact-us">Contact us</a></li>
		</ul>
	<!-- #footer -></div>
		
<!-- #top --></div>

</body></html>

Code (markup):

With EVERYTHING else done on that page being in the CSS. The headings and horizontal rule provide logical document structure -- lacking that HR the footer contents would mean they are part of "Questions asked (and answered)" which they clearly are not. Numbered headings break a page into sections and subsections, NOT "render this text in a different size" -- just as horizontal rule means "a change in topic or section where heading text is unwarranted, NOT "draw a line across the screen". I always kill off space wasting "welcome" headings as they are usually too informal for a professional site, and in your case I'd move the form up FIRST since that's probably the most important thing on that page.

It's all part of "progressive enhancement" -- first you order the page content (or a facsimile of future content) in your editor as if HTML doesn't even exist. THEN you mark it up with the semantic tags (without DIV or SPAN as those are semantically neutral) to say what things are -- with zero concern for what it looks like and focusing on MEANING -- THEN you bend that markup to your will with CSS adding DIV or SPAN ONLY where needed once you've expended what you can do for style to the existing tags to create the various layoutS.

The reasoning behind this being that search engines don't have eyes, not all users have fully functional vision, and not every user-agent or visitor will "see" your layout, so don't put what it looks like in the markup! It's the ENTIRE reason HTML was even created is device neutral delivery of content, which is why both M$ and Nutscrape wet the bed when they started adding halfwit nonsense like the FONT tag.

In terms of layout, a GOOD layout should be elastic (fonts declared in % or EM, measurements in EM), semi-fluid (adjusting in size between a minimum and maximum width to fit screens without long lines being hard to read), and responsive. That rounded single corner with white off the screen REALLY looks like a rendering bug and isn't compatible with this and the oddball left indents don't really look planned -- so I'd make the content area centered and rounded on all sides I'd probably make the layout around 72em max-width, center 90%+ of the content you have, give paragraphs their own max-widths and centering (while still having flow left justified) for clarity, upping the line-heights and padding between the elements. Since we'd be using gilder-levin image replacement that GIF would have to be non-transparent, and precompositing to the background would let us also smooth out those ugly jaggies on it.

That yellow is also hideous as sin, I'd lighten it up to the colour of a manila envelope and change the colors of the anchors inside it to match.

Which would go a little something like this:
http://www.cutcodedown.com/for_others/dvchaos/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/dvchaos/

Is wide open for easy access to the bits and pieces. Semantic markup, gracefully degrades images off and css off (remember, stripped of table formatting, font tags, backgrounds, borders, colors, widths and CSS you basically get what screen readers and search engines get!)

Try changing the width of your browser window to see how it will respond on mobile. It's also elastic so the layout will enlarge/shrink based on whatever the default font size is that's declared in the browser or OS without rescaling the images. I kill the image logo when the screen is too narrow and instead just use some CSS3 styled text for that.

With the various little tweaks and 'hacks' I've thrown in, other than losing the rounded corners and responsiveness the layout is functional/usable all the way back to IE 5.5 as well.

Hope that helps or at least shows you what everyone's been talking about so far in this thread.