The Wisdom of Simplicity
Web designers would be wise to approach every situation with one thing in mind: simplicity. Simplicity is the cornerstone of designing a well-structured and highly flexible HTML/CSS design. I’ve found that all too often, many designers approach a website with one thing in mind: the “look” of the fully rendered site. They approach each page or screen with a definitive pixel-perfect image in their heads, and they execute the design process to produce each pixel as it was originally intended.
A Simple Example
I use the word “simplicity” in a very generic sense; it’s a very broad term, so I’d like to use a few examples to show how simplicity can be a great aid in web design. Take, for instance, the anchor tag (
<a/>). The anchor tag is at the very foundation of HTML; it is the most basic implementation of the concept of the internet: the hyperlink. It’s so simple in and of itself, how could designers possibly do anything at all to mar it’s glorious simplicity?
Here are two anchor tags. They appear quite identical, but the behavior of each is remarkably different. Which one is better?
Did you notice a difference? At first glance, they are identical, but the interactive behavior of each link is quite different. Move your mouse cursor over each link, and notice the difference in clickable area on each link. On the first anchor tag, only the text “A Simple Link” is hyperlinked. The padded area around the link is not. The second link, however, is fully hyperlinked (the entire padded area is clickable).
This is a demonstration of the fundamental elements of simplicity in design. A user who visits your site doesn’t care how you’ve formatted your CSS and HTML, or how you’ve scripted page behavior to allow for access to your data. The user only cares about navigating to the content they’re interested in. When a user sees a visual element on the page (such as the links above), they want to move their mouse pointer to that element and click. If a particular page element has some level of interactive behavior associated with it, the entire element should react to that behavior.
Treating page elements in this fashion can also help eliminate extraneous HTML and CSS. Again, using the example above, let’s look at the source code of these two different links and examine their differences.
Scenario 1 (Complex)
Scenario 2 (Simple)
The code above relates to the first and second links, respectively. At first, the two links seemed almost identical, but now the differences are really starting to show. Not only is our more complex example (the first link) more difficult for the user to interpret, but it’s also more work for you as the designer because you have more elements, layers, and styles to deal with.
Take a moment, take your time, and think about each and every element that you design as an independent function of logic and art. Think about the best way to approach every control, and apply uncompromising simplicity wherever possible.