Web design has come a long way since the early days of the internet. Although there are, of course, many ways to pull off a desired layout, these days the go-to technique for arranging panels in a window involves using a combination of <div> elements (to contain the content areas) and CSS styling (to position them). In the past, many used HTML <frameset> elements (now deprecated and scheduled to be eliminated completely from HTML5) and HTML <table> elements to construct their webpages. It’s obvious why frames are no longer a good choice—their deprecated status is reason enough. Tables, on the other hand, might still seem tempting, but it’s frowned upon to use HTML tables to display anything but tabular data, that is, data where the rows and columns both represent values from a range and the cells represents intersections of those values. As HTML moves away from the use of elements for presentational purposes in favor of their use to describe what the data is, instead of what it looks like in a particular view, the usage of any given element is being constrained to those descriptive roles. Your site layout isn’t really a table because the pseudo-rows and pseudo-columns don’t have meaning, let alone systematic meaning, and there are now easier, more representative ways of laying out your site in rectangles.
We are an open community of developers building resources for a better web, regardless of brand, browser or platform. Anyone can contribute and each person who does makes us stronger. Together we can continue to drive innovation on the Web to serve the greater good. It starts here, with you.
MIT-licensed HTML5 template and CSS framework built for responsive design based on a 12-column grid. The boilerplate contains no JavaScript, just HTML, CSS and example site icons (favicon & iOS).
A MIT-licensed template for HTML5 websites that includes a lot of CSS and JS tweaks and optimizations. It provides support for JQuery, Google Analytics, old browsers, etc.
Emmet takes the snippets idea to a whole new level: you can type CSS-like expressions that can be dynamically parsed, and produce output depending on what you type in the abbreviation. Emmet is developed and optimised for web-developers whose workflow depends on HTML/XML and CSS, but can be used with programming languages too
Using image sprites is sort of a last resort after you have done as much as you can with other optimization techniques. A sprite is an image that has all of your other images inside of it, so if your sprite has 10 images, you'd be getting rid of 9 HTTP requests and speeding your site's loading time up by the time for each of those 9 requests' latency.
“For people who make websites” A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on techniques and benefits of designing with web standards.