Web Substance Meets Style

How many times have you sat down at your desk to begin a new web project, only to stare at a blank monitor, or a blank piece of paper? Unless you give up your web design career early, you will hit this roadblock at some point–and it really does suck (especially since you can’t bill your client for the hours spent looking for inspiration).

How do you break out of “designer’s block”? There’s no one-size-fits-all answer, however, a good place to start is to be inspired by others. I’ve compiled a list of 10 great places to go when you are in need of a little design inspiration.

Continue Reading »

Times are tough. These days, everyone is hiding their piggy banks and spending less on just about everything. Inevitably, that means internet-related expenses as well. There’s no need to fret, however. There are many ways to “design on a dime.” There are high-quality images to be had for less. There is help for your tortured code. On the web is truly where all the best deals are. Here are some of those resources to get your new, on-a-budget design going:

Continue Reading »

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 »

Step 2a is for the blogger who is NOT going to modify their selected theme. This article is for bloggers looking for themes to use ‘out of the box’. In the next few days, step 2b will be posted for bloggers who like to tinker.

In step 1 of Finding the perfect blog theme, your homework was to take pen to paper and determine exactly what your blog will need. Why are you blogging? Who is your audience? What is your purpose? The answers to these questions, and the blog elements list you created for step 1 are about to be put to the test. Consider these your rules. Rules that cannot be broken.

Armed with these rules, it is now time to begin the search for your perfect blog theme.

Continue Reading »

I was working on a project for my actual paying job, and I couldn’t decide on how I wanted the navigation structured. The project has a table of contents containing pages and subpages. There are so many links that the page is forced to scroll based solely on the navigation. I was thinking of using expandable/collapsible links for the subpages to shorten the navigation. I went back and forth, weighing the pros and cons of listing every link versus expandable links.

In the end, listing every link won out. Here’s why.

Continue Reading »

When designing for a blog, there are more design issues to consider than if you are designing a website. I’m not taking anything away from website designers–I happen to be one. Blog designers, however, must consider web design elements in addition to blog design elements. These things include but are not limited to:

• layouts to incorporate advertising space, widgets, personal information, tags, etc.
• common widget elements (tags, categories, calendar, blogroll, etc.)
• comments and replies
• knowledge of PHP and CSS
• specialized design elements (date icons, sidebar icons, sidebar separators, etc.)
• archives

Of course the list above is not exhaustive, and it should give you a good idea as to the additional work involved when designing a blog. This is why 90% of the bloggers out there (myself included) scramble to find and incorporate pre-made themes. Personally, I have struggled with this factor at my family blog for years. I’ve gone through multiple themes, only to find they didn’t really meet my standards or were not as easy to modify as I initially believed. (Generally, when choosing a theme, I’m looking for a layout–not design. I’m going to change most if not all of the graphics and I want a good skeleton to dress.)

So, for those of you looking for the perfect theme for your blog, let’s talk about choosing a pre-made theme. You’ll be surprised to find out what the first step is.

Continue Reading »