Bedrich Rios

In the last couple of months I have crossed paths with many individuals who still believe web pages are created using only HTML and table layouts. People who have no knowledge of web standards, accessibility, or the work that goes into creating or designing a website. Furthermore, there are those who, in my opinion, sadly still perceive the web as child-play.

I am not the most experienced web designer, far from it actually, but I have spent countless hours (for the past three years) learning about the web in order not to “hurt it.” That said, it is really hard to find higher education programs or classes about web design, mainly do to its “young” nature. At the same time, a simple Google search will return an overwhelming number of links to tutorials and how-tos. So, what’s good out there? There are many possible answers to that question. The following list is one. It will provide you with what worked for me when I began to take interest in web design. They are not all related to web design per se, but they will give you a brief overview of what your are getting yourself into.

The List, But Not “The List”

1. Understanding Web Design
   In this article, Jeffrey Zeldman, writes about what it means to be a web designer and what it does not. He talks about why web design is misunderstood and the dangers the misconceptions carry. Furthermore, he gives an answer to the question: what is web design? This is a must read for anyone interested or involved in web design.
2. The Web Standards Project
   “The Web Standards Project is a grassroots coalition fighting for standards which ensure simple, affordable access to web technologies for all.” In other words, web standards attempt to assure that the exchange and use of information between web based products go “smoothly” regardless of the browser being used.
3. CSS Beginner Tutorial
   Cascading Style Sheets are a web designer’s best friend. CSS allows you to design the way a web page displays without ever having to mess with the markup (HTML). Follow all the steps on the tutorial and you will be off to a good start.
4. Learn CSS Positioning in Ten Steps
   Learning how to position markup generated elements on a web page using CSS will be your key to liberating yourself from ever using tables to layout a page. Leave tables for displaying tabular data not entire web pages.
5. A Guide To Web Typography
   Many times overlooked, typography is one of the most important parts on a website’s design. After all, content is the meat of your site, display it right.

What Next?

I wrote this article with the assumption that you had general knowledge when it comes to HTML and CMSystems. If not, check out these articles: CMS and the Single Web Designer and HTML Beginner Tutorial. In any case, this list is intended to give you a good and solid starting point before you begin designing web pages. It worked for me in the past, I hope it works for you. If you have any questions or comments, please leave your thoughts down below.

Since 2001, IE6 has been a nightmare for all web designers and more recently IE7 is taking that spot. Although, as of last October, more people were recorded using Firefox to surf the web, the market share of the Internet Explorer family is still bigger than Mozilla’s browser and far greater than Apple’s Safari.

The Box Model Problem

This is the most widely known, and hated bug in IE6. In a few words, unlike Firefox (or other standards compliant browsers), IE6 disregards an element’s specified width and/or height for its content and adds padding, margin, and border to it. This means that in Firefox an item with a width of 200px and a padding of 10px equals 220px in width. The padding is added to the the element after the the content area’s width is determined by the CSS rules. On the other hand, IE6 will render an element with a total 0f 200px. This happens because the padding is included in the content area’s width of the element.

A few solutions

* html: There is a huge debate about this method within Web Designing circle. People claim this is a hack, and well I think it is. Nevertheless, it is one of the much “cleaner” hacks (if used sparingly) and I personally use it from time to time. All you have to do in order to use this hack is add * html before any of your CSS rules. This will make the rule only be applied to IE6 and no other browser.

JavaScript: This method is also a very clean one. How does it work? I think that is a topic for another post (leave a comment if you wish me to write about it). But in a few words, it uses JavaScript to detect which browser a person may be using and inserts a given piece of CSS to that specific browser. The downside to this method is that it requires JavaScript to be enable in your browser, something that is not always true.

Conditional Comments: Yet another way to deal with IE6, and send this browser specific rules. The only downside to this method is that it messes with the mark-up of your web page. All you have to is add the following to your source: <!–[if IE 6]>And add specific mark-up, stylesheets, or JavaScript toIE6 <![endif]–>.

Final Thoughts

When dealing with IE6, no method is perfect. And for the most part, even if you don’t, somebody is going to consider your method of choice a hack. I personally think that anything you do, as long as you do it sparingly and with reasoning, is fair play. Let me know if you want any tutorials or post to appear on my blog by leaving a comment.