Archive for the ‘CSS’ Category

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.

Actual numbers showing the benefit of moving presentation (CSS) out of markup (HTML)

February 7, 2008

Moving presentation (CSS) out of markup (HTML) can have a big impact on both end users and the server.   Here’s an example from The Zen of CSS Design by Dave Shea and Molly E. Holzschlag:

When your traffic is high, the extra bytes trimmed have huge implications for your total bandwidth savings.  Sports network ESPN’s web site went CSS in early 2003, and its numbers are almost unreal.  The developers of ESPN.com estimate they’re saving about 2 terabytes (2 thousand gigabytes) each and every single day.  This means they can serve more users, and serve them quicker, without changing anything else.  That’s substantial return on a one-time investment.

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.

Progressive Enhancement is Important

February 1, 2008

[Definition] Progressive enhancement is the layering of additional capabilities onto a basic capability.  If a layer is not supported by the environment, the basic capability continues to operate (i.e. there is  graceful degradation).

Consider employing progressive enhancement in creating your web pages. Here are the steps:

  1. Collect the data that you want to make available
  2. Organize your data
  3. Wrap your data in the most semantically rich HTML tags. Now you have your basic capability. This web page will operate in any browser
  4. Create a CSS document that styles the data in a pleasing manner, and connect the HTML document to the CSS document using the <link> element. You have just added a layer onto your HTML document. Browsers that support CSS will display the HTML in the way specified by the CSS document, and browsers that don’t support CSS will display the HTML using the default display
  5. Create a JavaScript file containing functions that enhance the interactivity of the HTML data.  Connect the HTML document to the JavaScript document using the <script> element. You have just added a second layer onto your HTML document. Browsers that support JavaScript will provide the enhanced interactivity, and browsers that don’t support JavaScript will use the default interactivity.
  6. Add class attributes onto the HTML tags and set their values to the standard Microformat values. This third layer will make your document more globally useful and discoverable by machines.

We’re all learning better ways of designing for the Web

January 17, 2008

We’re all learning better ways of designing for the Web.

For example, we’re discovering methods that increase a web site’s readability and accessibility by using lean, semantic markup and CSS for design.

Bulletproof Web Design by Dan Cederholm