Archive for Web design

Do you create web content? Or websites? For your own site? For your intranet? For external clients?

Many of us who either create content or redesign websites, web apps, intranets, etc. have to decide or help our clients decide how to organize the content (otherwise know as information architecture). One of the best ways to classify your content into meaningful groupings that you will use on your site is through card-sorting.

So, what is card sorting?

Card-sorting is pretty much just what it sounds like: you write down all the high level topics you would like to see in your site (or have in it already) on 3×5 cards. Or prepare cards on your computer (be sure to have some blanks for the sorting group). You can even run card sorts online (WebSort or OptimalSort are two online sites), though you will lose the visual and verbal cues you would have when interacting with your sorters.

Open and Closed card sorting

I have participated in both an Open and a Closed card-sorting exercises. Both experiences helped me to understand the process before running a card sort myself. I recommend you take part in a card sort or two as a participant if at all possible, before holding one yourself so that you’ll better understand the process.

In a Closed sorting, you ask people to place their cards into already Named piles. In an Open sorting, you will simply ask people to make piles of cards, and afterwards, you will discuss how to classify (name) them together.

Informal card sorting

I’ve also participated in a very informal sorting exercise, where department heads were asked to name all the types of content they wanted on the site, particularly from their own department.

As they responded, topics were written on stickies, which were immediately affixed to a white board, in piles. The piles were arranged and rearranged into groups, and the category names were eventually written on the board. The participants could immediately agree or disagree with the organization of the site, and the design team had an agreed-upon architecture within a couple of hours.

Would you like to know more?

For a great description of of the steps involved in running a Card Sorting, see: Play Your Cards Right: Run Your First Card Sort. Anyone for a game of cards? is another interesting article on card sorting. As is: All about Card Sorting.

Web accessibility refers to the ease with which people can access all of the content on your website. Accessibility is often thought of in relation to disabilities such as blindness, deafness, ADD and ADHD, color blindness, etc. However accessibility is important to all users of your site, if you would like to engage them, inform them, encourage them to purchase products, etc.

Until recently there were guidelines for accessibility such as Section 508 Information Technology Accessibility Standards and W3C Web Content Accessibility Guidelines but no testing sites, which makes it hard for web designers to easily improve their sites, based on the feedback provided by testing sites.

The University of Illinois has just launched the Illinois Functional Web Accessibility Evaluator 1.0 (FAE), a testing site that addresses this need. Web designers and developers can register for free accounts which allows us to test whole sites, not just single pages. Highly recommended!

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.

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!

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?

Welcome to Langfeldesigns Talk. I’ll be commenting on a variety of topics, hopefully interesting to both designers and clients.

To kick off this blog, let’s look at how one project can be designed an infinite number of ways. The best example of this I’ve ever seen is a website called CSS Zen Garden.

The site has a slightly different purpose than mine in this post. It exists to excite designers about using CSS (Cascading Style Sheets) to separate design styles from content (in html). So, designers are invited to add their own CSS files (and images) to the base html text file.

It is amazing to see how many ways the content of the page can be styled. Of course, some of the designs are closer to the theme of the page than others.

That’s to be expected… unless the client gives (or develops with) the designer a written brief describing the intended audience(s), communnication objectives, strategies and tactics before beginning a new project. The brief gives the designer guidelines against which to test concepts and designs. It also helps the client to clarify the project aims. It may also bring up questions that
need to be answered before beginning the project.

So, the point I’d like to leave you with is this: work with your designer to define design objectives, or you may be surprised at the designs presented, since there is an infinite number of designs possible for any one project.