Still there are many support issues with HTML5, and CSS3 (which web designers and developers tend to think of as two peas in a pod).  IE8 and lower simply do not support HTML5.  Fortunately all the major newer browsers do at least to some extent (IE9 and up, Chrome, newer versions of FF and Safari, and the list goes on).

There’s a number of ways to respond to the support issues with the newest HTML specification.  You could just keep making your sites in HTML4/XHTML,  but even if you do you should still learn HTML5 since its support is only becoming greater.  There’s also a number of tricks you can use to force it to (at  least to an extent) work on older browsers that don’t support it.  Or you can just stop worrying about whether your websites are compatible with older browsers.

There’s plenty of arguments for and against ignoring older browsers (especially IE6, and even IE7 now).  But IE8 is still very popular, and in most cases it would be a mistake to ignore this browser.

Fortunately one of the really big issues with earlier versions of IE and other old browsers is very easy to fix.  If you view an HTML 5 website in IE8 for example, without any sort of “fixes” HTML5 tags such as Header, Footer, and Aside are simply ignored.   So any styles you created for them will be ignored, as if they don’t even exist.

A little javascript however fixes this problem nicely:

<script type=”text/javascript”>
document.createElement(“article”);
document.createElement(“footer”);
document.createElement(“header”);
document.createElement(“hgroup”);
document.createElement(“nav”);
document.createElement(“aside”);
document.createElement(“section”);
</script>

You can put this in the head section of your website, but it would be best to place it in an external JS file.

One more issue that will become readily apparent is that older browsers, even after the JS fix, aren’t going to recognize the new HTML5 tags as block elements.  A bit of CSS will fix this.  Here’s the CSS that I use:

header, footer, article, aside, section, hgroup, nav
{
display:block;
}

Now older browers will recognize your HTML5 tags, and display them as blocks.

There is of course a lot more to getting HTML5 to work on older browsers than this, but at least now your HTML5 website’s layout should render basically correctly.

This particular content swap looks best when the link or button clicked to swap content floats next to the div that has the content to be swapped, since this does use jump links, and you might want to minimize the affect of it jumping down the page. It also works great on pages where the bulk of the page length is taken up by the area where the swap takes place.

You can of course get a lot more creative with designing the look of your content swap, but here’s what a pretty basic one will look like:

And this is the basic HTML markup that you’ll need for it to work:

<a href="#area2">Click here to see content area 2</a>
<a href="#area1">Click here to go back to content area 1</a>
<div id="contentareas">
<div id="area1">This is content area 1.</div>
<div id="area2">This is content area 2.</div>
</div>

And the CSS (just the basics you’ll need for it to work):

#contentareas
{
/* in order for the swap to work overflow must be hidden so that you don't
see both content areas. You must also have a set height and width. */
position:relative;
height:200px;
width:300px;
overflow:hidden;
}

#area1
{
position:relative;
height:192px;
width: 280px;
/* again you'll want to set height and width on this div. */
}

#area2
{
position:relative;
height:192px;
width: 280px;
/* for every area make sure you've set height and width. 
If you see part of the previous area peaking through, make sure to adjust
the height and width of that area until it can no longer be seen once you
switch to the next area down */
}

And that’s all you need for your content swap to work! Beyond that it’s just a matter of making it look nice.

For example it is pretty common to have one primary content area, and then a column of widgets that is basically the same from page to page.  But generally WordPress isn’t particularly user-friendly when it comes to dealing with multiple columns of page or post specific content. Fortunately there’s a plugin that makes having multiple columns of page specific content really easy.

WordPress Post Columns

If you want to  easily add separate columns of content to a page (or post) on your WordPress website then this is a great plugin.  One thing very nice about this plugin is you don’t have to modify your theme at all to use it, so especially great if you are uncomfortable with theme modification.

Basically all you have to do is install this plugin on your WordPress site, activate it, and then on whatever page you want multiple columns add in tags like this:

And the result can be something like this:

There are many more plugins out there that can be very useful, especially if you want to use WordPress as a full blown CMS, and part two of this series will be featuring one called the The Page.ly MultiEdit Plugin.

If you have sites that you think are really beautiful and well-put together you may find that these galleries are great way to not only get back-links, but to get your work showcased along with some other impressive designs.
These galleries are also just great to look through to see what other designers are doing, and get some inspiration.

Most galleries will list sites for free, but I’ve encountered a few here and there that do charge.

General CSS Galleries

These are the more diverse CSS galleries. They feature all kinds of different websites with different sorts of layouts and features.

CSS Elite
BoxedCSS
CSS Beauty
Divine CSS
Screenalicious
CSS Star
CSSRay
CSSRemix
One thing I like about this gallery is that when you submit your website it will go into the pending section, eventually it will go into the In Review section, and then if approved it will finally get moved into the Approved section.
Style Boost
CSS Mania
CSS Based
CSS Pick

More Specific Galleries

Cool HomePages
Your best bet for getting a site onto Cool HomePages is to submit one which has an unusual feature. Animated designs seem to be particularly popular on this gallery.

Design Snips
When you submit a website to this gallery, it’s less like you are submitting the entire site, and more like you are submitting a particular part of that site, such as background, or banner, etc… So when you submit a site you have to pick out what particular part of that site you is particularly good.

The Horizontal Way
This is a gallery specifically for websites that scroll horizontally, rather than vertically like the vast majority of websites. It’s gotten me thinking about making a horizontal design of my own.

Part of making sure that a client is a good one to work for is keeping an eye out for certain red flags. Even if you are having a hard time finding clients, you should not ignore these signs, because even in desperate times it’s not worth it work with nightmare clients (you may not even get any money out of working for them, so it’s best to just steer clear).

Clients that ask for work with no guarantee of pay

Now, I’m not referring to pro-bono work (work that a freelancer chooses to do for free), rather the clients I’m talking about are ones that ask you to do work, and say that if they like your work then they will pay you. Often times these clients just want “concept work” done. They often have several clients that they are having do work, and may or may not tell you this. They may say something like “whomever’s design I like best I’ll pay”.

Now that might sound a bit like a contest, and nothing wrong with contests but they should be called what they are. The main reason this is a red flag is because while some clients that ask for work without guarantee of pay are honest, these sorts of clients are notorious for just taking work that they like and using it, or having another cheaper designer finish it for them, and then never paying the person whom originally did the work.

Businesses generally do not consider it an acceptable practice for a customer to pay them not only after the work is all done, but with no guarantee they will pay at all, and/or decide they will only pay if they haven’t found anyone they think could do a better job.

Clients that won’t sign contracts

If a client initially refuses to sign your contract, it isn’t necessarily a red flag, it could be a sign that your contract needs some (or even a lot of) work. You may need to do some negotiation with them, or it may be that certain things that are absent in the contract should be there, or certain things in the contract are not clear enough. If even after trying to negotiate them, and fix your contract, they are still unwilling, then it’s probably best to run to the hills.

Down payments

I know some freelancers consider an unwillingness to pay a down payment to be a red flag, and it can be, but isn’t necessarily. After all they could have as much reason to think you’ll run off with their money and they’ll get nothing out of it, as you have reason to think they’ll run off with whatever work you’ve done and you’ll never see a dime. I think that contracts can help ease suspicions when it comes to this problem.

Clients that ask you to clone/copy a site

I see tons of people looking for freelancers to do this kind of work on freelance bidding type websites, and agreeing to do this kind of work can get you in a heap of trouble, especially if you are copying a large well-known site, but even if you aren’t.

By copying someone else’s website, or design you are breaking copyright law, and could also be breaking trademark laws. People sometimes get it into their heads that if it’s online it’s OK for anyone to use it how ever they please, right down to copying it, but this is simply not true.

It may be worth it to inform the client that what the service they are asking someone to provide is breaking the law. Sure you could anger someone this way, but you could also keep an ignorant person from doing something that could have negative consequences that they had no clue they’d ever have to deal with.

This is not an exhaustive list of potential red flags, and there’s more to finding and selecting the right clients. This is a good topic, so perhaps I will revisit it in the future.

Edit 9/16/10
Note: I will only choose topics that fit in with the rest of the blog, so something relevant to web-designers (could be a topic related to design, freelancing or SEO for example).

Those that focus on code.

These books go into detail about how to put together the “guts” of your website (which is very important). When it comes to books on JavaScript, PHP, and other programming languages, I don’t really expect a bunch of stunning looking designs, and discussing the graphic design side of web-design would just be off-topic. However in a CSS book, or more general web-design book those things are quite appropriate.

Those that focus on visual design.

These books may be full of gorgeous examples of websites, with little or no explanation of how the design was accomplished from a coding perspective. Some of these books discuss how to approach web-design from a graphic design stand point, but others are more a gallery of websites than anything.

Now, the Zen of CSS Design by Dave Shea and Molly e. holzschlag is the best of both worlds.

This book is actually a companion for a quite well-known website, the premise of which was to have many designers create unique style-sheets for the same HTML page.
It actually does have quite a few great examples of design.

Visit the CSS Zen Garden

The book selects some of these designs to focus on, and uses them as examples of different ways to approach web-design, some of which are quite off-beat, but effective.
Both various elements of graphic design (such as color, texture, how to lead the eye etc…), and typography are discussed as is how different effects were created with CSS code.

IE6 Goodies

Your site doesn’t have to look the same in every browser.

Internet Explorer 6 has been the bane of many a web-designer’s existence. One of my favorite CSS Zen Garden designs takes advantage of IE6′s quirks. The result is a design that looks completely different in IE6 than in other browsers. So I’m glad that this design (called Gemination) was one of the designs selected to be in the book, and that how the designer accomplished getting it to look like a whole different design in IE6 is detailed. It is quite typical for designers to try very hard to make sure their site looks as close to identical as possible in every browser as they can, but this design shows that going in completely the opposite direction can work, and quite well.

You can see the Gemination design here

If you want to see how this site looks in various versions of IE I recommend getting IETester if you don’t all ready have it

Learn Basic CSS First

This book is not meant to teach basic CSS, and there’s a lot of things in it that will in all likelihood not make sense if you don’t all ready know some CSS. So if you haven’t started learning CSS all ready, get the basics down, and then dive into this book.

Bands post flyers on bulletin boards, on telephone poles, and really just about anywhere. Flyers get posted over flyers, over more flyers, and pretty soon every telephone pole in town is covered solid. I wonder if TV advertisers approached advertising the same way that people whom post flyers do, whether we might have an epidemic of aneurysms on our hands.

I have taken part in this pre-show band ritual many a time, and flyers have helped bring some people into my band’s shows.

Flyers are a really inexpensive way to advertise, which is a large part of why pretty much every band on the block uses them. Of course because of how affordable this advertising method is, cutting through the noise can be a real challenge, probably much more so even than other more expensive advertising mediums (advertising pros want to chime in here?).

It used to be that most of the flyers I saw were advertising some band’s upcoming concert, this was especially the case with the flyers posted on telephone poles. It does seem to be getting more common for small businesses, and people putting on other events…etc to use them. The result often is a big chaotic mess of mostly ugly poorly designed ads, but there have certainly been some very interesting, and attractive ones (I’m a big fan of well designed flyers, and I’m especially fond of some of the old psychedelic band posters that I’ve seen).

Many cities are now cracking down on posting flyers and prohibiting posting them on telephone poles, at least in part because that huge mess of flyers is seen by some people… well, probably lots of people, as an eyesore. Many businesses have bulletin boards for people to post flyers, and some even require you getting permission from the owner first to post your flyer, in an effort to limit the mess.

So, I’ve gone ahead and designed a flyer advertising my own services, and have been going around posting it on various bulletin boards, just as I’ve done with band flyers in the past (no telephone poles yet). I have yet to see whether this form of advertising will earn me any new clients. I will cross my fingers and hope that mine manages to cut through all the “noise” and catch someone’s attention.

Have you ever used flyers for advertising? If so you are welcome to share your experience below in the comments section.

Google’s AdWords Keyword tool.

Though this tool is specifically for adwords campaigns, it has the potential to be useful for writing PPC ads in general.

You just have to type in the URL for the site you want analyzed, and this tool will give you a series of keywords, and phrases that it recommends to use with your adwords ads.

It will also show you how much competition there is for a given keyword/phrase, and both global and local monthly searches.

There are other options with this tool, you could for example type in your site’s URL along with specific words or a phrase that you want to narrow your search down to. There’s also an advanced search option for this tool, which allows you to specify things like location and language etc…
This tool is worth playing around with some if you need some help with getting started on writing ads, but I find that its suggestions can be a bit off target.

SearchStatus FireFox Extension

SearchStatus is the one SEO tool I’ve found myself using fairly often. It is a nice little easy to use extension for Firefox. It can do things like highlight all the no-follow links on a webpage, and has a keyword density analysis feature. You can also have it highlight all instances of a given keyword on a webpage. That’s just a few of the things this tool can do, and I definitely recommend giving it a try.

FireFox Live PageRank

FireFox sure has a lot of goodies. This tool quite simply shows the Google page rank for whatever web-page you are currently on.

Well, that’s all for now, but stay tuned for more!