Alright I guess the last thread got deleted because I posted a link to my site and it looked like a plug. Really just looking to improve my html/css, so any tips/suggestions would be greatly appreciated! All the pages pretty much follow the same pattern, so I'll just post the homepage code. It looks something line this. Should probably tell you this. The w class is my width wrapper, and the cf class is a css clearfix. <!DOCTYPE html> <html> <head> <title>Web Design and Development Blog | Robby Klein</title> <meta charset="UTF-8"> <meta http-equiv="Content-Language" content="en" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="web,design,development,html,css,photoshop,illustrator,blog"> <meta name="description" content="The personal blog of web designer and developer Robby Klein. Here he posts thoughts theories, and tutorials."/> <meta name="author" content="Robby Klein"> <link href="/assets/application-f82c8c7762be17f82004495e80c6ee62.css" media="all" rel="stylesheet" /> </head> <body> <div id="mhead"> <div class="w"> <a href="/" id="logo"><img src="/images/robbyklein.svg" alt="Robby Klein" /></a> <a href="#" onclick="toggle()" id="menu"><img src="/images/menu.svg" alt="menu" /></a> <ul> <li><a href="/">Home</a></li> <li><a href="/categories">Categories</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </div> </div> <ul id="mobile"> <li><a href="/">Home</a></li> <li><a href="/categories">Categories</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> <div id="banner"> <div class="w"> <h1>Robby Klein Blog</h1> <p>Web designer, web developer, and all around good guy!</p> </div> </div> <div class="w cf"> <div class="main"> <div class="box"> <div class="postheader"> <h2><a href="/ruby-on-rails/removing-jquery-and-turbolinks-from-a-rails-application">Removing jQuery and Turbolinks from a Rails application</a></h2> <p class="meta">Posted in <a href="/ruby-on-rails">Ruby on Rails</a> on August 22, 2014.</p> </div> <div class="postimg"> <a href="/ruby-on-rails/removing-jquery-and-turbolinks-from-a-rails-application"><img alt="Rails no jquery" src="/posts/rails-no-jquery/rails-no-jquery.png" /></a> </div> <div class="body"> <p>By default, when you create new Ruby on Rails application it will include 3 Javascript files: the jQuery library, a jQuery unobtrusive adapter, and Turbolinks. In many cases, if your website is basic, there is really more harm than benefits including these files in your project. For instance, on my website, the only thing I used jQuery for was my slideToggle mobile navigation. Here's the steps I took to remove these Javascripts from my existing Ruby on Rails project.</p> <p><a class="button" href="/ruby-on-rails/removing-jquery-and-turbolinks-from-a-rails-application">Read Full</a></p> </div> </div> <div class="box"> <div class="postheader"> <h2><a href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Deploying Rails applications with Capistrano</a></h2> <p class="meta">Posted in <a href="/ruby-on-rails">Ruby on Rails</a> on August 20, 2014.</p> </div> <div class="postimg"> <a href="/ruby-on-rails/deploying-rails-applications-with-capistrano"><img alt="Capistrano deployment" src="/posts/capistrano-deployment/capistrano-deployment.png" /></a> </div> <div class="body"> <p>Once you have a Ruby on Rails production sever set up, its time to look at deployment options. The most well known has got to be Capistrano, which allows you to deploy changes by running simple commands. It can be confusing to set up, so here's a guide taking you through the deployment process.</p> <p><a class="button" href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Read Full</a></p> </div> </div> <div class="box"> <div class="postheader"> <h2><a href="/ubuntu/installing-passenger-and-nginx-on-ubuntu">Installing Passenger and Nginx on Ubuntu</a></h2> <p class="meta">Posted in <a href="/ubuntu">Ubuntu</a> on August 19, 2014.</p> </div> <div class="postimg"> <a href="/ubuntu/installing-passenger-and-nginx-on-ubuntu"><img alt="Nginx passenger" src="/posts/nginx-passenger/nginx-passenger.png" /></a> </div> <div class="body"> <p>In a previous post we wen't through installing Ruby on Rails on Ubuntu. In this post we'll go over adding Phusion Passenger and Nginx to the mix. Nginx is a light weight, and fast, web server rivialing the notorious Apache. Passenger is an application sever that we'll be running along side Nginx in order to put a Rails application into production.</p> <p><a class="button" href="/ubuntu/installing-passenger-and-nginx-on-ubuntu">Read Full</a></p> </div> </div> <div class="box"> <div class="postheader"> <h2><a href="/general/ssh-key-generation-on-windows-osx-and-ubuntu">SSH Key Generation on Windows, OSX, and Ubuntu</a></h2> <p class="meta">Posted in <a href="/general">General</a> on August 19, 2014.</p> </div> <div class="postimg"> <a href="/general/ssh-key-generation-on-windows-osx-and-ubuntu"><img alt="Sshgen" src="/posts/ssh-keys/sshgen.png" /></a> </div> <div class="body"> <p>In this tutorial I'll go over generating SSH keys on three popular operating systems, Windows, Mac OSX, and Ubuntu. Since I'll be referencing SSH and key pairs in many future posts I figured I should probably write a quick guide on generating keys on Linux, OSX, and Windows systems.</p> <p><a class="button" href="/general/ssh-key-generation-on-windows-osx-and-ubuntu">Read Full</a></p> </div> </div> <div class="box"> <div class="postheader"> <h2><a href="/ubuntu/installing-git-and-creating-a-repository-on-ubuntu">Installing Git and creating a repository on Ubuntu</a></h2> <p class="meta">Posted in <a href="/ubuntu">Ubuntu</a> on August 17, 2014.</p> </div> <div class="postimg"> <a href="/ubuntu/installing-git-and-creating-a-repository-on-ubuntu"><img alt="Git on ubuntu" src="/posts/ubuntu-git/git-on-ubuntu.png" /></a> </div> <div class="body"> <p>I'm very sad I was so late to hop aboard the Git train, because it's really awesome and a great piece to my work flow. GitHub is pretty cool too, but those private repositories can get expensive real quick. Today I'll show you how to set up a private git server on your Ubuntu server.</p> <p><a class="button" href="/ubuntu/installing-git-and-creating-a-repository-on-ubuntu">Read Full</a></p> </div> </div> </div> <div id="sidebar"> <h3>Categories</h3> <ul> <li> <a href="/general">General</a> </li> <li> <a href="/ruby-on-rails">Ruby on Rails</a> </li> <li> <a href="/ubuntu">Ubuntu</a> </li> </ul> <h3>Latest Posts</h3> <ul> <li> <a href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Deploying Rails applications with Capistrano</a> </li> <li> <a href="/ubuntu/installing-passenger-and-nginx-on-ubuntu">Installing Passenger and Nginx on Ubuntu</a> </li> <li> <a href="/general/ssh-key-generation-on-windows-osx-and-ubuntu">SSH Key Generation on Windows, OSX, and Ubuntu</a> </li> <li> <a href="/ubuntu/installing-git-and-creating-a-repository-on-ubuntu">Installing Git and creating a repository on Ubuntu</a> </li> <li> <a href="/ubuntu/installing-ruby-on-rails-and-mysql-on-ubuntu">Installing Ruby on Rails and MySQL on Ubuntu</a> </li> </ul> <h3>Latest Projects</h3> <ul> <li> <a href="/portfolio/cap-castle">Cap Castle</a> </li> <li> <a href="/portfolio/family-first-realty">Family First Realty</a> </li> <li> <a href="/portfolio/jacks-steak-house">Jacks Steak House</a> </li> <li> <a href="/portfolio/scooters-jungle">Scooters Jungle</a> </li> <li> <a href="/portfolio/smiths-accounting">Smiths Accounting</a> </li> </ul> <h3>Connect with me</h3> <ul> <li> <a href="http://behance.com/robbyk">Behance</a> </li> <li> <a href="http://github.com/robbyklein">GitHub</a> </li> <li> <a href="http://twitter.com/itsrobbyk">Twitter</a> </li> </ul> </div> </div> <div id="footer"> <div class="w"> <ul> <li><a href="/">Home</a></li> <li><a href="/categories">Categories</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> <p>© 2014 Robbyk.com</p> </div> </div> <script src="/assets/application-79430eecfd37a7eec74a147b323ff3a8.js"></script> </body> </html> Code (markup): Here's the sass css file $head: #34495e $banner: #16a085 $text: #747474 $heading: black $links: #34495e $lightgrey: #F4F4F4 $lightgreyborder: #EAEAEA * margin: 0 padding: 0 -webkit-text-size-adjust: none -ms-text-size-adjust: none *, *:before, *:after -moz-box-sizing: border-box -webkit-box-sizing: border-box box-sizing: border-box .cf:before, .cf:after content: " " display: table .cf:after clear: both img, label, fieldset, input display: block border: none img max-width: 100% img a border: none a text-decoration: none font-weight: bold color: $links &:hover color: $heading body font: normal 100%/100% arial, helvetica, sans-serif h1, h2, h3 font-weight: bold color: $heading line-height: 1.4 h1 a, h2 a, h3 a color: $heading &:hover color: $links p, li color: $text line-height: 155% p+p margin-top: 1.5em h1 font-size: 1.75em h2 font-size: 1.55em h3 font-size: 1.35em .w max-width: 75em padding: 0 1em margin: 0 auto .meta font-size: 0.93em .button background-color: #3D556D color: white width: auto min-width: 8em padding: .35em .75em font-size: 85% border-radius: 3px border: 1px solid #324656 border-bottom: 2px solid #324656 text-shadow: 0 1px 0px rgba(0,0,0,0.15) &:hover color: white background-color: $head .button+.button margin-left: .5em .box margin-bottom: 2.5em .box+.box margin-top: 4em .item margin-bottom: 1.5em p+p margin: 0 strong color: $heading .main margin-top: 2.5em float: left width: 100% .postheader margin-bottom: 1em .pageheader margin-bottom: 1.5em padding-bottom: 1.5em border-bottom: 1px solid #CECECE .postimg margin: 1em 0 .body h2, h3 margin-top: 2em margin-bottom: 1em img margin: 1em 0 ul, ol margin: 2em 0 li margin-left: 20px margin-bottom: .5em .pagination margin-bottom: 2.5em span background-color: $lightgrey border: 1px solid $lightgreyborder color: $heading margin-right: .75em padding: .35em font-weight: 700 a color: $head &:hover color: $heading code, .note, .error, .success margin: 1.5em 0 padding: 1.5em border: solid 1px width: 100% .note, .error, .success font-size: 85% word-wrap: break-word code color: #333 background-color: $lightgrey border-color: $lightgreyborder display: block overflow-x: auto .note background-color: #FFFFD1 border-color: #F7F7B2 .error background-color: #FFD3D1 border-color: #F4BAB2 .success background-color: #E9FFD1 border-color: #CEF2B0 label padding-bottom: .45em input height: 2.5em width: 100% max-width: 18.75em margin-bottom: 1em padding: 0 1em textarea max-width: 37.5em width: 100% height: 18.75em margin-bottom: 1em padding: 1em input, textarea, select border: 1px solid #cdcdcd background-color: #eee select margin-bottom: 1em height: 2.5em width: 12.5em #mhead height: 3.625em background-color: $head line-height: 3.625em #logo float: left font-size: 1.25em padding: 0.45em 0 #menu float: right padding: 1.25em 0 ul display: none a color: #C7D9EA &:hover color: white #mobile border-bottom: 1px solid #212E3A display: none li border-top: 1px solid #212E3A a background: $head display: block padding: .75em 0 text-align: center color: #C7D9EA &:hover background-color: #212E3A color: white #banner background-color: $banner padding: 2.5em 0 text-align: center background-image: url('/images/banner.png') text-shadow: 0 1px 0px rgba(0,0,0,0.15) h1 color: white p color: white line-height: 150% #portfolio float: left ul margin: 0 auto li list-style: none display: inline-block margin-bottom: -2px width: 100% border-bottom: 3px solid white #about li list-style: none margin-bottom: 1em margin-left: 0 img margin: 0 #cat h2 margin-bottom: 0.5em img display: none #cat+#cat margin-top: 4em #sidebar width: 100% float: left margin-top: 2.5em h3 margin-bottom: 0.5em ul+h3 margin-top: 1.5em li list-style: none line-height: 1.55 margin-bottom: 0.5em #footer background-color: $lightgrey border-top: 1px solid $lightgreyborder text-align: center padding: 1.5em 0 margin-top: 2.5em li display: inline-block margin: 0 1em 0.5em 1em p margin-top: 0.5em color: #6D6D6D #comment background-color: $lightgrey border: 1px solid $lightgreyborder padding: 1.5em font-size: 93% p+p margin: 0 strong color: $heading .meta margin-bottom: .75em @media only screen and (min-width: 25em) .w padding: 0 2em #portfolio li list-style: none display: inline-block margin-right: -3px margin-bottom: -1px width: 50% border: 3px solid white #cat img display: block float: left margin-right: 2em padding-bottom: 2em @media only screen and (min-width: 49.75em) h1 font-size: 2em h2 font-size: 1.65em h3 font-size: 1.45em p, li font-size: 1.093em .meta font-size: 1em .main float: right width: 75% padding-left: 3.5em #mhead #menu display: none ul display: block float: right li display: inline-block margin-left: 2.25em line-height: 3.867 font-size: 0.93em a display: block height: 3.867em #banner p font-size: 1.125em #sidebar float: left width: 25% #portfolio width: 100% padding-left: 0 li width: 33% @media only screen and (min-width: 84em) h1 font-size: 2.25em h2 font-size: 1.85em h3 font-size: 1.65em p, li font-size: 1.125em .meta font-size: 1.093em #banner p font-size: 1.25em #sidebar li font-size: 1.093em Code (markup): A couple problems I identify is the mobile navigation. I'm trying to figure out a way to manipulate the main navigation to work on mobile, so i won't have double the markup. Other than that, do you see any incorrect html? What can I improve? I haven't done any legacy browser support yet, I want to get the above code solid first. I plan to make it work on IE 8+ Thanks!
Kewl, For html accuracy, you can run a w3 validator to make sure your html,css is accurate. you can use this online link or use the software you are using. If it passes the html and css pass the validation and your site displays well, you are good to go. To get your site to work on mobile, we suggest that you use foundation zurb. Foundation zurb is free and is what we use for all our jobs. I hope above helps you.
To begin, if you really want to learn best practice, lose these: $head: #34495e $banner: #16a085 $text: #747474 $heading: black $links: #34495e $lightgrey: #F4F4F4 $lightgreyborder: #EAEAEA * margin: 0 padding: 0 -webkit-text-size-adjust: none -ms-text-size-adjust: none *, *:before, *:after -moz-box-sizing: border-box -webkit-box-sizing: border-box box-sizing: border-box .cf:before, .cf:after content: " " display: table .cf:after clear: both Code (markup): The clearfix was a godsend when Tony Aslett developed it in the dark ages of css and IE's stupidity. See Tony's clearfix (2004) and my own clearing article (2006). As we gained knowledge about css, Tony's fix has become pretty much obsoleted. There is seldom a compelling reason now to favor its use over more elegant solutions. The * selector is dangerous; in some cases it causes problems from which you cannot recover. Don't use it. In fact, don't use any any boilerplate "global reset". If you develop a set of personal common rulesets, fine use them, but don't stupidly zero properties just to turn around and set those properties to your preferred values. See Global resets considered harmful. Lose SASS and any other css preprocessors or foundations or whatevermacallits. You need to learn the cascade, inheritance and selectors inside and out. SASS, etc., block learning. Once you really learn how css works, feel free to make things harder on yourself with SASS et al. It appears you've written your styles in detail (from the bottom up). Whether this is from being shown the wrong way to do it or due to SASS abetting the practice, it is a poor practice. Work from the top down and by context. Your stylesheets will be smaller and cheaper to maintain. In the html, there is no need to double box everything. You're simply adding markup that has no function. This: <div class="box"> <div class="postheader"> <h2><a href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Deploying Rails applications with Capistrano</a></h2> <p class="meta">Posted in <a href="/ruby-on-rails">Ruby on Rails</a> on August 20, 2014.</p> </div> <div class="postimg"> <a href="/ruby-on-rails/deploying-rails-applications-with-capistrano"><img alt="Capistrano deployment" src="/posts/capistrano-deployment/capistrano-deployment.png" /></a> </div> <div class="body"> <p>Once you have a Ruby on Rails production sever set up, its time to look at deployment options. The most well known has got to be Capistrano, which allows you to deploy changes by running simple commands. It can be confusing to set up, so here's a guide taking you through the deployment process.</p> <p><a class="button" href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Read Full</a></p> </div> </div> Code (markup): Would be better structured as this: <div class="post"> <!-- use a token that says what the class is --> <h3><a href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Deploying Rails applications with Capistrano</a></h3> <!-- #main has an implied h2 level heading --> <p class="meta">Posted in <a href="/ruby-on-rails">Ruby on Rails</a> on August 20, 2014.</p> <!-- poor choice of token; meta is an element name --> <p><a href="/ruby-on-rails/deploying-rails-applications-with-capistrano"><img alt="Capistrano deployment" src="/posts/capistrano-deployment/capistrano-deployment.png" /></a></p> <p>Once you have a Ruby on Rails production sever set up, its time to look at deployment options. The most well known has got to be Capistrano, which allows you to deploy changes by running simple commands. It can be confusing to set up, so here's a guide taking you through the deployment process.</p> <p><a class="button" href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Read Full</a></p> </div> Code (markup): Note the h3 instead of h2. This is because #main has an implied h2 level heading. Likewise, the #sidebar is a sibling of #main and its heading should be h2. See my description of heading levels. Concentrate on css2.1, simply because its format is easier to learn from. CSS3 is modularized to make it easier to edit and adopt. Otherwise the whole spec would need to be adopted as a unit. Easier to upgrade but harder for tyros to learn from. In html, go for html4. HTML5 is not yet adopted. It is generally well supported but has some glaring holes. Finally, read what the html5 editor has to say about how to read the specs. cheers, gary
Thanks for the awesome reply! Really appreciate the time to point out some mistakes I'm making. I don't know why I rapped everything in extra divs in the post bit, I'm going to clean that up tonight. I'll probably have to leave one around the post body though, just because i have specific rules that apply to the content inside (heading spacing, p+p etc). I'm definitely going to swap out the * stuff and build a custom reset tonight. As for the doctype, I didn't even any of the new html5 stuff I just left the doctype for some reason, I'll probably swap it out for html4/xhtml. One change that stuck out to me, was the wrapping of images in the p tag? Is that how all images should be? I pretty much left all of mine free. As for sass, i like it. I just started using it a few months ago, I've wrote pure css for years just a lot of bad habits I guess. I really don't get to crazy with it. I just like having the color scheme up top so if I want to change a color i don't have to change the hex code in 20 places. I also use nesting here and there. Other than that i write it just like css without the {}; When you say from the bottom up, are you referring to me starting from the smallest resolution? In the past I've went from the top down and it was a lot easier for me to add stuff rather than change/remove stuff, if that makes any sense. LatelyI've been thinking starting in the middle would be the best option. Maybe I'm talking about something completely different than you, not sure. Anywho, really appreciate the detailed reply, I'll check out all the links you sent me, thanks!
I'm partly with Gary (@kk5st), but we have some differences... Like what that **** makes a lone IMG tag a grammatical paragraph? I know it's common practice, doesn't make it right as that's NOT a flow text containing one or more sentences in a coherent thought. P means PARAGRAPH, an image isn't one! Of course you've got that SASS crap in there, which means it's unlikely I'd even be able to test your code here since I won't use that idiotic halfwit nonsense. (No offense). To me SASS and it's ilk are just a crutch for people who don't know how to use selectors or inheritance properly, or are too lazy to use structural characters that actually provide code clarity resulting in an illegible mess or that same uselessly vague code structure the python jacktards seem to like. (I'm through being nice to the Python crowd). Between the stupid "variables" nonsense, "oh noes I havez to types some extra characters" extra development steps and overhead, LESS, SASS, and most 'preprocessor' crap is a waste of time, effort, and pretty well pisses on code clarity. You're wasting time with a bunch of box model crap that you likely don't need and won't work in legacy browsers, you're wasting time saying HTML 5 when you're not actually using any of it, as mentioned the universal reset is a BAD idea though I say resets are a good idea; the problem is short ones like you are using can cause problems, while massive ones are what gives resets a bad name. ... and for the love of Pesci, PLEASE do not use vague/meaningless abbreviations as ID's or classes. "w" and "CF" mean jack **** to other people. If it's a width wrapper, call it a widthWrapper... if it's that asinine clearFix nonsense, call it clearFix. The handful of extra characters is worth it so a year from now you aren't going "what the hell is that?" Likewise try to avoid using classes that are the same as tagName's or CSS properties -- ".body' can result in confusing code. (particularly since you aren't even using .body on BODY) Likewise what's with the endless and uselessly vague CSS file name?!? What possible reason could you have for sending your screen layout CSS to "all"? I'm so sure that makes sense on print or aural. ... and what's with all the really goofy fractional EM sizes? Is that some broken attempt to treat EM like they were pixels or something (big hint, they aren't) Also ease up on the use of margins when padding would make it simpler, and you seem to be using adjacent sibling selectors to do what adjusting the parent padding should be handling. It's also sloppy ( and semi-invalid) to omit the leading zero on a decimal. In a lot of places you are failing to take into account "what if images are blocked" and/or the ugly appearance pre-image load. If you're going to use a background-image ALWAYS have a background color underneath it. Likewise you seem to be declaring color via specificity instead of off the parent. See #banner for example, where both H1 and P inherit by default, so say color:white ONCE on the parent, not twice on the children! You also have some statements that make no sense: #cat+#cat ID's are unique, they cannot exist more than once on a page -- as such if you have #cat as a sibling to #cat, you have invalid/gibberish markup. You also seem to be using H3 that are NOT subsections of the H2 preceding them. What makes "Categories" and "latest posts" a subsection of "Installing Git and creating a repository on Ubuntu"?!? That doesn't make any sense. It's almost like you're using numbered headings to say what size things should be instead of what they ARE! UNLESS you are using the HTML 5 structural tags (nav, article, aside, section) -- which I don't advise as they're a redundant halfwit waste of code -- an H1 is the heading under which everything on the page is a subsection... H2's mark the start of subsections of the H1 preceding them, H3's are the start of the H2 section preceding them and so forth down the line -- with HR indicating a topic change where a numbered heading is unwanted/unwarranted. That's why Skipping from a H2 to H4 is gibberish, and why you are basically saying that everything in your sidebar is a subsection of that last article section. ... and please, for the love of Pesci, STOP dicking with the font size based on screen width. That 'make it bigger because the screen is bigger' crap does nothing but piss off the target audience of EM's in the first damned place. You want to shrink the headings to fit mobile, fine. But don't start enlarging the font JUST because the screen is big. I'm not rocking 2560x1440 and 3840x2160 to have the same amount of text on the screen that I would at 1920x1080! Oh, and those text-size-adjust? Do NOT send that to all browsers. It breaks zooming in desktop Safari. (though laughably it does NOT break zooming in mobile Safari... Ah, that Apple Kooality with a capitol K) ... and of course you've got that STUPID MALFING "let's make the menu harder to use with a uselessly vague/meaningless" icon crap.... on a menu small enough it shouldn't matter. If you don't mind, I may do a rewrite of your page to show exactly what I mean... though I'll probably swing an axe at that stupid space-wasting bandwidth wasting push what's important down the page for nothing banner area crap. (not a fan)
Thanks for the response. As far as box sizing, it makes the responsiveness much easier for me. I'd agree its really bad for me to be applying it to ABSOLUTELY everything, I'm going to try and clean that up, as well as the reset. As far as legacy browsers go, I load an additional CSS file for less than IE9, which makes it fixed width and inherited box-sizing (whatever the defaults called). I doubt to many people use an old as version of Firefox, Chrome, or Opera that doesn't support it. Noted on the class and ID names. I was thinking about it wrongly. For instance I was interpreting ID/Classes wrong. Shall fix the "all" bit in the css link as well. As for the goofy EM sizes, I was just trying to find that perfect size for the average users. I don't think They'll ever be as simple as 1em, 2em, 3em, maybe I could try .5 increments or .25. Not sure where you're referring to no background colors assigned. I thought I set a background-color every place I used background-image. Headings headings headings, my thinking goes like this... Why should my sidebar headings have the same weight as the posts which is the main content? So you think on that main page keep the h1 and everything else should be h2's? This concept scares me. Yeah I'll fix those font sizes. Trying to conserve space on that tiny phone screen! I'll look into other options. I be very curious to see your rewrite, but I think it'd be more beneficial to me to do my own rewrite first, then maybe you'll just have to point out a few errors rather than rewrite the entire page. Really appreciate the replies guys, I think I'm just going to rewrite the page from scratch. It's going to get too confusing changing so many classes and removing box-sizing from everything. I'll post an update here soon! Edit: Deathshadow let me ask you a question. What doctype do you recommend html4 or xhtml1(.1)? I remember 5-6 years ago I always used xhtml, but seems kind of pointless using a doctype thats pretty much discontinued now.
Regarding the doctype, the only thing it actually does is trigger quirks or standards mode in the browser. <!DOCTYPE HTML> Code (markup): triggers standards mode in all browsers, so no need to change. In the W3C validator, it calls the html5 checker. That's not a problem even if you use xhtml1 or html4 as syntaxes are recognized. Re the p element: DS and I have a longstanding disagreement on its use. The paragraph is defined both grammatically and structurally. DS prefers to use the grammatical definition, while I use the structural definition since it's an element tag of a structural markup language. As to img being within a p, it is an inline replaced element. Effectively, the image replaces the alternative text, thus should be treated as text. Further, the presentation of sibling inline and block elements is not well defined. That's why, for example, no browser properly supports {display: run-in;}. The test suite contains 100+ test cases and to my knowledge no browser has ever passed even half. IIRC, Firefox as early as 2.0 supported run-in (not well), but finally dropped it completely as other browsers seemed to give up. Do give up SASS. It is a step backward. cheers, gary
Which to me just means you're doing it wrong... particularly with IE7/newer supporting min/max-width... and min/max-width being border-box ANYWAYS. Numbered headings don't mean WEIGHT, they mean STRUCTURE. Grab the web developer toolbar for FF and do a information -> document outline. That's what headings are FOR, to mark the beginning of sections of the page and what's a subsection of what. The whole confusion comes from most people these days not knowing professional writing, and completely misunderstanding how the word "importance" is used in the specification; structural import does not mean "important importance" or "weight". It's also why HTML 5's SECTION tag is idiotic nonsense... much less the "reset to H1 every time you open SECTION" pissing all over logical document structure and making pages HARDER to navigate in non-visual UA's. Goes with what I've been saying for years now -- the WhatWG, the folks behind HTML 5, didn't know enough about HTML 4 Strict or what 4 Strict was about to be making a new "specification" (yes, I'm making air quotes with my fingers) since the target audience for it seems to be all the jacktards who were still sleazing out HTML 3.2 with the pre-4 vendor specific crap on it, and slapping 4 tranny on it. Now they slap 5 lip-service around the same outdated halfwit inaccessible methodology and get to slap each-other on the back over how "modern" they are... when to me it looks like the WORST of 1997 development practices. Where again, nobody seemed to bother learning what the tags meant and instead just used them based on what they looked like. The vast majority of HTML 5 sure as shine-ola isn't meant for anyone who embraced 4 Strict, separation of presentation from content, semantic markup, progressive enhancement, or any of the dozens of other improvements in site building methodologies of the past sixteen years! HTML 4.01 STRICT and XHTML 1.0 STRICT are STILL the current W3C recommendation doctypes... HTML 5 is a superset of them, so it's not like it's "discontinued" or support is going to magically disappear. It's why IF you need one of the handful of actual HTML 5 features that serves a legitimate purpose (like MANIFEST and... uhm... Well there's MANIFEST) or have one of the idiotic dipshit redundancies shoved down your throat to support freetards and Apple's vendor lock-in (AUDIO, VIDEO), I say write as H4 STRICT or X1 STRICT, ignore the two or three unrecognized tag errors during validation, and slap the 5 lip-service doctype on it at the last minute... especially since 5 validation thanks to the dumbass loosening of the structural rules is useless crap! In many ways I think we need a "5 Strict" that brings the entire intent of HTML 4 Strict to the HTML 5 world... kill off the useless "structural tags" that piss on accessibility and bandwidth for nothing more than satiating the wants of data scraping asshats most site owners try to keep out, kill off the reintroduction of old redundancies, kill off accessibility crap like TARGET... put AUDIO and VIDEO back where they ****ing belong on OBJECT, etc, etc... Everything you need to know about HTML 5 can be found in one tag if you know the FIRST thing about how/why the REAL HTML 4 (aka Strict) was created. It's called EMBED. That it (and to an extent IFRAME and TARGET) is back in should be ALL you need to know if you have the slightest inkling what 4 STRICT was actually about. I still use XHTML 1.0 STRICT for two reasons: First, I use STRICT because it will bitch at me if I try to use things that have NO BUSINESS on a website written after 1997; which is a laugh since thanks to 5 many of those things are now valid again ENTIRELY because again, most of the ignorant halfwits vomiting up websites never extracted their cranium from 1997's rectum, and instead prefer shoving it up there even further to the point they ran into Lemmiwinks. Second, I use XHTML because I prefer the clearer/cleaner syntax particularly on having clear element closings. It's kind of funny as I'm all about minimalist markup, but the occasional space or tab for code clarity STAYS IN -- as I'll put code clarity ahead of "I'm too ****ing lazy to type" or "oh noes, it's an extra BYTE" any day.
Alrighty, so I started rewriting everything and it got very confusing. In the end I just ended up modifying my current files. Let me know how the updated version looks. Here's the key changes. I removed the * global reset, and replaced it with several selected tags that I needed a reset on. I really wanted to remove the box-sizing: box-model but I really like having the same page and column margin at all window sizes. I tried to limit usage and applied it only where needed. I changed the doctype to xhtml Fixed the headings, the css type"all". I started at the largest resolution and made the smaller ones the media queries. Cleaned up a lot of html Used better css class names Converted it to regular CSS I used smaller font sizes, they no longer change for larger screens Removed use of inline-block to make adding legacy support easier (should only take a few lines now removed the pointless banner There's some other stuff I can't remember. It still feels kind of sloppy to me but let me know. Still looking for the best way to do an h1 text replacement with a png fallback for the svg logo. <!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> <title>Web Design and Development Blog | Robby Klein</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="keywords" content="web,design,development,html,css,photoshop,illustrator,blog" /> <meta name="description" content="The personal blog of web designer and developer Robby Klein. Here he posts thoughts theories, and tutorials."/> <meta name="author" content="Robby Klein" /> <link type="text/css" rel="stylesheet" href="/styles/screen.css" media="screen,projection,tv" /> </head> <body> <div id="header"> <div class="widthWrapper"> <h1> <a href="/"> <img src="/images/robbyklein.svg" alt="Robby Klein"/> </a> </h1> <a id="menu"><img src="/images/menu.svg" alt="menu"/></a> <ul> <li><a href="/">Home</a></li> <li><a href="/categories">Categories</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> </div> </div> <ul id="mobile"> <li><a href="/">Home</a></li> <li><a href="/categories">Categories</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> <div class="widthWrapper clearFix"> <div id="mainCol"> <div class="post"> <h2><a href="/ruby-on-rails/removing-jquery-and-turbolinks-from-a-rails-application">Removing jQuery and Turbolinks from a Rails application</a></h2> <p class="meta">Posted in <a href="/ruby-on-rails">Ruby on Rails</a> on August 22, 2014.</p> <a href="/ruby-on-rails/removing-jquery-and-turbolinks-from-a-rails-application"><img alt="Rails no jquery" src="/posts/rails-no-jquery/rails-no-jquery.png" /></a> <p>By default, when you create new Ruby on Rails application it will include 3 Javascript files: the jQuery library, a jQuery unobtrusive adapter, and Turbolinks. In many cases, if your website is basic, there is really more harm than benefits including these files in your project. For instance, on my website, the only thing I used jQuery for was my slideToggle mobile navigation. Here's the steps I took to remove these Javascripts from my existing Ruby on Rails project.</p> <p><a class="button" href="/ruby-on-rails/removing-jquery-and-turbolinks-from-a-rails-application">Read Full</a></p> </div> <div class="post"> <h2><a href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Deploying Rails applications with Capistrano</a></h2> <p class="meta">Posted in <a href="/ruby-on-rails">Ruby on Rails</a> on August 20, 2014.</p> <a href="/ruby-on-rails/deploying-rails-applications-with-capistrano"><img alt="Capistrano deployment" src="/posts/capistrano-deployment/capistrano-deployment.png" /></a> <p>Once you have a Ruby on Rails production sever set up, its time to look at deployment options. The most well known has got to be Capistrano, which allows you to deploy changes by running simple commands. It can be confusing to set up, so here's a guide taking you through the deployment process.</p> <p><a class="button" href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Read Full</a></p> </div> <div class="post"> <h2><a href="/ubuntu/installing-passenger-and-nginx-on-ubuntu">Installing Passenger and Nginx on Ubuntu</a></h2> <p class="meta">Posted in <a href="/ubuntu">Ubuntu</a> on August 19, 2014.</p> <a href="/ubuntu/installing-passenger-and-nginx-on-ubuntu"><img alt="Nginx passenger" src="/posts/nginx-passenger/nginx-passenger.png" /></a> <p>In a previous post we wen't through installing Ruby on Rails on Ubuntu. In this post we'll go over adding Phusion Passenger and Nginx to the mix. Nginx is a light weight, and fast, web server rivialing the notorious Apache. Passenger is an application sever that we'll be running along side Nginx in order to put a Rails application into production.</p> <p><a class="button" href="/ubuntu/installing-passenger-and-nginx-on-ubuntu">Read Full</a></p> </div> <div class="post"> <h2><a href="/general/ssh-key-generation-on-windows-osx-and-ubuntu">SSH Key Generation on Windows, OSX, and Ubuntu</a></h2> <p class="meta">Posted in <a href="/general">General</a> on August 19, 2014.</p> <a href="/general/ssh-key-generation-on-windows-osx-and-ubuntu"><img alt="Sshgen" src="/posts/ssh-keys/sshgen.png" /></a> <p>In this tutorial I'll go over generating SSH keys on three popular operating systems, Windows, Mac OSX, and Ubuntu. Since I'll be referencing SSH and key pairs in many future posts I figured I should probably write a quick guide on generating keys on Linux, OSX, and Windows systems.</p> <p><a class="button" href="/general/ssh-key-generation-on-windows-osx-and-ubuntu">Read Full</a></p> </div> <div class="post"> <h2><a href="/ubuntu/installing-git-and-creating-a-repository-on-ubuntu">Installing Git and creating a repository on Ubuntu</a></h2> <p class="meta">Posted in <a href="/ubuntu">Ubuntu</a> on August 17, 2014.</p> <a href="/ubuntu/installing-git-and-creating-a-repository-on-ubuntu"><img alt="Git on ubuntu" src="/posts/ubuntu-git/git-on-ubuntu.png" /></a> <p>I'm very sad I was so late to hop aboard the Git train, because it's really awesome and a great piece to my work flow. GitHub is pretty cool too, but those private repositories can get expensive real quick. Today I'll show you how to set up a private git server on your Ubuntu server.</p> <p><a class="button" href="/ubuntu/installing-git-and-creating-a-repository-on-ubuntu">Read Full</a></p> </div> </div> <div id="sidebar"> <h2>Categories</h2> <ul> <li> <a href="/general">General</a> </li> <li> <a href="/ruby-on-rails">Ruby on Rails</a> </li> <li> <a href="/ubuntu">Ubuntu</a> </li> </ul> <h2>Latest Posts</h2> <ul> <li> <a href="/ruby-on-rails/deploying-rails-applications-with-capistrano">Deploying Rails applications with Capistrano</a> </li> <li> <a href="/ubuntu/installing-passenger-and-nginx-on-ubuntu">Installing Passenger and Nginx on Ubuntu</a> </li> <li> <a href="/general/ssh-key-generation-on-windows-osx-and-ubuntu">SSH Key Generation on Windows, OSX, and Ubuntu</a> </li> <li> <a href="/ubuntu/installing-git-and-creating-a-repository-on-ubuntu">Installing Git and creating a repository on Ubuntu</a> </li> <li> <a href="/ubuntu/installing-ruby-on-rails-and-mysql-on-ubuntu">Installing Ruby on Rails and MySQL on Ubuntu</a> </li> </ul> <h2>Latest Projects</h2> <ul> <li> <a href="/portfolio/cap-castle">Cap Castle</a> </li> <li> <a href="/portfolio/family-first-realty">Family First Realty</a> </li> <li> <a href="/portfolio/jacks-steak-house">Jacks Steak House</a> </li> <li> <a href="/portfolio/scooters-jungle">Scooters Jungle</a> </li> <li> <a href="/portfolio/smiths-accounting">Smiths Accounting</a> </li> </ul> <h2>Connect with me</h2> <ul> <li> <a href="http://behance.com/robbyk">Behance</a> </li> <li> <a href="http://github.com/robbyklein">GitHub</a> </li> <li> <a href="http://twitter.com/itsrobbyk">Twitter</a> </li> </ul> </div> </div> <div id="footer"> <div class="widthWrapper"> <ul> <li><a href="/">Home</a></li> <li><a href="/categories">Categories</a></li> <li><a href="/portfolio">Portfolio</a></li> <li><a href="/about">About</a></li> <li><a href="/contact">Contact</a></li> </ul> <p>© 2014 Robbyk.com</p> </div> </div> <script type="text/javascript" src="/scripts/scripts.js"></script> </body> </html> Code (markup): html,body,div,form,fieldset,h1,h2,h3,h4,h5,h6,ul,li,ol,p,img { margin:0; padding:0; } img,label,fieldset,input,textarea { display:block; border:none; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } img { max-width:100%; } img a { border:none; } .clearFix:after { content:" "; display:table; } .clearFix:after { clear:both; } .clearFix { *zoom:1 } body { font:normal 100%/155% arial, helvetica, sans-serif; } .widthWrapper { max-width:75em; width:90%; margin:0 auto; } h2,h3 { color:black; line-height:1.4; } p+p { margin-top:1.5em; } .button { background-color:#3d556d; color:white; width:auto; min-width:8em; padding:0.35em 0.75em; margin-right:0.5em; font-size:85%; border-radius:3px; border:1px solid #324656; border-bottom:2px solid #324656; text-shadow:0 1px 0px rgba(0,0,0,0.15); } .button:hover { color:white; background-color:#34495e; } a { text-decoration:none; font-weight:bold; color:#34495e; } a:hover { color:black; } h1 a,h2 a,h3 a { color:black; } h1 a:hover,h2 a:hover,h3 a:hover { color:#34495e; } p,li { color:#747474; } .headSpace { margin-bottom:1.5em; padding-bottom:1.5em; border-bottom:1px solid #cecece; } .meta { font-size:93%; } .pageHead { margin-bottom:0.5em; } .post h3,#comments h3,#reply h3,.about h3 { font-size:1.5em; margin-top:2em; margin-bottom:1em; } #header { height:3.625em; background-color:#34495e; } #header #menu { display:none; } #header ul { float:right; } #header li { display:block; float:left; margin-left:2.25em; line-height:3.867; font-size:0.93em; } #header li a { display:block; height:3.867em; color:#c7d9ea; } #header li a:hover { color:white; } h1 { margin:0.417em 0; font-size:1.5em; line-height:1.667; float:left; } h1 a { color:white; } #mobile { border-bottom:1px solid #212e3a; display:none; } #mobile li { border-top:1px solid #212e3a; } #mobile a { background:#34495e; display:block; padding:0.75em 0; text-align:center; color:#c7d9ea; } #mobile a:hover { background-color:#212e3a; color:white; } #mainCol { margin-top:2.5em; float:right; width:75%; padding-left:3.5em; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } #mainCol h2 { font-size:1.75em; } #oneCol { width:100%; margin-top:2.5em; } #sidebar { width:25%; float:left; margin-top:2.5em; } #sidebar h2 { margin-bottom:0.75em; } #sidebar ul { padding-bottom:2.5em; } #sidebar li { list-style:none; line-height:1.55; margin-bottom:0.5em; } #footer { background-color:#f4f4f4; border-top:1px solid #eaeaea; text-align:center; padding:1.5em 0; margin-top:2.5em; } #footer li { display:inline-block } #footer li a { display:block; margin:0 1em 1em 1em; } #footer p { margin-top:0.5em; color:#6d6d6d; } .post img { margin:1em 0; } .post ul,.post ol { margin:2em 0; } .post li { margin-left:20px; margin-bottom:0.5em; } .post+.post { margin-top:4.5em; } code,.note,.error,.success { margin:1.5em 0; padding:1.5em; border:solid 1px; width:100%; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; } .note,.error,.success { font-size:85%; word-wrap:break-word; } code { color:#333333; background-color:#f4f4f4; border-color:#eaeaea; display:block; overflow-x:auto; } .note { background-color:#ffffd1; border-color:#f7f7b2; } .error { background-color:#ffd3d1; border-color:#f4bab2; } .success { background-color:#e9ffd1; border-color:#cef2b0; } .pagination { margin-bottom:2.5em; } .pagination span { background-color:#f4f4f4; border:1px solid #eaeaea; color:black; margin-right:0.75em; padding:0.35em; font-weight:700; } .pagination span a { color:#34495e; } .pagination span a:hover { color:black; } label { padding-bottom:0.45em; } input { height:2.5em; width:100%; max-width:18.75em; margin-bottom:1em; padding:0 1em; } textarea { max-width:37.5em; width:100%; height:18.75em; margin-bottom:1em; padding:1em; } input,textarea,select { border:1px solid #cdcdcd; background-color: #eeeeee; } select { margin-bottom:1em; height:2.5em; width:12.5em; } .portfolio ul { margin:0 auto; } .portfolio li { list-style:none; display:block; float:left; width:33.333%; } .about li { list-style:none; margin-bottom:1em; margin-left:0; } .about li img { margin:0; } .category { padding-bottom:3.5em; } .category h3 { padding-bottom:0.15em; float:right; width:80%; font-size:1.5em; } .category p { float:right; width:80%; } .category img { float:left; width:20%; padding-right:2.5em; } .comment { background-color:#f4f4f4; border:1px solid #eaeaea; padding:1.5em; font-size:93%; margin-bottom:1.5em; } .comment .commentHead { margin-bottom:1.5em; border-bottom:1px solid #eaeaea; } .comment .meta { float:right; } .comment strong { float:left; } .comment p+p { margin:0; } .comment strong { color:black; } .comment .meta { margin-bottom:0.75em; } @media only screen and (max-width: 820px) { #mainCol { margin-bottom:4.5em; } #header #menu { float:right; position:relative; margin:1.429em 0; width:20px; height:18px; display:block; color:white; font-size:14px; } #header #menu span { background-image:url(/images/menu.png); background-image:url(/images/menu.svg),none; position:absolute; width:100%; height:100%; } #header ul { display:none; } #mobile { font-size:0.93em; } #mainCol { width:100%; padding-left:0; } #sidebar { width:100%; } .portfolio li { width:50%; } } @media only screen and (max-width: 480px) { #mainCol,#sidebar,#footer { font-size:90%; } .category p,.category h3 { width:100%; } .category img { display:none; } } Code (markup):
1) why do you need a separate copy of the menu just for mobile? 2) STOP using that mother ***** blasted halfwit "compressed menu" crap that's supposed to make mobile "easier" -- news flash, it does the exact opposite. Can you tell I'm a fan? Would also mean one less stupid SVG. Personally, I wouldn't use SVG on websites either. It's a fat bloated processor chewing memory wasting mess; there's a reason it's champions of a decade and some change ago (M$ and Adobe) dropped it like a hot potato. Why the freetards felt the need to pick it up and run with it is beyond me. 3) What makes that metadata separate from the heading? Much less a grammatical paragraph? Same goes for the read-more links and the three semi-words in the footer -- what makes those a "paragraph" in any sense of the English language? (The only place it might is typography, and typography is PRESENTATION)... aka a full sentence or more representing a complete thought? That's actually SMALL's semantic meaning; "would be smaller in a professionally written document for a semantic reason, like the subtext or tagline inside a heading" -- NOT that it "must" or even should be shown smaller. (small, b and i confuse the crap out of people that way as they mean "would be" in professional writing, not "should be" in typography!) 4) "button" is a little vague... 5) Don't know what you think you need scripting for on the page -- but no. I suspect that's probably the stupid show/hide menu crap; but really even if you want that idiotic "let's make mobile harder and call it easier" garbage for the menu, you can use :target since anything mobile we care about is CSS3 ready -- look ma, no scripting! 6) you have zero graceful degradation or text content for your H1. Remember, text first, goofy presentation SECOND. (and again stupid malfing SVG crap) 7) this is 2014, not 2003. Lose the stupid malfing clearfix asshattery. There is NO need for that in this day and age. 8) % columns are sadly usually a failure... usually it's better to make the side column an elastic width instead of percentages as it means you don't have to dick with it's width as much when it comes time to add your media queries. 9) 80 characters is NOT a 'friendly URL' even if it is hyphen separated plaintext. 10) you've got MORE than enough read links, you could actually get penalized for overdoing it! I'd probably skip the anchors around those pointless images. 11) I'd suggest adding some HR... like before the footer to clearly indicate it's NOT part of "Connect with Me" since that's the last heading before it. (and DIV imply NO meaning to the content structurally other than "this MIGHT receive style"). Remember horizontal rules do NOT mean "draw a line across the screen" (since there are many other appearances used to indicate the same thing), it means "a change in topic where a numbered heading is undesired or unwarranted." -- which is why I have them in my code for non screen media targets, but set them to display:none for screen. Your CSS is also a bit confusing, but that probably goes with your saying "to hell with older browsers" and screwing around with border-box for christmas only knows what -- since you aren't doing a blasted thing that warrants it's use. I'm really not getting why you seem to have such a fetish for the IE 5.x style box-model.
We'll I redesigned the site once again, I can't listen to everything you say my sites end up looking dated and boring to the eye. I'm trying to find that happy medium between deathshadows standards and the super overall large "beautiful" websites we see now-a-days. That layout above supported IE7+, I just loaded a completely different fixed-width style for anything less than IE9. I didn't post that here. I've decided forget those old browsers. I'm down to support those with JavaScript disabled, but if everyone supports these super old browsers, people will never upgrade. I didn't upgrade my ios till all my old apps stopped supporting my version. I used tons of stuff you hate on this new version, but I really tried to keep the site loading quick, by limiting the amount of plugins/fonts and such I use. I managed to avoid jquery, but in turn used disqus for comments and a library for syntax highlighting. The homepage is like 70k and the post pages weight around 350k, a fraction compared to most websites these days. I'm happy with that, I don't see any reason to cut out more features to speed it up. I don't want to have the same discussions about my SVG-usage and my mobile hide/show navigation. I like them a large PNG sized down is never going to look as crisp as my SVG. I used the base64 svg data in CSS wherever possible so they'll cache. For a few others they're used inline to at least save a few requests. I do agree with you that the extra navigation list was completely unnecessary and bad practice. I was able to manipulate one list to fit all resolutions this time around. I also included some addition styles within a noscript tag to add support for js-disabled users. Going the other way around seems like a bad idea since they are an extreme minority of users. Why should the other 99% have a larger page load for them? So small would be the best choice over p? What about for the read full button/link thingys? Small too? Button maybe? I see span a lot of places which seemed wrong to me. What's another option for clearfix? The only think I could think of is floating EVERYTHING, or trying that flex-box thing I hear so much about. On the topic of border-box. I use it for when I want percentage width columns with fixed spacing in between. For example I redesigned the site and at the bottom i have 3 column i think 50/30/20% and I want 2em in-between each. If I use percentage spacing, it doesn't respond as good and I end up having to adjust the percents at every media query. Through some fixed width border's in there and its a mess a mess to figure out. The other solution is to wrap an extra div around everything, but that's even worse wouldn't you say? How about responsive form styling? It makes it way easier. Styling forms without it is the most confusing mess every. Border-box is awesome
NOTHING I said so far should significantly impact appearance. When you shouldn't have to do that until you hit IE6 which doesn't know min-width and max-width. A Lot of people CAN'T upgrade; can't afford new systems, don't know anything more than "I click on the big blue E" -- remember, there is no IE8/newer for XP, and there are still more XP users out there than Windows Vista, 8, and 8.1 COMBINED. Those at least serve a purpose. Disqus is huge (unneccessarily so) but it's still one of the best 'off the shelf' solutions for comments on static pages. Hell, I use it myself. ... and I've written client-side code parsers for syntax highlighting, particularly for C. Originally I thought that was something better handled server-side, but since it's less bandwidth (particularly if you have a LOT of code snippets) and can be cached, it's something I say go ahead and use JS to do. Depends on what you mean by "features"... Which is why you use a NATIVE RESOLUTION .png and don't scale them, which is a billion times sharper than EVER allowing the stupid malfing browser scaler to work with EITHER. To be frank, at the sizes you are using them SVG are gonna look like crap because below a certain resolution they don't do things a bicubic resize could do. Much less you can hammer bitmaps into pixel boundaries. Sure, it won't look as good zoomed, but if your visitors are zooming you are doing something wrong (like not having elastic design or declaring uselessly tiny sizes). Which increases their size 50% to 200% slowing first load, usually for something that ends up a 10k SVG doing a 1k PNG's job. So is that "shrink it to an icon" thing, especially since it relies on scripting to even function. You don't have enough menu items to be wasting time pulling that stunt; much less the false simplicity of said icon. Great way to make sure people below a certain resolution cannot find the navigation and get to your sub-pages. Which why bother with scripting in the first place when you could use techniques that work for ALL users? This whole hide/show the menu just because of resolution nonsense doesn't make ANY sense to me until you get down to around say... 320px or less? THEN it might make sense, and even then I'd probably have text like "show menu" and "hide menu" instead of the uselessly vague and cryptic iconography. Again, false simplicity (see the ambiguous UI section). If it's part of the heading, why would it be outside the heading tag? It's NOT a grammatical paragraph, so why would it be a P? Even a DIV or SPAN would have made more sense as it's just a block of text that we don't have a tag to give proper meaning to. No, because you're not de-emphasizing that text inside a heading. No, because it's not inside a FORM. Abusing form tags outside a form, no matter what the scripttards say, is also bad practice. (see the dipshit bull people pull with SELECT + Scripting) You have a block level before it (P), a block level around it that is closed after it already... so why does it "need" another tag around it in the first place? Don't add tags you don't need. Style the anchor and be done with it. Perfectly good anchor tag isolated in level-scope, you don't need to slap another tag around it. overflow:hidden on the wrapper of the floats... and if you care about IE8/earlier toss a haslayout trigger on it. (zoom:1; or height:1%; good as always). Poof, done. Which is why I don't advocate percentage width columns. Hence: You also have that as it gets narrower your sidebars often have scaling issues so that's even MORE media queries. As I said before, elastic sidebars (aka width fixed in EM's) with a fluid content area is far easier and reliable than trying to have all the columns changing size.... particularly since at low and high resolutions the smaller columns end up looking like ass. It also works out better since what's important is most always the big center column, so make the most space available to that! Percentage width columns are crap, always have been. Never had a problem... but then I usually inline-block my labels and negative margin them into the left padding, making styling the input really easy. Well, that and I don't try to piss on form elements by changing things a whole lot, and if I do, I use a negative margin and over-padding of the parent (usually the fieldset) on the right. Ends up one or two pixels different between browsers, who gives a ****. Though it sounds more like you're talking fluid form design than responsive. Oh, and on your live site I noticed something else -- for the love of Joe PLEASE stop changing the blasted font size based on screen width. Whatever scirpttard came up with that needs a good swift kick in the groin. Have you SEEN how batshit insanely large the fonts are at 1920x1200 at 120dpi/large fonts? Nothing like having your first paragraph of actual content being the only actual content that fits on the screen at that resolution... I don't know how/why anyone thinks that's a good idea and I've been seeing it more and more. I'm not rocking a 2560x1440 27" display to have if fit the same amount of data on screen as my 1024x600 netbook -- and that's what you've accomplished with that.
Oh, and REALLY on those SVG -- take those ones you have inlined in the markup on your live copy that's on every page. You've got 5k of inlined markup that doesn't gracefully degrade, doing the job of a single cacheable 1.6k PNG file and a handful of CSS... and it's a stunning example of how SVG looks like blurry crap when rendered tiny. (like say 24px square?) -- though the quality does vary from engine to engine (which in my book is another strike against the format)
Also one other thing about that box-sizing thing -- if you have your example of 50/30/20% and insist on using percents, set the % width on the narrow ones then set the margins and NO WIDTH (aka auto) on the remaining one, with it set to overflow:hidden so it doesn't de-indent after the floats. I think that's why you're diving for it, you're making the mistake of declaring widths on EVERYTHING instead of letting flow do it's job.
Who are these people, and why are they on my web design blog ? I guess some people are probably in that situation, I think most of them figured out how to download Firefox or chrome or something. I don't get much traffic, but I haven't noticed a significant amount of less than IE9 hits, I'm pretty sure the few were from me testing it. If I notice more coming in I could always add support. It is huge, everyone already has accounts, and its pretty awesome. Well my sites not static, it's a rails app, but I'll never create a commenting system as cool as disqus's. I originally had a simple commenting system and it didn't even compare. If I replace them with 24px png and then pull up my site on my iPhone it will look blurry and choppy. Same goes for ipads, retina screens, anything that has a higher pixel density. I still believe svg beats png for this case. I've heard it's closer to 30% maybe I misheard, but either way, with the simplicity of these SVG's it doesn't make a significant size difference. I'll agree with you on how it turns to the menu icon way earlier than it should. I'm going to change that so it's only for the smallest media queries. Come on now, the icon menu is cryptic? It's pretty much universal at this point. Almost every mobile app and tons of mobile websites use an icon just like that. I don't know what specifically you're talking about here??? Hmm never heard about that before, going to give it a try today! thanks. Yeah, there comes a point when I want the widths of the fields to be 100%. Textarea acts so bizarre in my opinion. No I don't, but I imagine it looks like you're describing on my macbook which is 1280x1024. I view my site on 1920x1080 (at 100%) and the text sizes are just right for me, if I lower them 20%, even 12-13% they look to small. Why would I cater my font size to people who have their DPI cranked up to 120, the sites built to look fine at 100% which is the default for most (I'm assuming you're using windows with a big screen that gives you the option to change your dpi).
Woah, just switched to overflow:hidden instead of clearfix. Why have I never heard of this before!!! Awesome. Also tried to shrink my permalinks a bit, removing words like and, on, with, etc
Probably because most of the tutorials and books are decade out of date web-rot? EVEN the ones coming out this year? (there's a reason I call HTML 5 the worst of 1997 after all) overflow:hidden isn't always the answer -- like if you want to apo something outside the element or have a fixed element inside it -- then you might need to make the element float or play some other trick, but this "clearfix" crap with adding a PRESENTATIONAL class to the markup? That's just bullshit. Some other things overflow:hidden does that makes life easier on top of it containing floats: It contains MARGINS. No more top/bottom margin collapse where the margin pokes out of the parent container. Don't know if you've ever hit up against that one, but it's a pain in the ass. It also pushes the element in next to a float, instead of pushing just it's content in. For example if you had: <style type="text/css"> .test1 { float:left; width:6em; height:3em; margin:1em; background:#F00; } .test2, .test3 { height:8em; background:#0F0; } .test3 { overflow:hidden; } </style> <div class="test1"></div> <div class="test2"></div> <hr /> <div class="test1"></div> <div class="test3"></div> Code (markup): Well, try running that and marvel at the results. Without overflow a normal container goes behind the float so that it's content can wrap underneath it. With overflow set, it obeys the float like it's children would, meaning it doesn't de-indent when longer than the float and is pushed in. This technique can be really handy in content-second floated columns; much like a lot of other techniques it means that you can make one column automatically fit between floats so you don't have to say width on one of them... hence why usually I don't have that width + padding + border problem is I leave one column completely fluid without declaring it's width, even in percentages. (though double-wrap content first is usually a superior approach, something % layouts can't usually accomplish). Legacy IE (7/earlier) doesn't trip this behavior with overflow, but a haslayout trigger like zoom:1; can accomplish the same thing... which is fine since haslayout fixes a whole slew of other layout bugs too in IE8/earlier. in fact, the only reason overflow works properly in IE8 is they made it a haslayout trigger :/