How You Became A Master Online Copywriter in 5th Grade

Xander Outlining in 5th Grade
Me outlining in 5th grade

Everybody remembers 5th grade.

My teacher was Mrs. Gunning at St Joseph Elementary in Dallastown, PA. She loved outlining.

We outlined everything. Our science books, our history books, sometimes even our math books. She couldn’t get enough of it!

“When am I ever going to use this?” I grumbled as I scribbled roman numeral after roman numeral in my marble notebook.

It turns out that a search-engine-optimized web page is set up exactly like a 5th grade textbook outline.

And if you arrange your pages using this template, Google will understand your content more easily and you’ll boost your rankings.

10 Tips for Every Web Designer

After attending a few web design conferences this year (namely An Event Apart and Future of Web Design) I saw it fitting to put together a few tips that I’ve picked up, both technical and procedural. I feel these conferences have greatly changed my view on how websites are and should be created, and hope this list of tips can help strengthen my fellow web designers. So without further blabber, here they are:

web design photo

1. The Magic of 62.5

Let’s start off with an easy technical tip. If in your stylesheet you set the font size of your body element to 62.5% your text will render on most browsers (we’ll get to IE6 in a minute) as 10px. You might be saying, “10 pixels?? Why is that so special?.”

Doing this allows you to create fluid layouts out of practically any design. With a base value of 10px you can now set every measurement in your CSS in em‘s. Have a wrapper container that needs to be 1000px?

Well, now you can set it to 100em and the browser will display it just as planned, but if a user decides to increase their text size, your entire layout will grow respectively, essentially creating a “page zoom” that doesn’t break your containers.

For an example of what this looks like, check out one of our recently launched mini-sites: Beaujolais Duboeuf. Below is the code that you can put into your CSS, including an IE6 rule to balance out all the browsers.

body { font-size: 62.5%; }
* html body { font-size: 10px; }