Making an Online Business Card

Are you BUSINESS? 

Do you, like me do business? I am so business I needed a business card that was always there so my business associates could do business with me all the time because my business is so business I haven't always time to give them my business card or I'm doing so much business I run out of cards for business and start writing stuff down? That's not business. 

Smartphones! Email! Conference Calls! Spreadsheets! THAT'S BUSINESS.  


So I've cobbled this idea together from a few things, it's all relatively simple and not too hard to follow if you understand basic web design. If you don't I'd suggest reading how to build a website in dreamweaver and how to build a website. 

Though based for mobiles this is a single page with very basic formatting... The idea behind it? A permanent link you can send any smartphone user to, they'll be able to make direct contact from the page. You only need to remember a single link, don't need your card, your phone, a QR code, though it's deliverable by any means. 

Ok so this is only part of the way there. People can get in touch, but it's not a means of saving all the contact details easily. So we add a save contact option. 

The video is a demonstration on Android. I've checked this out and all the functions will work across iPhone, Android, Blackberry and webOS. With java enabled dumbphones and quasi-smart phones a reasonable amount of it should work. 

The basis of most of the functions has been around from the 90's and is well established across mobile browsers, all major 3rd party mobile browsers, along with native ones support this. 

Open up your favourite image editor... 

I've went with making two 480px wide images, which essentially live as headers and footers... 

The top one is a title/image, it could be a logo or some such with some text beside it. 

Realistically the format's up to you.

The bottom is more important, well in my format, I've included sort of appish buttons for contact options. No it's not amazingly beautiful, to be honest I didn't know if this was going to work at all when I made the card design... 

I've sliced the images up using save for web options in photoshop, you could create all of them individually if you wish. For more on image slicing, have a look at this step in how to build a website with dreamweaver.

So I've just popped open the output html page in dreamweaver and knocked out the spacer images. 

After that I formatted the tables text options for alignment, font, etc. 

Then I got to BUSINESS. Putting in relevant BUSINESS info... 

These are all relatively simple to deal with, essentially you're just adding links to images. 

If you look below, in the image you'll see the link in the link box in dreamweaver, I'd suggest making use of this, even if you're perfectly happy coding it is a much handier way of doing these... 

For the phone link, it's tel:(Number) - For both calls and SMS use the international + for better reliability, for example mines +44791*******

<a href="tel:(NUMBER)"><img src="(IMAGE FILE)"</a>

For email, it's mailto:(Email address) The same as the kind of link that opens outlook, which is generally annoying compared to a click to copy link. On a phone it's actually pretty useful. So thats;

<a href="mailto:(EMAIL ADDRESS)"><img src="(IMAGE FILE)"</a>

For text messaging it's SMS:(Phone Number) Again, + Code instead... 

<a href="sms:28746377"><img src="(IMAGE FILE)"</a>

For BBM it's PIN:(BBM PIN) - Note if someone could run a test on this that would be amazing, I don't own a Blackberry, though this is straight from RIM's own documentation so it should be fine. 

<a href="PIN:(BBM PIN)"><img src="(IMAGE FILE)"</a>

These are the same as the buttons in terms of linking up though much less effort. 

See every social networking site I've tried has a mobile version, not only that but they do a good job of redirecting links. 

Using facebook as an example, which is easier if you've nabbed a custom name. 

Mine is

http://facebook.com/killerjackalope 

The mobile has a long string of numbers attached and doesn't always work itself out without them. 

Using the normal link and letting facebook do the work for you is just sensible. Same goes for any other sites, though give it a test run first, simply put the normal address exactly in to your mobile browser and see where you end up. 

So far this is just a skinny web page with some handy links for phones on it... 

If you upload it now it will work but it'll look weird, we need to tell the phone how big to show it. 

The viewport tag takes care of this in one line of code, if you made yours 480px wide like mine, you just paste the code below in to your html documents head. 

<meta name="viewport" content="width=480">

The width is pixels, just change that to the width of your card. Bear in mind that if you make it very large or very small it will be trickier to see, as the phone will either have to upsize it or the content will be squashed down small. 

The viewport tag essentially tells the mobile browser how much of the site to fill the screen with - often people will make a small border of freedom around the stuff they want to show but in the case of this page I wanted it to fill out the screen. This little tag can also be really useful for making a non mobile site a little easier to view if everything already works on it - simply size it to bring a good view of your main content column. 

For ease of use and sharing I'd put the page file in your sites root folder with a relatively short name. 

Mine is relatively unwieldy, partly because I have a subdomain... The reasons for that mainly fall down to my household bills and general forgetfulness, oh and the fact that I spend every waking minute I'm not working finding much more fun things to do that constructive stuff. 

I've noticed that you have to include .html after the thing, though this may be due to zymic, who have strange rules about custom .htaccess files, ruining the function in my instructable on them - instead of defaulting to theirs or leaving mine alone they just say it's broken. 

Anyway http://killerjackalope.zxq.net/business.html is just excessive. 

URL shorteners are handy here. 

http://bit.ly/xbFpgr

If you want to see my tester on the phone just scan the QR code below. 

Go to BUSINESS conventions!

Send the LINK!

Do BUSINESS!