First time visitor? The tutorials start here.

HTML5, CSS3, and Responsive Design

More than three years have passed since my last entry here, and a lot has happened in the coding world since then. xHTML is becoming a thing of the past, and more and more browsers are able to decipher CSS3. Even Internet Explorer 9 finally caught up with CSS3 media queries, which didn’t really work so well in Internet Explorer 8, but have worked in all the other modern browsers for quite a while now. Yes, leave it to IE to limit us in what we can do. 🙄

Making the change from xHTML to HTML5

If you have been coding everything in strict xHTML like I taught you, making the transition to HTML5 is easy. All you absolutely need to do in order to make this transition is change the doctype from one of the really long, hard-to-remember strings that are used in xHTML as explained here, to one of these:

<!doctype html>
<!DOCTYPE html>

These are technically the same thing. Capitalization doesn’t matter, so take your pick. There’s no more need to copy and paste a long doctype, because this is so easy to remember. Yay! 😀

What else has changed in HTML5?

Remember how I told you here that tags like <br>, <hr>, <input>, <meta>, and <img> all needed to be closed with a space and a slash in xHTML? This isn’t necessary in HTML5! In fact, it’s optional, so if you already have code like this, you can leave it the way it is.

Also, in form elements like checkboxes and dropboxes, you no longer need to use things like checked="checked" or selected="selected", and can simply go back to the old-school way of checked and selected. This is also optional, and the redundant checked="checked" and selected="selected" are still valid.

What doesn’t work in HTML5?

As I said, if you have been coding everything properly in xHTML, you’ll be fine, and all you really need to change is the doctype. However, there are some things that were deprecated in xHTML but still worked, that no longer work in HTML5 at all. If you were using any deprecated tags or attributes in the past, you will definitely need to update that code before changing your doctype to HTML5. Off the top of my head, the <center> tag and the align attribute won’t work in HTML5, because you should have been using CSS for that all along.

Why make the switch to HTML5?

In short, HTML5 is so much more powerful than xHTML or any of its predecessors. For starters, more and more people are surfing the web with smartphones these days, and HTML5 combined with CSS3 media queries makes it so much easier to make your site more appealing on these small screens. You can also create games in HTML5, although that is beyond the scope of this blog.

I will try to cover some of the newer features of HTML5 in the near future, but my existing xHTML tutorials are still valid in HTML5, and all you absolutely need to do to make this transition is change that doctype. What’s that doctype again?

<!doctype html>

That’s almost too easy! 😀

What is responsive design?

Responsive design allows you to create a website that works on desktops and laptops, as well as tablets and smart phones. Although devices can be “sniffed out” with javascript or a server-side scripting language like PHP, that really isn’t necessary. With a few extra CSS3 rules that I haven’t covered in this blog yet, you can have a page’s layout change from device to device, or even as you re-size the browser on your desktop computer. Which brings us to…

CSS3 media queries

If you took my beginner’s course in xHTML and still have it on your computer, open style.css and add the following to the end:

@media(max-width:600px) {
    body { color: #f00; }
}

Then, open practice1.htm in your editor, and change the doctype to <!doctype html>

Now, open practice1.htm in your browser, and re-size your browser slowly. Once its width is down to 600 pixels, you should see the text turn red. Pretty nifty, don’t you think? And it doesn’t require learning a whole new coding language!

If you’re using IE8 or earlier, shame on you. I mean, if you’re using IE8 or earlier, this probably won’t work, but it will work in IE9+, as well as all other modern browsers, and it will also work on modern smartphones.

And this, my friends, is how you use HTML5 and CSS3 to make websites work on any screen resolution, right down to those little bitty smartphone screens.

If you want to be alerted of new posts to this blog, you can subscribe to my RSS feed.

Thanks for reading! 😀

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.