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

Sip: a color picker refreshingly simple indeed

Sip: a color picker refreshingly simple indeed

July 10th, 2014

I've just discovered Sip, a color picker app for Mac users. "Just discovered" since it's been around[...]

Perch – the CMS that does not pollute your web design workflow

Perch - the CMS that does not pollute your web design workflow

July 7th, 2014

I have recently finished a project based on Perch, the clever 'little' CMS created by edgeofmyseat.c[...]

Responsive video code snippet

Responsive video code snippet

June 29th, 2014

More of a reminder than a pure detailed blogpost, this code snippet will be my go-to resource when I[...]

Project Naphta: a nifty extension to play with text embedded in images

Project Naphta: a nifty extension to play with text embedded in images

June 9th, 2014

We've all been there. You want to select a good chunk of text on a website, only to realise you can'[...]

Free photos for your web design projects

Free photos for your web design projects

June 4th, 2014

Nothing beats using a real professional photographer when working on a cool project. You can be the[...]


  1. Merry Christmas for you too!