SEO for Web Designers

SEO, or search engine optimization means optimizing the content of a web page for search engines so that the page shows near or at the top of the page of search results. Why is this a concern for web designers and web developers?

Web designers and developers don't normally consider themselves content creators or writers. However, web designers and developers are often the people who are tasked with adding titles, headings, meta tags, and span styles to web pages. These items can all be used to optimize a web page for search engines, so it's important for web designers and developers to have a basic understanding of search engine optimization.

SEO vs information architecture

A lot of time is typically given to information architecture at the beginning of a web development project. Information architects and front end developers plot the flow of information in a web site to develop the most logical flow and navigation schemes that will work most efficiently for users of the site.

You might say that information architects look at a site from the top down (though not all sites are top-down hierarchies). SEO begins at the other end, or bottom-up, on each individual page of a site. It is based on users searching for very specific information, using search terms and search phrases. When a user searches for information, they are free to select from the results, so the result that matches their search most closely is the result they will most likely choose.

This means that they enter a site on the page they are looking for, and often leave from the same page, either after satisfying their interest in the page, or moving from there to whatever action the web page moves them towards (often to the shopping cart on an e-commerce site).

Keywords

An SEO professional will analyze the terms that are most likely to be used by people interested in a specific page (called keywords), will make sure that those terms appear in the title, the headings, emphasized text (either bold or italic). SEO specialists develop lists of up to 20 keywords for a topic, and add them to the Titles, Heads, Meta Description and emphasized text on a page. As a web designer, you won't be tasked with developing keyword lists, however, if you are aware of how search engine spiders work, you can make sure than main keywords (including location) are used throughout a page.

Organic Search Engine Results

We're discussing what is called Organic Search Engine Results in this article. That means the unpaid results that search engines such as Google, Yahoo, MSN, AOL, Ask and others return in their main listings. Not the paid ads, although those paid ads use the same techniques to increase relevance which helps them rise to the top of the results page.

The Title of Each Page Counts

Each page of the web site should have a unique title that will interest the person who sees it in search engine results. Take a look at Google search results. First you see the Title of the page, then the Meta Description Tag (if the web developer has included it). Search terms are highlighted throughout. After the Meta Description Tag information (or whatever information the search engine's spider has found, usually the first paragraph of the page) comes the url.

The Meta Description Tag

Even if you habitually fill in the page Title, it's less likely that you add a unique Meta Description Tag, yet this is what search engine spiders look for after finding the page Title. Here's the HTML syntax for the Meta Description Tag (add angle brackets at beginning and end):

META NAME="Description" CONTENT="Your descriptive sentence or two goes here."

You can assist the searcher (and your client of course) by adding a summary of the page to the header of the page in a Meta Description Tag. Or you can make your client aware of its importance and ask them to supply copy for each page's Meta Description Tag, if they are interested in determining what copy a search engine shows, rather than leaving the choice up to the spider.

Headings, Pull quotes, Boxed Text, Emphasized text

The next thing search engine spiders look for are the Headings you have used throughout. So, if content comes to you without Headings, add them! Break content into short paragraphs and add Headings. Add pull quotes, boxes, emphasized text. Search engine spiders will pick these elements out and rank your page higher for the terms emphasized in these ways.

There's more to SEO

A full SEO campaign will include many components, including identifying competition and their use of keywords, keyword analysis, adding keywords to content, links-building programs, adding fresh content on a regular basis, submitting web press releases with inbound links, etc. The web designer/developer might only participate in a few of the components. These may be very important components though, so discussing them with your clients is worthwhile and can add to the services you provide and the compensation you receive from each web project.

Have a very Happy Holiday!

As the year winds down, it's time to reflect on the past year and consider the coming year. We hope you will find peace and health in the New Year.

Design Competitions and Events for 2007

For the past two years, we've compiled a list of Design competitions and Events and published dates here in this blog. This year, we added a Design Calendar to the main website. In addition to the list, updated for 2007, you'll also find a calendar, showing all the events/deadlines month by month.

We'd really appreciate your help with this project. Send urls and details of design competitions and events, and we'll add them to the calendar. Help us make this calendar better and better.

500th painting sold

500th-painting-sold
Originally uploaded by mlangfeld.

I recently blogged about websites-as-graphs. Now it's time to introduce you to one-thousand-paintings as well.

When I found the websites-as-graphs site, it referred me to www.onethousandpaintings.com to support the author. So, I decided to check it out. I found an intriguing conceptual art site. Sala, the author of both sites, is in the process of painting and selling paintings of all the numbers from 1 to 1000.

I love both the idea, and his method of using the Internet to market the paintings. He's masterminded a viral marketing campaign that's been very successful to date. I just purchased the number 72, which was the 500th painting to be sold. He's already over half way to his goal of selling 1000 paintings. I wish him success in this project!

Websites as graphs

langfeldesigns-websitesasgraphs.jpg
Originally uploaded by mlangfeld.

Would you like to see a visual representation of your website's structure? Someone else's? Check out Websites_as_graphs and you'll see some of the best known sites on the web graphed using a Java applet on the page, created by Sala at his Aharef blog.

If you're a Flickr fan, you can check the websitesasgraphs tag to see graphs that people have created. Each one different, and beautiful.

Here's what the colors mean:
blue: for links (the A tag)
red: for tables (TABLE, TR and TD tags)
green: for the DIV tag
violet: for images (the IMG tag)
yellow: for forms (FORM, INPUT, TEXTAREA, SELECT and OPTION tags)
orange: for linebreaks and blockquotes (BR, P, and BLOCKQUOTE tags)
black: the HTML tag, the root node
gray: all other tags

I've always thought that mathematics was a source of great beauty, and still do. Here's a great example. Thanks, Sala, for your generosity in sharing this tool with us.

And if you like conceptual art, you can support Sala's work at onethousandpaintings.com where you can buy a painting of your favorite number and support his work. I bought the one hundredth painting! The earlier you buy, the less expensive the price of the paintings. I bought my number just before the prices rose for the first time. Get yours soon, before they rise again!

The Come to Me Web

Yesterday evening I attended a presentation by Thomas Vander Wal, who invented the term folksonomy, on the "Come to Me Web" at the DC Future Salon in Bethesda, MD.

The "Come to Me Web" contrasts with the "I Go Get Web", which is how Thomas characterizes the first stage of the World Wide Web. Using the "I Go Get" metaphor, the user, connected to one device (computer), navigates to information s/he is seeking, and may add it to their "personal info cloud" on their one device.

The "Come to Me Web" characterizes a person with several networked devices (computer, music player, auto, mobile phone and/or pda, etc.) who needs access to their "personal and local information clouds" during their daily activities.

Thomas gave us an enlightening example of this: a knowledge worker who prepares a presentation on their work computer, leaves the office after transferring it to a mobile device, which they read on the subway ride home. At home they sync calendar and address book information, along with the presentation and emails from their work computer to their home computer and their portable, with which they plan to make the presentation. But the portable breaks, so they forward the presentation to their contacts at the location of the presentation, since their addresses had been synced earlier.

There were a few more steps in the example, but I hope you get the idea. We create several clouds of information around us that Thomas calls personal, local, global and external information clouds. We have greater and lesser access to the various clouds. We are now on the brink of the revolution he calls the "Come to Me Web", where we will be able to access greater amounts of "our" information wherever and whenever we need it, on whatever device we are using at the moment, through use of trusted-device syncing, rich media formats.

Thomas' message to web and software developers is to begin to think about the information needs of a person as they move through their days, including their contexts, and moving forward to what they will want to do with the information once they have it. For instance, if using a local search engine on a mobile device to find a nearby Thai restaurant, it will be most effective if the engine can determine your device, its location (through GPS if on a mobile device, for instance) and give you designed-for-mobile data that is relevant to your current location. We are moving towards a web that serves you the information you need depending on your location, device, your stored preferences, etc.

The title says it all, don't you think?

DC Brainjams all day long!

Conversations
Originally uploaded by chrisheuer.

I spent Monday Brainjamming with an interesting group of people at the DC Improv. Chris Heuer's set of DC Brainjams photos document the day.

The idea of Brainjams is to bring together people with a variety of interests, to network and explore their differing perspectives together in an open space. Allowing sparks to fly, ideas to cross-pollinate, information to flow, this is also known as an Unconference.

Our group included several software entrepreneurs, web and print journalists, a public radio data analyst, web designers and marketers, IT consultants, a management development consultant, a technical recruiter, an ag(e)ing advocate, etc., most of whom (but not all) are also bloggers.

After some preliminary exercises and speed-dating-like introductions, we put Web 2.0 under the microscope.

We looked at the evolution of the web from collections of static data pages to web applications that encourage community and self-expression. From blogging to tagging, from My Yahoo to MySpace, people are using the Web to share ideas, opinions, recommendations, photos and reviews, as well as working together collaboratively using wikis and other web-based tools.

One of my interests in attending the jam was to better understand what I can offer clients beyond web sites. This requires thinking in new ways about how to encourage community involvement, if it is appropriate. I left the full day and evening with new friends and colleagues, lots of possibilities opening in front of me, and a new model of collaboration I can draw on in the future. Well worth the time spent and highly recommended. Chris Heuer and Kristie Wells, thanks. See you next time!

BrainJams
BrainJams30Jan2006
unconference
web 2.0
blogging
social networking

Search vs. Browse: Why Google Video search stumbled

Google became the most-used search engine with their simple interface. Simple design. Focus on the task at hand.

They tried to extend this design solution to the Video arena, and stumbled. Why?

Just think about it a little. When you do a search, you have a term in mind. It may not be the correct term, but the responses you receive will normally help you refine your term if needed.

What do you do when you want to see a video? Do you know the name of what you want to see? Only if it's a classic and you're already familiar with it. Otherwise, you browse, either at the video store, on your cable system, using a Netflix catalog, etc.

I went to Google Video when it first opened, to take a look at it. It used the same interface as Google Search, with disastrous results. I couldn't find anything I was interested in, except a few I Love Lucy shows. I left, unimpressed.

Next I took a look at iTunes Music Store. It's interface is quite complex. It took me a while to find TV shows. But once I browsed to TV shows, I was shown an interesting sampling, and could also browse all the TV shows they carry.

So what? Well, as a web designer or client, there's an important lesson to learn. Not simply that Google can make mistakes. Rather that you need to understand how your users will interact with your page/site. Simplicity for simplicity's sake doesn't always work. The iTunes Music Store is complex (and may become too complex as they add more items), but its current complexity allowed me to browse and find shows I never would have thought to use as search terms.

Search and browse are different activities. Know what activities your audience will be most comfortable doing, and design for that activity.

google video
search
browse
user interface