How can I showcase a working example of my past web development work, without linking to the constantly changing live site?

Question

Whenever I design a website, I think it's useful to not only show screen captures but also coding abilities.

Unfortunately, most of the time, clients end up editing websites themselves and if they're not paying me for maintenance, the site will lose some of its appeal which doesn't make me too fond of inserting URLs in my portfolio.

1. Are there any best practices to showcase web design/UI (that is actually working and not a simple screen capture)?

2. Do you keep an offline copy to show clients?

3. How do you link it to your existing website (Behance or other)?

Answer 1

Well there are several things you can do but I think personally a site is best viewed at its desired state, which is a site. If you own your own domain with hosting I really don't see why you couldn't sub-domain your sites (such as clientproject.emilie.com) if you are worried that the finished project to the client will be altered. Just add a basic screenshot like some do based on desktop, tablet, and mobile then provide a live link to the sub-domain.

Some other options since there are tons of different types of mobile sites is if you have an old phone and are a regular phone-geek (one that buys the latest every time) load a few sites on the phone as a demo and hand it to a possible client. Same rule could apply for a tablet.

If you can't subdomain, just take a laptop and make sure your laptop has something like XAMPP (everything), MAMP (mac), or WAMP (Windows) to run the site of you dont know how to install Apache, PHP, SQL, etc.

Also, dont be afraid to provide details. If you designed the site then tell them, I designed the site but I had someone else code it. That option works well if you are worried about using the live site but only have the screenshot.

Answer 2

Clients modifying your work isn't the only way it can disappear, sometimes the organization goes away all together or maybe you've done multiple designs for the same site.

In the past, I just linked to the archived version that was nothing more than a recreation of the front page with all of the links disabled. I don't feel that gives a very good user experience, though. Loading it in an iframe would allow you to give a little bit of context as to what the design was for.

The above design (which is still a work in progress) is running on a web server inside a virtual machine on my desktop machine. If I needed to present it to a client, I could certainly transfer it to my laptop. This might not be the best option for most folks, but it works well enough for a designer/developer like myself.

Unless you're also using it to show off your copywriting abilities, it may be worth replacing the copy used in the design with placeholder text (eg. lipsum).

Answer 3

1. Best practices - I don't know, but maybe you could look at the Wayback Machine. More about that below.

2. Offline copies - Not really, though sometimes I like to use Safari's command File > Save As... Save as type: Web Archives. I once gave such a file to someone and they complained they couldn't open it, though I don't know how hard they tried. Maybe it is a Safari thing.

3. Link from existing web - I haven't tried this, but the Wayback Machine links should work fine.

The Wayback Machine is at http://archive.org/web/. I have used it on web pages I created, though I am not a proper web developer.

There are some web development technologies that break parts of an archived site when retrieved. I often see broken images in the archived sites.

I believe there is a way to ask it to archive something 'now' or as soon as possible, though I haven't tried that out. I don't know how long it waits between checking pages if left to its own devices.

This is fun: http://web.archive.org/web/19961219202222/http://www.apple.com/