Hey! Younger Self! Yes, you—
eating Cocoa Puffs and watching Dragonball Z in your pajamas! I am you from the future, and I am here to prevent you from making a terrible mistake in 15 years—in the year 2012.
Now, that website you're really proud of, that you secretly update during math class? Yeah, it's true dbzfan.geocities.com is a good learning experience for you, and ultimately leads to a career in web design (cat's outta the bag!), but it won't be doing your portfolio any favors when you are showing off your work to potential employers, tempted though you may be. The, uh, "style" you 90s people are so enamored with doesn't age well where I come from, mostly because there are much better methods to accomplish web design, due to advances in technology.
The worst part about 2012 isn't commuting to work at the space station in your own personal jetpack—it's that no one will ever tell you why certain design decisions have suddenly become taboo. This is why I am standing here in your (my?) living room this morning, blocking your view of the TV, because dammit, this is important: I am here to reveal why the future internet is a different place, and how you can adapt your craft with the times to become more solid and meaningful. I present to you a list of crimes against Web Design, complete with explanations of and solutions for how you can not only make better design decisions, but also understand why certain practices are better than others.
So, stuff this list in the coffee can "time capsule" in the backyard until science catches up to my advice, when you can program your personal android assistant to remind you. Now if you'll excuse me, the time-traveling robotosaurus I have parked outside is getting fidgety and rambunctious, and I could never allow the past to be altered for fear of how our collective future might be altered.
Don't use tables! You jerk!
Somehow, it will never quite be specified to "never use tables for layouts." Because, using tables for tabular data is great; in fact, that's why <table> exists! Marking up a table with table tags just makes sense. Totally OK. Marking up your entire page in a table and strategically placing your content inside its cells as a means of controlling its layout? Totally A-not-OK. In the early days of the internet, CSS didn't exist; "styling" one's content with clever manipulation of the HTML was the only way to differentiate one website from the rest, and increase the usability of a completely unadultered black-on-white document.
Not only can CSS do a far better job of styling a page than straight-up HTML can, but separating the content (HTML) from presentation (CSS) has many more benefits which revolve around reducing the complexity of the HTML: doing so reduces the duplication of having to re-specify the same styles for each element in-line, and allows multiple pages to draw from the same code for a consistent look.
Never center text! Or right-align it! Usually!
It isn't very common to find large paragraphs centered or right-aligned, but lists and other non-punctuated data are often placed on a page with more consideration applied to aesthetics than usability. The deal is this: when reading multiple lines of text in succession that are left-aligned—as with, like, a paragraph—the reader's eye is able to find the location of each new line in exactly the same place. A right-aligned paragraph is more difficult to read, as each new line begins in a different location. Therefore: if you expect your users to spend more than a moment reading a section of text, left-align it to make the experience smoother.
Keep those breaks out of your HTML! Or you will die!
Your instinct to create empty space between sections of a webpage is a good one; however, calling upon <br/> to do so is misguided. It is true that the new lines left by a series of breaks will separate your content, but repeating the same HTML element so many times for the purposes of page styling causes all of the same problems that using tables for layouts does, as explained above—CSS should be leveraged for design, not HTML.
But, if <br/> isn't used for creating space, what is it for? Those W3C sadists couldn't possibly be pranking you by including in their documentation an element with no purpose, right? There is something you should know about the break before we continue: if you use a <br/> outside of a <p>, it creates a new, empty line; if you include a <br/> inline with the text inside of a <p>, the text following the <br/> begins a new line without any extra white space, just as if I put a break right here, halfway through this sentence. Notice how any styles present on the paragraph itself, such as space between each, do not get applied when a line is broken.
However, this isn't an answer by itself: when is breaking a line in the middle of a paragraph useful? This is a good opportunity to point out the text-alignment on the right side of this very paragraph. Designers call the shape made by differing line lengths a "rag," short for (in this paragraph's case) "flush left, ragged right," because, well, that's kind of how it looks. Designers will generally not justify bodies of text (that is, set it "flush left, flush right") because of the unnatural and differing amount of space it adds between the characters of each line. Like centering large bodies of text, it doesn't make for pleasant reading over time.
When designing for print, the content will always be known down to each letter, and it won't change after a design has been decided upon. With such a fine amount of predictability and control, a good designer will pay attention to the shape the rag makes and add line breaks in strategic locations to create a more intentional experience.
It is the difference between
a paragraph that has a
right edge with the shape of
two tectonic plates, one
made of negative space, the
other made of positive, colliding
at the speed of the earth's
rotation,
and a paragraph with an edge
so smooth and gentle, it reminds
you of the hugs our mother used
to give you when you would run to
her after skinning your knee from
falling off the tire swing.
Another common use for line-breaking intersects with excessively long words, such as supercalifragilisticexpialidocious: if left un-hyphenated across two lines, long words have the potential to awkwardly disrupt a paragraph with unexpected space in its middle. If a <br> is introduced at a critical point, the next time a tongue-twister like supercalifragilisticexpial-
idocious appears in the text, it can sit more naturally in the flow of the text.
Comic Sans is terrible! And Papyrus! And your clothes!
Comic Sans has been the red-headed stepchild of desktop publishing since the first overly-cheery Power Point presentation was set in a "cute" and "friendly" typeface 17 years ago, chosen with great cheer from all 27 pre-installed fonts on Windows 95. Its status as a cliche is an understatement. But why?
Look, the problem with Comic Sans isn't its attitude, or even its universality; Helvetica, for example, is the most widely used font in existence*, and yet it receives no ire. The reason for Helvetica's proliferation is the quality of its construction; the reason for Comic Sans' infestation is merely because everyone and their mum already has the font on the computer in the den, which is the easy choice, the Non-Thinker's approach to design.
Comic Sans was created by a designer for Microsoft to imitate comic book lettering; why not use instead a font created by a comic book letterer which has been used on comic books? Which is a good time to bring up Papyrus: a font created to imitate…ethnicity. Both of these fonts are faux something, and their genuine, well-intentioned use on every surface that couldn't afford a designer is an irony that is not lost on criticizers/detractors. Its history of poor use has branded it as kitsch.
Intentional design will overrule lazy design any day. Even Comic Sans, when carefully considered by a designer, can make a good impression, but working with middling tools, will not produce optimal results. It is, of course, perfectly natural to want to differentiate oneself from banal and humorless typefaces, but to making the obvious choice that 5 billion people already have out of a lack of consideration does not a meaningful, intentional design make. If you are looking for a comic font, I recommend browsing Blambot, a website run by an actual comic letterer; for rustic, Mesopotamian-looking fonts, why not make your own?
* Statistics slightly exaggerated.
Don't just do! Understand! Srsly!
If there's one thing Future You should remember, it is to never blindly follow instruction. Every design problem requires a unique solution, and you would be doing your work a disservice to not understand why certain decisions come recommended. The difference between a well-crafted product and the simple output of a tutorial lies in the details, and your attention must be fixed upon them.
