Responsive Design Question

I've started to play about with creating more fluid, responsive designs using media queries to detect device sizes etc.

One thing I noticed when reading some of the tutorials and other advice websites was that you can hide elements simply using:

display:none;

HTML:

So I see where this would be useful, for example not displaying an image logo and instead displaying a textual logo.

My question is there must be a simple alternative? What would be the point in me hiding elements and showing elements when it will load all of those elements anyway?

Is there a simple alternative to not only hide it, but not even load it so as to save on space/bandwidth on devices that may be using 3G instead of a proper internet connection?

 

You CAN do so by moving elements unique to certain widths into separate CSS files included using media queries in the MEDIA attribute of LINK -- in THEORY user agents won't load them unless the conditions are met (in practice, not so much).

Generally speaking though by the time you figure in the extra handshakes, extra code, etc, etc, it's just not worth the effort.

I really think they need to make the UA's smarter about applying the rules of queries BEFORE loading images for the page. Opera mini actually IS -- not sure about Chrome... pretty sure Safari is pretty dumb about it.

The BEST method for dealing with this though is don't put anything that would need to be hidden by the skin in the blasted markup with a IMG tag -- this is where the practice of putting presentational images in the CSS really pays off. You remember how hover state backgrounds are NOT loaded ahead of time? Same can be done with things like excessively large logo's... after all a logo is a presentational affectation of the company -- IF you are practicing semantic markup you should already have a images off fallback via something like gilder-levin, as such if your query sets background-image:none for narrow targets, that will be resolved before the stylesheet ends, so narrow width devices will never load that image.

There's a reason 99% of the time my "site logo" is also the topmost heading underwhich all other subsections of the page are, well... subsections; the whole 'one h1'per page' mantra came into being for a reason.

<h1>
  Site Title <span>-</span> <small>Tagline</small>
</h1>

Code (markup):

Usually doesn't get much simpler than that You get an attractive CSS off appearance, instead of hiding the span for screen you use a negative text-indent to make it's hyphen disappear and use it as your image replacement sandbag, absolute positioning it over the text to hide it... same as you would for your CSS on / Images off appearance.

Again, if you've been practicing semantic markup and separation of presentation from content, responsive layout is the next logical progression -- so many of those techniques do exactly what you are asking, preventing it from wasting time loading things that shouldn't be loaded... really anything you would want to be 'hiding' for your mobile layout via display:none, probably doesn't belong in the markup in the first place.

 

Thanks, your input is always second to none on this site.

 

Oh, side note... THIS TOPIC -- responsive layout -- is EXACTLY WHY we've been told for close to FIFTEEN YEARS to STOP pissing out fixed width layouts, STOP building layouts with tables, and STOP using presentational markup!!! When I say it's the next step -- has anyone bothered READING any of the recommendations like the WCAG? Comprehending things in the specifications like the MEDIA target that has been there since LINK was introduced?

We could have been doing this **** FIFTEEN YEARS AGO if browser makers, particularly on handheld, bothered implementing the media="handheld" target properly if at all. Media queries? All we'd need is a new target of type 'tablet' to indicate something in-between. In order to get people to actually even TRY they had to tart it up, make it many times more complicated, and promote it alongside all the other gee ain't it neat crap of the "HTML 5 shiny baubles that have nothing to do with writing HTML".

One of the things I mentioned above needs clarification -- to not put anything in the markup that the media queries would need to remove -- That's because what should be in the markup is CONTENT... and for the most part CONTENT ONLY... one of the entire reasons to be making a responsive layout is to deliver the SAME content to all users regardless of device; aka device neutrality aka let's stop treating handheld users as second class citizens. This is why CSS3 effects are so powerful as you can also just turn them off, and why image replacement techniques and keeping presentational images the **** out of the markup is the cornerstone to good design of the past decade... which admittedly most of the people starting out with some goof-assed PSD of a layout would be by design incapable of doing.

Of course, that's why you have so many people with broken half-assed inaccessible fixed width train wrecks using hundreds of K of code to do tens of K's job, javascript doing CSS' job, and what for all intents and purposes is HTML 3.2 with either a 4 tranny or 5 lip-service wrapped around it. This of course is made even WORSE by complete idiotic BS like HTML/CSS frameworks, "LESS", OOCSS, javascript frameworks, and all the other asshattery that bloat out the page, make layouts inflexible, practice by their very nature presentational markup, and on the whole make the job harder -- in the NAME of making it easier. That's gotta be some pretty powerful kool-aid they fork out on that side of the fence...

 

Just to add, this is what I've been playing about with. Would you consider this to be ok?

<html>
<head>
<title>Responsive Web Design Experiment</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<style type="text/css">
body {
    color: rgb(34,34,34);
    font-family: arial,helvetica,sans-serif;
    font-size: 1em;
    margin:0px;
    padding:0px;
    background:rgb(224,224,224);
}
 
a {
-webkit-transition: color 1s ease-in; /*safari and chrome */
-o-transition: color 1s ease-in; /* opera */
color:rgb(40,79,204);
}
 
a:hover {
color: rgb(0,128,255);
}
 
/* Clearfix */
.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}
 
 
nav {
    max-height: 40px;
    min-width: 100%;
    background: #455868;
    font-family: 'PT Sans', Arial, sans-serif;
    font-weight: bold;
    position: relative;
    border-bottom: 2px solid #283744;
}
nav ul {
    padding: 0;
    margin: 0 auto;
    min-width: 600px;
    min-height: 40px;
}
nav li {
    display: inline;
    float: left;
}
nav a {
    color: rgb(255,255,255);
    display: inline-block;
    min-width: 100px;
    text-align: center;
    text-decoration: none;
    line-height: 40px;
    text-shadow: 1px 1px 0px #283744;
}
nav li a {
    border-right: 1px solid #576979;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
}
nav li:last-child a {
    border-right: 0;
}
nav a:hover, nav a:active {
    background-color: rgb(140,153,164);
    color: rgb(41,162,206);
}
nav a#pull {
    display: none;
}
 
/*Styles for screen 600px and lower*/
@media screen and (max-width: 600px) {
    nav {
          height: auto;
      }
      nav ul {
          width: 100%;
          display: block;
          height: auto;
      }
      nav li {
          width: 50%;
          float: left;
          position: relative;
      }
      nav li a {
        border-bottom: 1px solid #576979;
        border-right: 1px solid #576979;
    }
      nav a {
          text-align: left;
          width: 100%;
          text-indent: 25px;
      }
}
 
/*Styles for screen 515px and lower*/
@media only screen and (max-width : 480px) {
 
    nav {
        border-bottom: 0;
    }
    nav ul {
        display: none;
        height: auto;
    }
    nav a#pull {
        display: block;
        background-color: rgb(40,55,68);
        width: 100%;
        position: relative;
    }
    nav a#pull:after {
        content:"";
        width: 30px;
        height: 30px;
        display: inline-block;
        position: absolute;
        right: 15px;
        top: 10px;
    }
}
 
.header h1 {
    font-size:3em;
    }
 
.hr {
    margin: 25px 0;
    height: 1px;
    background: black;
    background: -webkit-gradient(linear, 0 0, 100% 0, from(white), to(white), color-stop(50%, black));
}
/*Smartphone*/
@media only screen and (max-width : 320px) {
 
    nav li {
        display: block;
        float: none;
        width: 100%;
    }
    nav li a {
        border-bottom: 1px solid #576979;
    }
 
}
 
h1 { font-size: 2em;
    font-family: arial,helvetica,sans-serif;
    line-height: 75px; padding: 10px;
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in; 
   
}
 
h1 a:link {text-decoration:none;    color:rgb(0,167,201);}
h1 a:hover { text-decoration: none; color:rgb(39,179,207); }
 
h2 { font-family: 'Helvetica'; font-size: 1.6em; padding: 10px;
    -webkit-transition-property: font-size;
    -moz-transition-property: font-size;
    transition-property: font-size;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in;
}
h3 { font-family: arial,helvetica,sans-serif; font-size: 1.5em; }
h4 { font-family: arial,helvetica,sans-serif; padding: 3px; margin: 5px 0 0 0; }
h4 a { text-decoration: underline; }
h4 a:hover { text-decoration: none; }
 
.left-col { width: 70%; float: left; }
.sidebar { width: 20%; float: right; margin-bottom: 10px;
    -webkit-transition-property: width;
    -moz-transition-property: width;
    transition-property: width;
    -webkit-transition-duration: 0.5s, 0.5s;
    -moz-transition-duration: 0.5s, 0.5s;
    transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing function: linear, ease-in;
    -moz-transition-timing function: linear, ease-in;
    transition-timing function: linear, ease-in;
    display:block;
}
 
#featured { padding: 20px; }
#latest { padding: 20px; }
#about { padding: 20px; }
 
p { padding: 0 5px 0 5px; }
 
footer { padding: 5px; }   
@media screen and (max-width: 478px) {
    h1 { font-size: 5.385em; padding: 1px; }
    h2 { font-size: 1em; padding: 1px; }
    body { font-size: 1em; }
    .sidebar{display:none;}
}
 
@media screen and (max-width: 740px) {
    .left-col { width: 100%; }
    .sidebar { width: 100%; }
}
 
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}
 
#wrapper {
    max-width:960px;
    margin:0 auto;
    border-left:1px solid rgb(192,192,192);
    border-right:1px solid rgb(192,192,192);
    background:#fff;   
    -webkit-box-shadow: 0 8px 6px -6px black;
      -moz-box-shadow: 0 8px 6px -6px black;
            box-shadow: 0 8px 6px -6px black;
}
</style>
    <link href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 
</head>
<body>
<div id="wrapper">
    <h1>
  Site Title <span>-</span> <small>Tagline</small>
</h1>
      <nav class="clearfix"> 
      <ul class="clearfix"> 
        <li><a href="#">Home</a></li> 
        <li><a href="#">How-to</a></li> 
        <li><a href="#">Icons</a></li> 
        <li><a href="#">Design</a></li> 
        <li><a href="#">Web 2.0</a></li> 
        <li><a href="#">Tools</a></li>   
      </ul> 
      <a href="#" id="pull">Menu</a>
      </nav>
 
    <section id="main-content">
        <div id="featured">
            <h3>Featured Article :</h3>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> <a href="#">Continue Reading &rarr;</a></p>
        </div> <!-- END Featured -->
        <div class="hr"></div>
        <div id="latest">
            <section class="left-col">
                <h3>Latest Articles :</h3><br/>
                <h4><a href="#">Blog 1</a></h4>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. &nbsp; <a href="#">Continue Reading &rarr;</a></p>
                <h4><a href="#">Blog 2</a></h4>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. &nbsp; <a href="#">Continue Reading &rarr;</a></p>
                <h4><a href="#">Blog 3</a></h4>
                <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum. &nbsp; <a href="#">Continue Reading &rarr;</a></p>
            </section> <!-- END Left Column -->
 
            <aside class="sidebar">
                <h4><a href="#">Archives</a></h4>
                <ul>
                    <li><a href="#">July 2010</a></li>
                    <li><a href="#">August 2010</a></li>
                    <li><a href="#">September 2010</a></li>
                </ul>
                <br/>
                <h4><a href="#">Categories</a></h4>
                <ul>
                    <li><a href="#">Articles</a></li>
                    <li><a href="#">Tutorials</a></li>
                    <li><a href="#">Roundups</a></li>
                </ul>
                <br/>
                <h4><a href="#">Social</a></h4>
                <ul>
                    <li><a href="#">Facebook</a></li>
                    <li><a href="#">Twitter</a></li>
                    <li><a href="#">RSS</a></li>
                    <li><a href="#">Google+</a></li>
                </ul>
            </aside>
        </div> <!-- END Latest -->
        <div class="clearfix"></div>
        <div class="hr"></div>
        <div id="about">
            <h3>About</h3>
            <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.<br/><br/>
 
            Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>   
    </section>   
    <div class="hr"></div>
 
        <p>&copy; 2013 - Responsive Experiment</p>
 
 
</div> <!-- END Wrapper -->
</body>
<script type="text/javascript">
$(function() { 
    var pull        = $('#pull'); 
        menu        = $('nav ul'); 
        menuHeight  = menu.height(); 
 
    $(pull).on('click', function(e) { 
        e.preventDefault(); 
        menu.slideToggle(); 
    }); 
}); 
 
$(window).resize(function(){ 
    var w = $(window).width(); 
    if(w > 320 && menu.is(':hidden')) { 
        menu.removeAttr('style'); 
    } 
}); 
</script>
</html>

HTML:

 

I replied before I saw this.

Its quite hard sometimes to understand and even learn when there's so much conflicting advise and resources out there. I always swayed towards W3 Schools before I saw the W3 Fools link you posted, and since then, I haven't found a reliable resource to fall back on, which sucks for me because I'm your worse nightmare! I'm only just, in the last couple of months moving on to CSS3, responsive design, PHP5, more fluid markup.

Do you have any resources other than WCAG that are a good point of interest?

 

It is VERY hard to find any good resources apart from the specifications themselves, and the specifications themselves are written in this horrifically bad legalese that often obscures it's own meaning through the use of words most people either don't know, or completely misrepresent the meaning of.

An example I often use of this is the term "Empty Element" -- the HTML specification defines an empty element as one that cannot contain content, not one that doesn't contain content. IMG, BR, HR -- empty elements, you would NEVER have <br>Something</br> or <img>Something</img> -- that's what an empty element in the specification means; <div></div> is NOT an empty element... the element may BE empty, but that doesn't make it empty... and the number of people I've found who can even grasp the distinction I number on one hand. A similar oddity is the use of the word 'importance' which is typically meant in terms of the structural relationship or rules of inheritance -- but people incorrectly assume it means 'importance' as in how important it is on the page in terms of the content/meaning.

With such concepts hard to grasp for your typical Joe Six-pack or Susie Sunshine, it's hardly a wonder the resulting works, particularly guides on using it, are stuck in the '90's in concept and execution... most of the people writing tutorials online may grasp a few of the concepts and think they have it down -- but to be frank many of the implied meanings, logical conclusions given HTML's original origins and intents, are beyond the capabilities of 99% of the people out there who seem to be vomiting up HTML any old way. It's bad enough to make one long for the days of "You must be this smart to ride the Internet"

One of the few guides I used to consider worth looking at for people starting out was Iian Lloyd's "HTML and CSS the right way" which up to 2nd edition is a find book if you ignore the entire end sections about destroying the site with a bunch of useless third party junk (like analytics)... 3rd edition added HTML 5 to the mix and pretty much pissed away anything in the book resembling minimalism, semantic markup or even sane web design -- though as I've said several dozen times, that seems to be HTML 5's purpose; to return us to the worst of 1997 coding practices and destroy semantics.

Another guide that's surprisingly accurate COMES from the '90's -- but that's not a surprise, 1998 is when they started telling us all this **** since HTML 4 Strict has been around THAT LONG. It's the old "Web Design Group" HTML reference:
http://htmlhelp.com/reference/html40/

Which there's a lot of sound information and instructions in there -- that are basically all the things the specification TRIES to tell us but nobody understands.

... and that's the sad part, nobody can be bothered to use the existing 15 year old recommendation specification properly, and people are already jumping on the bandwagon of a broken pile of draft not even out of draft spec that offers ZERO real world improvements?!? WHISKEY TANGO FOXTROT!!!

... I need to get off my crippy arse and write a book or site about this; but with my failing health I can barely keep up with my existing projects. Also one of those times I really miss Dan Schulz, as he'd be able to point you at a dozen places backing up what I'm saying. I took him on as a apprentice and taught him what I knew about clean minimalist coding, he came back four years later and taught me semantic markup. As with all things, the Apprentice became the master.

As to your other post with the code, I'll dig deeper into that when I get a chance -- for now I see the typical pointless HTML 5 bloat, nonsensical use of headings in EITHER 4 Strict or 5, and a number of other issues I'd be trying to address before I even thought about working a responsive layout into there.

But again, I semantically markup all my content or a reasonable facsimile of an ENTIRE PAGE before I even THINK about making a layout out of it with CSS or even what that layout is going to be... since the first step should be a plain white page of semantic markup for less capable user agents like screen readers, braille, search engines, etc, etc... Or even the real out there nutjobs (like Neilsen) who want the web to look like it did in 1994. Only then can one progressively enhance it as appropriate. Naturally this is completely backwards from the goof assed practice of drawing a pretty picture of one layout with zero regard to accessibility. I fully maintain that if you are starting out spanking it on the screen in photoshop, yer doing it all wrong...

 

I see you advising quite often to do the semantic markup before doing anything with the presentation. When you say this, am I right in thinking you mean write it all up content-wise e.g.

<div class="header">
  <h1>Site Title</h1>
  <h3>Tag Line</h3>
</div>
<div class="content">
  <h2>Intro</h2>
  <p>Text</p>
</div>
<div class="footer">
  <p>Copyright</p>
</div>

HTML:

Without applying any style to it whatsoever so kind of like a blank canvas with the content but not presented with any style?

 

SOMEWHAT -- though a tag line as a h3 makes no sense -- what makes that the start of a new subsection of the page? Where's the H2 that it's a subsection OF? There's no reason for that text to be anything more than a paragraph, or SMALL (indicating de-emphasis) inside the H1... I tend to lean towards the latter.

That is one spot where the semantics rules get a bit fuzzy for some, despite their presentational names SMALL, B and I have semantic meanings which is why they're still 'in'... They indicate where things WOULD be smaller, bold or italic for a grammatical reason -- it does not mean they have to be conveyed to the user that way!

But yes, write the entire page as attractive and logically as possible WITHOUT any style. That's the general idea.

Ok, on to your code... As mentioned it's got HTML 5 garbage I'd clear the **** right out of there, and I'll explain why as we go.

But next, get the CSS the **** out of the markup. ESPECIALLY since you don't even HAVE a media type on it. Any decent editor should let you open up files in separate windows -- and it's far, FAR more useful to be able to edit your html/css as individual files so you can refer to the markup without scrolling away from your current point in the CSS. The same applies for your PHP since it's nice to have your includes and CSS in a separate window than your main code.

The first thing to go should be the NAV element -- serves no purpose if browser makers (other than Opera who actually DID this) would get off their asses and implement heading navigations, since then all you'd need to do is navigate to the second heading to skip any creap before it.

Then you have clearfix... UHG... this isn't 2001. Float clearing isn't rocket science, and certainly doesn't warrant a PRESENTATIONAL class.

I have no clue what that a#pull oddball thing is, doesn't serve any real purpose I can figure.

The next bit of HTML 5-tardery is the SECTION tag... always good for a laugh since semantically headings (and HR) are supposed to divide the page into... sections; meaning it's redundant/pointless semantics.

The headings make no sense -- if you are using SECTION, every time you open SECTION the heading 'level' is supposed to be reset to 1, so that H3 should be a H1... old school if you're following grammatical structure as HTML was designed to from DAY ONE, when you drop a heading level it is to indicate the start of a subsection of the higher level (lower numbered) heading preceding it. That's technical/scientific document writing 101... exactly what HTML was originally intended to do... If there's no H2, there's nothing for a H3 to indicate the start of a subsection of! Therein, if we get rid of SECTION, it becomes a H2 since it is a subsection of the PAGE (declared via H1)

You also have comment placements that can trip rendering bugs in IE and even some versions of FF -- YES I SAID COMMENTS; tripping rendering bugs (I know, mind-blowingly stupid) -- this is VERY poorly documented, rarely discussed, and often the cause of more hacks and tricks in people's CSS than you'd believe -- putting a comment between sibling level elements can cause such wondrous headaches as disappearing content, the 'double render' bug, z-index override, etc, etc... This:

</div> <!-- END Featured -->

As STUPID as it sounds, could cause rendering bugs. I know... I know... (*facepalm*)

It's also kinda silly to say 'end', that's what </div> means.

The fix? So simple, switch it around.

<!-- #featured --></div>

Putting the comment inside makes IE and those rare versions of FF behave. I like to use a # or . to tell me what's being closed CSS style.

This part: <div class="hr"></div>

Avoid adding extra div or span for presentation -- that should be kept to a minimum -- semantically/gramatically there is NO reason for that element to be in the markup, so get rid of it. Either border the bottom of #featured, background-image on the bottom of #featured, or it's now safe to use generated content to add an element there with :after from the CSS.

... also, because there's headings in here there's no real need for an HR semantically -- HR (and 5 actually clarfied this) semantically means a change in topic where a heading is unwanted or unwarranted -- like before a header-less footer. I've included them for that purpose in my markup for years and simply hide them for layouts where they are visually unwanted.

MORE HTML 5 garbage, the stupid malfing pointless 'aside' -- is that information related to the content? Is it a soliloquy breaking the fourth wall? then what the **** makes that an aside. The only meaning of the word "aside" that would have any meaning is 'a bunch of stuff off to one side' and that's PRESENTATION! If you look at the meaning of the word, It is either presentational markup as bad as the CENTER tag, or so restricted in scope as to be about as useful as the rules for an ADDRESS tag are. (Which is why NOBODY uses the ADDRESS tag)

Of course the headings there make even less sense, since I'm pretty sure 'Archives', 'Categories', and 'Social' are not subsections of 'Latest Articles:' -- and that's what using a H4 there actually means.

You've also got some bizarro-land scripting at the bottom for Christmas only knows what -- part of it looks like some goofy jquery crap that wouldn't do anything useful anyways, the other part looks like some form of mc-switchy code which makes no sense either if you are using media queries... It's also in a spot where SCRIPT isn't allowed -- between BODY and HTML -- the only valid child tags of HTML is BODY and HEAD -- NO OTHERS. If that scripting is actually there for a legitimate reason (yeah, right) it needs to go BEFORE </body>. This is why I'm in the habit of nesting together:

<html><head>
</head><body>
</body></html>

... on single lines with no space between them, as a reminder to myself that NOTHING belongs or is valid between those elements! (try finding that tidbit in any tutorial or book!)

In terms of the CSS -- I REALLY recommend you start using a reset. There are big fat ones like 'reset reloaded' that give resets a bad name, and really short ones like the 'universal reset' of "* { padding:0; margin:0; }" that can cause as many problems as it solves on things like form elements. The one I use is a nice safe happy middle-ground, and only weighs in at a quarter of a K.

/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dd,dt,
table,tr,td,th,p,img {
	margin:0;
	padding:0;
}

img,fieldset {
	border:none;
}

Code (markup):

That's it's current incarnation. It takes a while to get used to working with things after a reset, but for me at least it removes most all cross-browser headaches, and lets me get down to declaring what I want instead of worrying about different defaults.

I would suggest you stop using the RGB functions, they're a hair slower on rendering, consume more space, have some compatibility issues (though that's mostly in browsers we no longer care about) and in general aren't as clean/simple/easy as hexcode, particularly the three digit flavor. Some condensed properties wouldn't hurt, and if you are going to change the font-size change the line-height with it. You seem to be playing some really oddball games with the font-size and setting up some bizarre translations for Christmas only knows what there... Whatever that is I'm not liking the looks of it. You may also want to pick up some of the slicker tricks you can pull with condensed attributes like border... where you have:

border-left:1px solid rgb(192,192,192);
border-right:1px solid rgb(192,192,192);

for example I'd probably have:
border:solid #CCC;
border-width:0 1px;

Might only save a handful of bytes, but it's cleaner and often easier to make changes as needed.

So, if I was writing that same page, my markup would be something like this:

<!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="viewport"
	content="width=device-width; initial-scale=1.0"
/>

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

<title>
	Site Title
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		Site Title <span>-</span>
		<small>Tagline usually says something witty or stupid</small>
	</h1>

	<ul id="mainMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">How-to</a></li>
		<li><a href="#">Icons</a></li>
		<li><a href="#">Design</a></li>
		<li><a href="#">Web 2.0</a></li>
		<li><a href="#">Tools</a></li>
	</ul>

	<div id="featured">
		<h2>Featured Article:</h2>
		<p>
			Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
		</p>
		<a href="#" class="readMore">Continue Reading &rarr;</a>
	<!-- #featured --></div>

	<div id="latestArticles">

		<div class="articlesWrapper"><div class="articles">

			<h2>Latest Articles:</h2>

			<h3><a href="#">Blog 1</a></h3>
			<p>
				Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.
			</p>
			<a href="#" class="readMore">Continue Reading &rarr;</a>

			<h3><a href="#">Blog 2</a></h3>
			<p>
				Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.
			</p>
			<a href="#" class="readMore">Continue Reading &rarr;</a>

			<h3><a href="#">Blog 3</a></h3>
			<p>
				Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Maecenas faucibus mollis interdum.
			</p>
			<a href="#" class="readMore">Continue Reading &rarr;</a>

		<!-- .articles, .articlesWrapper --></div></div>

		<div class="categories">

			<h2><a href="#">Archives</a></h2>
			<ul>
				<li><a href="#">July 2010</a></li>
				<li><a href="#">August 2010</a></li>
				<li><a href="#">September 2010</a></li>
			</ul>

			<h2><a href="#">Categories</a></h2>
			<ul>
				<li><a href="#">Articles</a></li>
				<li><a href="#">Tutorials</a></li>
				<li><a href="#">Roundups</a></li>
			</ul>

			<h2><a href="#">Social</a></h2>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Twitter</a></li>
				<li><a href="#">RSS</a></li>
				<li><a href="#">Google+</a></li>
			</ul>

		<!-- .categories --></div>

	<!-- #latestArticles --></div>

	<div id="about">
		<h2>About</h2>
		<p>
			Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas sed diam eget risus varius blandit sit amet non magna. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec id elit non mi porta gravida at eget metus.
		</p><p>
			Sed posuere consectetur est at lobortis. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Donec sed odio dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
		</p>
	<!-- #about --></div>

	<hr />

	<div id="footer">
		&copy; 2013 - Responsive Experiment
	<!-- #footer --></div>

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

</body></html>

Code (markup):

RECOMMENDATION doctype, (not that you could convince me to use that pile of garbage 5 even if it did become a recommendation), semantic markup, proper heading orders for a non-5 document, one HR to make sure the footer isn't treated as part of 'about', proper use of paragraphs (you had a set of double breaks when it's obviously grammatically a new para), moved the 'continue reading' anchors outside the paragraphs since they are quite obviously NOT part of the content, etc, etc... You were close; the differences are actually quite minimal... even so it shaves probably around three quarters of a K of markup off it.

If you're wondering about the double wrapper around 'articles' -- that's to let a proper/unbreakable fluid width be handled with the categories section 'sidebar'. Pretty common practice that I threw in ahead of time instead of waiting for the CSS stage.

I'm out the door to the doctors in a bit, but when I get back (or while bored in the waiting room) I'll toss together the CSS I'd be using with that.

 

Thanks, that's a great reply. Just for the record, the CSS is only in the main page in this example, on my test page they are in different files.

I think you're right in what you said before, you need to write a book. Your knowledge in pretty much every field I see you post about is second to none.

Anyway, I'll wait and see what you come back with with CSS before I write a detailed reply.

Thanks again.

 

He definitely should, I learnt HTML/CSS from him and Dan Schulz ~6 years ago.
I studied IT at university for a bit but dropped out because the professor was always wrong - It'd be great to have a good rock solid guide.

Or just a compilation of your finest rants.

 

Sorry for the delay, health took an unexpected dip. Excuse me if I'm a bit less lucid than normal, they've got me on enough vicodin to kill Dr. House.

Here's what I came up with:
http://www.cutcodedown.com/for_others/scottlpool2003/responsive/template.html

As always the directory is wide open for access to the yummy gooey bits:
http://www.cutcodedown.com/for_others/scottlpool2003/responsive/

To quickly break-down the screen.css:

I always start out with a reset. There are larger resets like Meyer's "reset reloaded" -- I consider them fat, bloated and they really give resets a bad name. There are smaller resets like the "universal reset" of "* { margin:0; padding:0; }" but that can make form elements hard to work with. the one I use is a nice simple middle-ground that at a quarter K is really 'ideal' IMHO.

Next is a media query so that below 480px width webkit and IE won't force their own font-sizes over our own. This is an annoying behavior present in those browsers to make up for most websites NOT being designed for small screen... we could just set it globally, but in Chrome and Safari on desktop it can completely disable zooming (though it doesn't have that effect on mobile?!?)

I disable horizontal rules because I use them semantically, NOT for just drawing a line across the screen. They're an H2 without content.

on body I set some padding because you weren't explicitly stating it on your version -- and without it every browser starts out anywhere from 0 (IE standards) to 1em (Opera)... The reset strips that away to 0 for all, let's add a little back in so we can see the top and the shadow at the bottom.

I always EXPLICITLY state the font on which all content will be based in BODY. This is because you cannot trust the defaults, particularly for line-height. I also like my line-heights a bit taller ... improves legibility greatly. It is ALWAYS easier to say something once and let it inherit, only changing it for the two or three places the font would be different, than to constantly be saying it on every blasted element. (I really wonder why people do that?!?)

#pageWrapper sets our min and max-width. I set a min-width since some browsers don't know what a media query even is, so let's not feed them values that will result in a broken layout. Rest of it is just style, nothing fancy. I also set a fixed width with * HTML for IE6 and lower. My policy is the page doesn't have to work perfect for those old browsers, but there is no legitimate reason to leave anyone stuck their because of work, finances or accessibility (You know what JAWS costs?) out in the cold completely. One tiny bit of code gives them a fixed width that works... GOOD ENOUGH.

h1 - relative positioning means the span inside it can be absolute positioned in relation to the H1. I use zoom as a haslayout trigger so IE won't screw up the positioning. Used to be a lot of purists got their panties in a twist over using zoom because it was 'invalid CSS' - right now there is so much vendor specific prefixed bull that's 'invalid css' as well that using one IE specific property is meaningless given the endless -webkit and -moz bull. The fonts inside the H1 are set in PX because we have an image interaction here. The span inside it is 20px tall, display:block puts it on it's own line. the span has it's text hidden and is used as the sandbag. NOTICE I avoid setting a height on H1 -- let the two line-heights (40px+20px) plus the top and bottom padding (16px+16px) do the work FOR YOU on things like this... in this case 92px which does get set on the apo span and the dummy logo image I threw together quick.. You can also test for images off graceful degradation here by disabling images and poof, the text below appears.

#mainMenu is pretty simple. I set up float wrapping behavior, you may have to change that if you add dropdowns, in which case I'd give serious thought to losing the 1px dividers and making them inline-block instead. Notice I do NOT try to do anything with LI and in fact pretty much remove it's influence entirely. This dodges an IE 8 bug called the "staircase effect". It's just easier to style the anchors instead of the LI... This might make some ask "why have it a list at all" -- simple, so it doesn't read as a single sentence which is what just having the anchors back-to-back-to-back would mean.

Anchors are just floated and padded... nothing fancy... likewise keep the hover states simple. Transitions are cute, but a waste of code and time IMHO.

Since all the P and H2 are pretty much the same, nab them up front. I prefer to pad than use margins on these types of elements just so that I don't EVER have to THINK about collapse.

.readMore -- those anchors are NOT part of the text, so they didn't belong inside those paragraphs. I put them after and float them right, usually sufficient to the task. I also suck 'em up a little on the top to make it clearer they belong to the text above.

#latestArticles -- more of a float wrapper than anything else... but also simplifies targeting certain bits - like the H2 for .categories being the same as the H3 in the article section.

.articlesWrapper - this extra outer wrapper lets us more easily make 'content first' columns that are easy to 'disassemble' for our queries. First we make this a 100% width float, so there are no px free for anything to float next to it.

.articles -- pad this right equal to the width of the sidebar

.categories -- here's the magic. If we float the sidebar it can't fit -- there's 0px free... but if we fix it's width to 14em and set the margin on it equal to negative 14em, the element becomes '0 width' in document flow -- and POOF, it pops up into place OVER .articlesWrapper. Instant column.

From there it's just paddings and borders on our various sections and the footer until we get to the media query.

I used EM as the trigger because it's all text content, that trigger may vary based on your content. I narrow the min-width to the smallest practical phone size, overriding the one for browsers that don't know media queries, the menu and h1 get their alignment and padding's changed up a bit, and we kill the h1Logo.png on H1 span. The menu anchors are unfloated and set to inline-block instead, with some paddings and rounded corners to make it all play 'nice'. Finally we strip off the column by removing the padding from .articles and the float from .categories.

Not that hard.

 

Thanks, will give it a good look over today and get back.

Sorry to hear about your health.

 

Okay, so I've had a little play around particularly writing markup before adding any style.

It isn't perfect, and is only very basic but if you could take a look and give your feedback that would be great.

index.html

<!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"
>
<title></title>
<link rel="stylesheet"
      type="text/css"
      href="style.css"
      media="screen"
>
</head>
<body>
<div id="mainWrapper">
    <div class="headerWrapper">
        <h1>Site Title</h1>
    </div><!-- .headerWrapper -->
    <hr>
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div><!-- #nav -->
    <hr>
    <div id="pageWrapper">
        <div class="bodyWrapper">
            <div class="blogPost">
                <h2>Dear Diary Day 3</h2>
                <p>Posted By: <a href="#">Admin</a> on Thursday 14th March, 2013</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum... <a href="#">Read More &rarr;</a></p>
                <ul>
                    <li>Tags:</li>
                    <li><a href="#">welcome</a>,</li>
                    <li><a href="#">welcome message</a>,</li>
                    <li><a href="#">sample tag</a></li>
                </ul>
            </div><!-- .blogPost -->
            <div class="blogPost">
                <h2>Dear Diary Day 2</h2>
                <p>Posted By: <a href="#">Admin</a> on Thursday 12th March, 2013</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat... <a href="#">Read More &rarr;</a></p>
                <ul>
                    <li>Tags:</li>
                    <li><a href="#">welcome</a>,</li>
                    <li><a href="#">welcome message</a>,</li>
                    <li><a href="#">sample tag</a></li>
                </ul>
            </div><!-- .blogPost -->
            <div class="blogPost">
                <h2>Welcome</h2>
                <p>Posted By: <a href="#">Admin</a> on Thursday 10th March, 2013</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat... <a href="#">Read More &rarr;</a></p>
                <ul>
                    <li>Tags:</li>
                    <li><a href="#">welcome</a>,</li>
                    <li><a href="#">welcome message</a>,</li>
                    <li><a href="#">sample tag</a></li>
                </ul>
            </div><!-- .blogPost -->
        </div><!-- .bodyWrapper -->
        <div class="rightContent">
            <h3>Recent Blog Posts</h3>
            <ul>
                <li><a href="#">Dear Diary Day 3</a></li>
                <li><a href="#">Dear Diary Day 2</a></li>
                <li><a href="#">Welcome</a></li>
            </ul>
            <h3>Most Read Blog Posts</h3>
            <ul>
                <li><a href="#">Dear Diary Day 3 (13 Reads)</a></li>
                <li><a href="#">Dear Diary Day 2 (4 Reads)</a></li>
                <li><a href="#">Welcome (1 Read)</a></li>
            </ul>
            <h3>Most Commented Blog Posts</h3>
            <ul>
                <li><a href="#">Dear Diary Day 3 (4 Comments)</a></li>
                <li><a href="#">Dear Diary Day 2 (2 Comments)</a></li>
                <li><a href="#">Welcome (0 Comments)</a></li>
            </ul>
        </div><!-- .rightContent -->
    </div><!-- .pageWrapper -->
</div><!-- #mainWrapper -->
<hr>
<div id="footer">
    <p>&copy;2013 Just a Test, All Rights Reserved.</p>
</div><!-- .footer -->
</body>
</html>

HTML:

style.css

 
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,dl,dd,dt,
table,tr,td,th,p,img {
    margin:0;
    padding:0;
}
 
img,fieldset {
    border:none;
}
 
@media (max-width:480px) {
    * {
        -webkit-text-size-adjust:none;
        -ms-text-size-adjust:none;
    }
}
 
body {
    background:#e3e3e3;
  font:normal 100% arial,helvetica,sans-serif;
}
 
hr {
    display:none;
}
 
h1 {
    font-family: sans-serif;
    font-size: 46pt;
    margin: 10px 0 20px 0;
    font-weight: bold;
    -webkit-text-shadow: 1px 1px 2px #ababab;
    -moz-text-shadow: 1px 1px 2px #ababab;
    text-shadow: 1px 1px 2px #ababab;
    color: #444;
}
 
h2 {
    font-family: sans-serif;
    font-size: 2.3em;
    margin: 4px 0 4px 0;
    font-weight: bold;
    -webkit-text-shadow: 1px 1px 2px #ababab;
    -moz-text-shadow: 1px 1px 2px #ababab;
    text-shadow: 1px 1px 2px #ababab;
    color: #444;
}
 
#mainWrapper {
    max-width:70em;
    min-width:50em;
    margin:0 auto;
    background:#fff;
    padding:0.833em;
    box-shadow:0 0.25em 0.25em #CCC;
}
 
#nav {
    zoom:1;
    margin-bottom:1em;
    width:100%;
    overflow:hidden;
    background:#444;
}
 
 
#nav li {
    list-style:none;
    display:inline;
}
 
#nav li a:link,
          a:visited,
          a:focus {
    border-right:1px solid #e3e3e3;
    padding:0.5em 1em 0.4em;
    float:left;
    color:#fff;
    text-decoration:none;
}
 
#nav li a:hover{
    background:#e3e3e3;
    color:#232;
}
 
#pageWrapper {
    width:100%;
    overflow:hidden;
}
 
.bodyWrapper {
    max-width:80%;
  float:left;
  overflow:hidden;
}
 
.blogPost {
  border-bottom:1px solid #444;
  padding:0em 0em 1em;
}
 
.blogPost p, .blogPost ul {
  margin-top:1em;
}
 
.blogPost li {
    display:inline-block;
    list-style:none;
}
 
.blogPost li:first-child {
    font-weight:bold;
}
 
.rightContent {
  float:right;
  margin-right:1.667em;
  min-width:10%;
  max-width:16%;
}
 
.rightContent ul {
  list-style:none;
}
 
.rightContent li {
  display:block;
}
 
.rightContent li a:link,
          a:visited,
          a:focus {
  border:solid #CCC;
  border-width:0 1px 1px;
  min-width:100%;
    float:left;
    color:#444;
    text-decoration:none;
    padding:0.5em;
}
 
.rightContent li:first-child a:link,
                  a:visited,
                  a:focus {
                      border-top:1px solid #CCC;
                  }
 
 
 
#footer {
  min-width:100%;
  text-align:center;
  margin-top:1em;
}
 
#footer p {
  margin:0 auto;
}
 
@media (max-width:40em) {
  #mainWrapper {
      min-width:400px;
  }
  #nav {
      max-width:40em;
  }
  .blogPost {
      max-width:100%; 
  }
 
  .rightContent {
      float:left;
      min-width:100%;
  }
}
 
 

HTML:

 

Ok, I'm seeing a number of... oddities. Without even talking the responsive layout part, well... let's start from the top.

Your media attribute is likely incomplete -- I suggest using screen,projection,tv because many kiosks use projection instead of screen... and webTV/Wii Browser want TV. (Wii gets weird on that, sometimes it obeys screen, sometimes it doesn't -- depending on what's connected for a DISPLAY? Well, it is Opera so maybe it's tripping Kiosk mode on large displays?) - I would also suggest using MEANINGFUL names on your stylesheets, since "style" is uselessly vague and tells you NOTHING about what that stylesheet is for... Is it for screen? Or print? or handheld? Projection? Teletype? I know 'style.css' is common practice, that doesn't make it GOOD practice since anything that's uselessly vague... well... You know...

It feels a little... Ok, I'm gonna come right out and say it -- it feels MASSIVELY wrapper-heavy. I cannot figure out what #headerWrapper, #nav, #pageWrapper, etc, etc are even in there for. 99.99% of the time those extra wrappers -- PARTICULARLY crap like an extra DIV around a H1 or extra DIV around a UL that's a menu is nothing but unneccessary bloat. ZERO reason for those to exist in 99.99% of layouts. There is absolutely NOTHING you can do to a DIV that you can't do to a UL or H1... and since the H1 should be UNIQUE, it's not like it needs classes or ID's - EVER.

You also have forgotten to close all your tags -- you built with XHTML, that means 'empty' tags (LINK, HR, BR, IMG) need to be closed with "/>", not just ">". This is where all five of your validation errors originate. If you want the 'simpler' closings, use a HTML 4 doctype instead. ... and remember, when the HTML spec says 'empty' it means CANNOT hold content, not that it doesn't hold content -- <div></div> is NOT what the specification means when referring to EMPTY elements.

I'd NOT call the sidebar 'rightContent' since right is saying what it looks like... you might in some other skin without changing the markup put it on the left -- you might not even put it to either side like say... when it gets narrow. As it is in my own code I'm looking for a more appropriate name than "sidebar" since that too is presentational.

Also, why are those H3? They're structually NOT a subsection of the <h2>Welcome</h2> which is what making them H3 is basically saying. H3's are the start of subsections of the H2 preceding them -- as such using H3 there is broken gibberish.

You also seem to be slapping paragraphs around things that to be frank, are not flow text and as such NOT paragraphs. The one in the footer is a perfect example of this, as are the 'posted by' lines -- the latter likely belonging INSIDE the heading since they are PART of the heading. (and why I think HTML 5's 'header' tag is BS -- we already HAVE perfectly good heading tags) Most likely I'd put them in SPAN or maybe even SMALL after a BR. Just because it's text, that doesn't make it a paragraph.

The 'read more' links are likely NOT part of the flow paragraph, and as such don't belong inside it... likewise the word 'tags' is NOT part of the list, so it doesn't belong in the list -- THAT's A H3! - either floated left or set to display:inline;

Also your column building methodology is a bit... fragile/hackish. There's a reason I use the double-wrapper method around content-first dynamic columns.

Oh, and pretty much all of your comments are going to trip rendering bugs in legacy IE and some versions of FF (like every other release has this regression). You might notice in my code I put the closing comment BEFORE the closing tag -- this is so as to avoid the possiblity of the dissapearing content or double render bugs should a comment end up between floats, inline-block, or positioned elements.

Basically just in terms of the markup and looking at your 'screen' layout, the 'proper' markup IMHO would be:

<!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="viewport"
	content="width=device-width; initial-scale=1.0"
/>

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

<title>
	Site Title
</title>

</head><body>

<div id="pageWrapper">

	<h1>Site Title</h1>

	<ul id="mainMenu">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Contact</a></li>
	</ul>

	<hr />

	<div id="contentWrapper"><div class="content">

		<div class="blogPost">
			<h2>
				Dear Diary Day 3<br />
				<small>Posted By: <a href="#">Admin</a> on Thursday 14th March, 2013</small>
			</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum...
			</p>
			<a href="#" class="readMore">Read More &rarr;</a>
			<h3>Tags:</h3>
			<ul>
				<li><a href="#">welcome</a>,</li>
				<li><a href="#">welcome message</a>,</li>
				<li><a href="#">sample tag</a></li>
			</ul>
		<!-- .blogPost --></div>

		<div class="blogPost">
			<h2>
				Dear Diary Day 2<br />
				<small>Posted By: <a href="#">Admin</a> on Thursday 12th March, 2013</small>
			</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat...
			</p>
			<a href="#" class="readMore">Read More &rarr;</a>
			<h3>Tags:</h3>
			<ul>
				<li><a href="#">welcome</a>,</li>
				<li><a href="#">welcome message</a>,</li>
				<li><a href="#">sample tag</a></li>
			</ul>
		<!-- .blogPost --></div>

		<div class="blogPost">
			<h2>
				Welcome<br />
				<small>Posted By: <a href="#">Admin</a> on Thursday 10th March, 2013</small>
			</h2>
			<p>
				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat...
			</p>
			<h3>Tags:</h3>
			<ul>
				<li><a href="#">welcome</a>,</li>
				<li><a href="#">welcome message</a>,</li>
				<li><a href="#">sample tag</a></li>
			</ul>
		<!-- .blogPost --></div>

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

	<div id="sideBar">

		<h2>Recent Blog Posts</h2>
		<ul>
			<li><a href="#">Dear Diary Day 3</a></li>
			<li><a href="#">Dear Diary Day 2</a></li>
			<li><a href="#">Welcome</a></li>
		</ul>

		<h2>Most Read Blog Posts</h2>
		<ul>
			<li><a href="#">Dear Diary Day 3 (13 Reads)</a></li>
			<li><a href="#">Dear Diary Day 2 (4 Reads)</a></li>
			<li><a href="#">Welcome (1 Read)</a></li>
		</ul>

		<h2>Most Commented Blog Posts</h2>
		<ul>
			<li><a href="#">Dear Diary Day 3 (4 Comments)</a></li>
			<li><a href="#">Dear Diary Day 2 (2 Comments)</a></li>
			<li><a href="#">Welcome (0 Comments)</a></li>
		</ul>

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

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

<hr />

<div id="footer">
	&copy; 2013 Just a Test, All Rights Reserved.
<!-- #footer --></div>

</body></html>

Code (markup):

I'm out the door for a while, but when I get back I'll toss together a review of your CSS and a rewrite of that as well.

 

Ok, back to this one. In your CSS one of the first issues (and probably why everythings overlapping funky here) is that you don't explicitly state your line-heights. You cannot trust default line-heights, and if you CHANGE the font-size, change the line-height otherwise lord knows what it will inherit. SOME nutjobs (mostly over at sitepoint) will vehemently claim that if you say a line-height without a metric (px,em,%,etc) like 'line-height:1.2;' it will inherit properly -- be nice if it did -- but it doesn't work worth a flying purple fish. The annoying part being no matter how many broken screencaps you send them of that **** not working, they still claim it does. (part of why I'm no longer welcome over there -- and no longer have any respect for the ONE surviving person in their crew I had any use for).

You seem to be alternating between stating fonts condensed and not stating them condensed... and PT? Really? I used to advocate PT for fonts -- when Nyetcape 4 still mattered as it was the only font metric Nyetscape (or FF for that matter) automatically obeys the system metric (aka OS font-size setting). In this case the WCAG says use %/em, use %/em unless you're planning on image interactions. PT? that's for PRINT. Point - 1/72th of an Inch... Don't be trying to use inches on SCREEN.

The double-float stack with a % max-width makes no sense. Generally speaking apart from the outer wrapper one REALLY shouldn't be using min/max on anything inside said wrapper. This is probably why it's float dropping in IE. Don't even waste your time TRYING to do % for columns -- generally speaking it sucks anyways since sidebar content is usually too fragile to be in a fluid width anyways; My solution would be ELASTIC columns, using the classic double-wrapper negative margin technique -- if for no other reason than it being damned near unbreakable... unlike double floats, opposing floats, and silly width trickery.

This:

#nav li a:link,
          a:visited,
          a:focus {

Code (markup):

Makes no sense... you only want :link that's a child of .rightContent, but you want all visited and focus on the entire page? Much less if you are setting that many properties, why aren't you just setting A? Much less FOCUS is usually best set the same as HOVER and ACTIVE.

I THINK you meant to say:

#nav li a:link,
#nav li a:visited,
#nav li a:focus {

Code (markup):

But really all that should be said on a declaration like that is "#nav li a" -- since that nabs ALL the psuedo-states, then you just set what's DIFFERENT on the ones that are different. I've been seeing people doing this in their CSS for over a decade, and it's NEVER made any sense.

I also advise NOT setting padding on ANYTHING you declare a width on... and seriously, 0.833em? REALLY?

In any case, here's what I came up with:
http://www.cutcodedown.com/for_others/scottlpool2003/take2/template.html

As always the directory:
http://www.cutcodedown.com/for_others/scottlpool2003/take2/

...is wide open for easy access to the example code.

Which is the same general idea, but with a bit more 'stable' a codebase and a bit more semantic a markup -- fixing all the things I noticed so far.

ONE other suggestion, I'd make the H2 that are titles also be anchors in addition to the 'read more', setting the read more to 'nofollow' and giving it a TITLE along the lines of "Read more about Article Title -- read more is a useless link title that doesn't say where it goes... Putting the anchor in the H2 around the title is FAR more useful for screen readers and search engines, the 'read more' being more of a visual user type element.

 

Great reply as usual. You just seem to pick up on everything down to the minute details. This wasn't a working example, it was just something I put together as a test. Anyhow, looking over what you said makes perfect sense. Some things like <h3> follows <h2> makes me want to kick myself because its plainly obvious, yet your worst nightmare but it looks okay so it must be ok comes to mind. I think I need to get out of some really bad habits (some of which were taught in uni - no surprise there).

I'm currently working at a company maintaining their websites, they're not really tech savvy in that sense but I took the opportunity with no commercial experience (only personal experience with HTML/CSS basic PHP, MySQL) and promised myself that I'll get myself up to scratch. Its amazing how much I thought I knew when in the face of it, I'm only just beginning (5 years later).

 

That is the HARDEST conceptual hurdle in writing 'proper' HTML for people to get past... as I've said repeatedly for years if you are choosing your HTML tags based on appearance, you are probably choosing the wrong tags. That's the entire point of HTML 2 and the REAL HTML 4 (aka strict) -- HTML 3.2 on the other hand was just "whatever the browser makers are slapping in there we'll support" -- which... Hmm... isn't that what the whole 'living document' crap of going versionless the WhatWG wants to do is about? Why yes, yes it is. Hefty part of why I call 5 the "new transitional". It is not an authoritative document, and as such doesn't even qualify in my mind (with my engineering background) as a specification.

The biggest trap remains that 'screen' is just one of the many possible targets -- the folks who all they think about is what it looks like on desktop resolution screens have completely missed the POINT of HTML. That point being device neutral delivery of content -- the ability to mark up content saying what all it's bits and pieces ARE, and allowing the user-agent (aka browser) best determine how to show it within it's capabilities. That's why semantic markup is so important -- braille readers, screen readers, print, teletype, TTL, handheld, small screens, massive screens... and why CSS came into being, so you can customize for SPECIFIC media types... and as I said above if the damned browser makers had gotten off their arses and actually bothered finishing their HTML 4 implementations before adding all this "gee ain't it neat" HTML 5 BS, we could have been doing this stuff a decade and a half ago!

It's also why all the people who LINK in their CSS without a MEDIA attribute have completely missed the point of CSS -- sending your 'screen' layout to everything is just broken idiotic garbage. (Honestly, I think that "all" should be deprecated, and lacking a MEDIA attribute when type="text/css" should throw a validation error!)

There's a reason I say that said sheet of paper so far as technical stuff is concerned isn't worth a sheet of bog roll. As I've said several times we're in a industry where 3 years is obsolete, 5 years is the scrapheap -- at which point what good is a 4 year program? It's also why I think they want to dial back the clock so much with HTML 5 -- so schools can keep teaching their 1997 practices.

Something my grandfather used to say -- the day you think there's nothing new to learn is the day the rest of the world leaves you behind.

It's also why I piss off the HTML 5-tards so much... I went through and learned all the HTML 5 tags, what they do, and how to use them, BEFORE I formed an opinion about it. Something that to be frank, most of the people advocating it's use have OBVIOUSLY never done -- just as most of them have OBVIOUSLY never learned to use HTML 4 properly either.

NOT that we can REALLY use HTML 4 properly with the decade plus gaping holes in most browsers implementations. Want a good laugh, research "Bugzilla 915". FIFTEEN YEAR OLD bug in Gecko... Need I say more? ... and people wonder why I'm not a big fan of firefox either...