Archive for the ‘Web Design’ Category

Web page design: delimit file and folder names with hyphens, not underscores

March 12, 2008

Use hyphens, not underscores, in file and folder names.

Search engines read a hyphen in a web page file name as a space.

  • Example: Web-Standards-Design.html is read as Web Standards Design

The resulting set of words provides useful keywords for the search engine.

Conversely, search engines don’t do anything with underscores.

  • Example: Web_Standards_Design.html is read as Web_Standards_Design

This one long word is not a useful keyword for the search engine, and won’t do anything to boost your web page’s page rank.

Likewise, use hyphens in URLs.

Use file and folder names that are keyword rich.

From the book Building Findable Websites by Aarron Walter:

Separate keywords in file and folder names with a hyphen rather than an underscore to ensure that search engines can read each word individually rather than as one large word. For example, most search engines will read a file named my-page.html as “my” “page,” whereas my_page.html would be read as “my_page,” which is not likely to match a search query. Google recently updated its system to recognize individual words in file names separated by an underscore. Since other search engines could be tripped up by the underscore, stick with hyphen-delimited keywords in your file and folder names to be safe.

Web page design: the importance of a good title and description

March 11, 2008

Open a browser and go to Google.

Type these keywords: web standards

I’ve already done this. You can see the results:

You will see that the first item in the results list has:

  • Title: The Web Standards Project
  • Description: The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.

Where did Google get the title and description?

Answer: from the HTML document’s <title> element and the <meta name=”description” content=”…”> element.

See for yourself: go to then select from the browser’s menu View >> Page Source. Look at the <title> element and the <meta name=”description” content=”…” /> element.

Lessons Learned:

  • When creating a web page, be sure the <title> element’s value contains keywords that signify the key concepts in your document (and are the words that someone doing a Google search would use).
  • When creating a web page, be sure the <meta name=”description” content=”…”> element’s value contains a description that would get a person interested in looking at your web page (Google shows your description in the results page, and if it’s well written then it will motivate the user to click on the link and view your web page).

Choose HTML tags based on their purpose, not their appearance

February 5, 2008

Web documents contain content. The content is wrapped (marked up) using HTML tags. Each tag has a certain meaning (semantics). A browser displays the content that is nested inside a tag in a certain way depending on the tag.

Let’s take an example. Most documents have a main title. Suppose this is the title of a document:

Our Solar System Planets

Which HTML tag should we use to wrap this title? Suppose that we want the title to be boldfaced and on its own line. We could use these tags (the <b> tag means “bold” and the <br> tag means break/new line):

<b>Our Solar System Planets</b>

These tags are being employed to achieve the desired appearance.

Alternatively, there is an HTML tag that has the semantics: “The content of this tag is a top-level document title.” Here the title is wrapped using this tag:

<h1>Our Solar System Planets</h1>

Now we are selecting HTML tags based on their purpose, not their appearance. This is the right approach. Web Standards Design says: choose HTML tags based on their purpose, not their appearance; use CSS to specify appearance.

Experiment-driven, data-driven approach to web design

August 30, 2007

The book Hard Facts talks about the importance of making decisions based on evidence and data (“experiment-driven, data-driven mind-set”).  At this point in the book the authors are talking about how fully Yahoo! embraces this approach:

“Yahoo! Inc is skilled at running experiments and learning from them, as well as building a culture that emphasizes evidence-based management. Usama Fayyad, chief data officer at Yahoo!, points out that because its home page gets literally millions of hits an hour, the company can design rigorous experiments that yield results in an hour or less — randomly assigning, say, one or two hundred thousand visitors to the experimental group and several million to the control group … Yahoo! conducts experiments and uses the results to enhance company revenues and profits.  Much of this can be done very quickly; sometimes, results can be seen within minutes of tweaking something on the homepage or in Yahoo! Mail. This means there is no reason to spend time discussing which variation to explore or what design opportunities to pursue — it is often cheaper, easier, and faster to simply try all of them and learn what actually works. Yahoo! typically runs 20 or so experiments at any time, manipulating things like color, placement of advertisements, and location of text and buttons. These little experiments can have big effects, like the one run by Nitin Sharma, which showed that simply moving the search box from the side to the center of the home page would produce enough additional ‘click-throughs’ to bring in about $20 million more in advertising revenue a year … Yahoo! has the mind-set that says, Instead of debating which screen design looks best, or which placement of content and which choice of specific content works best, we’re going to try it all and see what works.”

Hard Facts by Jeffrey Pfeffer and Robert I. Sutton