Blogging for SEO

So, you’ve researched your meta keywords. You’ve kept them to no more than three phrases per page. You’ve focused the title, meta description, and H1 tags to the keyword sets without going overboard. Your code is lean and mean—no crummy JavaScript or tables. You’ve gone content-crazy and have a respectable mass of content constantly refreshing on your site. You have a juicy site map. You’ve done it all. Or have you?

Relax, there’s always room for improvement with SEO.

It’s generally accepted that search engines place higher value on the code closest to the top of your HTML, and some may only read part of the HTML document. Most Web pages have plenty of code before the main content, usually the links that form the main navigation of a site.

Unfortunately, moving content above navigation code often makes things difficult to display well, for all but the simplest of layouts. What if you have, say, a header navigation scheme atop a two-column layout?

I found a really cool Firefox extension this morning that could help designers when building a site. Its called GridFox. I want to share some of its information with you.

Grid-based layouts have become really popular among web designers over the last year. This popularity is due largely in part to the work of Khoi Vinh, Design Director of NYTimes.com. He’s spoken at several venues touting the advantages of grid-based design and demonstrating how the concept can translate from print design to the web. However, I ran into a problem when coding grid-based layouts. How can I be sure my grid is maintained from the original mockup to the final coded version? When I coded my first grid-based layout, I found myself regularly taking screenshots of the site and comparing them with my original grid in Photoshop. There had to be an easier way. Click here to read the whole article.

—————-
Listening to: Breaking Benjamin - Breaking Benjamin - Home
via FoxyTunes

CSS Variables allow authors to define variables that are reusable as property values anywhere in a stylesheet and queryable/modifiable through an extension of the CSS Object Model described in this document.

The definition of a variable and a call to a variable should be simple enough so web authors don’t have to drastically change their existing stylesheets to take advantage of CSS Variables. Use case: remove all existing occurrences of a given value in a given stylesheet to replace them by a call to a single variable. The definitions of variables should cross @import boundaries so variables can be contained in a standalone stylesheet and imported by all stylesheets needing them. Use case: company-wide graphical charter for a set of corporate web sites.  The value of variable should be modifiable by script. Such a modification should instantaneously update the value of all properties calling the corresponding variable’s value, possibly triggering changes in the rendering of the document. Calls to a variable in the assignment of the value of a property should make the corresponding CSS declaration invalid in a non-conformant legacy browser, the CSS error handling rules allowing then a fallback to a regular CSS Level 2 rule.

When working with CSS, there’s the challenge of knowing what selector value will be placed on a element. Fortunately the W3 realized this and came up with a schema for browsers to follow in order to keep it standard amongst browsers and also something for coders to debug their code against. What’s best about it is that even though it’s not widely known, once you learn it, it will stick in your head forever (or at least when you need to use it).

For each selector you get a point value. Each point value starts out as 0.0.0.0 and grows as you process what is in each selector.

For every element in the select, you add 1 to the last column;

p,div {
color: #FB1;
} The value would be 0.0.0.2

For every class you have, you add 1 to the value of the third column;

div.cat {
color: #BCA;
} The value would be 0.0.1.1

For every ID element, you add 1 to the second column;

div#header li.nav {
color: #232;
} The value would be 0.1.1.2

And finally, if you use the style attribute in a tag, it adds 1 to the first column;

<div style="color: #424;">blah</div> The value would be 1.0.0.0

How it works is that CSS will go through and determine by specificity which rule will be applied to a property of an element. It’s essentially the higher the number, the more power it has. You should note that if one rule has a specifity of 1.0.0.0, it will rule over any other rule. Also a value of 0.1.0.1 would overrule 0.0.899.35 because it has a value in a higher level. Points are not transfered over, so there will never be a case where just classes will override something with an ID.

Remember, many professional and amature coders don’t know this or utilize it. Learn it and give yourself an edge in your debugging or general coding practices.

Actually it’s really hard to overestimate the importance of white space. Not only does it help to reduce the cognitive load for the visitors, but it makes it possible to perceive the information presented on the screen. When a new visitor approaches a design layout, the first thing he/she tries to do is to scan the page and divide the content area into digestible pieces of information.

Complex structures are harder to read, scan, analyze and work with. If you have the choice between separating two design segments by a visible line or by some whitespace, it’s usually better to use the whitespace solution. Hierarchical structures reduce complexity (Simon’s Law): the better you manage to provide users with a sense of visual hierarchy, the easier your content will be to perceive.

White space is good.

Designing sites can be difficult today since there are so many different screen sizes. You have to be aware that not everyone has the same screen.  With this in mind, you must consider your options for your design. There are many different options but im going to talk about the most favorite option, fixed-width centered design with background.

This solution is definitely the most common. The idea is that by centering a fixed-width website, you can make it appear to fill more of the screen than it actually fills. Add a pattern or gradient background and this solution works pretty well on most screens. Also, it’s important that your design isn’t too wide or you’ll end up with lines of text that are a mile long. The fixed-width centered design keeps width under control and a consistent look from browser to browser.
—————-
Listening to: Staind - Falling
via FoxyTunes

The Internet Archive is a great resource for recovering a lost index or style sheet. Or even if you just want to see how different web sites used to be, you can go check out the archives. Old web sites are not the only archaic item found though. You can also check out old movies and music.

One of the main techniques for creating a search engine optimized website is to use CSS based design and clean, simple code. This makes it easier for search engines to wade through the content on your site and index it, but there is another advantage to this as well. Individuals who are visually impaired use screen reader software to surf the web. Typically, the screen reader software will read a page’s content from top to bottom, so if a website uses a lot of tables and images for layout, the screen reader will read aloud all kinds of useless code before reaching the actually content that a visually impaired user would be interested in. Imagine having to listen to 30 seconds of HTML code before hearing the useful content on every page visited. Not fun.

Using CSS based design will result in less “aural garbage” for visually impaired users who visit your sites as well as helping your SEO efforts.

For more information, refer to the Web Content Accessibility Guidelines (WCAG) at http://www.w3.org/TR/WAI-WEBCONTENT/

Writing good content isn’t easy; a challenge that is only exacerbated by the hyperlinked nature of the web. What does good content look like? Good content is varied and rich. Rich content is written using elements beyond paragraphs such as bulleted lists, numbered lists, glossary lists, hyperlinks, emphasis, citations, quotations, pictures, pull-quotes, and data tables. Lorem ipsum, as-is, neither explores the design of these elements nor encourages their use.

In case you couldn’t already tell, I’m advocating putting together new standardized dummy text, a richer dummy text, “Lorem Ipsum 2.0” if you will. Content changes and the design and implementation should be ready for it. After all, the results should end up being creative commons licensed. We, the industry, need to get started on this right away.

Web design is simpler than ever, and that’s a good thing.

2.0 design means focused, clean and simple.

Why simplicity is good

• Web sites have goals and all web pages have purposes.
• Users’ attention is a finite resource.
• It’s the designer’s job to help users to find what they want (or to notice what the site wants them to notice)
• Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
• So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that’s does its stuff with as little as possible. That’s economy, or simplicity.
  —————-
  Listening to: Flyleaf - Perfect
  via FoxyTunes