New Portfolio Addition: The Small Business Web

I recently added a new project to my Portfolio: a one-pager for The Small Business Web (visit site). I designed it in just one day, but I liked it enough to put it in. Here she is:

Small Business Web screenshot

I figured I’d share some markup & style for a couple of page elements. Hopefully you’ll find it useful.

“Tweet this page” button

In this day and age, “Tweet it” buttons are becoming more and more important. Not only does a Tweet it button give users the ability to quickly post a page to Twitter, it reminds them to do so. There are online services out there that will make Tweet it buttons for you. Might as well roll your own. Here, clicking the “Tweet this page” button will send you to Twitter (if you’re logged in) and prepare a message that says “Small businesses are taking over the Internet! The Small Business Web is here. http://thesmallbusinessweb.com”. That’s actually super easy to do. The markup:

<p id="tweet-it"><a href="http://twitter.com/home?status=
  Small+businesses+are+taking+over+the+Internet!+The+Small+Business+Web+is+here.+
  http://thesmallbusinessweb.com">Tweet this page</a></p>

(I’ve added line breaks for cleanliness.) Basically, the hardest part is typing a “+” instead of a space.

Here’s how I styled it:

p#tweet-it a { display: block; position: absolute; top: 0; left: 20px; background: #004A8D url(logos/tweet-it.png) no-repeat 4px 50%; color: #FFF; margin: 0; padding: 3px 10px 5px 44px; text-decoration: none; }
p#tweet-it a:hover { background-color: #333; }

I wanted the whole blue box to be a link instead of just the text. So, I applied display:block to the link. Next, I absolutely positioned the link to it sticks to the top of the page. That’s where the top: 0 comes in. I added some space to the left, hence the left: 20px.

Next is the background. This encompasses the color (#004A8D), the birdie graphic [url(logos/tweet-it.png)] and the positioning (4px from the right of the box, 50% vertical positioning within the box). And of course, we don’t want the bird to repeat, so no-repeat. Then, I set text color and padding and yanked the underline from the link. The hover state simply changes the background from blue to gray. Pow, yer done.

“Business card” footer

Seriously, aren’t they cute? Here’s the markup on one of those little guys:

<dl id="shah" class="vcard">
  <dt class="fn">Sunir Shah</dt>
  <dd class="title">Chief Handshaker</dd>
  <dd><a class="url org" href="http://freshbooks.com">FreshBooks</a></dd>
  <dd><a class="email" href="mailto:sunir@freshbooks.com">sunir@freshbooks.com</a></dd>
</dl>

Yes, Microformats! This is the perfect case to use hCard—and it’s so easy. Each business card gets it’s own “vcard” class (that’s the class that says “hey, everything inside this element is one set of contact information”).

If you’re not familiar building an hCard, it’s all about applying the right class names to certain bits of data. Definition lists are great for this because you can basically throw a class on any single definition. The “fn” class means “full name”. The “title” class means “job title” while “org” means “organization”, or company that the person works for. I doubled up “org” and “url”, applying both classes to a link. That’s because the text that is hyperlinked is the org and the href is the url for that org. A two-fer!

Finally, the “email” applies to “email address”. I could have hyperlinked Sunir’s name with his email address using the same process above (<a class="fn email" href="mailto:sunir@freshbooks.com">Sunir Shah</a>), but in this case I wanted the email address visible (like a business card!).

That was fun. Let’s style it:

div#contacts dl { border-top: 1px solid #CCC; border-left: 2px solid #CCC; border-right: 2px solid #CCC; border-bottom: 6px solid #CCC; float: left; padding: 5px 5px 5px 52px; margin: 0 1% 0 0; }
div#contacts dt { font-weight: bold; }
div#contacts dd { font-size: 85%; margin: 0; padding-top: 2px; }
div#contacts dl#shah { width: 11%; background: #FFF url(photos/shah.jpg) no-repeat 5px 7px; }

Each definition list (each business card) gets these fancy borders set, is floated left (so they all line up nicely), and gets some internal padding. The padding-left is set to 52px to accommodate our 40px thumbnail images. There’s a 1% margin-right to give them a bit of breathing room.

Next, we simply bold the definition term (in this case the person’s name). Each definition (bit of contact info) is set to 85% with a bit of padding on top. Finally, each definition list is given it’s own thumbnail image thanks to the unique ID. I also gave each list a unique width (since some names are short and others are much longer).

So, there you have it—a new portfolio piece and a couple little markup & style examples. I’m curious what you think of the page.

5 Comments

  1. On April 21st, 2009 at 3:27 pm Scott said:

    Small bonus, the pages really clean design means even rendering in ELinks is great.

  2. On April 22nd, 2009 at 8:14 am Adam Darowski said:

    Awesome… I had neglected to test in ELinks. :) Thanks!

  3. On April 23rd, 2009 at 12:01 am Jeremy Weiskotten said:

    I like it — especially the “Tweet this page” button. I’ve used a similar technique before, but didn’t think to make it so prominent. This is so much more likely to be used.

    Also, great sleestacks reference. Too bad the new Land of the Lost movie looks like crap!

  4. On April 23rd, 2009 at 6:54 pm Adam Darowski said:

    Thanks Jeremy. Anything social media-related could REALLY benefit from a ginormous Tweet It button, I think.

    As for the sleestacks… all the credit goes to mriggen on that one!

  5. On May 1st, 2009 at 6:24 pm Bad Economy said:

    What an amazingly simple but beautifully laid out design. You could probably put a nice resume on that page.