Building a Robust Web That Lasts

With the Internet going into its 3^rd decade, it is good to look back and see how it all began. A computer scientist named Tim Berners-Lee proposed a concept of hypertext in the 1980’s. In the late 1980’s, Berners-Lee had an idea to connect hypertext to Transmission Control Protocol and the domain name system which created HTML and the World Wide Web. In 1990, he created the first web browser.

The first website was activated on August 6, 1991, and can still be found online today at http://info.cern.ch. It provided information on what the World Wide Web was, how to use the browser, and how to set up a web server. In 1994, Berners-Lee founded the W3C foundation (World Wide Web Consortium) which created standards to improve the web. They decided this information should be free, with no patents or royalties. This allowed for the expansion of the web to what we see today.

Fun Fact: The two forward slashes in the beginning of a web address (http://) were “unnecessary” when it was first created, but Berners-Lee thought it seemed like a good idea at the time.

HTML is one of the few things within the technology world that is backwards compatible. The site listed above still works to this day, over 30 years later. One reason for this is that HTML was designed to be resilient and fault tolerant. This means if a web browser does not understand a tag, it will just ignore it and display the content within.

During the time period of 2002 – 2006, W3C developed an alternative language to HTML called XHTML 2, which was the next step for XHTML. It was short lived because of the strict syntax, no backwards compatibility, and it was too strict for general web coding. In 2009 it was retired after being rejected by the web community.

The Robustness Principle

Jon Postel was a computer scientist who was key to the development of Internet standards. He was famous for the quote, “Be liberal in what you accept, and conservative in what you send.” This is known as the Robustness Principle. This principle allows information to be accepted in many different ways, but returns it in the same format every time. This can be seen across the Internet when it comes to forms. From entering addresses to credit card numbers, people have many ways they enter their information. The Robustness Principle suggests that developers should try not to force users to enter information in a certain way, but accept the information and then format it properly.  

Responsive Imagery

Images are another good example of how HTML is resilient. There are many tags that can be added within an image tag. A recent tag from HTML5 that is helpful in responsive websites is the “srcset” tag. This tag allows browsers to display higher resolution image, usually for retina displays. Here is an example of the srcset tag:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w" alt="yah" />

 If the browser is older and does not understand srcset, it will just skip it and use the typical src tag. If it does understand, it can display different images based on viewport size, as shown with the 1000w and 2000w.  

Tip: Using the srcset tag with an image allows for the smallest version of the image that fits the screen size to display, increasing page download speed.

Progressive Enhancement

“When an escalator breaks, it becomes stairs. Websites should be able to partially break and still allow you to get things done.” – Christian Heilmann

With new functionality and enhancements happening every day within web development, we should remember to keep building a robust web that lasts. By identifying core functionality within links, forms, and data displays, a plan can be developed to allow fallbacks for these features. These fallbacks should be the same format that has been around for over 30 years, HTML and CSS.

Thanks to An Event Apart San Francisco 2015 and the presentation by Jeremy Keith for the information.