Rubber Chicken Farm

HTML5 and CSS3: Baby Steps

J Andrew Scott — Fri, 17 Feb 2012 16:48:10 +0000

So you’re ready to plunge into the brave new world of HTML 5, huh? Technically, the W3C working group started working on the HTML 5 standard in 2004 and released its first working draft in 2008. As of February 2012, no final specification exists. Eight years without a finished product doesn’t sound particularly brave or new. On the upside, non-revolutionary changes are pretty easy to transition into. In fact, if your current markup is strictly HTML 4.01 compliant, then it is mostly HTML 5 compliant already.

So we’re done, right?

Well, not exactly. As often happens, it’s actually the major browsers who are driving standardization. Fortunately for us, the big hitters are generally sticking to the W3C’s working draft, at least on the basics. So let’s start there.

Part #1: The Basics The Requirements

Oh, wait! First things first. We need to change our HTML &lt!DOCTYPE> declaration. You were using one, right? Of course you were. If not, today’s a good day to start. Your old doctype probably looked something like this:

HTML 4.01 DOCTYPE

That’s pretty cumbersome. Imagine our joy to discover how simple the doctype looks:

HTML 5 DOCTYPE

That’s a pretty bit of code we can live with. Now that we have that cleared up…

Part #1: The Basics (for real this time)

As I said before, if your markup is strictly HTML 4.01 compliant, it’s already mostly HTML 5 compliant. The difference is all the new gadgets that HTML 5 offers. If you’ve been writing html for any length of time, then you’re familiar with ye olde

tag. In fact, you’ve probably used it for pretty much every block-level element ever. That’s about to change. HTML 5 offers us more intuitive semantics than the generic

for describing our content:

for page, article, and section headers
for page, article, and section footers
for the primary content blocks on a page
for portions of content in an article
for supplementary content blocks on a page (think sidebars, etc)
for navigation menus and the like

Consider the following page:

HTML 4.01 Markup
Old-School Markup



			Welcome



		

			

				Link Text


				Link Text


				Link Text


				Link Text


				Link Text


			


		


		

			Lorem Ipsum


			Lorem ipsum dolor sit amet...


			

				Lorem Ipsum


				Lorem ipsum dolor sit amet...


				Lorem ipsum dolor sit amet...


				Lorem ipsum dolor sit amet...


			


			

				Lorem Ipsum


				Lorem ipsum dolor sit amet...


				Lorem ipsum dolor sit amet...


				Lorem ipsum dolor sit amet...


			


		


		

			Lorem ipsum dolor sit amet...


		


		

			© 2012

Pretty standard stuff here. Nothing is wrong with this per se, but all those

‘s can be a bit ambiguous and the extra class names to differentiate them are taking up extra bandwidth. While that may not be a concern for desktop users with broadband, we also want to consider mobile users with slower 3G connections. More markup means longer load times and higher data fees. Nobody wants that. So, we update our markup like so:

HTML 5 Markup
New-Fangled Markup



			Welcome



		

			

				Link Text


				Link Text


				Link Text


				Link Text


				Link Text


			


		


		

			Lorem Ipsum


			Lorem ipsum dolor sit amet...


			

				Lorem Ipsum


				Lorem ipsum dolor sit amet...


				Lorem ipsum dolor sit amet...


				Lorem ipsum dolor sit amet...


			


			

				Lorem Ipsum


				Lorem ipsum dolor sit amet...


				Lorem ipsum dolor sit amet...


				Lorem ipsum dolor sit amet...


			


		


		

			Lorem ipsum dolor sit amet...


		


		

			© 2012

Not only is our new markup more readable, we’ve dropped our file size from 1155 bytes to 988 bytes. While that doesn’t sound like much, we’ve saved ourselves and our users almost 15% of the original bandwidth cost. Not bad for a few minutes’ work.

So congratulations, you’re using HTML 5. Of course there’s a lot more to it than that. We haven’t touched on the new media elements like and , or really nifty stuff like , but one thing at a time. We’ll get there, I promise.

Responsive Web Design: Baby Steps

J Andrew Scott — Fri, 25 Nov 2011 17:53:29 +0000

So you’re ready to take the plunge into responsive web design? Well hold on there, partner. Your enthusiasm is good but let’s make sure we’ve done our homework, too. First things first, make sure you have the following development essentials:

Fresh coffee: keep that enthusiasm going.
Good music: creativity needs good mojo.
A comfy chair: your backside will thank you.

Ready now? Ok, let’s dive in.

Step #1: Layout

Whether you’re building a new site or rebuilding an old one, the page layout is critical to a solid responsive design. Some layouts will be more conducive to responsive design than others. Starting with a grid-based layout will give you a lot of flexibility. If you want something lighter weight, a simple floating-column layout will also work well. For reference, let’s start with a typical fixed-width, two-column layout:

layout.html



	
		Fixed-Width, Two-Column Layout
		
	
	
		
			
				This is the header
			
			
				
					This is the page content
				
				
					This is the page sidebar
				
			
			
				This is the footer

You’ve probably noticed the use of HTML5. This isn’t strictly necessary, but it’ll put you in good position for implementing advanced features. Trust me, you’ll be glad you did it. Other than that, this is about as simple as it gets. Now, here’s the accompanying stylesheet:

styles.css

html, body {
	background: #666;
}
h1, h2, h3, h4 {
	margin: 0px;
	padding: 10px;
}
#page {
	width: 1280px;
	margin: 20px auto;
}
#page-header {
	background: #069;
	color: #fff;
}
#page-footer {
	background: #069;
	color: #fff;
	font-size: smaller;
	text-align: center;
}
#page-body {
	overflow: hidden;
	background: #fff;
	color: #333;
}
#content {
	overflow: hidden;
	float: left;
	width: 960px;
}
#sidebar {
	overflow: hidden;
	float: right;
	width: 320px;
	background: #ccc;
}

Still pretty straight-forward. The net result is a fixed-width page with the main content in the left-hand column and a sidebar on the right-hand column. Notice the #content and #sidebar elements have properties float: left; and float: right;, respectively. To move the sidebar to the left-hand column, you can simply switch the left and right floats. Be careful, though, not to switch the order of the html tags in the layout. The order will be important when we get to modifying the design for different screen sizes. Also notice the overflow: hidden; property on the #page-body, #content, and #sidebar elements will prevent the content from making a mess of our column widths. Ok, so far, so good.

Step #2: Media Queries

Now that we have our layout built, we’re ready to work a little voodoo. The key here is to choose the screen widths we want to adjust our layout for and implement them using the CSS @media element. For instance, if we want to design around the iPhone, the screen widths we’ll be dealing with are 320 pixels (portait) and 480 pixels (landscape). If we also include the iPad, we’ll also want to account for 768 pixels (portrait) and 1024 pixels (landscape). That means we now have four alternative screen widths to deal with, which will mean four media queries in our CSS. Let’s start with 1024 pixels, the widest layout and closest to our original width of 1280 pixels. We’ll add the following lines to our stylesheet:

styles.css (continued)

@media only screen and (min-width: 1024px) and (max-width: 1279px) {
	#page {
		width: 1024px;
	}
	#content {
		width: 768px;
	}
	#sidebar {
		width: 256px;
	}
}

The first thing you should notice is the min-width and max-width properties in the media query. What this does is applies everything in the block as an override to our main stylesheet, but ONLY to screens with widths between 1024 pixels and 1279 pixels. Once the screen width reaches 1280 pixels, our media query no longer applies and our main stylesheet takes over. Try resizing your browser window and watch our layout snap back and forth between our two widths. Of course, once your screen width drops below 1024 pixels, the layout reverts to its default 1280 pixels. Obviously this isn’t what we want, so let’s fill in the rest of our alternative screen widths:

styles.css (continued)

@media only screen and (min-width: 768px) and (max-width: 1023px) {
	#page {
		width: 768px;
	}
	#content {
		width: 512px;
	}
	#sidebar {
		width: 256px;
	}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	#page {
		width: 480px;
	}
	#content, #sidebar {
		float: none;
		width: 480px;
	}
}
@media only screen and (max-width: 479px) {
	#page {
		width: 320px;
	}
	#content, #sidebar {
		float: none;
		width: 320px;
	}
}

There we go, all of our alternative screen widths are now accounted for. Notice that on our last media query, we only include a max-width. Leaving off the minimum width on our narrowest layout will apply that layout to anything smaller than 320 pixels, instead of the default layout. You should also notice that on the 480-pixel and 320-pixel layouts, we apply the float: none; property to the #content and #sidebar elements, as well as setting them both to the full page width. This will stack them on top of each other instead of laying them out side-by-side. Now, remember when I told you the order of elements in the HTML would become important? Here it is: if we had put the sidebar before the main content in our HTML because we wanted the sidebar on the left-hand side, we would end up with the sidebar above the main content in our smaller layouts. See? I told you so.

Now we can’t call it a day until somebody throws us a curveball. Today it’s the iPad. The iPad is going to pull a little prank on us by scaling its pixels and rendering our portrait layout, even in layout orientation. Fortunately for us, correcting this behavior is pretty simple. Adding the following element to the section of layout.html will prevent pixel scaling and we can all go home happy.

layout.html (continued)

So that’s that. Obviously, we could dig a whole lot deeper into responsive design, but for today we’re taking baby steps. Rome wasn’t built in a day and neither are great websites, but today you’ve taken your first steps into a brave new world. So give yourself a pat on the back and have some fun with your new tools.