I’ll just sit the next couple of plays out…

So I’ve been overhauling my site lately because I’d managed to make it look more like the world’s worst played game of Tetris (i.e. ridiculous shapes strewn all over the place without any rhyme or reason) than a well thought out and designed website.

Image

I decided that I wanted to have a weekly post on my topic placed inside of its own preview div on my homepage. However, this turned out to look pretty crappy in its initial iteration:

Image

My spacing here leaves much to be desired. After reviewing the potential reasons for this, I realized that in my infinite wisdom, I’d left out a critical piece of code in my external style sheet…

Image

I added a margin of 3.3% and reduced the width of each box by 2%. An example of the new code is below.

Image

Yeah, the margins really helped this whole page look marginally less awful:

Image

You may have noticed that I didn’t use a table to get this stuff done – whether this was advised or ill advised, its how it went down. I used a “parent div” that contained a “left,” “right,” and “center” div – I thought that a table would end up being more complicated in terms of getting the right spacing, and this solution worked out well. To see how the exact code looks, check out the screenshot below.

Image

Following these steps can help you create more reader friendly spacing and layout that makes the site less off putting to the user.

~ by sam rodd on March 30, 2014.

One Response to “I’ll just sit the next couple of plays out…”

  1. You have a really good tutorial here and I like that the tone is very conversational and easy to follow. I do have a few suggestions on how you could make it stronger. First off, because this is supposed to be a how-to blog, I felt that it could have used a little more explanation of some of the actions you took in some parts, particularly with the coding. Separating the actual lines of code and taking the time to write them out specifically for the reader goes a long way in understanding what exactly you’re trying to impart. It just felt a little bit like you wanted the reader to follow your process rather than a more concrete explanation of “here’s what to do and here’s how you do it.” I’m not saying your approach is wrong, I just think it could be strengthened by a little extra detail and specificity.

Comments are closed.

 
%d bloggers like this: