Archive for the ‘Web Standards Design’ Category

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: http://www.google.com/search?hl=en&q=web+standards&btnG=Google+Search

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 http://www.webstandards.org/ 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).

Learn XML to learn HTML to learn web service design

February 24, 2008

Ten years ago I was struggling to learn HTML. Then along came this new technology called XML, which quickly captured my attention and interest. As I learned XML, the questions I had with HTML vanished.

I have spent the last 10 years immersed in the XML family of technologies.

For the past year I have been revisiting HTML, and also learning its associated suite of technologies: CSS, JavaScript and DOM. As I learn the HTML family of technologies, the questions I have with building XML-based web applications are vanishing.

I am impressed with HTML. It is the most thoroughly scrutinized and most widely implemented markup language in the world. Spending time thoroughly learning HTML has been time well spent. It has helped me with designing better XML. It’s been a full circle: XML helped me to understand HTML, and HTML has helped me to understand XML.

The HTML family of technologies run within a browser. As I learn the HTML technologies, I have come to appreciate the browser as a remarkably flexible web application. By focusing on HTML and its family of technologies I have come to learn about flexible web application design.

My Recommendation

Building an XML-based web application or web service? Then study HTML, CSS, JavaScript, and DOM. Learn the principles of progressive enhancement, graceful degradation, and web standards design.

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>
<br>

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.