Site source code

Post suggestions, correct errors or omissions, or anything else about the site
User avatar
deathshadow
Classic Game Author
Posts: 35
Joined: February 8th, 2011, 5:42 pm

Site source code

Post by deathshadow »

Interesting bump -- As a recently retired web developer, let me just make a few comments on the site itself. I see a lot "wrong" with it, and figured you should at least be aware of these issues. Warning, I'm the Gordon Ramsey of web development, so this isn't exactly going to be kind -- just keep in mind I'm trying to help with these comments.

1) The use of px metric fonts makes it an accessibility train wreck, which is why the page is next to useless without at least 50% zoom to large font/120 dpi users like myself. PX should only be used for font sizes when you have to because of an interaction with a fixed metric element like images... or are you using pt? Odd, if it's PT then Opera is ignoring them.

2) It appears to rely on javascript in many places to do CSS' job. This javascript breaks horribly in many browsers.

3) Several sections appear to recieve their styling via javascript as well... this whole "newfont" garbage that seems to be some sort of "select" for changing the page size... that doesn't actually seem to work here in any browser... and seems to be in there just because you didn't declare the fonts using the method recommended by accessibility guides like the WCAG - % and/or EM.

4) CSS off the page is a train wreck likely stemming from a lack of semantic markup...

Peeking under the hood, the problems become evident in the 26k of HTML 3 (with a HTML 4 tranny doctype slapped on it) for 6k of content -- two or three times as much markup as should be neccessary on such a simple page. Even if you are concerned about supporting old browsers, using HTML 3 is so backwards I'm surprised it even works in any browser. Even just simple things, like it stopped being "valid" to make your tags in uppercase since 1997...

This is particularly bad in the use of STRONG for what should heading tags, nonsensical heading orders, use of a heading tag on a non-heading element, content-last source order, tables for layout, and a dozen other techniques that even when they were the 'accepted norm' of writing websites a decade and a half ago, were never actually the correct way of going about it. There's even oddities like fieldsets and legends AROUND forms instead of INSIDE forms -- what they are actually supposed to be used for!

Though in that way modern coding is a return to what HTML was originally supposed to be for -- saying what things ARE and NOT how they appear -- appearance has NO BUSINESS in the markup, that's CSS' job!

On a personal note, the javascripted main menu is IMHO a miserable accessibility /FAIL/... but then I've never been a fan of dropdown menus on websites in the first place -- I would probably get rid of the absurd padding on the topmost items and move MOST of the useful links to the topmost menu, probably only retaining a dropdown for "games" to link to the categories. The rest of it I'd move into dropdowns or a sidebar given the redundancy to the "game search" form, and 'link overload' caused by the page. (for example until I saw it mentioned on the forums I never even knew there WAS a utilities section!)... I'd consider pulling the entire "games" and "utilites" sections from the main menu and just routing everything of that nature (content links) through the sidebar... likewise many of the less-used links most users aren't going to care about could go at the bottom of the sidebar (petitions, white ribbon camp, licenses) while others should get more familiar prominant placement (social links, newsletter subscription, etc).

From an SEO standpoint you've got plenty of text, though the lack of proper heading tags, overuse of strong around entire paragraphs, and excessive number of elements in the keywords meta are hampering your results. Link juice is 'dilutued' -- thankfully your SERP ranking and SERP result are acceptable -- but that's mostly because the competition (abandonia, dosgamesarchive, dosgames.com) are many times WORSE in that regard. (and still manage to outrank you on a search for just "dos games")

So... a good deal of work could be put into making the site better, or at least bringing it into this century. You've got a lot of really good content built up, it's just a matter of presenting it better.

Oh, and I'd axe the validHTML/validCSS links at the bottom -- not only do 99.99% of web users not give a flying fig, making them a waste of bandwidth, you don't have valid HTML, or even HTML 4 for that matter. You have HTML 3 with a HTML4 tranny doctype slapped on it.

Just out of curiousity, what are you running under the hood for a CMS (if any), some forum portal, or something a bit more complex? I'm not seeing the telltales of any system I recognize.

If you want help with any of the above, being retired now I've got some spare time and might be able/willing to lend a hand. (when not coding my next game release).

I could probably even throw together a simple template to show some of the improvements I'm suggesting... I have a menu I designed for another site that never got used... could be amusing to see it on a site like this one.
If everyone is thinking the same, somebody isn't thinking.
User avatar
DOSGuy
Website Administrator
Posts: 1063
Joined: September 2nd, 2005, 8:28 pm
Contact:

Re: Are the latest changes to the site good or bad?

Post by DOSGuy »

Very interesting.

You mention that I use HTML 3, which surprises me since HTML 3 was dead before I learned HTML. I started coding in 1999 in HTML 4; I have never known any other standard. Am I simply not taking advantage of tags that were added in HTML 4? Having never used HTML 3, I don't actually know which tags were added to the HTML 4 standard.

The use of uppercase tag names and lowercase attributes is the standard recommended by the W3C to this day. I was using all lowercase until about 2 years ago, when I read W3C's entire accessibility guide. Among their many recommendations (not for accessibility) is to use uppercase tag names and lowercase attributes to make code more readable: you can find tags more easily when they're in uppercase.

The site has always used CSS for style, though I recently added the ability to change the site's font size and face. I use JavaScript to make the change instant. When you change the font size or face, your preference is stored in a cookie. I used to look for that cookie using PHP, but this meant the feature wouldn't work on the RGB Classic Games DVD-ROM. For the benefit of the DVD, the site now uses JavaScript in places where I would otherwise use PHP to allow the site to be accessible from a DVD-ROM.

Font sizes are only declared in pt.

I'm surprised that the site would have a lot of unnecessary markup, since I coded every line of the site myself. HTML editors and site builders (right up to the latest version of Dreamweaver) create a lot of unnecessary code, so I insist on writing my own code in Wordpad. Can you give me an example of a place where I used unnecessary code?

I had been using only floating DIV tags for layout until I created the sidebar a few months ago. Making the layout work in CSS was so complicated that it was just easier to revert back to tables. It may not be "the right way", but the right way was a lot more work than "the wrong way", so I went with the wrong way. Tables are valid even in HTML 5, so I don't think it's an unforgivable sin to use tables for layout.

As for CMS, I created the site's content management system. I'm like my grandfather in that regard. He created his own tools so that he would always have the right tool for the job he was doing. I find it easier to create my own systems rather than adapt my site goals to work with the limitations or features of someone else's tools.

In terms of SEO, this site is listed #3 in a Google search for "DOS games", behind only dosgames.com and dosgamesarchive.com. Both of those sites are much older and have a lot more sites linking in. RGB is ranked PR5, so we have quality sites linking in. Short of paying for more links (which I would never do), I don't think I could dethrone the sites that are coming up ahead of me, though I'm willing to try.

Anyway, I accept your offer of help. To help me understand the feedback you're giving me, could you find an example page and send me a copy of the source with your comments?


Incidentally (I hope this won't scare you given your comments), I thought it might interest you to know what I do for a living: I'm a webmaster for the Government of Canada.
Today entirely the maniac there is no excuse with the article.
User avatar
deathshadow
Classic Game Author
Posts: 35
Joined: February 8th, 2011, 5:42 pm

Re: Are the latest changes to the site good or bad?

Post by deathshadow »

DOSGuy wrote: You mention that I use HTML 3, which surprises me since HTML 3 was dead before I learned HTML. I started coding in 1999 in HTML 4; I have never known any other standard. Am I simply not taking advantage of tags that were added in HTML 4? Having never used HTML 3, I don't actually know which tags were added to the HTML 4 standard.
Actually, you are taking advantage of tags that no longer EXIST in the HTML standard... Though that's because there are actually TWO HTML's... TRANSITIONAL and STRICT.

TRANNY exists for the sole purpose of allowing new HTML 4 features like OBJECT to be used inside a HTML 3.2 document. If you are coding HTML 4 transitional, you are just still using HTML 3.2 and are stuck on 1997 coding practices. It is there to be a "transition" to allow older pages to take advantage of new features without throwing away their old outdated bloated half-assed markup from peak of the browser wars.

STRICT is the "real" HTML 4... where it is invalid to use uppercase on tags and attributes, where MULTIPLE presentational, redundant and/or bad accessibility tags are "deprecated" -- which is to say "advised against using". If you run those tags against the "validator" as "strict" you will find they do NOT pass muster. That's one of the things about STRICT a lot of people didn't get; it made it simpler/neater/cleaner by REMOVING redundancies and unneccessary bloat... it's also why HTML 5 is a bloated train wreck nobody should even be considering using since it basically pretends STRICT never existed. (again, spoken like a real Wirth language fan)

For reference, tags you shouldn't be using:
applet, basefont, center, dir, font, isindex, layer, menu, noembed, s, strike, u

... and there are dozens of attributes you shouldn't use anymore like align, valign, color, bgcolor, background, face, link, vlink, alink,

USING inlined style to replace those COMPLETELY defeats the point of them being deprecated in the first place. (I often wonder if the STYLE attribute should be deprecated too!)
DOSGuy wrote:The use of uppercase tag names and lowercase attributes is the standard recommended by the W3C to this day.
Uhm, NO... It's invalid markup according to the HTML 4 STRICT, which is what websites should be written in (or XHTML 1.0 Strict which I prefer for the consistent formatting rules -- yeah, I'm a Pascal guy alright) as of 1998 as it is the most recent recommendation.
DOSGuy wrote:I was using all lowercase until about 2 years ago, when I read W3C's entire accessibility guide.
If you mean the WCAG, (which is the only guide that matters for accessibility) that says nothing about code formatting and is entirely about user-side output and presence of accessibility aids.

Otherwise I have NO CLUE where you got that from, as it sure as shine-ola is the exact OPPOSITE of what the HTML 4 and XHTML 1.0 validators allow -- at least in STRICT... again Tranny allows for a LOT of outdated garbage that was the 'norm' until people started waking up and doing it properly around 2004.

This is part of the cross-compatibility of HTML 4 to XHTML 1.0 -- since it's invalid in XML to have upper case tags and attributes.
DOSGuy wrote:Among their many recommendations (not for accessibility) is to use uppercase tag names and lowercase attributes to make code more readable: you can find tags more easily when they're in uppercase.
I'd be interested in a link to that, as it goes against EVERYTHING I've learned of HTML4 and XHTML 1.0 the past decade. I'm almost starting to wonder if you mistook W3Schools (which is total bull) for the W3C -- as their COMPLETELY UNRELATED website is full of those sorts of inaccuracies and web-rot.
DOSGuy wrote:The site has always used CSS for style
... and yet, no offense, appears to have missed the point of CSS -- separation of presentation from content and semantic markup.

For example:
class="FFA0A0" style="width: 20%;"

That style has no business being in the markup, and specifying the color in the markup is no different than saying color= -- you missed the POINT. HTML is for saying what things ARE -- WHY are you placing that color on it? WHY are you setting that width. WHAT is that element - WHAT it is should be the class name, with nothing resembling appearance even belonging in the HTML.
DOSGuy wrote:though I recently added the ability to change the site's font size and face. I use JavaScript to make the change instant.
Which does NOT appear to be working here AT ALL. I'm getting a uselessly small 13px so it's getting overridden SOMEWHERE... and that script does nothing in either Opera or FF since it' doesn't seem to be firing 'onchange' nor does it have a submit method...
DOSGuy wrote:Font sizes are only declared in pt.
If you had read the accessibility guidelines (WCAG) you'd know you shouldn't be using PT either, you should be using %/EM... and I'm not seeing pt in Opera... since I'm a 120dpi/Large fonts user, so I should be seeing 16px not 13px if that's 10pt. SOMEWHERE it's getting overridden.
DOSGuy wrote:I'm surprised that the site would have a lot of unnecessary markup, since I coded every line of the site myself. HTML editors and site builders (right up to the latest version of Dreamweaver) create a lot of unnecessary code, so I insist on writing my own code in Wordpad. Can you give me an example of a place where I used unnecessary code?

Code: Select all

  <TD class="ACE78C" style="width: 20%;"><SPAN onMouseOver="mopen('m2')" onMouseOut="mclosetime()">GAMES</SPAN>
   <DIV id="m2" style="background: #C8FFC8; z-index: 1;" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">

   <IMG id="preview" src="images/icons/rgb.png" width="128" height="128" alt="RGB" style="float: left; margin: 4px;">

   <SPAN style="float: left;" onMouseOut="prevu(rgb)"><A href="genre/3dshooter.html" onMouseOver="prevu(fps)">3D Shooter</A>
   <A href="genre/adventure.html" onMouseOver="prevu(adventure)">Adventure</A>
   <A href="genre/interactivefiction.html" onMouseOver="prevu(interactivefiction)">&nbsp;&nbsp;Interactive Fiction</A>
   <A href="genre/graphicadventure.html" onMouseOver="prevu(graphicadventure)">&nbsp;&nbsp;Graphic Adventure</A>
   <A href="genre/arcade.html" onMouseOver="prevu(arcade)">Arcade</A>
   <A href="genre/paddle.html" onMouseOver="prevu(paddle)">Ball and paddle</A>
   <A href="genre/traditional.html" onMouseOver="prevu(traditional)">Card and board games</A>
   <A href="genre/educational.html" onMouseOver="prevu(educational)">Educational</A>
   <A href="genre/fighting.html" onMouseOver="prevu(fighting)">Fighting</A>
   <A href="genre/gamecreation.html" onMouseOver="prevu(gamecreation)">Game Creation</A>
   <A href="genre/pinball.html" onMouseOver="prevu(pinball)">Pinball</A>
   <A href="genre/platform.html" onMouseOver="prevu(platform)">Platform</A>
   <A href="genre/puzzle.html" onMouseOver="prevu(puzzle)">Puzzle</A>
   <A href="genre/racing.html" onMouseOver="prevu(racing)">Racing</A>
   <A href="genre/rts.html" onMouseOver="prevu(rts)">Real-Time Strategy</A>
   <A href="genre/rpg.html" onMouseOver="prevu(rpg)">RPG</A>
   <A href="genre/shooter.html" onMouseOver="prevu(shooter)">Shooter</A>
   <A href="genre/simulation.html" onMouseOver="prevu(simulation)">Simulation</A>
   <A href="genre/sports.html" onMouseOver="prevu(sports)">Sports</A>
   <A href="genre/strategy.html" onMouseOver="prevu(strategy)">Strategy</A>

   <BR><A href="misc/unreleased.html">Previously unreleased</A>
   <A href="misc/modern.html">Modern DOS games</A></SPAN>
   </DIV>
  </TD>
Working from the top. Presentational classname, presentational style in the markup, div for no reason, javascripted hooks doing CSS' job, presentational images as IMG tags in the markup, line-break on a element to do padding's job, span wrapping multiple tags for no good reason, MORE presentational style in the markup, and completely non-semantic markup since that's obviously a list... Mind you, a list would put some markup back on it since that would add a UL and multiple LI... and classes to replace the onmouseovers. (though it would axe the ENTIRE prevu javascript nonsense). Might actually grow the markup 100 or so bytes by the time the image sandbags are added to replace the scripting, but it would take an axe to the need for javascript which is ALWAYS a good thing. Personally, I'd probably axe the hover effect images as a waste of bandwidth anyways... or switch to smaller ones... though again, I'd axe that menu as a whole since it's useless on my netbook :P

... and that's before we talk tables for layout!
DOSGuy wrote: I had been using only floating DIV tags for layout until I created the sidebar a few months ago. Making the layout work in CSS was so complicated that it was just easier to revert back to tables. It may not be "the right way", but the right way was a lot more work than "the wrong way", so I went with the wrong way. Tables are valid even in HTML 5, so I don't think it's an unforgivable sin to use tables for layout.
Tables exist for TABULAR data -- like a spreadsheet or database output, not for just 'making columns'. I think a LOT of the problems you may have been having was your not using semantic markup and practicing separation of presentation from content; much less the reliance upon things that have NO PLACE in modern markup like ALIGN, VALIGN, CENTER, FONT, STYLE on EVERY element...

Another simple example:

<P><STRONG>By Operating System</STRONG>

WHY isn't that a heading tag? You're "more emphasis" to it which is just wrong, it's a heading for the content that follows.

Or this:

Code: Select all

<DIV style="clear: both;"></DIV>
<DIV style="background-image: url('images/video4.gif'); height: 200px; width: 100%; text-align: center; color: #FFFFFF;">
<A href="index.html"><IMG src="title.png" style="margin-top: 23px;" alt="RGB Classic Games"></A><BR>
<DIV style="font: bold 12pt Courier New, Courier;">Keeping the classics alive</DIV>
   <P style="font: bold 12pt Times New Roman, Garamond;">Currently hosting <SPAN style="font-size: 14pt;">441</SPAN> great games!</P>
</DIV>
inlined style (so no caching), presentational image in the markup, multiple excess div for nothing, no images off graceful degradation, paragraph around a non-paragraph content (funny to see the XHTML close in a HTML document on that P) and a clearing div like it was still 1998. (that went the way of the dodo a decade ago)

Much less the P before the table that follows -- that's padding-bottom's job.

This:

Code: Select all

<h1>
	RGB Classic Games<br />
	<small>Keeping the classics alive</small>
	<span><!-- image replacement sandbag --><span></span></span>
</h1>
<div class="hostCount">Currently hosting <b>441</b> great games!</div>
Is what should probably be there -- EVERYTHING ELSE you were doing there belongs in the external style sheet; that way it's at least cached across page-views... and allows for graceful degradation if done properly. (the multi-spans are for double gilder-levin which would preserve CSS off appearance). I'd also consider placing that BEFORE the menu, then use CSS to move that menu into place so that the HEADING for which everything on the page is a SUBSECTION of is the first content element on the page.

You're only heading is a H4 -- that doesn't make ANY sense... A page on a site should have an H1, and only one H1 as all other headings on the page are SUBSECTIONS of that top-level heading. Lacking proper headings makes navigation on handhelds and screen readers a total train wreck. You pull up the "document outline" in the Web developer toolbar for FF, and you're confronted by nothing but "missing heading" warnings and some none-nested links. The most prominent of which is off-site to a google advert... that doesn't even show up here. (and on FF I'm not running an adblock?!?)... Wait, there's supposed to be an advert there? Ok, it's showing in IE and Chrome... most unusual. Google ads are usually fairly bulletproof.

From there, lower order (higher numbered) headings should be at the start of each subsection... using a lower order heading automatically means the start of a subsection to the higher order (lower numbered) heading preceeding it... which is why you only usually have one h1 (trunk), whole bunch of H2 (branches) so on and so forth branching out like a tree... and why it's improper to skip over heading numbers wholesale. (see your lonely, lonely h4)

Though... did you fix the code for the forms in the sideBar? I could have sworn the fieldset was wrapping the form instead of the other way around yesterday...

But another example:

Code: Select all

<DIV style="margin: 20px 5px 5px 5px; padding: 5px; background-color: #E6EFFF;">
<FORM method="post" action="searchresult.html">
 <FIELDSET>
  <LEGEND>Game Search</LEGEND>

<B>By Game Title</B>

<INPUT type="text" name="Title">

<P><A href="companylist.html"><B>By Company</B></A><BR>
<A href="search.html#legal"><B>By Legal Status</B></A><BR>
<A href="search.html#video"><B>By Video Mode</B></A><BR>
<A href="search.html#year"><B>By Year Released</B></A><BR>
<A href="misc/source.html"><B>Games with source code</B></A><BR>
<A href="misc/cheats.html"><B>Games with cheat codes</B></A>

<P><STRONG>By Operating System</STRONG>

<P><A href="win9x.html">List all Win9x games</A><BR>
<A href="win16.html">List all Win16 games</A><BR>
<A href="os2.html">List all OS/2 games</A><BR>
<A href="all.html">List all DOS games</A><BR>
<A href="online.html">All in-browser DOS games</A>

<P><STRONG>Expert recommendations</STRONG>

<P><A href="picks/Litude.html">Litude's picks</A><BR>
<A href="picks/MrFlibble.html">MrFlibble's picks</A>
 </FIELDSET>
</FORM>
DIV for nothing, there are NO paragraphs in that code (you're using P in the typographical sense instead of the semantic sense), those are LISTS of choices so get them in list tags, the B tags inside the first set of anchors should be handled off a parent wrapping element (like a UL) since you shouldn't be changing their emphasis (not that B should, but it does thanks to legacy), that first bold tag after the legend should be a LABEL, you REALLY should include a SUBMIT button (not all devices have their own submit/enter key), all of those P/STRONG should probably be H2 or H3 (the legend kind-of messes with that)... and frankly 90% of that code aren't form elements, so they don't belong in the fieldset!

... which is another reason I'd probably use XHTML 1.0 Strict -- you can omit the legend, make that a proper H2, wrap JUST the form elements as label/input/input[submit] and get those other headings in there semantically.

Though again, that actually makes the markup larger -- but more accessible... and oddly might actually load faster and save bandwidth... Strange thing about separation of presentation from content in that regard.

There's actually a formula I use to determine how well coded a site is...

1.5K + content*1.5 + 200 bytes per 'content object' (images/embed/object)

By that formula your 11k of content should come in at around 18k (since there are NO content images)... and you've got 26k, indicating something's amiss. (though not horribly so -- you'd be surprised how many websites would have a hundred K for what you have there).
DOSGuy wrote: As for CMS, I created the site's content management system. I'm like my grandfather in that regard. He created his own tools so that he would always have the right tool for the job he was doing. I find it easier to create my own systems rather than adapt my site goals to work with the limitations or features of someone else's tools.
I'm the same way on that -- so that's a good thing -- means you have FULL control of what goes on. I run my own CMS on the few websites I've kept going since I retired and have been slowly working on a "wordpress/joomla killer". (though my partner for the project passed away last year, stalling the project)
DOSGuy wrote: In terms of SEO, this site is listed #3 in a Google search for "DOS games", behind only dosgames.com and dosgamesarchive.com. Both of those sites are much older and have a lot more sites linking in. RGB is ranked PR5, so we have quality sites linking in. Short of paying for more links (which I would never do), I don't think I could dethrone the sites that are coming up ahead of me, though I'm willing to try.
Believe it or not, it would be EASY to dethrone them -- though you might be seeing regional results as here, you're not even showing up on that search on the big G until page two.

But then google.ca and google.com never see eye to eye; much less east coast vs. west coast and other regionalisms since google does try to tailor results by where you are.
DOSGuy wrote: Anyway, I accept your offer of help. To help me understand the feedback you're giving me, could you find an example page and send me a copy of the source with your comments?
The above is a start -- but I was thinking I might do a quick rewrite of the home page as an example -- without making any real layout changes (for now) -- though there's a lot that's ... problematic with the layout as a whole from an accessibility standpoint.
DOSGuy wrote:Incidentally (I hope this won't scare you given your comments), I thought it might interest you to know what I do for a living: I'm a webmaster for the Government of Canada.
That explains a bit :D -- just kidding, though I my brain immediately jumped to the whole "mandatory bandwidth cap" thing, though that's likely not your doing...

... but don't worry, I have no qualms taking to task someone that high up the ladder... I do it all the time; it's why upper management loved me, middle management feared me and coworkers thought I was the devil incarnate.

You'd think I spent 6 years as a junior officer in military service or something :roll:
If everyone is thinking the same, somebody isn't thinking.
User avatar
deathshadow
Classic Game Author
Posts: 35
Joined: February 8th, 2011, 5:42 pm

Re: Are the latest changes to the site good or bad?

Post by deathshadow »

In fact, here's the markup I'd probably be using for the home page, +/-5%.

I have an odd way of building sites -- content and markup FIRST, before I even really think layout. Sure I throw a few extra elements in for things I can predict ahead of time, but by forgetting about layout while writing my markup, I'm able to keep that separation of presentation from content -- saying what things ARE, not how they are going to appear.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="description"
	content="Free downloads of over 425 classic games. Over 200 DOS games can be played in an online emulator. Attempts to archive every version of each game, with source code; provides ordering information for games that are still sold."
/>

<!--
	keywords meta should be limited to 8 to ten words and preferably
	less than 100 bytes! Also, there is no reason to list both singular
	and plurals -- singular WILL grab both!
-->

<meta
	name="keywords"
	content="game,DOS,Windows,OS/2,CP/M,free,classic,retro,download,shareware,freeware,abandonware"
/>

<link
	type="application/rss+xml"
	rel="alternate"
	href="https://www.classicdosgames.com/rss.xml"
	title="RGB Classic Games RSS Feed"
/>


<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	RGB Classic Games
</title>

</head><body>

<!--
	empty spans below are image replacement sandbags,
	do not remove.

	horizontal rules are for CSS off users and will be removed
	by the appropriate media types

	.jumpto menus are for accesskeys and CSS off users to more
	easily navigate the page, will also be hidden.
-->

<div id="pageWrapper">

	<h1>
		RGB Classic Games<br />
		<small>Keeping the classics alive</small>
		<span><span><!-- image replacement sandbags --></span></span>
	</h1>

	<div id="hostCount">
		Currently hosting <b>441</b> great games!
	</div>

	<ol class="jumpTo">
		<li>
			<a
				href="#pageWrapper"
				title="Top of Document"
				accesskey="1"
			>Top of Document</a>
		</li><li>
			<a
				href="#mainMenu"
				title="Main Menu"
				accesskey="2"
			>Main Menu</a>
		</li><li>
			<a
				href="#content"
				title="Main Content"
				accesskey="3"
			>Main Content</a>
		</li><li>
			<a
				href="#programSearch"
				title="Program Search"
				accesskey="4"
			>Program Search</a>
		</li><li>
			<a
				href="#footer"
				title="End of Document"
				accesskey="9"
			>End of Document</a>
		</li>
	</ol>

	<ul id="mainMenu">
		<li>
			<a href="/">COMMUNITY</a>
			<ul>
				<li><a href="index.html">Home</a></li>
				<li><a href="forum.html">Forum</a></li>
				<li><a href="http://www.facebook.com/pages/Classic-DOS-Games/71433442741">Our Facebook Page</a></li>
				<li><a href="http://twitter.com/#!/RGBClassicGames">Our Twitter Page</a></li>
				<li><a href="http://wiki.classicdosgames.com/">Compatibility Wiki</a></li>
				<li><a href="http://www.dospreservation.org/">DOS Preservation Society</a></li>
				<li><a href="petitions.html">Petitions</a></li>
				<li><a href="newsletter.html">Subscribe to our newsletter</a></li>
				<li><a href="wemcd.html">White Ribbon Campaign</a></li>
				<li><a href="donate.html">Make a donation</a></li>
				<li><a href="about.html">About this site</a></li>
				<li class="RSS"><a href="rss.xml">Subscribe</a></li>
				<li class="social">
					<a
						href="http://www.addthis.com/bookmark.php"
						onclick="addthis_url=location.href; addthis_title=document.title; return addthis_click(this);"
					>
						<img
							src="http://s9.addthis.com/button1-share.gif"
							width="125" height="16"
							alt="Bookmark and Share"
						/>
					</a>
					<script type="text/javascript">
						var addthis_pub='DOSGuy';
					</script>
					<script
						type="text/javascript"
						src="http://s9.addthis.com/js/widget.php?v=10"
					></script>
				</li>
			</ul>
		</li><li>
			<a href="/games/">Games</a>
			<ul>
				<li class="fps"><a href="genre/3dshooter.html">3D Shooter</a></li>
				<li class="adventure">
					<a href="genre/adventure.html">Adventure</a>
					<ul>
						<li class="interactiveFiction">
							<a href="genre/interactivefiction.html">Interactive Fiction</a>
						</li>
						<li class="graphicAdventure">
							<a href="genre/graphicadventure.html">Graphic Adventure</a>
						</li>
					</ul>
				</li>
				<li class="arcade"><a href="/genre/arcade.html">Arcade</a></li>
				<li class="paddle"><a href="/genre/paddle.html">Ball and paddle</a></li>
				<li class="traditional"><a href="/genre/traditional.html">Card and board games</a></li>
				<li class="educational"><a href="/genre/educational.html">Educational</a></li>
				<li class="fighting"><a href="/genre/fighting.html">Fighting</a></li>
				<li class="gameCreation"><a href="/genre/gamecreation.html">Game Creation</a></li>
				<li class="Pinball"><a href="/genre/pinball.html">Pinball</a></li>
				<li class="Platform"><a href="/genre/platform.html">Platform</a></li>
				<li class="Puzzle"><a href="/genre/puzzle.html">Puzzle</a></li>
				<li class="Racing"><a href="/genre/racing.html">Racing</a></li>
				<li class="RTS"><a href="/genre/rts.html">Real-Time Strategy</a></li>
				<li class="RPG"><a href="/genre/rpg.html">RPG</a></li>
				<li class="shooter"><a href="/genre/shooter.html">Shooter</a></li>
				<li class="simulation"><a href="/genre/simulation.html">Simulation</a></li>
				<li class="sports"><a href="/genre/sports.html">Sports</a></li>
				<li class="strategy"><a href="/genre/strategy.html">Strategy</a></li>
				<li class="unreleased breakBefore"><a href="/misc/unreleased.html">Previously unreleased</a></li>
				<li class="modern"><a href="/misc/modern.html">Modern DOS games</a></li>
			</ul>
		</li><li>
			<a href="/extras/">EXTRAS</a>
			<ul>
				<li>
					Compatibility utilities
					<ul>
						<li><a href="utilities/win9x.html">For playing Win9x games</a></li>
						<li><a href="utilities/win16.html">For playing Win16 games</a></li>
						<li><a href="utilities/os2.html">For playing OS/2 games</a></li>
						<li><a href="utilities/dos.html">For playing DOS games</a></li>
					</ul>
				</li>
				<li class="breakBefore"><a href="drivers.html">Drivers</a></li>
				<li class="breakBefore"><a href="compilation.html">Compilation CDs</a></li>
				<li><a href="shrines.html">Webshrines</a></li>
				<li><a href="interviews.html">Interviews</a></li>
				<li><a href="tutorials.html">Tutorials</a></li>
				<li class="breakBefore"><a href="licenses.html">Licenses</a></li>
				<li><a href="blog/">Webmaster's Blog</a></li>
				<li><a href="store.html">Store</a></li>
				<li><a href="contact.html">Contact</a></li>
			</ul>
		</li><li>
			<a href="/links">OTHER GAME SITES</a>
			<ul>
				<li><a href="http://www.gog.com/en/frontpage/pp/215bb47da8fac3342b858ac3db09b033c6c46e0b">GOG.com</a></li>
				<li><a href="http://www.download-full-games.com">Download DOS Games</a></li>
				<li><a href="http://www.dosgamesonline.com">DOS Games Online</a></li>
				<li><a href="http://www.classic-pc-games.com">Classic PC Games</a></li>
				<li><a href="http://sunshine-slots.com/The-Reel-Deal.html">Reel Deal Casino</a></li>
				<li><a href="http://www.pokkercards.com/">Pokkercards</a></li>
				<li><a href="http://www.pokerligne.org/">Poker en ligne</a></li>
			</ul>
		</li>
	</ul>

	<hr />

	<div id="columnWrapper">

		<div id="contentWrapper"><div id="content">
			<!-- double wrapper is for multi-column content first fluid layout -->

			<div class="subSection">
				<h2>
					Welcome to RGB Classic Games, a very simple web site about a very simple time.
				</h2>
				<p>
					A long time ago, back in the 1980s and early 90s, the best games were shareware or, more accurately, the first few levels were free and you had to pay for the rest. These were the games my friends and I spent our childhood playing, which are now at risk of being lost forever because modern operating systems don't directly support them any more.
				</p><p>
					RGB Classic Games is devoted to preserving classic games for PC operating systems (DOS, CP/M-86, OS/2, Windows) and making it easy to play them on modern computers.
				</p><p>
					This particular classic games site is a little more focused than most. Companies and individuals produced thousands of shareware games for DOS and, like movies and books and anything else, a lot of them weren't very good. Most sites aim for quantity. This site is almost exclusively dedicated to games that were distributed commercially, except for a select few games that were extremely good and achieved the same level of quality. Only the best games make it to this site.
				</p><p>
					This website is attempting to include every version of each listed game. A lot of research has gone into making sure that all of the information on this site is correct. You'll quickly notice that there is no other web site that has all of these files in one place. RGB Classic Games is quite possibly the most complete, and most accurate classic DOS games resource in the world.
				</p><p>
					The highest ideals of this site are to <strong>support the authors by providing links to their web sites</strong> and <strong>ordering information for the full versions of games that are still sold</strong>. We also encourage the authors of classic games to <em>preserve their works for future generations</em> by <strong>making them available for sale or as freeware</strong>. If you enjoy a shareware game, <strong>please consider buying it from the author!</strong>
				</p><p>
					All of the games on this site are freely distributable because they are shareware, freeware, freely licensed open source, or because the Copyright holder has officially and legally released all rights to the public domain.
				</p>
			<!-- .subSection --></div>

			<hr />

			<div id="latestNews">

				<div id="comingSoon">
					<h2>Coming soon:</h2>
					<ul>
						<li>Far Cry <b>(Win9x)</b></li>
						<li>Final Fantasy VIII <b>(Win9x)</b></li>
						<li>Grand Theft Auto <b>(DOS)</b></li>
						<li>MDK <b>(DOS, Win9x)</b></li>
						<li>Tomb Raider III <b>(Win9x)</b></li>
						<li>XIII <b>(Win9x)</b></li>
					</ul>
				<!-- .comingSoon --></div>

				<h2>Latest News</h2>

				<h3>10 April 2011</h3>
				<ul>
					<li>
						I am pleased to announce that we have replaced JPC with a Java version of DOSBox to make DOS games playable in your browser! Speed and compatibility are almost perfect in every game. <a href="online/jumpbump.html">Jump 'n Bump</a>, <a href="online/1paga.html">Paganitzu</a>, and <a href="online/1wolf14.html">Wolfenstein-3D</a> are finally playable, and games that used to play slowly, like <a href="online/doom19s.html">DOOM</a> and <a href="online/war1demo.html">Warcraft: Orcs & Humans</a>, now play at full speed (assuming that you have a modern computer and browser). JPC's PC Speaker emulation has been replaced with full Sound Blaster sound! Now you can play <a href="online/dblast30.html">Drum Blaster</a> in your browser. And check out how awesome <a href="online/4duke.html">Duke Nukem II</a> sounds! I'm adding new games as fast as I can (200 and counting!). <a href="online.html">Check it out!</a>
					</li><li>
						Added <a href="game/Cyberdogs.html">Cyberdogs</a> (DOS).
					</li><li>
						Added a <a href="compilation.html">Compilation CD</a>: Even More Combat Games.
					</li>
				</ul>

				<h3>31 March 2011</h3>
				<ul>
					<li>
						<h4>Major Update IV: Phase V</h4>
						<ul>
							<li>
								Localization: The menus and parts of the main page have been translated into French and Spanish (pick a language from the side menu). Please check the quality of the translations, and feel free to translate the site into any other language!
							</li><li>
								To make the site even more universal, there are now icons for the game genres in the dropdown GAMES menu.
							</li><li>
								Many bugs have been squashed and typos corrected.
							</li><li>
								Oh, and since this is still a game site, I added some new games.
							</li>
						</ul>
					</li><li>
						Added 3 games: <a href="game/Bust-A-Move_2%3A_Arcade_Edition.html">Bust-A-Move 2: Arcade Edition</a> (DOS), <a href="game/Pinball_Dreams.html">Pinball Dreams</a> (DOS) and <a href="game/Pinball_Illusions.html">Pinball Illusions</a> (DOS).
					</li>
				</ul>

				<h3>7 March 2011</h3>
				<ul>
					<li>
						RGB Classic Games has its 6th anniversary.
					</li><li>
						Added 2 games: <a href="game/Norse_by_Norse_West%3A_The_Return_of_the_Lost_Vikings.html">Norse by Norse West: The Return of the Lost Vikings</a> (DOS, Win9x), and <a href="game/X-Men%3A_Children_of_the_Atom.html">X-Men: Children of the Atom</a> (DOS).
					</li><li>
						To avoid having an excessive number of news items, I usually consolidate all of the updates within each month. RGB Classic Games now has a <a href="http://twitter.com/#!/RGBClassicGames">Twitter account</a>! From now on there will be a tweet whenever a new game is added to the site, and you can make a comment about it or retweet the news!
					</li>
				</ul>

				<h3>27 February 2011</h3>
				<ul>
					<li>
						<h4>Major Update IV: Phase IV</h4>
						<ul>
							<li>
								Now that DOSBox has a 3Dfx patch, special APIs like <a href="video/wing.html">WinG</a>, <a href="video/glide.html">Glide</a>, and <a href="video/directx.html">DirectX</a> have been added to the <a href="search.html#video">Search by Video Mode</a> options.
							</li><li>
								Fixed a number of bugs, dead links, and typos.
							</li><li>
								Split the Utilities page into separate pages for whatever operating system the game you want to play is for.
							</li><li>
								Created the infrastructure for a fundamental change to the site coming in March.
							</li><li>
								Oh, and since this is still a game site, I added some new games.
							</li>
						</ul>
					</li><li>
						Added 20 games: <a href="game/3D_Ultra_Pinball.html">3D Ultra Pinball</a> (Win9x), <a href="game/3D_Ultra_Pinball%3A_Creep_Night.html">3D Ultra Pinball: Creep Night</a> (Win9x), <a href="game/Fire_Fight.html">Fire Fight</a> (Win9x), <a href="game/Full_Tilt!_Pinball.html">Full Tilt! Pinball</a> (Win9x), <a href="game/Full_Tilt!_2_Pinball.html">Full Tilt! 2 Pinball</a> (Win16, Win9x), <a href="game/Grand_Chess.html">Grand Chess</a> (Win9x), <a href="game/Lost_Vikings,_The.html">The Lost Vikings</a> (DOS), <a href="game/Microsoft_Pinball_Arcade.html">Microsoft Pinball Arcade</a> (Win9x), <a href="game/Microsoft_Return_of_Arcade.html">Microsoft Return of Arcade</a> (Win16), <a href="game/Monster_Truck_Madness.html">Monster Truck Madness</a> (Win9x), <a href="game/Monster_Truck_Madness_2.html">Monster Truck Madness 2</a> (Win9x), <a href="game/Need_for_Speed_II.html">Need for Speed II</a> (Win9x), <a href="game/Pinball_Fantasies.html">Pinball Fantasies</a> (DOS), <a href="game/Prince_of_Persia.html">Prince of Persia</a> (DOS), <a href="game/Prince_of_Persia_2%3A_The_Shadow_and_the_Flame.html">Prince of Persia 2: The Shadow and the Flame</a> (DOS), <a href="game/Sam_&_Max_Hit_the_Road.html">Sam & Max Hit the Road</a> (DOS), <a href="game/SimCity_2000_for_Windows_95.html">SimCity 2000 for Windows 95</a> (Win9x), <a href="game/Warcraft%3A_Orcs_&_Humans.html">Warcraft: Orcs & Humans</a> (DOS), <a href="game/Warcraft_II%3A_Tides_of_Darkness.html">Warcraft II: Tides of Darkness</a> (DOS), and <a href="game/Zillions_of_Games.html">Zillions of Games</a> (Win9x).
					</li><li>
						Added a <a href="misc/modern.html">modern</a> game: <a href="game/Paku_Paku.html">Paku Paku</a> (DOS).
					</li><li>
						There are now over 50 Win9x games on the site!
					</li><li>
						Added 3 utilities: <a href="utilities/win9x.html">Printscreen Fix</a>, <a href="utilities/win9x.html">Win32s</a>, and <a href="utilities/win16.html">WinG</a>.
					</li>
				</ul>

				<a href="news.html" class="readMore">News Archive</a>

			<!-- #latestNews --></div>

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

		<hr />

		<div id="sideBar">

			<div id="programSearch">

				<h2>Program Search</h2>

				<form method="post" action="searchresult.html" class="titleSearch">
					<fieldset>
						<label>By Game Title</label>
						<input type="text" name="Title" />
						<input type="submit" value="go" />
					</fieldset>
				</form>

				<ul class="topLevel">
					<li><a href="companylist.html">By Company</a></li>
					<li><a href="search.html#legal">By Legal Status</a></li>
					<li><a href="search.html#video">By Video Mode</a></li>
					<li><a href="search.html#year">By Year Released</a></li>
					<li><a href="misc/source.html">Games with source code</a></li>
					<li><a href="misc/cheats.html">Games with cheat codes</a></li>
				</ul>

				<h3>By Operating System</h3>
				<ul>
					<li><a href="win9x.html">List all Win9x games</a></li>
					<li><a href="win16.html">List all Win16 games</a></li>
					<li><a href="os2.html">List all OS/2 games</a></li>
					<li><a href="all.html">List all DOS games</a></li>
					<li><a href="online.html">All in-browser DOS games</a></li>
				</ul>

				<h3>Expert recommendations</h3>
				<ul>
					<li><a href="picks/Litude.html">Litude's picks</a></li>
					<li><a href="picks/MrFlibble.html">MrFlibble's picks</a></li>
				</ul>

				<form method="post" action="companysearch.html">
					<fieldset>
						<label for="companySearchTitle">Company Search</label>
						<input type="text" name="Title" id="companySearchTitle" />
						<input type="submit" value="go" />
					</fieldset>
				</form><br />

				<a href="submit.html" class="submitLink">Submit a game</a>

			<!-- .programSearch --></div>

			<hr />

			<div class="googleAdvert">
				<script type="text/javascript"><!--
					google_ad_client = "pub-0841681205384106";
					/* link1 */
					google_ad_slot = "0754643742";
					google_ad_width = 160;
					google_ad_height = 90;
				//-->
				</script>
				<script type="text/javascript"
					src="http://pagead2.googlesyndication.com/pagead/show_ads.js"
				></script>
			<!-- .googleAdvert --></div>

			<hr />

		<!-- #sideBar --></div>

	<!-- #columnWrapper --></div>

	<div id="footer">
		This website is &copy; 2005-2011. All software is &copy; its respective owner.
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>
Havenae checked it yet against the validator, but that should be valid XHTML 1.0 Strict... None of those Loose Trannies allowed or wanted. :oops: This isn't 1998.

Now you're probably wondering "why XHTML?"... I prefer it over HTML just for the stricter formatting rules -- it makes it clearer what's going on when you HAVE to use a close on every element. You can see I'm also a stickler for formatting; To me white-space stripping is just a method to hide bad coding practices, and when you SHOULD be sending everything gzipped anyways (or should I say mod_deflated?), 100-200 bytes of tabs and carriage returns REALLY shouldn't matter.

Of course, I just like clean verbose code that says what things are... No, I don't worship at the throne of all things Wirth.

BTW -- it's 18k if you strip a few of the comments I added to make some of the how/why/what in my markup clearer, almost dead on to my guesstimate formula... though if I add those changing images for the menu rollovers it may grow 1k or so. I may play with making it a quickSwitchy layout since right now at full dynamic width it gets hard to read many of the paragraphs as you 'lose' what line you are on. (taller line-heights can help address that too).

I also axed a few <head> elements that weren't doing anything useful like the title meta (no such thing), language meta (it should be called "content-language" and use the two letter code!) subject meta (nothing actually uses it) ... and I left out the ICRA bloat for now as well. (does anything actually use that?)

Oh, and if you're going to have language support, suck it down and make it a separate URL and a page reload instead of wasting time sending the foreign language content to users who don't want/need it... That's what I'm usually referring to by "javascript for NOTHING". That way you can actually make MEANINGFUL use of the Content-Language meta and do the whole page.

Also, since I'm working in a MODERN doctype (aka STRICT) there's no such thing as a target attribute when you don't have framesets, so those all got axed too. You should never force opening a new window on the user and that whole "it helps keep people on my page" nonsense is exactly that, a load of baloney. Breaking normal navigation methods (like back) and forcing users into a new window/tab whether they want to or not is NOT good usability.

Which is why target is deprecated... and no, you shouldn't try to replicate the behavior using javascript either!

I'm out the door for lunch in a few minutes, but if I have time later I'll toss together the CSS I'd use to make that work pretty much just like that original home page.... well, except the hovers will hover WHEN you mouse-over them and disappear immediately when you mouse-out instead of that annoying delay... (probably use csshover3.htc for legacy IE support)

Though again I'd be swinging a huge axe at the dropdown menu stuff -- it's not DosLynx or Arachne friendly... (this is a retro site after all!)
If everyone is thinking the same, somebody isn't thinking.
User avatar
DOSGuy
Website Administrator
Posts: 1063
Joined: September 2nd, 2005, 8:28 pm
Contact:

Site source code

Post by DOSGuy »

deathshadow wrote:Actually, you are taking advantage of tags that no longer EXIST in the HTML standard... Though that's because there are actually TWO HTML's... TRANSITIONAL and STRICT.

...

For reference, tags you shouldn't be using:
applet, basefont, center, dir, font, isindex, layer, menu, noembed, s, strike, u

... and there are dozens of attributes you shouldn't use anymore like align, valign, color, bgcolor, background, face, link, vlink, alink,
I can see that you're a purist, whereas I try to be practical, which sometimes means breaking the rules. The Strict standard is based on a philosophy that everything to do with style should be handled by CSS. That's great, but what if I don't want to use CSS? That's why the Transitional standard exists.

The deprecated tags are exactly that: deprecated. They are still part of the HTML standard, but their use is discouraged. That said, I've stopped using the deprecated tags anyway. I don't use any of the tags you mentioned except for applet, because I copied and pasted that code from the jDosbox website. (Incidentally, the author posts on this forum, so you might want to let him know that applet is deprecated.) I also don't use any of the attributes you listed, unless I accidentally left an "align" tag on the site when I was screwing around with the new game list sidebar on the online game pages. (Like most things in my life lately, that was a rush job.) Late last year I had the site validating as HTML 4.01 Strict and almost validating as HTML 5, though some areas may have reverted since then. Still, I stick with the Transitional DTD because it gives me the flexibility to use deprecated tags if they get the job done faster and easier in a rush.
deathshadow wrote:
DOSGuy wrote:The use of uppercase tag names and lowercase attributes is the standard recommended by the W3C to this day.
Uhm, NO... It's invalid markup according to the HTML 4 STRICT, which is what websites should be written in (or XHTML 1.0 Strict which I prefer for the consistent formatting rules -- yeah, I'm a Pascal guy alright) as of 1998 as it is the most recent recommendation.
Well, I can only say that I found it somewhere on W3C's site as recently as 2008 or 2009 (and no, it wasn't W3Schools, which I only learned about a few months ago). But even if it's not recommended any more, this is a perfect example of the conflict between purism and practicality. HTML is case insensitive, and using uppercase tag names make it easier for me to find them in my code (since I don't use an HTML editor that would highlight them for me). Who does my code need to satisfy? Browsers don't care either way, and uppercase works best for me, so I'm going to continue to use uppercase!

And indeed, using lowercase tags would be a good idea if I planned to ever use XHTML again, which I don't. I converted all of my sites to XHTML around 2000, and I switched them all back a few years later. XHTML was hyped as being the next big thing when I was learning HTML, and I fell for it. It was supposed to be a transitional language between HTML and XML, but I just use HTML or XML as I need to. XHTML is an evolutionary dead end: it hasn't evolved and will die at 1.0. XHTML is one of the languages that HTML 5 officially replaces. I'm surprised to see anyone advocating for XHTML at this point.

deathshadow wrote:
DOSGuy wrote:The site has always used CSS for style
... and yet, no offense, appears to have missed the point of CSS -- separation of presentation from content and semantic markup.

For example:
class="FFA0A0" style="width: 20%;"

That style has no business being in the markup, and specifying the color in the markup is no different than saying color= -- you missed the POINT. HTML is for saying what things ARE -- WHY are you placing that color on it? WHY are you setting that width. WHAT is that element - WHAT it is should be the class name, with nothing resembling appearance even belonging in the HTML.
FFA0A0 isn't a color, it's a class! The external CSS file defines a number of properties of that class. Yes, the name is based on the color that I used to use for that portion of the menu (before I replaced it with an image), but there's no rule against that! The "width: 20%" is there because this is the only instance of that class that needs its width defined at 20%. Sure, I could have created a subclass for this special case to avoid using in-line CSS, but it seemed like more work to do it that way. While the difference in coding time is negligible in this case, this is an example of my programming philosophy: I usually won't create more work for myself in order to conform to some philosophical rule. If "the right way" is also "the hard way", is it really the right way?
deathshadow wrote:
DOSGuy wrote:though I recently added the ability to change the site's font size and face. I use JavaScript to make the change instant.
Which does NOT appear to be working here AT ALL. I'm getting a uselessly small 13px so it's getting overridden SOMEWHERE... and that script does nothing in either Opera or FF since it' doesn't seem to be firing 'onchange' nor does it have a submit method...
I removed that functionality yesterday after reading your post. I doubt that anyone was using it, so it was just a gimmick. The site no longer uses JavaScript to handle anything to do with style.
deathshadow wrote:
DOSGuy wrote:Font sizes are only declared in pt.
If you had read the accessibility guidelines (WCAG) you'd know you shouldn't be using PT either, you should be using %/EM... and I'm not seeing pt in Opera... since I'm a 120dpi/Large fonts user, so I should be seeing 16px not 13px if that's 10pt. SOMEWHERE it's getting overridden.
Seriously? %/EM?! Wow. Nope, I don't think I'm going to bother with that crap. PT has been the standard way of defining fonts since... whenever fonts were invented. If a browser can't properly render PT, it's time to get a new browser!
deathshadow wrote:

Code: Select all

  <TD class="ACE78C" style="width: 20%;"><SPAN onMouseOver="mopen('m2')" onMouseOut="mclosetime()">GAMES</SPAN>
   <DIV id="m2" style="background: #C8FFC8; z-index: 1;" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">

   <IMG id="preview" src="images/icons/rgb.png" width="128" height="128" alt="RGB" style="float: left; margin: 4px;">

   <SPAN style="float: left;" onMouseOut="prevu(rgb)"><A href="genre/3dshooter.html" onMouseOver="prevu(fps)">3D Shooter</A>
   <A href="genre/adventure.html" onMouseOver="prevu(adventure)">Adventure</A>
   <A href="genre/interactivefiction.html" onMouseOver="prevu(interactivefiction)">&nbsp;&nbsp;Interactive Fiction</A>
   <A href="genre/graphicadventure.html" onMouseOver="prevu(graphicadventure)">&nbsp;&nbsp;Graphic Adventure</A>
   <A href="genre/arcade.html" onMouseOver="prevu(arcade)">Arcade</A>
   <A href="genre/paddle.html" onMouseOver="prevu(paddle)">Ball and paddle</A>
   <A href="genre/traditional.html" onMouseOver="prevu(traditional)">Card and board games</A>
   <A href="genre/educational.html" onMouseOver="prevu(educational)">Educational</A>
   <A href="genre/fighting.html" onMouseOver="prevu(fighting)">Fighting</A>
   <A href="genre/gamecreation.html" onMouseOver="prevu(gamecreation)">Game Creation</A>
   <A href="genre/pinball.html" onMouseOver="prevu(pinball)">Pinball</A>
   <A href="genre/platform.html" onMouseOver="prevu(platform)">Platform</A>
   <A href="genre/puzzle.html" onMouseOver="prevu(puzzle)">Puzzle</A>
   <A href="genre/racing.html" onMouseOver="prevu(racing)">Racing</A>
   <A href="genre/rts.html" onMouseOver="prevu(rts)">Real-Time Strategy</A>
   <A href="genre/rpg.html" onMouseOver="prevu(rpg)">RPG</A>
   <A href="genre/shooter.html" onMouseOver="prevu(shooter)">Shooter</A>
   <A href="genre/simulation.html" onMouseOver="prevu(simulation)">Simulation</A>
   <A href="genre/sports.html" onMouseOver="prevu(sports)">Sports</A>
   <A href="genre/strategy.html" onMouseOver="prevu(strategy)">Strategy</A>

   <BR><A href="misc/unreleased.html">Previously unreleased</A>
   <A href="misc/modern.html">Modern DOS games</A></SPAN>
   </DIV>
  </TD>
Working from the top. Presentational classname, presentational style in the markup, div for no reason, javascripted hooks doing CSS' job, presentational images as IMG tags in the markup, line-break on a element to do padding's job, span wrapping multiple tags for no good reason, MORE presentational style in the markup, and completely non-semantic markup since that's obviously a list... Mind you, a list would put some markup back on it since that would add a UL and multiple LI... and classes to replace the onmouseovers. (though it would axe the ENTIRE prevu javascript nonsense). Might actually grow the markup 100 or so bytes by the time the image sandbags are added to replace the scripting, but it would take an axe to the need for javascript which is ALWAYS a good thing. Personally, I'd probably axe the hover effect images as a waste of bandwidth anyways... or switch to smaller ones... though again, I'd axe that menu as a whole since it's useless on my netbook :P
This was a recent experiment in using JavaScript's ability to preload images to get the genre icons in the user's browser cache before they hover over the link. It's a hack that has been on the chopping block since it was implemented, but I've been busy every weekend since I wrote it. I already know how I'm going to fix it, but I've been too busy with trips and death and related obligations to get to it. That mess will be going away this weekend. You happend to pick the only part of the site that's in a beta stage for your example.

As for the icons, they serve dual purposes. Not everyone knows what these genre names refer to; and not everyone who visits the site speaks English. These graphical representations are about being inclusive.
deathshadow wrote:Tables exist for TABULAR data -- like a spreadsheet or database output, not for just 'making columns'. I think a LOT of the problems you may have been having was your not using semantic markup and practicing separation of presentation from content; much less the reliance upon things that have NO PLACE in modern markup like ALIGN, VALIGN, CENTER, FONT, STYLE on EVERY element...
The LEM was designed to land on the Moon, but the crew of Apollo 13 used it to get home. Tables aren't supposed to be used for layout, but they can be! I don't disagree with you, but the site has an infinite mandate with finite development time. Visitors never stop requesting new games, and their requests are always top priority unless something on the site is broken. Reverting to tables got the job done in the least amount of time, and converting the layout back to CSS hasn't made it back to the top of the priority list in the short time that has passed since I re-introduced the left-side menu. I'll try to fix it this weekend.
deathshadow wrote:Another simple example:

<P><STRONG>By Operating System</STRONG>

WHY isn't that a heading tag? You're "more emphasis" to it which is just wrong, it's a heading for the content that follows.
That's another practical vs. philosophical issue. My recollection is that I didn't want either the blank line above or below the heading when I designed the menu, so I went with the STRONG tag. Of course, I could have overridden the default behavior of the heading tag to remove the blank line that I didn't want, but if you have to override the default behaviour of a tag, are you really using the right tag?

Since I don't necessarily want it to be emphasized by a browser for the visually impaired, I probably should have used <B> instead of <STRONG>, but I've gotten out of the habit of using <B> tags. The side menu has undergone a number of revisions since I created it, so maybe a header tag would work now, but it didn't at the time.
deathshadow wrote:Is what should probably be there -- EVERYTHING ELSE you were doing there belongs in the external style sheet; that way it's at least cached across page-views... and allows for graceful degradation if done properly. (the multi-spans are for double gilder-levin which would preserve CSS off appearance).
I had never thought about caching as a benefit of an external style sheet. I taught myself HTML/CSS/Javascript/PHP/SQL, so I've never had a teacher to explain the WHYs of web design to me. What is graceful degradation, and what the heck is a gilder-levin? These are things that don't show up in a list of valid tags and properties.
deathshadow wrote:You're only heading is a H4 -- that doesn't make ANY sense...

...

The most prominent of which is off-site to a google advert... that doesn't even show up here. (and on FF I'm not running an adblock?!?)... Wait, there's supposed to be an advert there? Ok, it's showing in IE and Chrome... most unusual. Google ads are usually fairly bulletproof.
Of course you're right that an H4 should follow an H1, H2, and H3, but not every page on the site needs headers of those levels. The hierarchical intention of heading tags is a legacy of Word documents that isn't always relevant on the visual web. The web is no longer a collection of documents; the web is visual and interactive. There are entire pages on this site (notably the search pages) that have no text other than links. While the site does have a few articles, it's mostly a delivery system for downloads and online gameplay. The H4 is there because it produced bold text at the size I wanted, and accomplished what I wanted using less code than CSS. You're right that I shouldn't do that, so I'll fix it. Still, I dislike doing more work in the name of conformity to mostly arbitrary conventions. In this case, I'll justify breaking my programming philosophy with the possibility that it might confuse a browser for the visually impaired, as that's the only reason I can think of for a browser to use heading tags to determine the "hierarchy" of a web page. As far as I'm concerned, the entire concept of a web page having a hierarchy died with Web 1.0. Web 2.0 doesn't require text, so the concept of a hierarchical structure to a text-filled web page is rapidly becoming obsolete. At this point the header tags are a shortcut for combining the <P> and <B> tags, otherwise they should have been deprecated by now.

As for the Google code, I just copied and pasted what they gave me.
deathshadow wrote:Though... did you fix the code for the forms in the sideBar? I could have sworn the fieldset was wrapping the form instead of the other way around yesterday...
Yes, I fixed that. Thanks for pointing it out.
deathshadow wrote:DIV for nothing, there are NO paragraphs in that code (you're using P in the typographical sense instead of the semantic sense), those are LISTS of choices so get them in list tags, the B tags inside the first set of anchors should be handled off a parent wrapping element (like a UL) since you shouldn't be changing their emphasis (not that B should, but it does thanks to legacy)

...

and frankly 90% of that code aren't form elements, so they don't belong in the fieldset!
Of course I'm not going to use lists! If I use lists, I'll get bullets unless I use CSS to specify that I don't want them. If you have to overridge a tag's default behavior to change something this fundamental, use a different tag! Lists are for creating bullets. If you don't want bullets, don't make a list.

And yes, I'm misusing the fieldset tag to create a rounded border around a group of links that aren't part of the form. Jim Lovell misused the LEM to get back to Earth. I could use CSS to recreate the effect that I get from fieldset, but why should I have to? I don't care what the tag was designed to do, I care what it can do! One man's bad form is another man's thinking outside the box.
deathshadow wrote:There's actually a formula I use to determine how well coded a site is...

1.5K + content*1.5 + 200 bytes per 'content object' (images/embed/object)

By that formula your 11k of content should come in at around 18k (since there are NO content images)... and you've got 26k, indicating something's amiss. (though not horribly so -- you'd be surprised how many websites would have a hundred K for what you have there).
That's a very cool formula. I think you'll need to adjust it going forward as the web becomes more visual and less texty. DOS gave way to Windows, and iPhones are taking over the world. People want icons and quick navigation. I've been guilty of hanging onto Web 1.0, but I'm working to make the site more visual and functional lately. Swapping images for text links and static content for tabs that dynamically load content through JavaScript means more code per K of content. But that's not a bad thing! Less content doesn't equal less substance. This site has over 1000 downloads and hundreds of screenshots. It has little to say, but what little content there is is thoroughly fact-checked (by myself and by the community). If it stops looking like a page you would have visited with Netscape Navigator and starts looking more like the iOS, that will require more code, but it will be a worthwhile investment.

And yes, I've snooped at enough source code that I can agree that most websites would use 100k of code to do what I've done in 26k. I may not always use the correct tag, but I don't often use multiple tags to accomplish what a single tag could do, and the site certainly isn't full of tags that do nothing (blasted DreamWeaver opens and closes tags around empty spaces!). You're from an era when every byte and every clock cycle counted, and I respect that. How many people would even try to make a game that would work on an 8088 at this point? As a child of the 80s, I'm also from the era of limited resources (to a lesser extent), so I'm never intentionally wasteful. I pngout and optipng every screenshot and icon on the site. I never add a graphic or function without weighing the impact on bandwidth, even though I have unlimited bandwidth. I can no longer afford to design for dial-up users, but I won't make anyone's experience any slower than I have to.

I'm committed to making the site (and its underlying code) as good as possible, so I'll see what I can do over the weekend. You can put me through the ringer again on Monday.
Today entirely the maniac there is no excuse with the article.
User avatar
DOSGuy
Website Administrator
Posts: 1063
Joined: September 2nd, 2005, 8:28 pm
Contact:

Re: Are the latest changes to the site good or bad?

Post by DOSGuy »

deathshadow wrote:Oh, and if you're going to have language support, suck it down and make it a separate URL and a page reload instead of wasting time sending the foreign language content to users who don't want/need it... That's what I'm usually referring to by "javascript for NOTHING". That way you can actually make MEANINGFUL use of the Content-Language meta and do the whole page.
Okay, this is what happened here. One of the site's regulars sent me a Spanish translation of the menu system and the main page. I decided to make a French translation while I was at it. When a site goes multilingual, there are some options.

Subdomains: en.classicdosgames.com, es.classicdosgames.com, fr.classicdosgames.com
Folders: classicdosgames.com/en/, classicdosgames.com/es/, classicdosgames.com/fr/
Ugly URLS: index_en.html, index_es.html, index_fr.html

The downside to all of these methods is that I would have to redirect all traffic that doesn't specify "es" or "fr" to the "en" equivalent, and every existing link to my website on the entire internet is no longer correct. For years to come, the vast majority of all traffic will have to be redirected, and search engines may punish me for moving all of my pages.

Since the menu and the welcome blurb are the only things that are ever likely to be translated, I made a decision to keep the site structure as is, and simply use PHP to load the menus from a different include based on the language cookie it finds. For the index page ONLY, instead of confusing things by having three different versions of the main page, I just put all three languages in the same page and I load the one that's needed. It's not an elegant solution, but it fits the scale of the project. How much trouble should I go to for a single page?
deathshadow wrote:Also, since I'm working in a MODERN doctype (aka STRICT) there's no such thing as a target attribute when you don't have framesets, so those all got axed too. You should never force opening a new window on the user and that whole "it helps keep people on my page" nonsense is exactly that, a load of baloney. Breaking normal navigation methods (like back) and forcing users into a new window/tab whether they want to or not is NOT good usability.

Which is why target is deprecated... and no, you shouldn't try to replicate the behavior using javascript either!
Eliminating the target attribute is a load of bull that I've opposed ever since I found out that it wasn't allowed in Strict. Who are my site's beta testers? My friends and family. Not one of them knew that you could right-click on a link and specify "open in new window/tab". If I don't use the target attribute to open a new window for my visitors, they're forced to leave my site when they click on an external link. I hate when clicking a link takes me away from the site that I'm on, but at least I'm savvy enough to know that I can choose where the new page loads. Most people aren't.

In Windows, when you left-drag a file into a folder on the same drive, the file is moved, and if you left-drag it into another drive, the file is copied. You can choose the behavior by right-dragging, but most people don't know that you can right-drag. Since that's the case, Windows defaults to the safest behavior when left-dragging. The internet should be the same way. When you left-click on a link to a page within the current domain it should open in the same tab, and when you left-click on a link that leads to a different domain, it should open in a new tab. Opening a new site in a new tab should be the default behavior in all modern browsers; it should be assumed that you don't want to leave the current domain when you click on an external link. (Note that this assumption even holds when you're using a search engine! I often want to leave the search engine when I click on a link on the results page, but just as often I want to keep Google open because I want to explore two or three of the results that it returned. If I forget to right-click, I either have to click Back ten times when I'm done with the first site, or go back to Google and search again! Never assume that I want to leave the domain when I click on a link!)

Think about it logically. If your visitor doesn't know about the right-click options, and you aren't using target="_blank", what are they going to do when they get to the new site if they wanted to stay on your site? They're going to copy the URL from the address bar, open a new tab, paste the URL into the new tab, then go back to the old tab and press Back. If, on the other hand, you assume that they always want to open a link to a different domain in a new tab, and they don't want your site to be open any more, they'll simply close the tab that they no longer want! It's far easier on your visitor if you assume that they want to open the link in a new tab, and they don't, than if you assume that they don't want to open the tab in a new link, and they do! It's just common sense that a new domain should always open in a new tab, but since this ISN'T the default behavior of browsers, a thoughtful webmaster should code target="_blank" for them.

I just asked my wife, who can be considered a typical internet user. She works for the Parliament of Canada, has been using for the internet for 15 years, and didn't know that you could right-click a link and choose "open link in new tab" until I showed her 6 months ago. I asked her what she would do if clicking a link took her away from a website that she wanted to stay on, and she confirmed the procedure in the paragraph above, except that she would have opened a whole new browser window! So this idea that everyone on the internet knows about right-clicking on links is ridiculous; this noble-sounding justification of "it's the user's decision where the new page opens" is nonsense because nobody knows that they have the option!
Today entirely the maniac there is no excuse with the article.
User avatar
deathshadow
Classic Game Author
Posts: 35
Joined: February 8th, 2011, 5:42 pm

Re: Site Source Code

Post by deathshadow »

Good idea breaking this out -- it was turning into a threadjack.

<henghist>Threadjack, THREADJACK, THREADJACK!!!, You're all gonna die... die...</henghist>
DOSGuy wrote:I can see that you're a purist, whereas I try to be practical, which sometimes means breaking the rules. The Strict standard is based on a philosophy that everything to do with style should be handled by CSS. That's great, but what if I don't want to use CSS?
Then you aren't designing in a modern manner for modern browsers using modern techniques, with a mind to graceful degradation to less capable devices by way of progressive enhancement.

Later on you asked about the first of those, I'm going to cover that up front.

Graceful degradation means "how well does the site work as more advanced technologies disappear" -- does the site fall apart if scripting is disabled/unavailable. How does it handle images being turned off while CSS is still on -- how does it handle CSS not being present at all if all presentation is stripped from the markup.

Naturally it's impossible to have it perfect on all of those, but a lack of any technology above the base HTML should NOT get in the way of the user having access to the content. (for example, this is where AJAX abuse for mimicking frame behaviors is a miserable /FAIL/)

The separation of presentation from content works to this -- you aren't supposed to choose tags based on their default appearance, but for what they MEAN; since the default appearance is ENTIRELY left up to the user agent (browser).

Let me say that again, the default appearance of ALL HTML TAGS is left ENTIRELY to the discretion of the user agent and is NOT actually defined in the specification. There are recommendations and suggestion, but nothing that says ANY user agent "has to display it this way"... it's why the spec is filled to the brim with lots of "may", "can" and "could" -- but not a whole lot of "should" and "must".

NEVER assume the default appearance of a HTML tag is why you should use it!

This goes back to the POINT of HTML, device neutrality -- the ability to write a document that can customize itself to ANY device from the 22x21 display on a VIC-20 to a 132x66 per page daisy wheel print to a 2048x1536 24 bit 32" display. We got away from that in the late 90's with the browser wars -- HTML 3.2 and by extension transitional being bloated nonsense that was slapped together with little care for if it worked right on anything other than 640-1024 wide screen.

With the proliferation of devices ranging from 320x480 handhelds to 800x600 pads to 1920x1200 24" LCD's the 'need' for device neutrality is stronger than ever.

Now, that leaving it up to the user agent is WHY cross-browser coding can be a royal pain -- take INPUT as an example. IE treats it as a 'special' element that has em padding of which you have no control on top of whatever padding/width/height you set, and it ignores height using line-height instead. FF treats it as a 'special' element that has a fixed 4px padding over which you have no control... Opera treats them EXACTLY as if they were inline-block, giving you full control over it's padding and borders... while webkit browsers go nuts tacking all sorts of fancy presentation on them that craps all over trying to style a form with CSS.

... and ALL of them are valid by the specification since the appearance of a INPUT is NOT strictly defined -- this is true of EVERY tag; it's why you can't trust the default line-height, generally end up using resets to null margins and padding on block-level elements for cross-browser consistency, and a dozen other things that separate the "looks like something written for netscape in 1998" from "a professional layout".

Now, I mentioned "progressive enhancement" -- If you build your site with semantic markup so that the defaults for all browsers (including non-visual and search engines) know what things ARE, then slowly add your enhancements by creating the layout with CSS, adding enhancements with scripting (without supplanting functionality) you automatically get "graceful degradation".

It's why my site building approach is to semantically mark up the content first, create the layout with CSS without images, then apply the desired images. At each point I may end up having to add some extra DIV or SPAN sandbags/wrappers for use on applying appearance, but I try to restrict that to 'semantically neutral' tags and only add them as needed so as not to change the meaning of the content.

It's also why the garbage churned out by PSD jockeys are usually a miserable /FAIL/ -- Photoshop and other paint programs should be used at the END of the process, not the start. People visit websites for the content, not the goofy images and gee ain't it neat animated garbage hung around it. (Which in most cases ends up the equivalent of polishing a turd)
DOSGuy wrote:That's why the Transitional standard exists.
Transitional exists for supporting old/outdated/not recommended for use methodologies on old websites, not for creating anything new after 1998... It is there to 'transition' old coders from their old/sloppy habits into the new way of doing things.

<m.cole>... and I quote:</m.cole>
This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

... and since about 2004 onward, about when we stopped giving a flying fig about Nyetscape 4 is when it stopped being 'required'.

Even if Gecko is still just Nyetscape's sweetly retarded cousin about a great many things. "Hello, my name is Firefox. Mozilla Firefox. My momma always said, Life is like a box of open source. You never know what you're gonna get." -- no joke, I consider FF the Forest Gump of web browsers. While IE is Ronald McDonald, Safari is Jessica Simpson, Chrome is a japanese loli idol singer, and Opera is Andy Dick.
DOSGuy wrote:Well, I can only say that I found it somewhere on W3C's site as recently as 2008 or 2009 (and no, it wasn't W3Schools, which I only learned about a few months ago). But even if it's not recommended any more, this is a perfect example of the conflict between purism and practicality. HTML is case insensitive, and using uppercase tag names make it easier for me to find them in my code (since I don't use an HTML editor that would highlight them for me). Who does my code need to satisfy? Browsers don't care either way, and uppercase works best for me, so I'm going to continue to use uppercase!
Invalid markup is invalid markup -- if you used more formatting you wouldn't need it; that and if you REALLY need that sort of behavior, isn't that what color syntax highlighting is for?

NOT that I use color highlighting -- the illegible acid trip drives me nuts and I'm not punctuation blind, but if you need to see the tags, use an editor with syntax highlighting.
DOSGuy wrote:XHTML is one of the languages that HTML 5 officially replaces. I'm surprised to see anyone advocating for XHTML at this point.
I'm still trying to figure out why anyone advocates HTML5 -- it's undoing a decade worth of progress by adding uselessly redundant tags (audio, video), pointless extra wrappers (like header) just to placate the people who place unneccessary div around their heading and menus, etc, etc...

I like the combination of XHTML and STRICT because the formatting rules end up a bit like Pascal in one regard... "It won't let you shoot yourself in the foot". Good code formatting habits and proper validation can prevent so many cross-browser mistakes from even cropping up. Too many developers will call such things "arbitrary" or "unneccessary"... or even "a waste of time" when such practices prevent you from spending hours debugging the simplest of mistakes... As Patton said, a ounce of sweat now saves a gallon of blood later.

Hell, even my commenting style is crafted to avoid rendering errors. (That's not a joke, yes, COMMENTS can make IE and FF render elements wrong!)

That's actually one of my issues with the disaster known as HTML 5, it's so loose a specification that any sort of 'validation' ends up meaningless -- it lets people vomit up code any-old-way like the pinnacle of 1998 bloated inefficient lazyness. It's setting itself up to be the C++ of web technologies -- and no that's not a compliment.

Though there's nothing really wrong with HTML 4.01, so long as you're working in HTML 4.01 and not HTML 3.2 with a tranny doctype slapped on it.
DOSGuy wrote:FFA0A0 isn't a color, it's a class!
I realize that, but that's a presentational class name -- and as such needlessly vague as you didn't say what it is or WHY you are assigning it that markup. Net change ZERO from just not bothering to use CSS in the first place and vomiting up HTML 3.2.

ONE of the advantages of separation of presentation from content and using CSS in the first place is being able to total reskin WITHOUT changing the markup. Using classes that say what the appearance is means editing the HTML to change the appearance -- DEFEATING THE POINT of CSS.
DOSGuy wrote:but there's no rule against that!
Just because there's no rule doesn't make it good practice -- when I see classes like "colorRed", "left", "centered" -- I always cringe; you might as well go back to using the deprecated font, center and align values at that point, as it misses the POINT of HTML and CSS. You should be saying WHY it's recieving that styling as in "what is the element".

HTML is for saying what things ARE, NOT how they are going to appear.
DOSGuy wrote:The "width: 20%" is there because this is the only instance of that class that needs its width defined at 20%. Sure, I could have created a subclass for this special case to avoid using in-line CSS, but it seemed like more work to do it that way. While the difference in coding time is negligible in this case, this is an example of my programming philosophy: I usually won't create more work for myself in order to conform to some philosophical rule. If "the right way" is also "the hard way", is it really the right way?
... and when that 20% is inappropriate for when you make your handheld.css? When you don't want that wasting the users ink when they hit print?

Which reminds me:
<LINK rel="stylesheet" type="text/css" href="style.css">

Where's your media declaration?
DOSGuy wrote:Seriously? %/EM?! Wow. Nope, I don't think I'm going to bother with that crap. PT has been the standard way of defining fonts since... whenever fonts were invented. If a browser can't properly render PT, it's time to get a new browser!
http://www.w3.org/TR/2008/WD-WCAG20-TECHS-20081103/C14

Web content accessibility guidelines!

Mind you, on that one you sound EXACTLY like I did six years ago before I embraced strict, separation of presentation from content, etc, etc... Back when I was arguing in favor of pt over %/em it was because it was (and still is) the only font metric that actually obeys the system metric (dpi setting) in Windows... But the accessibility guidelines exist for a reason; where's the harm in following them?

Especially since they are incredibly simple to use and actually work...
DOSGuy wrote: This was a recent experiment in using JavaScript's ability to preload images to get the genre icons in the user's browser cache before they hover over the link. It's a hack that has been on the chopping block since it was implemented, but I've been busy every weekend since I wrote it. I already know how I'm going to fix it, but I've been too busy with trips and death and related obligations to get to it. That mess will be going away this weekend. You happend to pick the only part of the site that's in a beta stage for your example.
Problem is, MOST of what I said is unrelated to the images... The other menu dropdowns contain 80-90% of the same flaws apart from the inlined effects.
DOSGuy wrote:As for the icons, they serve dual purposes. Not everyone knows what these genre names refer to; and not everyone who visits the site speaks English. These graphical representations are about being inclusive.
Probably why I'd class them, and use something like 16x16 or 24x24 icons next to them instead... Though as with many images you run the risk of "what the *** does that image mean?" -- thankfully you avoid that by keeping the text.

Drives me nuts when things have just icons I can't figure out what they mean... but I'm the guy who'll take a menu over a toolbar any day.
deathshadow wrote:Tables exist for TABULAR data -- like a spreadsheet or database output, not for just 'making columns'. I think a LOT of the problems you may have been having was your not using semantic markup and practicing separation of presentation from content; much less the reliance upon things that have NO PLACE in modern markup like ALIGN, VALIGN, CENTER, FONT, STYLE on EVERY element...
DOSGuy wrote:The LEM was designed to land on the Moon, but the crew of Apollo 13 used it to get home. Tables aren't supposed to be used for layout, but they can be! I don't disagree with you, but the site has an infinite mandate with finite development time. Visitors never stop requesting new games, and their requests are always top priority unless something on the site is broken. Reverting to tables got the job done in the least amount of time, and converting the layout back to CSS hasn't made it back to the top of the priority list in the short time that has passed since I re-introduced the left-side menu. I'll try to fix it this weekend.
It's just not something you should get in the habit of -- though if there are visual effects (like true equal height columns) you want to achieve I'm right there with you on retaining the tables. Unlike many I'm not completely anti-table; there are people who refuse to even use them on obviously tabular data; take a look at the default skin for vBulletin 4 if you want to see the worst tag abuse to avoid using tables ever. (or better, the forum skin at Digital Point -- I stopped going there because of the 2 megabyte page-loads)
DOSGuy wrote:That's another practical vs. philosophical issue. My recollection is that I didn't want either the blank line above or below the heading when I designed the menu, so I went with the STRONG tag. Of course, I could have overridden the default behavior of the heading tag to remove the blank line that I didn't want, but if you have to override the default behaviour of a tag, are you really using the right tag?
If you are even THINKING about the default appearance of a tag instead of it's semantic meaning, you are using the wrong tags! What does it MEAN, not "what is it's default appearance in my favorite pet browser". That's going to end up meaningless to screen readers, meaningless to search engines, meaningless on less capable browsers like DosLYNX and Arachne...

The appearance of a HTML tag is not why you should be choosing it!!!

Never was -- the browser wars got us away from that; CSS lets us drag people kicking and screaming back to it improving accessibility and making for better/cleaner sites. It's why TBL invented HTML, so that a hyperlinked document could be marked up to say what things are, allowing the user agent to best determine how to show it in relation to the device's capabilities. We got away from that in the late 90's, but were able to get back on track with CSS, and media types -- and now CSS3 is bringing media queries to further let us customize content.
DOSGuy wrote:Since I don't necessarily want it to be emphasized by a browser for the visually impaired, I probably should have used <B> instead of <STRONG>, but I've gotten out of the habit of using <B> tags. The side menu has undergone a number of revisions since I created it, so maybe a header tag would work now, but it didn't at the time.
Each has it's own meaning, or lack of meaning... Though at least you don't think B and I are deprecated (I still come across people who think that). Neither actually says what the element IS -- it's a heading... it's obviously a heading, so you use the heading tag that implies the proper meaning to the content.

Not everything is media="screen" on a desktop computer. That's HTML 3.2 thinking.
DOSGuy wrote:I had never thought about caching as a benefit of an external style sheet.
That's one of the major reasons for using it -- you can often save bandwidth by using more CSS than it saves you in HTML, the moment your average page-views per user breaks 2 pages. CSS file that's used across multiple pages on a site ends up cached, so you can use less markup and faster page loads.

It also can help pre-cache sub page information... A lot of developers go nuts breaking up 'unique sub-page values' into their own separate external CSS files, when if they spent the *OH NOES* two to four k on putting it in their main stylesheet, their site would 'feel' more responsive to the end user because all that information is already in the cache when they get to that page.
DOSGuy wrote:I taught myself HTML/CSS/Javascript/PHP/SQL, so I've never had a teacher to explain the WHYs of web design to me.
I've been a teacher for many... A LOT of your conclusions show that you've not grasped a number of the concepts... though that's not entirely your fault. There's a lot of web rot and just plain bad/outdated advice out there as many developers never got out of the 90's... Which is oddly enough who HTML 5 seems to be for -- it's certainly not for anyone who 'got it' or wants clean minimalist coding practices with concern for cross-browser and cross-platform support.
DOSGuy wrote:What is graceful degradation
Covered up above, but to recap: The ability for the code of a page to still result in a attractive useful page if certain technologies and/or capabilites go 'missing', are 'blocked' or otherwise unavailable.
DOSGuy wrote:and what the heck is a gilder-levin?
Gilder-Levin image replacement -- a technique for placing a presentational image (which has no business being in the markup; site logo's for example). You use a dummy empty element like SPAN or B and APO (absolute position) it over the text hiding it. Images off, the nicely styled text appears. When CSS3 (or should I say CSS 2.1) becomes real world deployable (I figure sometime around 2020 at the rate things are going) we'll even be able to get rid of the extra span by using :after and generated content instead.

Go to this page of mine:
http://www.ewiusb.com

In either Opera or FF with the web dev toolbar installed and turn off images. Styled text and background-colors roughly approximating the images appear. This is great for people in places like Coos County NH or the Dakota's where 33.6 dialup is a good day, or in places like say... Canada where you are stuck on a metered data plans. Sites that let you disable images and still be useful end up a godsend.

When I'm at the local college doing research or stuffing my face at Panera Bread, it's one of the first things I do in my browser since Wireless at those types of places is always over saturated.

There are many common CSS layout techniques like Gilder-Levin -- Sliding doors, even my own "Eight Corners of the World Under One Roof"
DOSGuy wrote:Of course you're right that an H4 should follow an H1, H2, and H3, but not every page on the site needs headers of those levels. The hierarchical intention of heading tags is a legacy of Word documents that isn't always relevant on the visual web.
Since HTML was created NOT for word documents, that statement makes little or no sense. EVERY page can have sensible logical heading orders... The kicker here though is what you had as a H4 isn't even the start of a new section, it's the page FOOTER/DISCLAIMER.
DOSGuy wrote:There are entire pages on this site (notably the search pages) that have no text other than links.
... and anywhere on the page do you say what those links ARE?
DOSGuy wrote:While the site does have a few articles, it's mostly a delivery system for downloads and online gameplay.
Which can still have headings like what game is being played, what file you want to download, what category the user is looking at...
DOSGuy wrote:The H4 is there because it produced bold text at the size I wanted
Which is part of why it's wrong. You chose it for presentational reasons.
DOSGuy wrote:Still, I dislike doing more work in the name of conformity to mostly arbitrary conventions.
... it's not arbitrary if you think something other than 1024x768 Screen only.

Usually when people think something is 'arbitrary' and complain about 'conformity' it's because somewhere along the way they failed to grasp one of the fundementals used to create said conventions. It's not like they were pulling rabbits out of their backside when they came up with this stuff.
DOSGuy wrote:In this case, I'll justify breaking my programming philosophy with the possibility that it might confuse a browser for the visually impaired, as that's the only reason I can think of for a browser to use heading tags to determine the "hierarchy" of a web page.
^K navigation in webkit, W/S navigation in Opera, handheld header navigation, screen readers, search engines... it's a big long list.
DOSGuy wrote:As far as I'm concerned, the entire concept of a web page having a hierarchy died with Web 1.0. Web 2.0 doesn't require text
Oooph... Here's a tip, taking technical advice from Forbes is like taking financial advice from Popular Electronics... Sorry, the mere USE of the term "web 2.0" goes into "meaningless buzzword" territory. You really should avoid using that terminology as it's been considered something the "ignorant" use to describe the web for the better part of a year after the term was coined. The only people who use that anymore are suits who don't know any better.

The majority of web content IS text -- there's no getting around that. Saying what that text is -- a heading, a list, a paragraph allows you to convey that content more efficiently/effectively to more users.
DOSGuy wrote:so the concept of a hierarchical structure to a text-filled web page is rapidly becoming obsolete.
Wow... just... wow... Like... I lack the words.
DOSGuy wrote:At this point the header tags are a shortcut for combining the <P> and <B> tags, otherwise they should have been deprecated by now.
That statement right there shows you failed to grasp HTML's purpose... You'd REALLY hate HTML 5 with it's new section, header, and nav tags.
DOSGuy wrote:Of course I'm not going to use lists! If I use lists, I'll get bullets unless I use CSS to specify that I don't want them. If you have to overridge a tag's default behavior to change something this fundamental, use a different tag! Lists are for creating bullets. If you don't want bullets, don't make a list.
Lists are for marking up LISTS -- the default appearance has NOTHING to do with that which is why 99.99% of MODERN websties use LISTS for their main menus and why it is the advocated method for building menus by the W3C. Many user agents (handheld, screen reader) can leverage those lists into something easier to manage/navigate.

Semantic markup, say what things ARE. If you have a list of choices, mark them up as a list. If you are thinking about the default appearance of the tags, you are missing the point of HTML!
DOSGuy wrote:And yes, I'm misusing the fieldset tag to create a rounded border around a group of links that aren't part of the form. Jim Lovell misused the LEM to get back to Earth. I could use CSS to recreate the effect that I get from fieldset, but why should I have to? I don't care what the tag was designed to do, I care what it can do! One man's bad form is another man's thinking outside the box.
... and in the process flushing accessibility down the toilet. Again, it's not just about how it appears to "screen".
DOSGuy wrote:That's a very cool formula. I think you'll need to adjust it going forward as the web becomes more visual and less texty. DOS gave way to Windows, and iPhones are taking over the world. People want icons and quick navigation.
Notice I calculate an EXTREMELY generous 200 bytes for IMG/OBJECT tags, anything that isn't a content image belongs in the markup -- either way that stuff IS accounted for in my formula. The most I'd have to do for an adjustment is to say that OBJECT (and probably HTML 5's redundant audio/video tags) gets 400 bytes instead of 200 bytes -- on most websites that shouldn't have a significant impact.
DOSGuy wrote:I've been guilty of hanging onto Web 1.0, but I'm working to make the site more visual and functional lately. Swapping images for text links and static content for tabs that dynamically load content through JavaScript means more code per K of content. But that's not a bad thing!
It is when it destroys functionality -- and you're WAY behind the times as images for text links is SO '00's. :D

Joking aside, one of the whole reasons developers are so gaga over CSS3 is the ability to STOP using images in layouts for things like buttons, gradients and shadows... and to use things like web-fonts to RETAIN the content being text instead of bloating out the page with unneccessary images. Even the use of images for presentational borders/backgrounds using extra markup elements is on the chopping block thanks to CSS3's border-image. The past six years mainstream developers have been making huge strides and putting endless effort into RETAINING text on the page so that screen readers, handhelds, and less capable devices aren't left out in the cold.
DOSGuy wrote:Less content doesn't equal less substance.
Think about what you just said!!!

Content is the ONLY reason people visit websites in the first place... CONTENT FIRST is supposed to be the rally cry of web developers. (though admittedly the PSD jockeys have been crapping all over that!)
DOSGuy wrote: This site has over 1000 downloads and hundreds of screenshots. It has little to say, but what little content there is is thoroughly fact-checked (by myself and by the community). If it stops looking like a page you would have visited with Netscape Navigator and starts looking more like the iOS, that will require more code, but it will be a worthwhile investment.
Shouldn't require that much more code... If handled properly. Even when it does, techniques like separation of presentation from content and minimalist semantic markup can result in lower bandwidth use by leveraging browser cache, and improves accessibility for most every access type.
DOSGuy wrote:And yes, I've snooped at enough source code that I can agree that most websites would use 100k of code to do what I've done in 26k. I may not always use the correct tag, but I don't often use multiple tags to accomplish what a single tag could do, and the site certainly isn't full of tags that do nothing (blasted DreamWeaver opens and closes tags around empty spaces!).
BWAHAA.. ok, so we're on the same page in that regard... You'd like something a friend of mine once said:
"The only thing you can learn from Dreamweaver is how not to build a website"

To which I replied "and the only thing you can learn from jQuery is how not to program javascript".

Recently I've expanded the dreamweaver statement to pretty much EVERY Adobe product.
DOSGuy wrote: You're from an era when every byte and every clock cycle counted, and I respect that. How many people would even try to make a game that would work on an 8088 at this point? As a child of the 80s, I'm also from the era of limited resources (to a lesser extent), so I'm never intentionally wasteful. I pngout and optipng every screenshot and icon on the site. I never add a graphic or function without weighing the impact on bandwidth, even though I have unlimited bandwidth. I can no longer afford to design for dial-up users, but I won't make anyone's experience any slower than I have to.
Which is a GREAT attitude -- I wish more developers had it... though never rule out low bandwidth users; metered connections, bandwidth caps, pay as you go -- it's starting to look like a really bleak future. (you're in Canada, you should be aware of that one -- hell my "usage" that I'm paying $60/mo for here would run me around $500 a month under yer new law!)
DOSGuy wrote: I'm committed to making the site (and its underlying code) as good as possible, so I'll see what I can do over the weekend. You can put me through the ringer again on Monday.
If you'd like to talk via IM, we could go over what you're doing. As it sits I've got my CSS rewrite/demo template about 80% complete... really it's presentable as it is now, but I want to add some mcSwitchy code to it. (and maybe media selectors, though that's treading into making the markup iPhone/Droid friendly).
DOSGuy wrote:The downside to all of these methods is that I would have to redirect all traffic that doesn't specify "es" or "fr" to the "en" equivalent, and every existing link to my website on the entire internet is no longer correct. For years to come, the vast majority of all traffic will have to be redirected, and search engines may punish me for moving all of my pages.
You could easily handle that from your CMS code by trapping a cookie and redirecting to the appropriate copy. Also, if your CMS builds entirely off of relative links, it shouldn't matter which domain it's on.

Though I know all sorts of sneaky .htaccess and php tricks for doing that sort of thing.
DOSGuy wrote:Since the menu and the welcome blurb are the only things that are ever likely to be translated, I made a decision to keep the site structure as is, and simply use PHP to load the menus from a different include based on the language cookie it finds. For the index page ONLY, instead of confusing things by having three different versions of the main page, I just put all three languages in the same page and I load the one that's needed. It's not an elegant solution, but it fits the scale of the project. How much trouble should I go to for a single page?
Given that PHP server-side would/should be no more difficult than doing it with javascript client-side...
DOSGuy wrote:Eliminating the target attribute is a load of bull that I've opposed ever since I found out that it wasn't allowed in Strict.
Interesting, it's one of the first things I applauded the idea of.

This might sound like a strange question, but are you a Mac user? Usually the only people who take that stance are the ones who lack the ability to right-click or middle-click.
DOSGuy wrote:Who are my site's beta testers? My friends and family. Not one of them knew that you could right-click on a link and specify "open in new window/tab". If I don't use the target attribute to open a new window for my visitors, they're forced to leave my site when they click on an external link. I hate when clicking a link takes me away from the site that I'm on, but at least I'm savvy enough to know that I can choose where the new page loads. Most people aren't.
My question would be do they get confused as to why the back button didn't work when they didn't notice the new window/tab open?

The use of target on non-frameset pages is on pretty much EVERY "bad web design" list you'll find dating back a decade... and it still crops up on new ones!
DOSGuy wrote:Think about it logically. If your visitor doesn't know about the right-click options, and you aren't using target="_blank", what are they going to do when they get to the new site if they wanted to stay on your site?
Hit "back"?

You're breaking normal browser navigation by doing that -- made worse by what it does on devices... again, other than "desktop screen"
DOSGuy wrote:I just asked my wife, who can be considered a typical internet user. She works for the Parliament of Canada, has been using for the internet for 15 years, and didn't know that you could right-click a link and choose "open link in new tab" until I showed her 6 months ago. I asked her what she would do if clicking a link took her away from a website that she wanted to stay on, and she confirmed the procedure in the paragraph above, except that she would have opened a whole new browser window! So this idea that everyone on the internet knows about right-clicking on links is ridiculous; this noble-sounding justification of "it's the user's decision where the new page opens" is nonsense because nobody knows that they have the option!
Middle-click would really startle her then. :D

I get the exact opposite complaints from testers -- "why can't I just hit back", "what do you mean it's a new window"

You know, the typical #DDD (aka Carlos Mencia Gray) Windows IE user who's sitting there with 40 IE windows open becuase they never realized new ones opened? Or sit there complaining about "it takes me forever to close IE becuase of all these copies it spawned for not reason"

Of course that said behavior has ALWAYS annoyed me from the first day I encountered it...

Oh, and sorry about the long posts -- I try to be complete, but can also get a bit long winded at times.

It's what I do.

Wow, spent more time on this post than I have on coding the demo CSS :D -- I'll have that demo up on my server probably by dawn once I square away my own projects. I've got non-24 sleep/wake syndrome so even though my local time is 1AM, it's actually around 11AM for me right now. (I'm on a 26 hour day)
If everyone is thinking the same, somebody isn't thinking.
User avatar
deathshadow
Classic Game Author
Posts: 35
Joined: February 8th, 2011, 5:42 pm

Re: Site source code

Post by deathshadow »

Here's what I came up with:
http://www.cutcodedown.com/for_others/r ... plate.html

as with all my "examples" the directory:
http://www.cutcodedown.com/for_others/rgbgames/

... is unlocked for easy access to the bits and pieces (feel free to explore the directory tree which is filled with rewrites I've done for people, paid and free, on sites like SitePoint, Digital Point, LovingTech, etc).

Valid XHTML strict, would be valid CSS 2.1 if not for a few IE specific bits and pieces, tested working IE 7,8,9, FF 3.5 and 4, and the latest flavors each of Opera, Saffy and Chrome. The layout itself works in IE 5.5 and 6, though the dropdown menu is non-functional there. (My usual technique CSShover3.htc should be working, but it hates that 'linkedin' garbage... NOT a "social networking link" fan)

Biggest layout change is the use of a mcSwitchy script -- which is a short .js that changes on class on BODY based on screen width, that lets me swap your home page from two columns to three. Sub-pages could likewise be crafted to trap that class and reformat as appropriate... you can also do the same thing using CSS3 media queries, which is one of the few things in CSS3 ready for use "now". A custom version for doing that may be a decent idea for targeting Droid/iPad/IPhone/etc.

Just to give you an idea what I'm talking about.
If everyone is thinking the same, somebody isn't thinking.
User avatar
DOSGuy
Website Administrator
Posts: 1063
Joined: September 2nd, 2005, 8:28 pm
Contact:

Re: Site source code

Post by DOSGuy »

deathshadow wrote:
DOSGuy wrote:And yes, I've snooped at enough source code that I can agree that most websites would use 100k of code to do what I've done in 26k. I may not always use the correct tag, but I don't often use multiple tags to accomplish what a single tag could do, and the site certainly isn't full of tags that do nothing (blasted DreamWeaver opens and closes tags around empty spaces!).
BWAHAA.. ok, so we're on the same page in that regard... You'd like something a friend of mine once said:
"The only thing you can learn from Dreamweaver is how not to build a website"
Let me tell you about my job. I maintain all of the pages on my server, and managers send requests for pages to be changed, or new pages to be created. They send a Word document, and my job is to turn it into a web page.

It's a production environment, so speed is what counts. All we care about is that the page validates as XHTML 1.0 and passes our in-house accessibility validator. Creating a page consists of copying the contents of the Word document and pasting it into Dreamweaver's Design tab. Then we switch to the Code tab and fix the code (lists are always crap) until it validates. It will be full of tags that don't need to be there, but I usually don't have time to go through and eliminate them all.

Here's a particularly egregious example of crap Dreamweaver code that came up today:

Code: Select all

		  <div>
            <h2><a name="2" id="2"></a><strong>&nbsp;</strong></h2>
		    <h2><strong>&nbsp;</strong></h2>
	     </div>
		  <h2><strong>&nbsp;</strong></h2>
		  <h2><strong>&nbsp;</strong></h2>
		  <h2><strong><u>Payment</u></strong><u> <strong>Processing</strong> <strong>(SSA 22110)</strong></u></h2>
		  <h3>&nbsp;</h3>
		  <h3>&nbsp;</h3>
... Right. And here's what I changed it to:

Code: Select all

<h2><a name="2" id="2"></a>Payment Processing (SSA 22110)</h2>
This code does exactly the same thing (minus the unnecessary line breaks), except that the heading is no longer underlined. For accessibility reasons, we're not allow to use underline because anything that's underlined is assumed to be a hyperlink. Anyway, you can see how anyone who builds a website in Dreamweaver can easily end up turning a 26k page into a 100k page with all of the useless and redundant tags.

While I don't often have the time to completely clean up the code, I've learned a little trick that I use every time. Dreamweaver will usually place a blank space at the end of every paragraph, list element, etc. (i.e. "...to the Prime Minster. </p>"). Simply by doing a replace " </" with "</" I can often get 1000 replacements. There, I just saved a kilobyte just by removing unnecessary spaces.

I can also usually count on it to put strong tags inside every header tag. I just did a find and replace on "<h3><strong>" -> "<h3>" and "</strong></h3>" -> "</h3>". It made 100 replacements x 17 characters = 1.7 KB saved.
deathshadow wrote:
DOSGuy wrote:Think about it logically. If your visitor doesn't know about the right-click options, and you aren't using target="_blank", what are they going to do when they get to the new site if they wanted to have a copy of your site and the other site open at the same time?
Hit "back"?
Corrected in red. I hate when a new site doesn't open in a new tab, but I can just press Back and then right-click on the link. If they don't know about right-click, they're going to have to copy the URL of the new site in a new tab or browser window before they press Back on the original tab/window.

I really stand by my statement that internal links should open in the current tab, and external links should open in a new tab. To me, it's just common sense. If I want to leave the domain that I'm on, I'll close the tab! This is the logical default behavior, and I'll argue for its inclusion in all browsers until it happens.


With the exception of the target attribute, I agree with what you're saying, but it wouldn't be much fun not to debate it. And no, I've never owned a Mac. I've been building my own computers since I was a teenager, so I'm not going to pay $1800 for $800 of hardware just so that I can run OS X. I've considered building a Hackintosh, but I don't really care enough to go to any special effort for OS X.
Today entirely the maniac there is no excuse with the article.
User avatar
deathshadow
Classic Game Author
Posts: 35
Joined: February 8th, 2011, 5:42 pm

Re: Site source code

Post by deathshadow »

DOSGuy wrote:Let me tell you about my job. I maintain all of the pages on my server, and managers send requests for pages to be changed, or new pages to be created. They send a Word document, and my job is to turn it into a web page.
Ooph, painful given how badly Wurd and Dreamweaver mix... If I can make a suggestion, have you tried putting a CMS in place to store the page info in a database -- and then use something like CKEditor (formerly fckedit) which has a MUCH more robust paste from word function? You could even use it locally to handle the translation if working as static files. (which it sounds like you are doing with that steaming pile of crap dreamweaver involved).
DOSGuy wrote:It's a production environment, so speed is what counts.
Heh, if that was the case I'd probably be loading, saving as plaintext, and then doing the markup by hand -- it's faster than trying to clean up what Word or Dreamweaver do.
DOSGuy wrote:and passes our in-house accessibility validator
?? Sounds interesting right there. What does it check for?
DOSGuy wrote:Creating a page consists of copying the contents of the Word document and pasting it into Dreamweaver's Design tab. Then we switch to the Code tab and fix the code (lists are always crap) until it validates. It will be full of tags that don't need to be there, but I usually don't have time to go through and eliminate them all.
Which is why I'd be looking at just doing it by hand from the start -- cleaning up and automated tool's mess just makes you the tool -- at which point do it right from the start beginning with plaintext; most pages just need a billion <p></p> and a few h2/h3 in the first place... with the occasional list or table. Two minutes markup tops.

Sounds to me like Dreamweaver is making MORE work for you than if you just did it by hand from the start.
DOSGuy wrote:Here's a particularly egregious example of crap Dreamweaver code that came up today:
Yup, that's bad... everything I've come to expect from Wurd + DW.
DOSGuy wrote:... Right. And here's what I changed it to:

Code: Select all

<h2><a name="2" id="2"></a>Payment Processing (SSA 22110)</h2>
Still not great... unnecessary anchor, Invalid ID since they can't start with a number... So that shouldn't be validating...

<h2 id="section2">Payment Processing (SSA 22110)</h2>

Probably all that's needed. You do know that id="someName" works for <a href="#someName">, right? That <a name="someName"></a> trick having gone the way of the dodo sometime around 2004? (when we stopped giving a flying **** about Nyetscape 4)

Though I still dislike that ID from an accessibility standpoint, #SSA22110 might make more sense for that one.
DOSGuy wrote:This code does exactly the same thing (minus the unnecessary line breaks), except that the heading is no longer underlined. For accessibility reasons, we're not allow to use underline because anything that's underlined is assumed to be a hyperlink. Anyway, you can see how anyone who builds a website in Dreamweaver can easily end up turning a 26k page into a 100k page with all of the useless and redundant tags.
Which is why all it should have is an ID. A valid ID, but an ID. You don't need the anchor anymore.
DOSGuy wrote:While I don't often have the time to completely clean up the code, I've learned a little trick that I use every time. Dreamweaver will usually place a blank space at the end of every paragraph, list element, etc. (i.e. "...to the Prime Minster. </p>"). Simply by doing a replace " </" with "</" I can often get 1000 replacements. There, I just saved a kilobyte just by removing unnecessary spaces.
Funny since I usually go through and put extra CR's and Tab's in instead... though I usually nest side-by-side paragraphs as </p><p> (you can see I did that up above)
DOSGuy wrote:I can also usually count on it to put strong tags inside every header tag. I just did a find and replace on "<h3><strong>" -> "<h3>" and "</strong></h3>" -> "</h3>". It made 100 replacements x 17 characters = 1.7 KB saved.
Which is the dumbest thing, but par for the course when you are importing from something NOT MEANT FOR WRITING WEB DOCUMENTS -- Word or OoO, doesn't matter, they both suck...
DOSGuy wrote:Corrected in red. I hate when a new site doesn't open in a new tab
Middle click? You do know about middle-click, right? I mean, with tabbed interfaces that's the normal way of using them... and another reason target bit the dust. (hell, I use middle-click or ctrl-shift-click on devices that lack a middle button (crappy laptops) on internal site links at times -- like say these forums)

Again you want it open in the current tab, you normal click -- you want it in a new window or tab, you middle click, ctrl-shift-click... right click and choose sucks, its' why tabbed/mdi interfaces have had middle click since 1996.
DOSGuy wrote:I really stand by my statement that internal links should open in the current tab, and external links should open in a new tab. To me, it's just common sense. If I want to leave the domain that I'm on, I'll close the tab! This is the logical default behavior, and I'll argue for its inclusion in all browsers until it happens.
Don't hold your breath -- pretty much every accessibility expert on the web will tell you where to take that. Much of that stems again from not everyone using "desktop screen" -- It's annoying as hell on something like a netbook or handheld... and it's counterintuitive... two different behaviors from the same action?
DOSGuy wrote:And no, I've never owned a Mac. I've been building my own computers since I was a teenager, so I'm not going to pay $1800 for $800 of hardware just so that I can run OS X. I've considered building a Hackintosh, but I don't really care enough to go to any special effort for OS X.
As a web developer I needed a OSX install to test on, since the browsers do not behave the same on winblows as they do on OSuX. I ended up stuffing an atom into a dead Apple IIe -- though I've retired that as I was finally able to get OSX running under Oracle VirtualBox. Not exactly 100% stable and has shutdown issues, but it's good enough for testing websites in... particularly since I also support iCab.

Funny thing is, FF is more prone to differences between Win/Lin/OSX than Safari or Chrome are.

But then given the total lack of testing many places do, I'm amazed half the sites on the web can manage better than 70% bounce rate.
If everyone is thinking the same, somebody isn't thinking.
ThreeHeadedMonkey
7-bit super nerd
Posts: 208
Joined: January 16th, 2008, 1:23 am
Location: The Netherlands

Re: Site Source Code

Post by ThreeHeadedMonkey »

deathshadow wrote:I consider FF the Forest Gump of web browsers. While IE is Ronald McDonald, Safari is Jessica Simpson, Chrome is a japanese loli idol singer, and Opera is Andy Dick.
I'll admit that a lot of the stuff you guys are discussing here goes way over my head, but this just really cracked me up.
Chinese checkers. Mashed potatoes! And a tyrannosaurus rex!
User avatar
DOSGuy
Website Administrator
Posts: 1063
Joined: September 2nd, 2005, 8:28 pm
Contact:

Re: Site source code

Post by DOSGuy »

deathshadow wrote:<h2 id="section2">Payment Processing (SSA 22110)</h2>

Probably all that's needed. You do know that id="someName" works for <a href="#someName">, right? That <a name="someName"></a> trick having gone the way of the dodo sometime around 2004? (when we stopped giving a flying **** about Nyetscape 4)
Being the government, we're still using Windows XP with IE6. I wasn't sure if IE6 would like this, but it worked out fine.
Today entirely the maniac there is no excuse with the article.
User avatar
deathshadow
Classic Game Author
Posts: 35
Joined: February 8th, 2011, 5:42 pm

Re: Site source code

Post by deathshadow »

DOSGuy wrote:Being the government, we're still using Windows XP with IE6. I wasn't sure if IE6 would like this, but it worked out fine.
Works in IE5 too... That's something a lot of the people who go around badmouthing IE forget -- IE used to be the champion of standards compliant compared to it's competitors who lagged a good three to five years behind them.

When released, IE5, 5.5 and 6 were the most standards compliant browsers available.
If everyone is thinking the same, somebody isn't thinking.
User avatar
DOSGuy
Website Administrator
Posts: 1063
Joined: September 2nd, 2005, 8:28 pm
Contact:

Re: Site source code

Post by DOSGuy »

Absolutely. I switched to IE at 5 because Netscape had fallen so far behind. IE languished at 6 for a long time, and then Firefox blew them out of the water. Even it hadn't been any faster or more standards compliant, I would have switched just for the tabbed browsing.
Today entirely the maniac there is no excuse with the article.
User avatar
DOSGuy
Website Administrator
Posts: 1063
Joined: September 2nd, 2005, 8:28 pm
Contact:

Re: Site source code

Post by DOSGuy »

Alrighty then. I couldn't work on this over the weekend before last because I was 1000 km from home over the Easter weekend. I had some time to work on this over the last weekend, and I expect that most of the changes will be welcome.

The site has been converted to HTML 4.01 Strict. We no longer use tables for layout. The W3C links are gone. Most of the in-line CSS is gone. The external CSS has been greatly cleaned up. All page sizes are greatly reduced. The menu has been cleaned up and unnecessary pages have been removed. Compression has been enabled for all file types. The whole site should be faster and easier to navigate.

How am I doing, coach?
Today entirely the maniac there is no excuse with the article.
Post Reply