Tuesday, March 30, 2010

How to Protect your imgaes in website?

The usual way of displaying images in a blog post/widget is very easy but these images can be stolen or copied easily too. Even a novice user can simply right click on an image to save it on to his computer, which is eventually passed on to others and finally appears in some other blog, website or magazine.


Most common reasons/ways of stealing images:
1. From Google Image Search
2. By Right Click -> "Save Image As..."
3. By Copying image address from "Page Source"

Methods To Protect Your Images:

Methods you should not use:
1. Watermarks spoil the overall look of the images, so I will not suggest you to use big watermarks over the images, unless you are selling the images from your blog/site (where only a thumbnail of the image is shown with a watermark on it) [Like This One].

2. Disabling right click is one of the 'infamous' methods as the pop-ups doesn't look nice.

Methods You Should Use:
METHOD #1
By using JavaScript encryption you can not only protect your images, but many other html widgets too: Read more about html encryption here.
Because of this encryption, nobody can find your image address from the page source.

METHOD #2
The other famous method to protect you images from getting stolen is to use CSS instead of pure HTML. Although even in this case, images can be easily stolen (by taking screenshots and editing them), but because of the lengthy process most of the content thieves will definitely drop the plan of taking pictures from your blog. This technique will also protect your images from getting indexed and shown in Google image search results.

So instead of using a code like this;

<a href="http://bloggerstop.net"><img src="http://i49.tinypic.com/19p9ad.jpg"/></a>

Use this code:
<div style="background:url(http://i49.tinypic.com/19p9ad.jpg);width:300px;height:200px;">
<img src="http://i49.tinypic.com/ol2tg.png" width="300" height="200"/><span style="float:left;color:white;margin-top:-200px;"> © Your_Blog</span></div>

Try saving the image below (protected by the CSS method):


© Your_Blog

NOTE: Remember to change the width and height attributes according to the image you are using (at four places in the code above). Also the margin-top attribute should be equal to the height of the image.

The above image is immune against these methods:
1. Right click and "Save Image As..." or "View Background Image"; because the original image is being used as a background image (by CSS) and on top of it another TRANSPARENT image is being used [code highlighted in BLUE], so if anyone tries to save this image (or copy the image address) he will be surprised to see a blank image instead of the one he actually wanted.

2. The image will not be indexed by Google, so it will NOT appear in Google Image Search.

But, of course you can get it from the page source. (so read the next method)

METHOD #1 + Method #2 = Best Protection Method
So presently try a combination of the CSS method and HTML encryption described above, to show & protect your images on the web.

So finally, after HTML encryption of the code from METHOD #2, we get this code:
<Script Language='Javascript'>
<!--
document.write(unescape('%3C%63%65%6E%74%65%72%3E%0A%3C%64%69%76%20%73%74%79%6C%65%3D%22%62%61%63%6B%67%72%6F%75%6E%64%3A%75%72%6C%28%68%74%74%70%3A%2F%2F%69%34%39%2E%74%69%6E%79%70%69%63%2E%63%6F%6D%2F%31%39%70%39%61%64%2E%6A%70%67%29%3B%77%69%64%74%68%3A%33%30%30%70%78%3B%68%65%69%67%68%74%3A%32%30%30%70%78%3B%22%3E%0A%3C%69%6D%67%20%73%72%63%3D%22%68%74%74%70%3A%2F%2F%69%34%39%2E%74%69%6E%79%70%69%63%2E%63%6F%6D%2F%6F%6C%32%74%67%2E%70%6E%67%22%20%77%69%64%74%68%3D%22%33%30%30%22%20%68%65%69%67%68%74%3D%22%32%30%30%22%2F%3E%0A%3C%73%70%61%6E%20%73%74%79%6C%65%3D%22%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%20%6D%61%72%67%69%6E%2D%74%6F%70%3A%20%2D%32%30%30%70%78%3B%22%3E%20%A9%20%59%6F%75%72%5F%42%6C%6F%67%3C%2F%73%70%61%6E%3E%0A%3C%2F%64%69%76%3E%0A%3C%2F%63%65%6E%74%65%72%3E'));
//-->
</Script>

Now this code has all the benefits of METHOD #2 and moreover the image address is also not visible in the Page Source.

Prevent your images from appearing in Search Engine Image search (or simply Google Image Search):
Use this meta tag in the <head> region of your template:
<meta name="robots" content="noimageindex"></meta>


Finally, read some more tricks to "protect your images" and "why you CANNOT protect your images" !!!

Thursday, March 25, 2010

Map Hightlight with Jquery

<html>
<head>

<script type="text/javascript" src="http://davidlynch.org/js/maphilight/docs/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>

<script>$(function() {
        $('.map').maphilight();
    });</script>
</head>
<body>
<img src="images/map_AUS_img.gif"  class="map"   Width="317" Height="247" UseMap="#map_AUS" />

<MAP NAME="map_AUS">
<AREA SHAPE="POLY" COORDS="104,147,105,31,101,30,97,26,92,27,88,28,86,30,84,31,82,33,81,35,80,37,80,40,79,41,77,41,74,39,73,42,74,43,74,45,73,45,72,45,69,44,67,45,65,48,65,52,65,54,58,61,53,64,48,64,43,66,40,68,36,69,33,68,29,69,17,78,16,79,15,78,12,78,11,83,12,85,12,89,10,92,11,97,14,102,14,103,13,104,11,102,8,104,10,109,15,115,15,121,17,121,18,125,18,127,19,129,21,137,23,143,25,147,24,154,24,158,21,162,27,166,30,169,32,170,34,169,40,170,45,166,48,166,52,162,54,162,60,161,68,161,73,161,77,158,78,155,83,153,86,151,89,149,94,149,101,148,104,147,104,147" href="#">
<AREA SHAPE="POLY" COORDS="162,105,104,105,105,31,108,31,112,32,111,30,110,28,112,23,114,19,117,16,121,14,126,14,129,12,125,9,119,12,116,12,115,8,118,7,127,8,134,9,140,12,145,14,149,14,153,12,155,14,156,19,152,22,151,23,154,24,155,27,154,27,151,26,149,28,149,30,150,33,153,35,153,36,154,38,156,38,157,36,163,41" href="#">
<AREA SHAPE="POLY" COORDS="236,123,184,123,183,105,162,105,163,41,167,44,171,42,172,47,175,49,180,49,181,45,184,42,185,35,186,28,185,19,186,14,188,11,188,7,191,5,193,9,194,12,197,16,198,24,200,27,204,28,208,30,208,35,210,39,212,45,213,51,215,56,228,64,233,72,234,77,235,79,238,78,240,79,243,80,242,86,251,95,254,98,257,96,259,98,257,101,257,105,256,112,258,113,258,117,258,119,254,119,252,123,249,124,247,125,247,123,243,122,241,121,238,121" href="#">
<AREA SHAPE="POLY" COORDS="183,194,183,105,104,105,104,146,105,146,108,144,112,143,122,144,125,146,133,148,137,148,138,151,140,152,139,154,141,156,144,160,146,163,146,167,147,169,149,169,151,166,155,163,157,159,158,157,162,154,162,159,161,161,160,163,159,167,156,170,154,170,156,172,160,171,152,175,155,177,161,178,164,176,166,175,168,173,171,175,174,179,174,183,173,185,175,188,178,192,181,195" href="#">
<AREA SHAPE="POLY" COORDS="236,188,238,181,239,176,241,172,242,167,244,161,247,156,253,151,253,147,255,143,256,135,257,130,258,127,259,125,259,118,254,119,252,123,249,124,247,125,247,123,245,123,242,123,240,121,238,121,236,123,183,123,183,166,187,166,190,167,191,170,195,170,200,175,205,179,209,177,212,177,213,179,218,179,220,177,224,177,224,179,226,181,228,185,233,187" href="#">
<AREA SHAPE="POLY" COORDS="183,194,190,196,196,198,199,198,204,193,206,192,206,195,206,196,215,201,219,197,226,192,233,191,237,189,229,185,226,181,223,178,220,177,218,178,214,179,211,177,208,178,204,178,201,175,196,171,192,170,190,169,188,167,183,165" href="#">
<AREA SHAPE="POLY" COORDS="206,212,212,216,218,217,224,214,227,216,228,220,228,226,226,226,226,230,224,231,220,234,218,238,212,236,207,228,208,226,205,221,205,217,205,213" href="#">
</MAP>
</body>

Free Useful GUI iconsets.......Download too!!

Icons are everywhere in a website and their primary purpose of guiding and giving out information to visitors is a highly important one. Other than words themselves, these little graphics within a website that tells you how you can move to the next page, cancel a transaction, checkout the cart and the likes, basically the entire navigation. In a general sense, they act as symbols that allow easier and smoother communication between the webpage and the person interacting with it.
Depending on the web context, icons should be designed in a manner that are pleasing to the eyes, and most importantly, communicate what it is suppose to communicate. Here’s a showcase of 40 Free and Useful Icon Sets for your reference. Full list after jump.

Function Icon Set
128 Icons, they are only available in 48×48px. [via wefunction | Download]

Onebit Free Icon Set
A total of 50 icons. These icons are free to use in any kind of project unlimited times .[via Icojoy | Download]

Onebit Free Icon Set 2
Total of 30 icons, 48×48 in PNG format. [via Icojoy | Download]

WP WooThemes Ultimate Icon Set
The free download contains all 79 icons, sized at 256×256 pixels and available in both PNG and GIF formats. [via WooThemes | Download]

SEM Labs Web Blog Icon Pack
48x 48 icons for use on the front and back-end of the site released under the Creative Commons License. [via semlabs | Download]

Bright!
This 148-icon set contains all crisp-shaped icons that are designed for wide use in web applications, multimedia and software.[via iconeden | Download]

Milky
The Milky set contains more than 131 icons primarily colored in green, giving an eye-pleasant look and prominent display on either dark or bright backgrounds. [via iconeden | Download]

Iconza Icons
Collection of free icons that can be colored and reduced in size to your taste. [via Iconza| Download]

Basic Set
42 high quality icons for your web application, software or GUI design. Comes in various sizes of 64×64, 48×48, 32×32 & 16×16. [via prokofusha | Download]

MinIcons [via kyo-tux | Download]

Coquette Icons Set
Free icon set contains 50 high quality, free icons in these sizes: 16×16px, 32×32px, 48×48px, 64×64px and 128×128px and 32-bit transparency PNG file format. [via dryicons | Download]

Coquette Icons Set 2
Improved version of one of DryIcons’ most downloaded and most popular free icons sets. [via dryicons | Download]

Dropline Nuovo [Download]
nuovo
Developers Icons
105 icons (32×32) for your toolbar or anything. Comes in .png, .ICO, .ICNS, .iContainer. [via Sekkyumu | Download]

Circular Icons A themed collection of 100+ 16×16 icons designed by Ben Gillbank, licensed under the Creative Commons Attribution 2.5 License. [via Pro Theme Design | Download]

Web Application Icons Set
20 icons designed specially for web applications, Free Web Application Icons Set is completely Free for both personal and commercial projects in any way you like. [via Webappers | Download]

Mini and Pixel Icons

If large and silky smooth icons aren’t the style you are looking for, how about simple, mini and pixelated one. Such icons can save significant amount of space for your website. Did we also mention their are light in filesize too?
Twotiny- Two icons setsfor websites and web applications. [Download]

Twotiny Expansion Set [Download]

Icons
A free set of over 250 18×18 pixel icons. Each icon was carefully created one pixel at a time using only whole value hexadecimal shades of grey. [via Paul Armstrong | Download]

Tango Icon Library
The Tango icon library contains a basic set of icons for the most common usage. To make it easier for a developer to find an appropriate icon for their application a number of aids are there to help. [via Tango | Download]

Mini Icons 2
113 10×10 greyscale icons in .gif format. [via brandspankingnew | Download]
mini icons 2
Mini Pixel Icons
320 icons (available in various color theme) for general web design such as: blog themes, forums, eCommerce sites, and CMS application. [via Icondock | Download]

Web Social Icons
30 free web social icons, great for your website and blog. [via seanau | Download]

Microformats
These icons can be used to depict various microformats in webpages or on the desktop.
microformats
512 Pixel LED Icon Set
Designed for web designers/developers by Marcis Gasuns. [via Led24 | Download]

Iconjoy Free Web Development Icons- These icons are free to use in any kind of project unlimited times.
Set #1 [Download]

Set #4 [Download]

Greyscale
40 greyscale icons which each fit into a 34 x 34 pixel area. [via e-lusion | Download]
greyscale
FamFamFam Icons
Silk [Download]

Mini"Mini" is a set of 144 GIF icons available for free use for any purpose. [Download]
famfamfam mini
Flags
247 icons in GIF and PNG formats representing most countries in the world as small pixel icons. [Download]
famfamfam flags
Splashy Icons
470 splashy icons. [Download]

Bitcons
Mini-pixel icon set (16×16 pixels) containing 91 121 individual icons for various subjects. [via somerandomdude | Download]

Bullet Madness
A list of 200 bullets, arrows and icons uploaded by stylegala users.
bulletmadness
Minimalist Pixel Icon Set
[via nclud | Download]
nclud
Fugue
2,225 icons are included in PNG format (16×16 pixel). [via pinvoke | Download]
fugue
Sizcons
Comes in 2 different format: 16×16 version and a 12×12 version. [via randomjabber | Download]
sizecons
Social Media Icon Pack
This icon set consists of 30 (16×16) finely crafted social media icons. They are free to use non-commercially. [via Komodo Media | Download]
komodo
Sweetie
2 sets of cute and clear icons to use in your nifty web application, respectively Sweetie BasePack and Sweetie WebCommunication. [via sublink]
sweetie
Vaga
60, semi-transparent .png icons (16 x 16) ready to use and available for free download. [via tenbytwenty | Download]
vaga

Sunday, February 28, 2010

Professional Portfolio website

What makes for a good personal portfolio website?

1. Logo

Your logo is usually the first thing a user sees. In the Western world, we read from left to right, top to bottom, so it makes sense to put your logo in the top left of your website so that users can immediately identify who owns the website.
It doesn’t necessarily have to be your name, but if you’re trying to promote yourself online, then it’s a good idea to go by your name. And always link your logo to your home page. It’s a common convention that users expect online.
Logo11 in 10 Steps To The Perfect Portfolio Website
Mohit goes by the alias of CSS Jockey.
Logo21 in 10 Steps To The Perfect Portfolio Website
Jason Reed uses a signature-style logo of his name.

2. Tagline

Once the user sees who owns the website, they’ll want to know what it is you do. This is where you explain what you do with a tagline. Your tagline should be short and snappy, summarizing what you do.
Things to ask yourself when writing your tagline:
  • What are you? A designer? A writer? A developer?
  • What do you do? Design websites? Develop games?
  • Where are you from? Country? City?
  • Are you a freelancer or do you work for a studio? Are you looking for work?
Tag2 in 10 Steps To The Perfect Portfolio Website
Sarah Longnecker makes it clear that she puts together videos and is good at it.

3. Portfolio

This is a personal portfolio website after all, so your portfolio will determine whether the website is interesting or not. People will want to see your previous work to decide whether you’re good or not and for general interest, to see what you’ve been up to in the past.
Depending on what you do, your portfolio should contain big high-quality images, clearly accessible to the user. Always include a link to the live version of the website you worked on, and link your screenshot to the live version (another common convention that people expect). Include a short description for each project, including the different skills that you needed to complete the project.
It’s never a bad idea to get a testimonial from a client. Your visitors might also be interested in the stages of development for your projects and how you arrived at the final outcome.
Portfolio1 in 10 Steps To The Perfect Portfolio Website
Leigh Taylor displays nice clear screenshots of previous work and indicates what software was used during development.

4. Services

Your tagline summed up what you do, but you’ll want to go into a bit more detail here about each service that you offer. You can’t expect potential clients to guess what you do based on your portfolio, and you don’t want to leave them wondering whether you offer a particular service or not.
Make it clear, and break it down: Web design, development, video, copywriting, branding, etc. You may want to be even more specific: corporate branding, church website design, Flash banner ads and so on.
Services1 in 10 Steps To The Perfect Portfolio Website
Chris Spooner clearly indicates the services he offers for both print and Web.

5. About me

It’s all about you. Let people see the man or woman behind the mask (i.e. website). Share your background, where you came from, how many years you’ve been in the business, etc. The more details you give, the better your users can form a bond and build trust with you.
If you’re not camera-shy, show a picture of yourself. This will give potential clients peace of mind by allowing them to see who they’re dealing with, and it adds an element of trust.
Don’t be afraid to show off your awards and recognition here. You want people to know you’re good at what you do.
About1 in 10 Steps To The Perfect Portfolio Website
Chikezie Ejiasi shows us a photo of himself and even lets us know how to pronounce his name.

6. Contact

This is one of the most important elements of a portfolio website but is often hidden or even neglected. A potential client has browsed your website, is impressed with your portfolio and can see who you are. Now they want to hire you.
Your contact information should be obvious and easy to access; don’t hide it in the footer. Let people know they can contact you for a quote or a chat. Use a form to make it easier for users to contact you (so that they don’t have to take down your email address and then open up their email manager). A form also allows you to ask for specific information, such as name, email address, website URL, details of inquiry.
Contact1 in 10 Steps To The Perfect Portfolio Website
Stuart Johnston offers clear contact details throughout his website but also provides an easy-to-use contact form.

7. Blog

A blog is always a good idea. Blog about your area of expertise; show you know what you’re talking about. It will help promote you and prevent your website from lying static.
Let people follow you by subscribing to an RSS feed, and show off your most popular blog posts to new readers.
Be sure to enable comments for feedback. Don’t make users register to add a comment to your blog, and don’t use anti-spam Captcha software, which only turns people off from commenting. There are plenty of anti-spam plug-ins available that don’t require users to do extra work.
Blog1 in 10 Steps To The Perfect Portfolio Website
Chris Wallace uses his blog about Web design-related topics to help out other people in the industry and to engage in discussion.

8. Call to action

Ask yourself what you want to get out of your personal portfolio website. Do you want to be hired? Attract more blog readers? Maybe you just want people to know who you are.
Each page should have a call to action, a “Next step.” The best way to accomplish this is with a “call to action” button that is clear and stands out from the rest of the page. Link it to your blog, portfolio or contact page, and use appropriate language (e.g. “Hire me,” “Request a quote,” “View my portfolio”).
Call1 in 10 Steps To The Perfect Portfolio Website
Matthew Brown’s call to action is a contrasting button that stands out from the rest of the website.

9. Use social networking websites

Now that people have an interest in you and your work, encourage them to follow you on other websites. Make it clear that they can follow you on Twitter, Facebook, Flickr, LinkedIn, etc. Make the most of social networks and have a group of friends to call on if needed.
Twitter2 in 10 Steps To The Perfect Portfolio Website
Sam Brown offers clear links to other websites he uses, allowing us to stalk him.

10. Language and communication

How you conduct yourself is important. Remember, it’s a personal portfolio website, so be personal. You don’t need to sound like a corporate brand with no emotion. Be friendly and personal, but also clear and precise; don’t ramble. Once you write all the text for your website, read it again and see if you can cut it in half.
Language1 in 10 Steps To The Perfect Portfolio Website
Marius Roosendaal uses a relaxed and friendly tone on his website.

Other tips:

  • Let people know where you’re from. This is always interesting to know, and some clients prefer to work with people nearby or in the same time zone.
  • Validation is important, especially for Web designers. If you’re going to be building professional websites for clients, then your own website’s code should at least be valid.
  • Link images, not just text. Most people will click on images, expecting them to point somewhere.
  • If you don’t have any previous clients for your portfolio, create a WordPress theme, design an icon set, develop a Twitter mashup, etc. You have a lot of possibilities, and there’s a big difference between having one project to show in your portfolio and having none.

40+ beautiful personal portfolio websites

Robbie Manson
Rob in 10 Steps To The Perfect Portfolio Website
F. Claire Scroggins
Van in 10 Steps To The Perfect Portfolio Website
Timothy van Sas
Incg in 10 Steps To The Perfect Portfolio Website
Ole Martin Kristiansen
Ole in 10 Steps To The Perfect Portfolio Website
Maru Velázquez
Bib in 10 Steps To The Perfect Portfolio Website
Chikezie Ejiasi
Nine in 10 Steps To The Perfect Portfolio Website
Miki Mottes (Flash)
Miki in 10 Steps To The Perfect Portfolio Website
Jakub Krcmar
Jakub in 10 Steps To The Perfect Portfolio Website
Mopa
Mopa in 10 Steps To The Perfect Portfolio Website
Chris J. Lee
Lee in 10 Steps To The Perfect Portfolio Website
Pedro Lamin
Tra in 10 Steps To The Perfect Portfolio Website
Cartonblanc (Flash)
Carton in 10 Steps To The Perfect Portfolio Website
Leigh Taylor
Leigh in 10 Steps To The Perfect Portfolio Website
Alex Coleman
Snap-54 in 10 Steps To The Perfect Portfolio Website
Sarah Longnecker
Snap-55 in 10 Steps To The Perfect Portfolio Website
Toby Powell
Snap-56 in 10 Steps To The Perfect Portfolio Website
Jay Hafling
Snap-57 in 10 Steps To The Perfect Portfolio Website
Elliot Jay Stocks
Snap-110 in 10 Steps To The Perfect Portfolio Website
Tony Geer
Snap-21 in 10 Steps To The Perfect Portfolio Website
Marius Roosendaal
Snap-31 in 10 Steps To The Perfect Portfolio Website
Ryan O’Rourke
Snap-41 in 10 Steps To The Perfect Portfolio Website
<img /> is everything (Phil Thompson)
Snap-51 in 10 Steps To The Perfect Portfolio Website
Leigh Taylor
Snap-61 in 10 Steps To The Perfect Portfolio Website
Design Me (Marek Levak)
Snap-81 in 10 Steps To The Perfect Portfolio Website
Matt Dempsey
Snap-91 in 10 Steps To The Perfect Portfolio Website
Brad Candullo
Snap-102 in 10 Steps To The Perfect Portfolio Website
Andre Augusto
Snap-111 in 10 Steps To The Perfect Portfolio Website
Rob Hawkes
Snap-121 in 10 Steps To The Perfect Portfolio Website
Magnus Jepson
Snap-131 in 10 Steps To The Perfect Portfolio Website
Corking Design (Daniel Cork)
Snap-141 in 10 Steps To The Perfect Portfolio Website
Evan Eckard
Snap-151 in 10 Steps To The Perfect Portfolio Website
Alexandru Cohaniuc
Snap-161 in 10 Steps To The Perfect Portfolio Website
Miles Dowsett
Snap-171 in 10 Steps To The Perfect Portfolio Website
Andrew Bradshaw
Snap-181 in 10 Steps To The Perfect Portfolio Website
Shannon Moeller
Snap-191 in 10 Steps To The Perfect Portfolio Website
Vitor Louranco
Snap-201 in 10 Steps To The Perfect Portfolio Website
Mark Dearman
Snap-211 in 10 Steps To The Perfect Portfolio Website
Wong Yeng Kit
Snap-22 in 10 Steps To The Perfect Portfolio Website
Chris Wallace
Snap-23 in 10 Steps To The Perfect Portfolio Website
Spoon Graphics (Chris Spooner)
Snap-24 in 10 Steps To The Perfect Portfolio Website
Fabiano Meneghetti
Snap-25 in 10 Steps To The Perfect Portfolio Website
Mark Wallis
Snap-26 in 10 Steps To The Perfect Portfolio Website
Chris Morris
Snap-27 in 10 Steps To The Perfect Portfolio Website
Paiko (Heiko Brömmelstrote)
Snap-28 in 10 Steps To The Perfect Portfolio Website
Conan Robbins
Snap-29 in 10 Steps To The Perfect Portfolio Website
Henry Jones
Snap-301 in 10 Steps To The Perfect Portfolio Website
Winnie Lim
Snap-311 in 10 Steps To The Perfect Portfolio Website
Greg One (Gregoire Hoin)
Snap-32 in 10 Steps To The Perfect Portfolio Website
Mark Hadley
Snap-33 in 10 Steps To The Perfect Portfolio Website
David Appleyard
Snap-341 in 10 Steps To The Perfect Portfolio Website
Design Moves Me (Roy Vergara)
Snap-35 in 10 Steps To The Perfect Portfolio Website
Brian Murchison
Snap-36 in 10 Steps To The Perfect Portfolio Website
Mike Precious
Snap-37 in 10 Steps To The Perfect Portfolio Website
Digital Deceptions (Duncan)
Snap-38 in 10 Steps To The Perfect Portfolio Website
Chirag Solanki
Snap-39 in 10 Steps To The Perfect Portfolio Website
Jason Reed
Snap-40 in 10 Steps To The Perfect Portfolio Website
Johnston North (Stuart Johnston)
Snap-411 in 10 Steps To The Perfect Portfolio Website
Penflare Designs (Sean Farrell)
Snap-42 in 10 Steps To The Perfect Portfolio Website
Nine Lion (Chikezie Ejiasi)
Snap-43 in 10 Steps To The Perfect Portfolio Website
Brian Wilkins
Snap-44 in 10 Steps To The Perfect Portfolio Website
Jason Santa Maria
Snap-45 in 10 Steps To The Perfect Portfolio Website
David Hellmann
Snap-46 in 10 Steps To The Perfect Portfolio Website
Guillaume Pacheco
Snap-471 in 10 Steps To The Perfect Portfolio Website
Dave Lam
Snap-48 in 10 Steps To The Perfect Portfolio Website
Luke Stevens
Snap-49 in 10 Steps To The Perfect Portfolio Website
James Lai
Snap-501 in 10 Steps To The Perfect Portfolio Website
Alessandro Cavallo
Snap-511 in 10 Steps To The Perfect Portfolio Website
CSS Jockey (Mohit)
Snap-521 in 10 Steps To The Perfect Portfolio Website
Kerry Nehil
Snap-53 in 10 Steps To The Perfect Portfolio Website
Darren Hoyt
Snap-58 in 10 Steps To The Perfect Portfolio Website
Matthew Brown
Snap-59 in 10 Steps To The Perfect Portfolio Website
Digital Mash (Rob Morris)
Snap-60 in 10 Steps To The Perfect Portfolio Website
The Things We Make (Mike Kus)
Snap-611 in 10 Steps To The Perfect Portfolio Website
Ed Merritt
Snap-62 in 10 Steps To The Perfect Portfolio Website