Grain Edit- suggested by reader/friend Rachel, Grain Edit is after my own heart. Seamlessly combining classic vintage mid-20th Century found design objects (from matchbooks to movie posters) with new designers in the same classic styles, Grain Edit has a well-defined aesthetic that is, in my humble opinion, exactly what the world should look like.

 LP Cover Lover - ah, the art of the album cover. The great ones are almost as great as the bad ones. You’ll find thousands of both (mostly the bad ones) at LP Cover Lover. The collection of Christian LPs featuring beehive hairdos could make a huge web site all on its own. But there is so much more. This is what makes the internet great.

 Type Theory - if you’re a typography nut, you’ve come to the right place. And if you know you love Helvetica but haven’t dug much deeper, prepare for a master course. Type Theory concentrates on contemporary work, but throws in some vintage goodies for us retro fiends as well. And as the name indicates, Type Theory gets deep into the reasons why it all works.

 Things Magazine - this fine blog is connected with the occasional print magazine of the same name, which is apparently “about objects and their meanings”, and it’s worth reading. But they really got me with their excellent collection of paperback book covers, especially the Pelican Project. 

Typo Gabor - OK, I’m going out on a limb here, since this collection of ”Galeries Pédagogiques de Design & Typo” is completely in French. But following the links reveals some excellent galleries of contemporary work, homages to great designers and typographers, and enough design inspiration to keep me coming back, whether I can read it or not.

Enjoy these five, and please feel free to suggest your favorites.

If you’ve read this series thus far, you have one or more of what we’re calling “Google keywords” to target. Let’s take your top target, and start optimizing. This entry will consist of the absolute basics of on-page SEO, essential to search engine ranking.

There are two types of content we’ll be concerned with: that which is visible to the reader (the text on the page), and that which is invisible (the behind-the-scenes code that people don’t see, but that machines do). To tweak the code you’ll need to work with html or whatever software you’ve used to build your site.

The URL

Your web address may already be established, and out of your control. But if you are just choosing it now, try to include your entire primary keyword, preferably at the beginning of the URL. If your Google keywords are going to be “Italian sports cars”, try to get italiansportscars.com. Since that’s probably taken, start adding suffixes until you find one that’s available, e.g. italiansportscarsinfo.com. One or two hyphens are fine; four and up looks spammy. Use Nameboy Domain Name Generator to quickly generate ideas, and snag an available name quickly when you find a good one.

Page Title

Assuming we have the web site set up, we move on to tweaking the main page. The title of your main page should be your primary Google keywords – nothing more or less. It should be between ten and 60 characters, with no hyphens or other special characters. Don’t get fancy.

Description and Keyword Meta-tags

These are code elements, not seen by the user when browsing your site. You can set them in whatever software you use to build your site. They are not terribly important to Google, but they are to some other search engines. However, the description is often shown in your Google search results, so make it a reader-friendly pitch for your site. Sound informative, not salesman-like. Give a taste of your content; often the first couple of lines of the page work well.

The keyword tags are no longer relied upon by Google, but may affect your ranking in other engines. Just put in your primary Google keywords phrase, and nothing else. Humans won’t see this.

Keyword Density

Probably the most important on-page SEO factor is keyword density. This means what percentage of your text is actually made up of your Google keywords. Too little, and the page won’t seem relevant to the topic. Too much, and you’ll be seen as a spammer, as I apparently was (an update on the site referred to in that link: using the techniques on this page, I’ve moved the site back up from number 107 to number 10).

Use your keywords as naturally as possible, but fit them in somehow. The goal is generally considered to be from three to seven percent of your text. You can check this on the fly using this plug-in for Firefox. Simply highlight the keywords, and use the contextual menu to “Check Keyword Density”. I like to shoot for five percent of the body text. This plug-in will also let you know if you’ve achieved some of the other goals on this page.

H1, H2 and H3 tags

These are text formatting “headline” tags (of descending importance), so Google believes they imply relevance. Without too much explanation, the best advice for most pages is to place your keyword phrase near the top of your page, enclosed in H2 tags. It will be seen by the reader as a medium-sized headline, so make sure it works with your design. Don’t use H1, or Google will once again think you’re trying to game them.

Speaking of design, this is a good place to point out that text contained in graphics are invisible to search engines. The robots read your page as text-only. So you can have your keywords a foot long across the top of your page, but if they’re contained in an image, they might as well not be there. Set the “alt” tag of the image to whatever the text says, but don’t rely on that as a replacement. The H2 headline is your best bet.

Font Styles

The first couple of mentions of your Google keywords within the text should be in bold or italic. This lets Google know they are an important element of your content. Make sure this doesn’t look silly on the page. Look at it as if you were a reader, and make it fit in.

Order and Proximity

Multi-word keywords should be in exact order, without other words in between. You can get some secondary Google juice from slightly-rephrased versions (e.g. “Italian made sports cars”), but the main goal is to get them in order and next to each other.

Anchor Text

Anchor is a fancy word for “link”. If you link to a page on the same subject (especially one within your own site, which is highly recommended), the text the reader sees should be your keyword or a close variation. Google thinks this means the page is on-topic. A page on “Italian sports cars” that has links to “office furniture” looks suspicious to them.

For internal links, try to make sure the page you link to actually has the keyword in its address. If you have the Google keywords in your domain name, you’re set. Otherwise try to get it in the page address, like http://example.com/italiansportscars.html.

As for external links, we’ll cover that in a future post, but a few bits of advice: try to link only to quality, non-spammy sites. Don’t participate in link-trading schemes. You can trade links with friends and associates, but bad-quality or off-topic links can make you look bad to Google. Keep your links constant – Google doesn’t like “link churn”, or constantly changing links. Don’t ever link to link-trading, free-for-all link type sites. Nor should you pursue incoming links from these sites. Google sees these as “bad neighborhoods” and will think less of you. Finally: never pay for a link. Just don’t do it.

Site Structure

Try to structure your site so that you can reach any page in only two clicks. Anything buried deeper than that will be considered less important, both by readers and by Google.

File Size

Keep the entire page under 100k. If you’re using images, compress them as much as reasonably possible for a fast loading page. Again, this is good in terms of both Google and the reader. If necessary, remove images. Yes, I know it hurts.

There are many other tips to be had, but these are the essentials. Do everything here, and you’ll be in good shape to start with off-page SEO, which is a topic for another day…

One of my favorite things in the blog world has been the explosion of great sites concerned with visual arts, design and photography. Some expose the readers to new artists they might never might have found. Others gather discovered items that would otherwise be rotting away somewhere, never to be seen again. And a few add in great analysis of what we’re seeing.

I recommend you check these out if you enjoy having your eyes and brain stimulated. I’ll link to particular posts that I think are outstanding, or are good examples of what the sites are about. If you like one, go to their main pages for more.

And with that, a small supermarket sampling of some great visual arts blogs:

 BAGnewsNotes- great photography analysis from Michael Shaw and company. Also, shockingly for a blog, thoughtful comments from the readers. There’s a lot being communicated in a “news” photo that we might not consciously perceive, and these people can pick apart an AP wire photo like no one else. 

 ISO50 Blog – The Blog of Scott Hansen - aside from showing his own work, Hansen shares inspiration from everywhere. This particular post on audio cassette inserts is stunning. His tastes are wide-ranging, but more than likely you’ll find something that makes your jaw drop.

 Movie Title Screens - not a blog as such, but an immense collection of movie title screens (starting in 1901!) that will keep you exploring for hours. Some are art, some are commerce, but many straddle the two (and isn’t that where the fun is)?

 Design Observer - plenty of writing on design aimed at those working in the field, but also loads of tasty images for the rest of us. It’s also a slick, magazine-style site which bears repeated viewing. Also loads of links and resources, so it acts as a great jumping-off point.

 Waxin’ & Milkin’: A Visual Mixtape - Mark Malazarte is obsessed images, and he posts lots of them on his Tumblr blog. Sometimes it’s hard to know why, because there’s no commentary (a promo shot of Ray Parker Jr.?), but that’s actually part of the fun. His random image link is guaranteed to turn up something that will get you thinking, confuse you, or both.

Enjoy these five, there will be more to come. Please feel free to let me know your favorites.

If you’ve been here before, you’ll notice a major change in the look of this site. Yes, this blog has reached puberty.

After about a month of writing this and looking at it every day, I decided I had outgrown the old theme, Split Personality by Wordpress Diva. I still think she did a wonderful job on it, and I love the concept of a theme that’s split right down the middle. However, the limited screen real estate for the actual content became limiting, and felt a bit claustrophobic.

And so, after trying on about 15 other themes for size, we move on to Clean Home by Bryan Helmig of Mid Mo Web Design. I’ve made a few changes to his typography, substituting the oh-so-trendy Helvetica where he used the more classic-looking Georgia. Just to be even more trendy, I’ve reduced the letter-spacing, to give the headers that squeezed-together look. However, Bryan’s layout is intact, and I think it will serve this site well.

Thanks very much to Bryan for the theme, and I look forward to hearing your suggestions and/or feedback, positive or otherwise.

For anyone not yet on the grid, here are two nice introductory pieces, some more resources, and a couple of well-known systems.

Grid Designer 2 allows you to mock up a complete grid design online in a single open source script. Incredibly, it’s only three simple steps:

1. Columns

Input the number and width of the desired columns. Use the buttons, or type in numeric values. You can play with the gutters and margins to your heart’s content, while previewing live on screen.

2. Typography

Now it gets fun. Adjust the fonts, styles, leading, spacing, line height and more, again with live preview. Paragraph and H1 through H6 are all available.

3. Export

Are you kidding? Yes, unbelievably, we’re done. Grid Designer outputs the CSS style sheet and an html container, scalable if you wish. Copy it, use it, love it.

I’ve just begun playing with this, but as I’m sure you can tell, I’m pretty impressed. I’m sure the output will require some tweaking unless you want a straight-laced, magazine-style grid.

Also, despite the alert stating “NEW! Now supports designs with spanning columns!” it looks to me like you’d have to add these manually after the fact. If anyone can see that I’m missing something, please let me know.

In any case, Grid Designer 2 gets five stars so far, and I look forward to using it for real very soon. Thanks Rasmus!

Web-safe fonts.

A nice, friendly-sounding phrase; it’s even got that comforting word “safe” in the middle.

But for web designers, that phrase is as comforting as a straitjacket. For print designers, finding out about web-safe fonts is like learning there’s no Santa Claus. And if you’re just someone who appreciates the beauty of typography, you may just be wondering why the web is so damn ugly.

It’s those web-safe fonts.

Since 1996, when Microsoft designated the web-safe font families in their “Core fonts for the Web” program, designers have been restricted to a tiny group out of the tens of thousands of existing fonts.

Not only that, but designers are forced to specify a replacement in case the desired font is unavailable, and a last-resort font-family (e.g. “sans-serif”) for the worst-case scenario. This means you can never test all possible appearances of a page without knowing what fonts are installed on the user’s machine. That doesn’t exactly encourage bold, innovative design.

Perhaps most offensive to some was the inclusion of Arial, Microsoft’s copyright-avoiding knockoff of Helvetica, which is perhaps the best-loved font in existence, and even the subject of a full-length film of the same name.

Basically, web typography sucks and web-safe fonts are an ugly, constricting anachronism. But the end may be near; the Holy Grail of rich typography for the web could be around the corner.

There have been numerous attempts to solve the problem of web-safe fonts before. First was plain old image replacement, which did the job for large logos and the occasional headline. But unless properly tagged, they sent no information to screen readers or search engines, the text could not be copied/pasted, and entire pages were out of the question.

Then there were embedded fonts (too big), SiFR (a slow, complicated Flash workaround with accessibility issues), DTR (relies on server-generated images, basically a fancy version of simple image replacement), FLIR (an attempt at a better SiFR), and others.

Today, Smashing Magazine reports on upcoming CSS3 support for custom web fonts with the @font-face tag. This calls a font from a specific URL to be used in the page, just like a call to a remote script or stylesheet.

Actually, this isn’t really news, since it was first proposed for CSS2 and has been growing in support for some time. Safari users are already seeing it, and it’s planned for the next major update to Firefox. As usual, Internet Explorer lags behind, in this case due to Microsoft’s insistence on using their own “Embedded OpenType” technology…sound familiar?

But thanks to the rapidly-growing adoption of better browsers, designers may start designing for the best-case scenario, with a back-up plan for the worst – not the other way around.

Usage licenses still apply of course, and there is the obligatory intellectual property debate among font creators. Discussion of a universal web type library has already begun. But there are more than enough fonts available right now to give our tired eyes a rest from the stalest of the web-safe fonts, like Tahoma and Trebuchet.

Which means a whole universe of fonts will soon be appearing all over the web – just maybe in this new year.

Better 12 years late than never.