by Flo Preynat

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.
Geolocalize your portfolio

 

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…

Measure x and y coordinates

…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.

My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.

Most Recent Posts

Special Recent Posts

Make Google Charts responsive

Make Google Charts responsive

March 19th, 2014

A quick blog post on how to make Google Charts play nicely in responsive mode. Nothing close to rock[...]

Codekit 2 : even more steroids for us web developers

Codekit 2 : even more steroids for us web developers

March 17th, 2014

I was on holiday when Bryan released the new version of Codekit and never had the chance to to check[...]

Open terminal from folder in finder

Open terminal from folder in finder

January 27th, 2014

A quick one nudged my way by Adrien Joly this morning. You can now open a terminal window from a [...]

A look back at Wordcamp Paris 2014

A look back at Wordcamp Paris 2014

January 22nd, 2014

I went to Wordcamp Paris last week. The event was held On Friday 17th January at MAS Paris and Satur[...]

Gruntjs Boilerplate: my dummy-proof step-by-step guide

Gruntjs Boilerplate: my dummy-proof step-by-step guide

January 14th, 2014

Right so I've made the leap. After quite a ride, and some cool adventures with Codekit, I've deci[...]

Comments

  1. Pablo Lara H says:

    Merry Christmas for you too!