Skip to content

Tips for New HTML5 and CSS3 Web Designers

I’m quickly finding that web development is an especially good skill to have.  When I sat down a week ago in Borders to do something productive with my summer, I came across a wonderful magazine issue “Web Dedsign Essentials” with loads of techniques and interviews from professional web developers.  I was amazed looking through it how much simple web development had gotten sine the mid 90s when everything was painstakingly hard to do with tables and limited tools.  Now it’s all about <div> tags, Cascading Style Sheets, and tad of JavaScript.

But just because something is easier doesn’t mean it’s easy.  If you’re not willing to sit in a borders for 5 hours each day of the week (plus a few more hours at home) looking through forums, magazines, online articles, and books, as well as consuming a cup or two of peppermint hot chocolate, (unless of course you enjoy a cup of coffee… yuck!) it can be tough to jump into web development.  And even if you ARE willing to do all that, it would still be useful to have a head start on a few things.

The web is in a constant state of flux, especially in a time when web standards are taking a shift forward and web browsers are attempting to move with them.  I am of course referring to HTML5 and CSS3.  While they are only in a draft state, what they have to offer is worth learning it now rather than learning the old stuff and coping without it for a short while.  That said, with all the content, techniques to learn and the compatibility issues that you have to face in your battle toward learning web development, it would be nice to have a heads up about the kind of battle it is and an arsenal of tips and tricks to help you fight it. Following this is a short (relatively) summary of the many things I had to go onto the web and find to create a basic HTML5 site using CSS3.

This assumes you know some basics about HTML, CSS, and JavaScript.  You don’t need to know much of the language really, just some idea of what they do and how they work with each other.

Tip 1) HTML5 Compatibility

HTML5 is new and one of the first things you will learn about it is the new structure it gives to your pages.  Before your page looked something like this:
Before HTML5

Now take a look at HTML 5. Scan through this article and you’ll find in the second and third section what it will look like:
HTML5 article

Notice the new tags, <header> <nav> <section> <article> <aside> <footer>.  These will make your code more readable and help give a little more structure overall.  So that’s not hard to figure out!  But what nobody tells you is that IE will usually freak out when you use these new tags.  Because it doesn’t recognize them, any kind of styling you use in your CSS for those new tag blocks will not work.  Bye-bye nifty navigation bar you created and hello to 5 lines with ugly bullets and blue lettered links! GAH!

THE TIP: So to fix IE problems with the new HTML5 tags you can add each of the them as elements through JavaScript which is simple and provided below. But even simpler is adding a script someone hosted through Google!  The file is both quick to access, publically available, and compressed making it most likely the better choice of these 2 options.  But here are both for you.

Recommended to put in <head>:

<!–[if IE]>
<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script&gt;
<![endif]–>

Other method:

<!–[if IE]>
<script type=”JavaScript”>document.createElement(“header”);
document.createElement(“footer”);
document.createElement(“section”);
etc…
</script>
<![endif]–>


Tip 2) Use CSS3, not images

CSS has some new fancy tricks under it’s CSS3 hat such as instant background gradients and shadows for your text and blocks.  Today, web sites use tons of images for buttons and backgrounds.  A lot of these are simple gradients to make the site look a little fancier.  To get a simple site with a few cool lookin’ gradients takes far too many cups of coffee while you sit in Photoshop getting details down to the pixel, saving them, and then later realizing you need to adjust them!  By the time your done, you bang your head on your keyboard a few times realizing you could have spent all that time in photoshop making something cooler to make it worth your effort (I just might know someone who did that… but we won’t name names).

THE TIP(2.1): Use CSS3 effects where possible rather than images! Speed is the new thing in the cloud.  Google even announced that their search results will start taking site speeds into account!  You need a fast attractive site and fewer images the faster.  Give your site a good look without all clutter that will slow it down.  NOTE: CSS3 isn’t available on all browsers, so if you DO use CSS3 effects, make sure their is a simplified alternative for those still struggling to figure out what a browser is, let alone updating it to the latest version (I love you grandma).

THE TIP(2.2): To make a background gradient (or fancy shadows, rounded corners, and similar new CSS features) in Firefox, Chrome, or IE takes different lines to create the style. So here’s what you need to cover most browsers (I say most because there will always be that weird or outdated browser people use that it still won’t work with).

.myHTML_ElementTag {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#555555′, endColorstr=’#222222′); /* for IE */

background: -moz-linear-gradient(top, #555, #222); /* for FireFox */
background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222)); /* for Chrome, Safari, and others */
}

TIP 3) Send JavaScript to the Back of the Line!

You may remember I mentioned speed in tip 2.1.  Well when you load a page, things load in parallel.  You may be loading multiple CSS files and HTML files at the same time.  But then JavaScript had to come along with it’s high-and-mightiness and tell those CSS and HTML files to wait while it loads.

THE TIP: Put JavaScript last in line!  In other words, put the <script type=”text/JavaScript”>MYfancyJAVAcodeHERE</script> right before the </body> tag.  That way it will be the last thing to be loaded into the page and everything else will load quickly!  This may not work for all of your JavaScripts (on rare occasions, you need them to load before other things) but this is rare.  Rule of thumb, Java comes last.


TIP 4) Fonts?

So I got this really awesome font that makes my site look sick!  But wait, nobody else has the font and so it goes to something generic like Arial… dang.  While this is can be solved with more complicated techniques, CSS3 brings @font-face which is very useful!  It can link to fonts hosted on the web to give you great fonts that aren’t normally found on viewers computers, or at least by their browsers. But wait!  FONTS ARE FREAKIN’ EXPENSIVE!!!  I haven’t played around with it much yet but from what I can tell- getting a license for some of those good fonts out there is really expensive.

THE TIP: There are sites that will give you free fonts!  In fact, Google is creating a directory of free fonts it hosts at http://code.google.com/webfonts.  Follow instructions on there and you’ll have some fonts to work with using @font-face!  You may even be able to find someplace that hosts cheaper fonts, but so far they seem hard to find.

Follow

Get every new post delivered to your Inbox.