Web developer seeks HTML/CSS best practices.
August 4, 2011 12:29 PM Subscribe
What should a web developer read to understand the HTML/CSS usage and best practices that are common on the web today?
Suppose someone sends me a mock in Photoshop of a page that they want me to turn into (X)HTML and CSS. How do I do that in 2011?
Back in 1999, I feel like the best practice was probably to chop it up into some sort of zero margin table and then re-chop whenever the site got edited. Exotic fonts were mostly transparent gifs. Images overlapping each other were done via adjacent images in a table.
Now I imagine that the answer involves tons of things: CSS2/3, possibly some font rendering through TypeKit or similar, possibly some weird browser compatibility hacks (CSS resets, IE workarounds).
For JavaScript, I think I've figured out the answer: essentially, only use the subset of JavaScript defined by Crockford in the "Good Parts," and use jQuery (or similar) for cross-browser compatibility down to IE6 or so.
However, for HTML and CSS, I've never really found a "Good Parts" or a particular CSS reset that everyone supposedly uses or what have you. Is there such a thing? I've mostly just seen tutorials for particular effects or layouts. Is there some set of best practices that web designers and/or the people who convert their designs into HTML/CSS use?
I'm not really looking for A List Apart (which feels more like news and/or editorial) or a reference site. I'm more trying to get a set of sensible guidelines to help me write markup that will work on like 95% of browsers without too much hassle. Any books and/or sites would be appreciated, though I imagine a book is more what I'm looking for.
(For background, I'm a programmer whose knowledge of HTML is probably at around HTML 4.01 Transitional and who knows a little but not a lot about CSS.)
Suppose someone sends me a mock in Photoshop of a page that they want me to turn into (X)HTML and CSS. How do I do that in 2011?
Back in 1999, I feel like the best practice was probably to chop it up into some sort of zero margin table and then re-chop whenever the site got edited. Exotic fonts were mostly transparent gifs. Images overlapping each other were done via adjacent images in a table.
Now I imagine that the answer involves tons of things: CSS2/3, possibly some font rendering through TypeKit or similar, possibly some weird browser compatibility hacks (CSS resets, IE workarounds).
For JavaScript, I think I've figured out the answer: essentially, only use the subset of JavaScript defined by Crockford in the "Good Parts," and use jQuery (or similar) for cross-browser compatibility down to IE6 or so.
However, for HTML and CSS, I've never really found a "Good Parts" or a particular CSS reset that everyone supposedly uses or what have you. Is there such a thing? I've mostly just seen tutorials for particular effects or layouts. Is there some set of best practices that web designers and/or the people who convert their designs into HTML/CSS use?
I'm not really looking for A List Apart (which feels more like news and/or editorial) or a reference site. I'm more trying to get a set of sensible guidelines to help me write markup that will work on like 95% of browsers without too much hassle. Any books and/or sites would be appreciated, though I imagine a book is more what I'm looking for.
(For background, I'm a programmer whose knowledge of HTML is probably at around HTML 4.01 Transitional and who knows a little but not a lot about CSS.)
I've coded most of the sites I've developed in the last year in HTML5. Dive Into HTML5 is a great resource; HTML5 Doctor is pretty good, too.
7
One possible snag is that versions of Internet Explorer before 9 don't understand some of the new HTML5 elements. You can use html5shiv to add support; it requires JavaScript, but I think the vast majority of people have JavaScript on and leave it on, and so many mainstream web apps require JavaScript that people are used to it. As I said, I've coded all my sites in the last year like this, and I haven't had complaints.
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using is a good walk-through of how to code a basic site; it's from Nettuts+, which often has good tutorials.
posted by kirkaracha at 2:01 PM on August 4, 2011 [2 favorites]
7
One possible snag is that versions of Internet Explorer before 9 don't understand some of the new HTML5 elements. You can use html5shiv to add support; it requires JavaScript, but I think the vast majority of people have JavaScript on and leave it on, and so many mainstream web apps require JavaScript that people are used to it. As I said, I've coded all my sites in the last year like this, and I haven't had complaints.
HTML 5 and CSS 3: The Techniques You’ll Soon Be Using is a good walk-through of how to code a basic site; it's from Nettuts+, which often has good tutorials.
posted by kirkaracha at 2:01 PM on August 4, 2011 [2 favorites]
I think you may be looking for the Opera Web Standards Curriculum (see the list of HTML/CSS tutorials at the bottom). 960 Grid is a common alternative to Blueprint. HTML5 Boilerplate includes everything and the kitchen sink with respect to emergent best practices, including its own reset and Modernizr.js, which I think makes html5shiv redundant. It doesn't include a CSS grid system, but 960 works with it--just don't use 960's reset and text CSS files in that case. But if you do use HTML5 Boilerplate, step through the comments well enough to cut out what you don't need.
posted by Monsieur Caution at 2:31 PM on August 4, 2011 [1 favorite]
posted by Monsieur Caution at 2:31 PM on August 4, 2011 [1 favorite]
I was going to suggest HTML5 Boilerplate as well, but it looks like Monsieur Caution beat me to it. Consider the recommendation seconded.
I also highly recommend using a grid framework when you're starting from scratch, but if you've already got PSDs, it may not be a good fit. However, if the design is grid-like, you may be able to look at the techniques used to set up the grid and create a custom grid from that.
Another thing that's very different from the slice-up-and-put-in-tables days is that markup should be is much more semantic . If you have tab-like navigation, it should be in an unordered list, etc. I also find it helpful to try to use classes that are function-based (page, post, comment, author) rather than style-based (red, big, float-left) and then create your stylesheets based on function and context. A headline might look different in a post vs. a menu, but you can style ".post h2" and ".menu h2" instead of having to add more classes.
A lot of my theories about the best way to structure things have come from doing it wrong a bunch of times and creating a maintenance nightmare for myself. Figuring out the right structure from the start is pretty tricky, but I'm usually also designing as I'm coding. Working from a PSD is a little easier to get right the first time, since you already know the overall structure.
I'm a back-end web developer who's been moving more into design, so feel free to memail me if you want to get into specifics.
posted by duien at 2:51 PM on August 4, 2011 [1 favorite]
I also highly recommend using a grid framework when you're starting from scratch, but if you've already got PSDs, it may not be a good fit. However, if the design is grid-like, you may be able to look at the techniques used to set up the grid and create a custom grid from that.
Another thing that's very different from the slice-up-and-put-in-tables days is that markup should be is much more semantic . If you have tab-like navigation, it should be in an unordered list, etc. I also find it helpful to try to use classes that are function-based (page, post, comment, author) rather than style-based (red, big, float-left) and then create your stylesheets based on function and context. A headline might look different in a post vs. a menu, but you can style ".post h2" and ".menu h2" instead of having to add more classes.
A lot of my theories about the best way to structure things have come from doing it wrong a bunch of times and creating a maintenance nightmare for myself. Figuring out the right structure from the start is pretty tricky, but I'm usually also designing as I'm coding. Working from a PSD is a little easier to get right the first time, since you already know the overall structure.
I'm a back-end web developer who's been moving more into design, so feel free to memail me if you want to get into specifics.
posted by duien at 2:51 PM on August 4, 2011 [1 favorite]
This thread is closed to new comments.
As for a set of guidelines that isn't a reference or A List Apart (which is great), maybe this article? http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
posted by michaelh at 12:40 PM on August 4, 2011 [4 favorites]