Erik Florida

Bottoms Up!

Wednesday, April 21st, 2010

No, sorry to disappoint, but this post is not about drinking. Well unless you are buying, then I’ll have a nice hoppy IPA. But anyways, what I really wanted to discuss is the idea of a bottom up design. I think this method of creating a Web site is a really great learning tool. It is a great way to always design Web sites, and especially great practice for a beginner. In my last post about Kitchen sinks (and HTML/CSS) I mentioned the idea of organizing your code in layers. If you think of layers, many people think about layers of cake. Well whatever you think of, it is most likely that it makes sense that you can only create/peel/stack/organize layers in one direction. You can only combine the layers of a cake from the bottom up, and that is how Web design should be done as well!

The Idea is simple, you start with the most basic element of your site, and design piece-by-piece, until you have a complete site. You create the basic elements, then you add more advanced elements, and you keep stacking until you have a complete product. There are a number of benefits to designing this way; accessibility and fall back are especially pertinent. For this process we will assume the content and wire frames/layouts are already created. On paper, we have sketches of the page layouts, and content for each section has been written. Now we just need to figure out the best place to start coding.

The first step in the process is coding out the basic HTML. This means ignoring layout, colors, fonts, etc. and simply code your HTML with a focus on the actual content. An emphasis should be put on tagging everything semantically. When you design your HTML with your layout in mind, you tend to start making HTML tags work for your design, and not necessarily the most semantic. In this step we want nothing but plain text, listing out headers, paragraphs, lists, anchors, labels, forms, etc. There are enough HTML tags to generally keep all your information nicely organized in relevant, semantic tags. Tag attributes are also really important. In addition to tagging an element as an unordered list, you may also need to further detail that this list is for the sidebar of a site. Giving this element an ID of “sidebar” would add more complete semantic markup to the content within. This is a good point to also point out the basic difference between an ID and a class. Both attributes can be added to HTML tags, but they should be used correctly. An ID defines a specific element, such as the content of the sidebar. A class, however, may apply to any number of tags. For example, you might use class=”aligncenter” to center align an element. You could add this tag to any number of elements. Once the HTML is complete, you will have all your content. This is the first step in accessibility, and the first part to validate.

At this point you should validate your HTML using an HTML validation tool. I recommend using the W3C HTML validator since they are the ones who establish Web standards in the first place. Make sure all your HTML is valid and semantic. Now its time to move up a level. In my next post I will talk a little more about CSS, and how to organize the content in a manor that is easy to create and maintain.

Posted in HTML/CSS | View Comments

XHTML, CSS, and the Kitchen Sink

Saturday, April 17th, 2010

What’s the big deal with using tables in HTML? Sometimes it is just easier to make a word bold right in the HTML, isn’t it?. Why does it matter if you use a separate CSS file, versus inline CSS? Why shouldn’t I use tables in HTML? If you, or anyone you know has asked such questions, I hope reading this article will change their minds about the usage of HTML and CSS.

If you haven’t read my previous post about the origins of HTML, I suggest reading that first. It will give you a simple background into what HTML actually is, where it came from, and what it’s purpose it.

So we understand that HTML is used purely to tag groups of text, identifying the content and providing context. But as more and more people began to use the Internet, the browser experience needed better ways to display information in an attractive and organized way. HTML tables and style elements were introduced to allow the creator of a page to give the information a consistent look to each viewer. So as the usage of the Internet expanded, so to, did the capabilities of HTML.

Here is where the kitchen sink analogy comes in. The issue is organization. Imagine you have a kitchen drawer. This draw is 2 feet wide, and holds silverware. You put deviders in so you know that when you have a knife, it goes on the right, a fork in the middle, and a spoon goes on the left. Overtime you start buying more kitchen utensils. You are handy with a saw and a hammer, so you just expand the draw. Now it is three feet wide. Now you can fit all kinds of new utensils in the draw! Now you have a better drawer, with more purposes, right? Well what happens when you have to expand it to 4 feet, and now you have so many things all piled in this one draw, you cannot find what you are looking for.

Now take the alternate case. After you fill your 2 feet draw with knives, forks, and spoons, what if instead of widening your drawer, you installed  a new, separate drawer. This drawer is 2 feet wide also, and it has compartments for separate types of utensils. Now you know, if you are looking for a utensil to eat with, it’s the draw on the left, if you are looking for a utensil to cook with, it is the drawer on the right. See how this makes things much easier to find, organize, and expand in the future? Every kitchen I’ve ever been in had more than one drawer, probably for this very reason. Compartmentalization is very important to longterm organization of important and expanding information.

Now imagine a small business, starting their Web site. It starts out with just a handful of pages, and some content describing what they do, and how to contact them. Over time that business grows. Now they want to add a blog, and they have different divisions. They want each departments to have their own pages. They want to add an intranet for employees. Suddenly the site has thousands of pages. Now what if the company needs to update the logo? Or change a color? And has anyone noticed that they don’t use the same font throughout the departmental pages?

These are common problems that can be solved much easier with well organized code. This means separate files for each part of the design. The HTML should be the base, with proper, semantic tagging, as well as good use of ID’s and classes. Well formatted HTML should never need to be updated unless new content is added. Then the CSS can be properly divided into files for typography, layout, etc. The CSS is where each element of the style and layout of the site is formed. It creates a central location to edit style-related information. When the HTML is formatted well, it should be easy to identify the specific content you want to manipulate with CSS.

If you organize data in a table, or use the bold tag, or italics, then those layout/design features cannot be changed without manipulating each HTML document where the problem exists. If you have a CSS file called typography, and you set all paragraphs to use Arial, italics, you can change this across the entire site, from one location. This structure of organized, compartmentalized information allows the content to be controlled, reproduced, and maintained much more efficiently.

Another way to look at the structure is in layers. The bottom layer is the actual content, the plain text. Then you have the HTML markup. The tags first, to identify each section of text. Then the tag attributes, such as classes and ID’s. These further define each group of tags, such as defining the difference between a paragraph on the accounting departments page, versus a paragraph on the sales departments page. Then you have the layer of CSS, which can be compartmentalized into files such as typography and layout. Then interactive content sits above that layer. Adding Flash or JavaScript elements are common examples.

Creating the site in this format, from the bottom layer up, helps to create a more accessible and degradable site. This concept will be discussed further in my next post!

Posted in HTML/CSS | View Comments

In the beginning…Tim Berners-Lee Created HTML

Saturday, April 17th, 2010

In order to discuss the purpose and importance of XHTML and CSS, we must first look at the original purpose and use of the Internet, and how those uses have evolved. During the Cold War, the US Department of Defense wanted to develop a means for sharing information for intelligence purposes. The Advanced Research Projects Agency established the first packet switching network (ARPANet) on October 29, 1969. From here, the Internet slowly developed over the next 20 years using the TCP/IP, Internet protocol suite for data transmission. The Internet at the time mainly consisted of Universities sharing information. In 1993 the first recognized Internet browser was developed, known as Mosaic (you can still download Mosaic from the NCSA Web site).  Mosaic opened the Internet up to the everyday user. It was now accessible, as well as more functional, with its use of HTML. HTML is a markup language that was developed to give context for graphical interpretation of data by the browser.

Hyper text markup language was developed by Tim Burns-Lee, along with a browser for interpretation in the latter part of 1990. HTML’s design was based on the Standard Generalized Markup Language (SGML). SGML is not a markup language in itself, however it is a guideline for creating a markup language. Tags are the core component to any markup language. The purpose behind a markup language is to put data into context. Take a typical essay paper layout for example. Say you write the paper in MS Word. You use a large, bold, centered title, then put your name in a smaller, italicized font below that. Then you start writing. You have an introduction, three main paragraphs for each point, and then a conclusion. Word uses a proprietary system to store and interpret the layout and style of the text on the page.

A basic Web browser can only interpret simple text. This may seem like an obvious point, but it is an important one. So let’s imagine we take this nicely formatted Word document, copy all the text, and paste it into Notepad. Now you have lost all of your formatting. It is all just letters and spaces. This is the first step to creating an HTML document. You now have all your content, but no markup, no tags, no way to identify how the information should be displayed. You can actually save a plain text file as an HTML file and the browser will output the text, just like Notepad will. However, the point of the Web was to share information, and it is hard to interpret data that is displayed in plain text.

Enter the markup language. In order to contextualize the information provided in a file, HTML was developed for browsers to use as a means to interpret context. Now you can use HTML tags to identify the header (or title) of a document. You can identify a paragraph as such, and give it an ID, like ‘<p id=”first argument” >Content Here</p>’ Now you don’t just know that this is a block of text, you know that it is a paragraph, and you can identify this paragraph as the first argument. When you hear Web designers talk about semantic markup, this is what they are talking about. Using tags and ID’s and classes that make the HTML markup specifically relevant and purposeful to the context of the information.

A common misconception about HTML is that it is supposed to be used to establish format, colors, layout, etc. to a document. This is not really inline with the concept of the markup language. The purpose is to mark up the text with tags that identify each element of the text document, in order to create context. The additional feature of being able to then control layout with HTML should never have been available, in my opinon. From the very beginning, using the HTML itself to control the layout gave the HTML dual purposes. You use it first to identify the content, then you use it to manipulate the content. Structure creates order, and order creates consistency and reliability. Giving HTML a dual purpose was a mistake from the beginning. Tables are evil!

This is where CSS comes in. There are many benefits and uses for CSS, but the concept is simple. HTML is used to identify the different elements in a text document. CSS is used to layout and stylize the information, based on the markup.

Posted in HTML/CSS | View Comments