Web Substance Meets Style

The other day I read a great tongue-in-cheek post on font choices over at Top Ten Blog Tips and it got me thinking. As a web designer, I don’t even think twice about the fact that I have approximately 10 fonts to choose from for my sites. This is just a fact I accept. Which is odd, when you think about it. With all of the advancements and enhancements to the internet and design since the 90s, why are we still stuck with the same old fonts?

CSS is over 10 years old, and back in 1998 CSS2 described a way to link to fonts from style sheets. The problem at the time, however, was that neither Microsoft nor Netscape chose to use the accepted TrueType format. Instead, they each picked their own format and the idea of using web fonts died.

That’s not to say there aren’t ways to change the fonts in your design. You can carefully select a font and go to the trouble of ensuring it is pixel-perfect then rendering it as a background. Or you can embed your font, to be downloaded by the reader’s browser. Or you can use a third party tool to convert your fonts to SWF or to some other web technology. There are problems with these solutions, (printing, load times, browsers, etc.) which is what keeps most designers from using them.

There are, however, ways you can spice up your fonts and your limited font choices.

Continue Reading »

Today we’re going to take a stroll down memory lane. How many of you were actually designing/developing websites in the mid-90s? If you were, you’ll find this list amusing and you’ll chuckle at how many, if not all, of the items below you employed. For you youngsters out there, you’ll be wondering how we’ve come so far based on the crap we had to work with ‘back then’. Either way, the 10 items below are things you should never, ever do:

Continue Reading »

Today, we’re going to be off-topic, since it’s Bloggers Unite for Refugees day.

According to the 1951 Convention Relating to the Status of Refugees, a refugee is a person who

Owing to a well-founded fear of being persecuted for reasons of race, religion, nationality, membership of a particular social group, or political opinion, is outside the country of their nationality, and is unable to or, owing to such fear, is unwilling to avail him/herself of the protection of that country.

Continue Reading »

Design mistakes. Everyone makes them. Here are 10 (in no particular order) common design mistakes. (I’ll tell you how to fix and/or avoid them later!)

1. Not enough contrast between the text and the background. Anyone who has been to a site and come away with eye strain will tell you how absolutely annoying this is.
2. Unintentional horizontal scrolling. Don’t make me have to scroll left or right to read your content because you haven’t sized an image correctly, or your template doesn’t allow for multiple screen resolutions and/or browser sizes. (Shameless plug alert: Intentional horizontal scrolling is okay. Check out Web-Betty.)
3. Times New Roman Font. For everything. Not only is it a poor choice for readability online, it screams amateur.
4. Images that are not properly anti-aliased. Until PNG is fully supported (or IE 6 users come to their senses and upgrade), make sure your ‘transparent’ images really are.
5. Images that are stretched or distorted. If you need to resize an image using the height and width attributes, make sure you have the dimensions correct. Even better, if you are making the image smaller for design reasons and the larger version is not necessary, take 5 minutes, use a photo-editing software, and just resize the damn thing.
6. Pixelated images. If you are working with rasterized images, don’t take an itty-bitty one and enlarge it. Start big, go small. Not the other way around.
7. Using icons for your navigation that only you understand. Don’t make me guess what your icons mean. If I don’t know where I’m going, I know where I’m going. Straight to someone else’s site.
8. Spalling and grammer errors. I know, this isn’t really design related, but it’s still important so I’m putting it on the list. Spell check and proofread your content. Period. (Let’s see how many people don’t read the extra info and comment on my ‘mistakes’!)
9. A site that takes too long to load. In this day and age, there is no reason why your site should load slower than my toddler eats broccoli. Even if you are showing off your Twilight multimedia portfolio.
10. This: pink-glamour[dot]com. Don’t EVER do this. (You’re going to have to type it in—I’m not giving this blog any link love.)

Be sure to subscribe to the RSS. You don’t want to miss how to fix these, if you’ve already fallen victim to them.

Ok tinkerers. Now it’s your turn. You know a little about CSS. You’re pretty sure you can follow some basic instructions. You understand your blog should not look like every other one on Blogger or WordPress. You drew this kick-ass picture you just have to use for your header. You read the first step to Finding the Perfect Blog Theme—your notes are ready and your blog elements list is at hand.

But you have no idea where to start. We are here to help. Keep reading to find your almost-perfect blog theme (YOU are going to make it perfect).

Continue Reading »