HTML5 Basic Template

If you are going to be creating websites, you might as well be using HTML5 now. There is no point of using the older, antiquated, and sometimes verbose HTML 4 markup. A case in point, take a look at the HTML4 header markup below. It’s long, cryptic and hard to remember.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Compare that to the HTML 5 header markup below which is much, much simpler.

<!DOCTYPE html>
Let's take a look at the basic HTML5 template.
The HTML5 Basic Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Template</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>

This template is perfect for creating quick websites, displaying example pages, or for testing purposes. If you want to create professional websites, then you should check out HMTL5 Boilerplate template which I highly recommend. It’s an excellent website to get you started with your HTML5 projects.

Color Schemer

For web designers, choosing a color scheme for a website can be a daunting task. Choosing the right colors for a website sometimes can be the difference. One of my favorite website to get some color inspiration is Color Schemer Online.

Color Schemer Online provides a palette of colors that will complement your base color. It will lay out a color grid of 16 colors in a 4 x4 grid. The online tool can also lighten or darken your base color, a feature which I find extremely useful.

There is PC and Mac version of this tool and its called ColorSchemer Studio 2, which give you ways to find matching colors from a color wheel, or from thousands of color schemes available online. The software costs about $49, a steal in my opinion.

The software also comes with a Photo Schemer where you can drop an existing photo and create your own color scheme based on that photo image. Finally, there’s a QuickPreview which allows you to test the colors you’ve selected on predetermined layouts.

In this layout, I am using a blog layout with a left-handed sidebar. I’m using a color scheme that was previously generated from the previous color wheel.

I use the online tool primarily, but the software is a great. Definitely worth a try.

Google Font API

I had a little fun this morning playing around with Google Font API. With just a couple of quick codes on your webpage, blog or website, you can really style your sites using over a dozen beautiful fonts available from the Google Font Directory. The usage is pretty straightforward. See sample below. Just add a stylesheet reference in your header. Add some CSS elements in your stylesheets. Tada. Your done. Your website is now using Google’s web fonts. The advantage is you get a choice of high quality open source fonts, it works in most browsers, and it’s extremely easy to use.

Header

<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Tangerine”>

Stylesheet

body { font-family: ‘Tangerine’, serif; }

If you want a little bit more control, flexibility and speed, you can use Font Loader. It’s a little bit more involved. It requires the use of Javascipt. You can also take advantage of TypeKit.

Display None In CSS

One of the coolest tricks in CSS is to suppress the display of certain elements in your web page using the “display:none” property. This trick is extremely helpful for two reasons. One, there are times you don’t want to remove code essential for Search Engine Optimization such as the H1 header for example, but you don’t want it showing up on your browser.

Deleting the HTML code will completely eliminate it from a seach engine perhaps losing valuable points. Suppressing the display may be your best option since search engines are still able to read your H1 header. It’s just not displayed on the screen. To suppress the display of H1 in this example, we need to add this CSS code to our stylesheet.

h1 {display:none;}

The second use for “display:none” in CSS is for printing purposes. Often times, many web designers will make a separate stylesheet just for printing. Items such as graphics, menus, certain divs that are not necessary can be suppressed making for a very simplified print output. You can do something similar to your web page using the code below.

img, #menu, #widget {display:none;}

Display:none. Give it a try.

New Color Scheme

I have a new color scheme inspired by the Daily Color Scheme website. It is called Mountain Dawn. I recently added the WordPress Theme Toolkit to my theme. The toolkit is a script for making WordPress themes customizations. New color schemes can be applied via the Admin Dashboard without ever touching the CSS stylesheet. It allow users to change color schemes on the fly with just a few clicks. If you like to see it in action, you can download the latest Black-Letterhead 1.3 theme which comes equipped with the WordPress Theme Toolkit.