View Massachusetts Ad/Web Agencies in a larger map

Clients:
Feel free to use this list to find a local agency to hire.

Designers/Developers/Creatives:
Feel free to use this list to find a local agency to get a job with or freelance for.

This is an ongoing project, so if I come across another interesting Boston agency I will add it to the map.

Hope this helps!

But, The Business Card Will Never Die (so they say)
Even though most of my interaction with people is done digitally it was time for me to get my own business cards. I had missed enough opportunities to hand out my card that I just couldn’t let it happen anymore. When designing my business card I had to make a few important decisions: whether or not to list an address and include social networks.

Nomads Need No Address
Ok, well I wouldn’t quite call myself a Nomad but I did leave out my address. I left out my address for a few reasons:

1. I don’t have an office to meet (if I do meet I’ll usually end up visiting them anyways)
2. I can be anywhere with digital communication / digital communication has no boundaries
3. I plan on moving in the near future (don’t want to date the cards already)

Lets Be Social: Share, Collaborate, Communicate, Connect
The next big decision on the card was whether or not I should include the social networks I belong to. For me it was a fairly easy decision to include social networks and so I included my LinkedIn and Twitter address. One reason for having LinkedIn and Twitter on my business card was to allow greater transparency about me as a professional. Each network provides a unique insight into who I am, what others think about me, how I communicate, how I think and other great information.

Another reason for having social networks on my card is to help form relationships beyond the business card. This will allow the people I meet with a few ways to connect with myself, stay up to date with each other and hopefully build a stronger relationship.

Why Separate Our Print & Web Connections?
Many of us push our LinkedIn and Twitter URLs online through our website or other peoples blogs so why not offer the same connection with the people we meet outside the computer? At least that was part of my philosphy. I have invested time into my social networks to build up and I’m proud of it – so I’d like to share that with my digital or “analog” connections.

Finished Design & Print
Here is the finished business card provided by a subpar iphone camera.

What Do You Think?
Do you already include any social networks on your business card? Are you thinking about it? Do you choose not to? Do you do cartwheels while you tweet?

I’ll keep this up to date with any new portfolio pieces, bits of information I find interesting or useful and what I’m currently up to. Feel free to stir up a conversation and ask any questions if you need a hand or want to understand something website related.

You can also catch me on LinkedIn and Twitter.

I’ll be here to help!

This tutorial is a spin-off from A List Apart’s Onion Skinned Drop Shadows tutorial. If you wish to learn more about how this method works, please review A List Apart’s article. In their example they explain in great detail how it works but they only show you how to create a drop shadow on part of the image. In my example I will show you how to create an expandable, flexible, css drop shadow that goes around an entire image.

It may not be the prettiest method but it works and it sure beats adding a drop shadow to a pile of images. All of my drop shadow graphics are 4 pixels x 4 pixels and the selector .ds10’s padding is 4px. So if your drop shadow images are a different size all you need to adjust is the padding for selector .ds10 and you are all set.

Browsers Tested:
Internet Explorer (PC 6,7/Mac), Firefox (PC/Mac), Safari (Mac), Netscape Navigator (Mac) – feel free to add to the list.

CSS:
.ds1, .ds2, .ds3, .ds4, .ds5, .ds6, .ds7, .ds8, .ds9, .ds10 {
display:inline-table;
/* \*/display:block;/**/
}

.ds1 {
float:left;
}

.ds2 {
background:url(left.gif) left top repeat-y;
}

.ds3 {
background:url(bottom.gif) left bottom repeat-x;
}

.ds10 img {
display:block;
}

HTML:
<div class="ds1">
<div class="ds2"><div class="ds3"><div class="ds4">
<div class="ds5"><div class="ds6"><div class="ds7">
<div class="ds8"><div class="ds9"><div class="ds10">
<img src="images/teddy_bear.jpg" alt="CSS Dropshadow" />
</div></div></div>
</div></div></div>
</div></div></div>
</div>

Source Files:
Download HTML, CSS & Images

Example: