It only takes a glance at services such as Yahoo Local or Google Places to understand the potential benefits of promoting your business at a smaller and more local scale.
I strongly believe that web design is not any different from the rest of the industries out there. Just as people will tend to buy local food to ensure freshness, quality and enjoy the opportunity to meet farmers and other local artisans, some people will be looking for a more local approach when on the lookout for a web designer.
I have met many small business owners having the will to get their services online, and promote their brand and company to other potential customers, but the overpriced quotes usually accompanying the too-virtual approach of a lot of web agencies often give those business owners the cold feet.
Please do not consider this post as a manifesto against modern technology and the use of web conference tools. I am a huge fan of Skype and other online sharing applications on both private and professional fronts. I however believe that nothing will replace good old face-to-face meetings to get things done, especially when projects are about to kick in.
And giving your potential customers the chance to meet you in person, meet the people you did work for and ask for their opinions on your services/customer-focus mind/prices and hence relate to your previous projects by adding a local aspect to your marketing campaign can only push things the right way.
Today, I will then take this opportunity to talk to you about a new jQuery plugin I have only discovered a few days ago: MobilyMap, created by Warsaw-based web developer Marcin Dziewulski of Mobily Playground.
What Marcin came up with is an attractive and dynamic way to display items/places/or more on a map by tagging coordinates-defined points on a given support. I let you discover this plugin and its many options on Marcin’s site.
I will show you instead how I have used this plugin to demonstrate how you can display your portfolio using this local approach mentioned above.
Get local
First of all, let me reaffirm that it doesn’t take a genius to get this thing working the way you want it. Proof is I wouldn’t be able to use it myself.
X and Y coordinates are needed to define your markups. Simply measure with any of your favorite graphic tools the distance between top and left borders and the location of your first customer, as shown below…
…and report your coordinates on a div of class set to point, and id set to ”p-x coord-y coord”.
<div class="point"; id="p-788-173">
Instead of using Marcin’s google-like markups, I opted for more subtle thumbtacks markups giving my portfolio map a more design-ish look.
Repeat the above process as many times as you have items to appear on the map.
In terms of Javascript, as usual all is provided by the plugins called in the header:
<script src="js/jquery.js" type="text/javascript"></script> <script src="js/mobilymap.js" type="text/javascript"></script> <script src="js/init.js" type="text/javascript"></script>
The jQuery library first of all, Marcin’s mobilymap and an init.js script with the various initial state options that you will be able to modify as you wish.
The CSS settings having nothing spectacular, I let you define your own settings yourselves. I just went ahead with a tiny thumbnail of the site designed and some description text wrapped around it.
This is about it. I let you take a look at the demo, and see how you too could geolocalize your portfolio, and get those local businessmen attracted by your services. Download files here.
Finally, i wish you all a Merry Xmas.
Merry Christmas for you too!