Progressive enhancement -- design from the inside out.

over in this other thread @ketting00 asked:

Based on a quote in a link I posted to that thread. Rather than continuing to threadjack the original poster in that thread's question, I thought I'd take my answer to it's own thread. Also thought rather than my continuing to post this over and over in different threads, I'd just make one here I can link to.

The big answer is that said "starting from the inside and working outwards" is JUST another way of saying "progressive enhancement"... and it plays to something else @kitting00 quoted:

First and foremost people visit websites for the CONTENT. Your job as a web developer is to deliver that content in as easy, compatible and accessible manner as possible. I'm saying "developer" because the mere use of the word "designer" has come to have a negative connotation for me. SO many of the people calling themselves "designers" are just artists. They know nothing of HTML, nothing of CSS, and absolutely not one blasted thing about accessibility; leaving them utterly and completely unqualified to be designing a blasted thing for ANYONE!!! It's like hiring an oil painter instead of an architect, or more precisely bitching that an engineer went and did the job he was hired to do!

That focus on the content should always be the starting point. CONTENT FIRST. It doesn't matter how pretty something is or how much scripttardery you throw at it, if the fancy graphics and "gee ain't it neat" scripted animations get in the way of what people actually came to the site for, you're just dooming yourself to failure.

When it comes to the web, TEXT is still and likely to remain the first class citizen for some time. While images and video have their place, search engines can't see them, screen readers (devices or software that reads what's on the screen to blind, visually impaired or otherwise occupied users) can't see them, and that's really not what HTML is even FOR. Worse, if you think just a video is going to work as content you're missing the large number of people too impatient to sit through a video and would prefer to just skim a transcript. (see your typical "Ted Talk" yawn-fest.)

As I've said (and posted) time and time again there is a simple process you can follow to give you an accessible design. The proper name is progressive enhancement, but it's what that "inside working outwards" quote is implying.

1) you start with the content or a reasonable facsimile of future content and put it into a flat text editor organized in a logical manner as if HTML and your final visual layoutS aren't even going to exist.

2) you mark up that content semantically. Semantic markup being a sick euphemism for "using HTML properly" instead of just slapping tags in there any old way because of a desired appearance. That means logical numbered heading orders to divide the page into sections, or horizontal rules where a numbered heading is unwanted/unwarranted. (hence HTML 5 section, nav, article, header, footer and align tags being pointless redundant code bloat). It means paragraphs around grammatical paragraphs and not just around anything that happens to be text. It means tables around tabular data and not just because "I cans haz columsies?". It means lists around short bullet point lists (if it's big enough to have headings, it doesn't belong in a UL or OL -- that's redundant). It even means using tags like B and I when something would be bold or italic for grammatical reasons as it would be in professional writing, with EM and STRONG NOT being the same thing but instead being emphasis and more emphasis. When a book title is being shown in italic, it is NOT being emphasized!

Presentational images like logo's or stuff that isn't actually part of the content does NOT belong in the markup -- EVER. That's CSS' job.

... and since that's the semantic markup stage, you have NO business adding DIV or SPAN at this point. DIV and SPAN are semantically neutral containers for the express purpose of saying "this section MAY receive style", WITHOUT actually saying what that style IS. That's CSS' job too.

3) Create your layoutS using CSS. THIS is when you get to add your DIV and SPAN, but only once you've expended what you can do with the semantic tags. This is also when classes or ID's would be added, but again the both should only be added once you've expended what semantics and existing selectors can do, with ID's mostly chosen if you plan on scripting hooks or targeting parts of the page with hash's. The names for those classes and ID's should NOT be saying "what it looks like" any more than the tags do. It should say WHAT the element is or is wrapping, or WHY it might be receiving style, NOT what that style is.

Hence why the STYLE tag has no business being used EVER, the STYLE attribute has maybe two or three legitimate usage scenarios and should be avoided, and why mouth-breathing re-re nonsense like this:

<body  class="logo-type-custom demostyle-type-preset2 mainbody-overlay-light font-family-plethora font-size-is-default menu-type-dropdownmenu layout-mode-responsive col12 option-com-k2 menu-home ">
	<div id="rt-page-surround">
				<header id="rt-header-surround">
			<div class="rt-container">
								<div id="rt-top">
					<div class="rt-flex-container">
						<div class="rt-grid-6 rt-alpha">
     			            <div class="rt-block  fp-breadcrumbs">

Code (markup):

Simply proves what nonsensical BS "frameworks" are and what utter and complete rubbish what most vomit up and call a website is.

When I say layoutS, I mean layouts -- plural since a good design should be semi-fluid, elastic and responsive; all of which means a near infinite number of possible configurations, widths, and target media. Those are things that dicking around in Photoshop will NEVER provide and why starting out from a PSD is -- to be brutally frank -- ignorant halfwit BS and the artsy fartsy types and outright scam artists promoting that methodology are so ignorant of what a website is, only apathy, ignorance and wishful thinking could explain away that sleazeball practice.

Also when I say layoutS I mean the layout, NOT graphics or fancy colouration. Make the page WORK, then screw around with backgrounds, colors, borders, etc, etc...

One thing to keep in mind at this stage is spacing of elements -- since the layout should be elastic that means your paddings around flow text and line-heights should also be declared in EM whenever possible so it will automatically scale if the system font or browser default size has been changed for accessibility reasons. Good rule of thumb is that 3em outer padding is the upper acceptable limit before it starts to look like you're using whitespace to try and cover up for a lack of content, 1.5em or more line-height greatly improves legibility, and you want a padding or margin between flow elements like paragraphs that's slightly shorter (82.5% or so) your line-height as the space above the caps-line and below the baseline looks like it is added to your padding. I also suggest that you use padding instead of margin as much as possible on things like paragraphs and headings just to avoid "margin collapse" headaches. Padding the bottom of elements and the top/sides of the parent container is just far FAR simpler to keep track of.

Consistent padding within those limits GREATLY improves the appearance of most any site. FAR, FAR too often you see sites with willy-nilly padding, or MASSIVE padding that can not only look like things are slapped into the page any-old-way, it also in many cases reeks of "sweeping a lack of content under the rug" and leaves users going "It's a big, bun, Big Fluffy Bun. It's a VERY big bun..."

4) make it pretty. THIS is when you start playing with fonts, colors and so forth, but do NOT go overboard (a problem I admit I have with my own personal sites). Things like fancy webfonts compromise legibility so use them with an eye-dropper. LEARN about how colour contrasts and patterns behind text effects legibility and LEARN the math of it. We have decades of usability research we can draw upon, do not blindly dismiss it! (even if 99% of people sleazing out PSD's are permanently stuck in "WCAG, what's that?" thinking)

LOOK at the big success stories of the Internet -- Google, Yandex, DDG, eBay, Facebook -- do these REALLY look like they spent a lot of time dicking with color and graphics? As I keep saying, you want to make a "designer" go apoplectic ask what they think of Craigslist.

5) If desired, further enhance the page with JavaScript. Note I said ENHANCE - goofy animated crap, sticky sections, and other bloated asshattery that compromises usability and functionality for "gee ain't it neat" nonsense is NOT an enhancement. Always ask "How does this help the user get to the content?" -- if it doesn't, DON'T DO IT. Also keep in mind the unwritten rule of JavaScript, "If you can't make the page work without JavaScript first, you likely have no business adding scripting to it!" -- a lesson lost in the shuffle of todays "gee ain't it neat" scripttard BS ranging from the "pageloads are evil" paranoia to just pissing all over a page's speed and functionality with mouth-breathing halfwit framework bull.

In general you follow those steps of progressive enhancement, you have an accessible page that gracefully degrades. "Graceful degradation" simply means that if any of the fancy bits go missing -- JavaScript, CSS, images, even HTML itself -- a useable useful page is still delivered to the visitor.

... and that's the POINT of HTML, device neutral delivery of CONTENT to USERS. That's why you make websites, to deliver CONTENT to USERS. It's not about stroking the designers ... ego, circle-jerking the client with "Gee ain't it neat" artistry, or any of the other bits of bloated BS that relegates the majority of web startups to at best an "also ran" status, or at worst going out of business in less than a year.

... and that's what the commenter on that page I mentioned meant by "inside-out" design, and why starting out worrying about appearance before you have content, semantic markup or even a working layout that adjusts to the content and the display is "back-assward design"; and why I consider the artsy types who waste time dicking around in Photoshop to either be ignorant, or just plain outright scam artists. Sure it's easier to sell a suit who knows nothing about websites on something cool and flashy, but it's just as easy to explain things and talk to their wallet instead of their heart.

Sometimes, it's far easier to talk to their wallet particularly if they are a real businessman not operating on the credit mentality. It can in fact be a litmus test for if a client is even worth the effort of trying to work with or not!

 

Oh, @ketting00, you also mentioned being more of a back-end than front-end developer... I still don't get how that's possible. The entire reason for things like websites that back-end code even exists is to output HTML. There's a REASON PHP is called a "Hypertext preprocessor" -- hypertext, as in "HyperText Markup Language"

I hear that from time to time -- people writing things like PHP that go "well I don't really know front end coding or HTML"... since the entire reason it even exists is to output HTML, how in blazes -- much less why in blazes -- would one learn the back end without knowing how to properly built what it outputs first?!?

Though that would explain a LOT of the code you see vomited up by systems like Joomla or Turdpress -- where it is RIDICULOUSLY and PAINFULLY obvious the people writing those systems don't know enough about HTML or CSS to be creating one blasted line of back-end code.

Of course, you look at their back-end code with mouth-breathing idiocy like putting un/pw/host/db into DEFINE, it's even more apparent they have no business writing code of any sort for anyone!!!

 

Deathshadow,
may I ask you to show me a website you made, following all the process that you've just post?
I mean, after this very useful guide, I think it's just missing a real example, isn't it?
cheers

 

Thanks Deathshadow, for your time explaining

Really helpful information for a serious decision making process (I may say lighting up a path through an underground catacomb to avoid seriousness). Appreciated.
I've extracted a to-do list for myself based on what you've suggested above.
1. Focus on content -> think of how to deliver them to users.
2. Use proper markups so you can avoid code bloated.
3. Think of elastic and responsive layout, think of how it appears across devices, use CSS job properly.
4. Add some artsy around the content to make it eye-popping.
5. Enhance page's functions with JavaScript if needed.

Well, I think I've done it all wrong on all of my projects, since first thing I've been thinking of is eye-candy layout when building a web site, then put content into it.

Now that I've a vision on a makeover. I need to throw something to a trash and start it over. It won't take that much time for a remake.

By the way, I'm fan of less code and minimalistic design.

PS:

Simple explain, I'm working for a software house as they called it, when they have projects, they throw me a PSD design and say "make something that looks like this".
"The front end engineer will tell you what he wants. Talk to him".
"Yes boss," I say.

That's it. The front end engineer takes care of how the website appears in the browsers.

And you may notice of my classless avatar. I don't have any skill in using Photoshop.

 

If you look in his signature, you will find his website.

Clean, informative and to the point.

Web design is a lot like makeup - if you notice it, it's too much.

 

Yes thanks Matthew
I had a look.
Well,
it looks like he's delivering Pascal libraries which is a quite far from web designer/web developer, delivering websites to the clients etc..
Taking his website as example, actually I'm not satisfied by that
I mean, it's using progressive enhancement but is definitely not and example of how do you apply this technique to the nowadays web design trends.
It might fitting his audience expectations but I'm quite sure it won't be on the best web design trend 2015
Can we say that web design must be also "keep a relationship between your results and the other's nowadays results" ?

 

Please show us an example of a website which you would describe as being "on the best web design trend 2015".

 

While I do agree that the visual design of @deathshadow 's site is a bit dated, that doesn't mean you can't use the exact same design, and just change the CSS to fit your needs. The point of the page is to adher to web-standards, and work without problem across screen-sizes and devices - which it does. Enhancing the visual appeal isn't that hard, and if you want, you could make it "flat", change colors, remove gradients etc. without any change to the underlying code - also, keep in mind that the colors are chosen deliberately to keep within WCAG recommendations. Often, beautiful design puts accessibility on the back-burner just to make things pretty.

 

I agree with @PoPSiCLe. His web site works perfectly across devices and it's perfect example I've seen so far. Resize your browser to see it in action. I don't see other website's navigation bar that breaks like that and it seems he can rearrange the layout as he wish.

You don't like the look of it, you can add modernization. I don't like that look either.

 

All you're trying to say with your vague lingo is that his site looks like a piece of garbage. Even back in 1993 it would've won the "ugliest site ever" prize.

You guys are all going mad. You've all succumbed to that troll's bullying ways and you will even praise him for being so great, when he is nothing but a troll and a bully. It's some kind of totalitarian regime in the HTML, PHP & CSS category. Mr. Kim Jong Knight is bashing everyone there, established his reign there, and everyone is happy to act like his little subjects. So disgusting to watch.

@PoPSiCLe you used to post these nice, in-depth posts, yet now you keep resorting to "I agree what "cheapshadow" said" or "This may work", etc. Even your confidence level has gone down.

There are plenty of knowledgeable folks out there, who know what Kim Jong Knight does and then some, yet they will refuse to assist someone in the HTML, PHP & CSS category as long as he keeps trolling there.

 

You need to get some therapy and grow up, so you disagreed with some things @deathshadow said and got all butt hurt...big bloody deal, no-one cares about your wussy pussy hurt feelings, you don't like the way he comes across, easy answer.... stay away from his threads and posts and keep your garbage worthless posts to yourself.
You call him a troll, all you've done in that post above is troll troll troll.....stick me on your ignore list, I couldn't care less.

 

Referring to him as 'Kim Jong Knight' comes off as a compliment to me

I don't always agree with @deathshadow, but he knows what he is talking about.

If people would take the time to listen without crying that their feelings are hurt, they stand to learn a lot.

 

Comes across to me as someone who needs to grow up, get a life and stop acting like a little cry baby.

 

I wasn't and I am not hurt. It has nothing to do with me, per se. I just saw what I saw and wanted to let @deathshadow know that he is spewing a lot of garbage nobody wants to read or listen to. Nobody cares about that verbal diarrhea. That pretty much sums it up. As for @malky66 I don't even know why he's so pissed off. LOL. I have nothing against him personally. He just, for some reason, started defending @deathshadow like mad.

 

Uhm... the reason I don't always post in-depth answers for any dimwit question that pops up, is that I don't have the time. That's it. It's got nothing to do with "confidence" as you seem to think. @deathshadow posts very thorough posts sometimes, providing his take on designs (often just rewriting the code, but keeping the looks, look up those threads) while explaining why he has chosen to use those HTML-tags, and that CSS. Those posts are way more "in-depth" than I can every hope to have time for, hence I go with "what he said" if I even post anything.

And yes, the site he has in his signature looks like crap - I don't disagree on that. So what? He has shown, repeatedly, that he's fully capable of making something that will look modern and sleek, if need be. He has chosen not to, and that's his choice.

What we're trying to get across isn't that @deathshadow is "god" - it is that what he's saying, inbetween all his rants, is that there's no reason to crap all over the web with unnecessary heavy page-loads due to frameworks for CSS and javascript, there's no need to piss all over how HTML is supposed to work (and if you want to pull the "w3c has put html5 out there, because they know what they're doing", man do I have news for you. W3C is a bunch of in-fighting morons, coupled with quite a few good coders and people who know what they're talking about, although they rarely get final say in anything. There's a reason all the XHTML-people left w3c (more or less) when w3c decided to scrap XHTML 2 - have a look at the IRC-channels on #freenode if you want to watch them unravel in public, be my guest).

He's blunt, not very diplomatic (although, that is mostly towards people being dickheads back) and he provides you with solutions IF you want to listen. If you don't, he won't be nice to you - I have no problem with that.

Do I disagree with him? Of course. I happen to like jQuery, for instance - but I know enough of it to make it work without having to load 20 times the amount of code I need. Do I follow WCAG always? No, because that would lead to a very boring web, with a rather limited set of colors and styles - but I know what it IS, and if I chose to not follow their advice, it's a choice I've made.

tl;dr: @deathshadow is an ass, we all know it, but we also know that he knows what he's talking about

 

@malky66 Don't be an idiot. I put him in my ignore list loooooong before I said anything negative about his posts. I put him in my ignore list maybe 6 mo ago, then I un-ignored him, then I put him back there again two mo ago or so (got tired of stumbling across his verbal diarrhea). So, it wasn't because I was hurt of whatever that I put him there.

But it all doesn't matter now. I said what I wanted to say now I will un-watch this thread and forget about it.

 

An excellent point! I'll get started on a theoretical site so I can break the process into those stages I outlined. Using an existing site would involve recreating the process, and that might be artificial and not show the true process I went through.

I'll create fictional content for my domain www.cutcodedown.com -- a site that was SUPPOSED to house content like this, but has sat there stillborn with placeholder content ever since my partner in crime passed away. I'd probably not even bother renewing the domain if I hadn't filled http://www.cutcodedown.com/for_others/ with all the various code examples and help I've given people on forums the past decade.

Gimme a while and I'll work on a "new" content for such a site and go through the entire process start to finish broken into separate directories of each "stage" as it's completed. For now though, if you look at this:
http://www.cutcodedown.com/for_others/responsive/

You'll see a simple layout built using the very process I outlined, though the stages aren't as well "broken down" as only stage 2 and 4 are present.

Stage 2:
http://www.cutcodedown.com/for_others/responsive/semantic.txt

Stage 4:
http://www.cutcodedown.com/for_others/responsive/template.html

Which just to show that it gracefully degrades properly, here it is without the CSS:
http://www.cutcodedown.com/for_others/responsive/noCSS.html

Document outline showing the heading orders make sense:
http://www.cutcodedown.com/for_others/responsive/Info/documentOutline.png

how it should look CSS on at normal system font size, aka 16px / 96dpi / VGA / Windows Small Fonts
http://www.cutcodedown.com/for_others/responsive/Info/maxWidth_smallFonts.png

How it should look when the default browser font is set to 125%, aka 20px / 120dpi / 8514 / win XP- Large fonts / Win Vista+ Medium Fonts / whateverTheBlazesTheyAreCallingItThisWeek.
http://www.cutcodedown.com/for_others/responsive/Info/maxWidth_largeFonts.png

The second pic is NOT zoomed, it is elastic and auto-enlarged because all the fonts are declared in EM's. The ENTIRE reason we've been told to use EM's for font sizes and elastic semi-fluid layout for over a decade. Things that if you've done, make responsive layout that "next logical step" I'm always ranting about. Things that if you haven't done make going responsive an uphill battle!

It's actually something that bugs me no end is people think "responsive == mobile", when we really shouldn't be talking mobile -- we should be talking "device neutrality". The idea is to be like the old Bruce Lee shtick about being like water! You load your website in a phone, it becomes the phone. You load it on a tablet, it becomes the tablet. You load it on a desktop screen, it becomes the screen. We don't call proper design fluid layout for nothing -- the only reason we need semi-fluid's max-width is that long paragraphs can get hard to read when they're too wide. If you have device neutrality, accessible design and graceful degradation, it shouldn't matter what the user-agent or hardware is.

... and again if people bothered paying attention to these things much of HTML 5 becomes pointless redundancies, taking sites written a decade ago and making them responsive would be as easy as adding a few dozen lines of CSS, and websites on the whole would be faster to develop, easier to develop, load faster for users, and be far more useful to users.

Alright, I'm gonna get started on tossing together the various steps... starting with a 'fictional content' for a site.

 

@qwikad.com, thank you for once again not only proving your ignorance, but your willful refusal to listen to anything ANY of the members of this site actually try to tell you. You seem to not actually understand a word in any of the posts that myself or others have tried to talk to you with, and simply resort to calling it "vague lingo" thanks to that utter and complete lack of comprehension.

You've said it a few times and you're quite right; you don't care. You don't care about visitors to your websites, you don't care about accessibility, you don't care about what bloated rubbish is going to cost, you don't care about loading times, you don't care about search engines pimp slapping you, you don't care about specifications, you don't care about HTML or CSS, and that leads to the inexorable conclusion you don't care about ever having a successful website.

Hence your seeing nothing wrong with multi-megabyte monstrosities built from five dozen or more separate files that take 40 seconds or more to load, all to deliver 5k of plaintext and maybe fifteen content images that shouldn't even break half a megabye -- NOT that the majority of users would ever see more than five of those images. Hence your not grasping the simplest of concepts like why you have illegible pixel metric font sizes. You are woefully ignorant of accessibility guidelines, good practices, and it starts to feel like you are one of those people who thinks they can get sound technical advice from the pages of Forbes. Which is akin to getting financial advice from Popular Electronics!

You just don't care -- so why are you even making websites? Only thing I can figure is somewhere along the way you've either been scammed, or decided to start scamming others in a manner akin to late-night infomercials or pyramid schemes (sorry, do you prefer the term "multi-level marketing?") like Mary Kay or Amway.

I wasn't going to say this, but it's come right down to it; I think you're an idiot, and the way you talk about websites not only tells me you want to remain utterly and completely ignorant of what websites are, what they are for, and how to make them. I most verily doubt you have any clue what the WCAG is, what semantic markup means or is for, why separation of presentation from content is important, or even what any of the terms EVERY developer should understand like fluid layout, elastic layout or responsive layout actually mean!

... at which point why aren't you out there flipping burgers?

 

Alright, I'm going to be putting the various stages into their own directories here:
http://www.cutcodedown.com/progressive/

I'm going to build a fictional content for that domain, documenting the entire process as I go. When it comes time to style it I'll be going with a simple blue and white layout that will be all those things I'm always ranting on about; semi-fluid elastic and responsive layout that gracefully degrades.

Stage 1 -- You start with what's going on the page as plaintext, and if there are content images (which I'm skipping for simplicity) I'd put the filename in followed by a hyphen of containing the alt text. Remember that presenational images like logo's, backgrounds, borders, etc, etc, have NO business in the markup as they are not content.

At this point you have to ask "what's going on every page?" -- typically you'd have your site title that will eventually be the top-level heading (h1). That's what everything on the page is a subsection of just like how on a newspaper the title is at the top of every page, or how in books it's at the top of every pair of pages.

Next is likely the main menu, and it's a good idea to try and plan what subsections of the site it will link to. I no longer try to link to every possible subpage from the main page anymore since dropdown menus are an accessibility disaster on mobile, and you have to struggle with "link overload". For that let's go with blog, articles, about, reference, links and FAQ as the master pages/sections.

A small section for a "call to action" style latest news and probably social media links sounds like a good idea, and then naturally one would have the footer containing legal disclaimers and so forth.

You then have to think what's the content of the home page. Sub-pages will have their own content and rules, but creating the home page completely in markup first gives you something to build the layout.

In this case let's go with a "Recent Blog Entries" area containing two or three such entries. That "recent blog entries" would be the section title, with sub-sections starting out with... lets use the date and the title of the post. For now we'll dump some lorem-ipsum in there as that "reasonable facsimile of future content" you'll hear me mention from time to time.

There are also what I call "extras" you typically fill a page up with. A good starting point for that would be a "featured articles" section, since this is for that domain I'll toss in a link to my /for_others directory, and not that I believe in them but to show it done, we'll toss an advertisement area in it.

Again, plug all that into a flat text editor as if HTML didn't exist, put them in an order that makes sense, use tabs to make it clear where sections and subsections are... and if you have a change in section where heading text is inappropriate we'd have a HR semantically, but for now just use a few hyphens... Here's the result:

http://www.cutcodedown.com/progressive/stage1_plaintext/plaintext.txt

That's the starting point, the LOWEST common denominator.

Stage 2 -- Mark it up semantically.

Follow along with:

http://www.cutcodedown.com/progressive/stage2_semantics/template.txt

I also made it a properly built HTML file here:

http://www.cutcodedown.com/progressive/stage2_semantics/template.html

So you can see what that markup does. Again this markup is chosen as it's what screen readers (devices and software that read the screen aloud to you), braille readers, search engines, and many legacy devices will get. I'd say "see" but not all visitors to sites have Mark 1 Revision 0 sensors!

The main title becomes a H1 since EVERYTHING on the page is a subsection of that. That's why you have only one H1 per page, that's why abusing the H1 just for ranking purposes is more likely to get you slapped down for abuse by search, etc, etc... I put the tagline into a SMALL tag to provide de-emphasis. HTML really doesn't have a proper "deem" tag, but in professional writing if you have smaller text as a subsection of a heading, that's why. Again many of the tags people think of as presentational like <small>, <b>, and <i> are there to say "would be this in a professionally written document", NOT that they must be shown that way or "mean" the default presentation. Again despite the halfwits running around saying <em>"never use <b> or <i>, use <em> or <strong>"</em> if you are making a book title italic, <strong>you are NOT emphasizing it!</strong>

The menu of course becomes a simple list, and while normally at this stage I don't do ID or DIV, in this case there's no harm as I know the UL is the "mainMenu" and the social/news items really don't warrant HR to divide them up.

Each of the major sections gets it's own H2, the paragraphs become paragraphs, and the subsections are started with H3. The HR before the footer makes it clear semantically that the disclaimer is NOT part of <h2>Advertisement</h2> without our having to give it a proper numbered heading.

ALWAYS remember, H1 is the root, H2 indicate the start of subsections of the H1, H3 indicate the start of subsections of the H2, and so forth down the line. That's why skipping past heading numbers (like having a H6 with no H5, H4, H3 or H2 preceding it) is gibberish, that's why pairing tags like H1 and H2 just to make a title and tagline is gibberish -- and why the WhatWG's pathetic "HGROUP" tag was utter and complete nonsense that FINALLY got stricken from the specification. Since HR and H1..H6 divide our page into sections semantically we have ALL the meaning we could EVER need from an accessible navigation standpoint, which is why HTML 5's SECTION, ARTICLE, NAV, HEADER, FOOTER and ASIDE tags are pointless code-bloat nonsense.

... and that's the first two stages. I'll get to work on stage 3, creating the fully functional layout. That's gonna take a bit, probably 20 to 30 minutes though it will probably take TWICE that just to explain it! CSS, it's THAT fun.

 

I'm pissed off because he goes out of his way to help people as far as completely re-writing their sites for them how they should be done in the first place, and what thanks does he get, fucking none most of the time and then has to put up with crap from idiots like you who obviously know nothing about how sites should be built and can only respond with your own "verbal diarrhea" and pathetic name calling.
I don't know him personally but have massive respect for the bloke, that's why I defend him against trolls like you.