semiBad.

Building an Offline Portfolio Site

blog Thursday 6th of August, 2009

I had a sudden (and slightly unexpected) job interview last week, which resulted in the usual portfolio-based panic. Over the weekend, I quickly put together an offline portfolio site, built specifically to be shown on my MacBook during the interview. This turned out to be a far more interesting project than I had expected, so I thought I'd share my process, as well as my thoughts on putting this kind of project together. I'm not saying this sort of portfolio will guarantee you the job of your dreams (let's just say I'm still available for freelance work for the foreseeable future) but I certainly found it a great way to show off my screen-based work.

Why bother?

Obviously, there's a good possibility that you already have a portfolio site which is perfectly usable, which could be Flash-based, running from a CMS, or just Plain Old Semantic HTML. Obviously, these can all be run easily from your local machine, using a MAMP (or WAMP, if you're that way inclined) setup in the case of a dynamic site.

My own reason for creating this from scratch was pretty simple — I don't have a portfolio site set up at the moment. During the process though I discovered a number of other reasons why a designer might want to think about building a separate, local portfolio.

Freedom to design

Anyone working in this industry is more than aware that web design is often about compromise (or concession, depending on the kind of day you're having). Building a site involves constantly bumping up against limitations, which change constantly depending on the project or the user. The breadth of difference between user's typical setups is more pronounced than ever — your site could be viewed on a top-of-the-range cinema display, or an iPhone (or smaller). They could be using a nightly build of a browser, supporting a whole bunch of cutting edge features, or an 8-year-old monstrosity which has it's on own special way of doing things. Fonts are restricted to a small subset of the average designer's usual arsenal — even given techniques such as sIFR, Cufón, and lately real embedded fonts using @font-face, there are still the (significant) limitations of licensing and optimisation. And optimisation is something that needs to take place throughout a site, especially with graphic-heavy layouts, or features which use a lot of client-side scripting.

Designing specifically for a local machine is an eye-opening experience because these issues just fade away. What you're left with is a very 'pure' form of web design — of working with familiar tools like HTML and CSS in a way which is unusually restriction-free. You can spec typefaces without worrying about licenses, or how the more generic choices later in the stack will display for the majority of users. You don't need to worry about the size or compression of your media files or scripts, either — a great opportunity to try out that full-quality photographic background you've always fancied.

Pick a browser, any browser

Designing locally also means that you have complete control over the browser that you'll be displaying in. In most cases, of course, any standards-capable browser should do the trick, so you'll just be working with your usual browser of choice. However, with the leading browsers adding various bits of interesting CSS3 (or proprietary) functionality in their most recent versions, you might want to consider whether there's anything you want to have a go with. You might even want to check out some of the stable nightly builds for some really cutting edge CSS — it's not like we're going to be using this stuff in our day jobs for a while!

Living the standards dream

Really, the main thing that I can recommend about building a local portfolio site like this is that it gives an amazing, eye-opening preview of what web standards is all about. Being able to concentrate purely on design and functionality is a liberating experience — perfect for reminding a jaded designer that this is what web standards is aiming for, taken to its logical conclusion.

Business time

The portfolio site I put together was pretty simple — straight up HTML and CSS, with a little touch of Javascript (SWFObject, to embed some of my animation work). As far as I was concerned, the brief was to quickly put together a layout which was attractive, but completely unobtrusive.

offline portfolio

The index is just a set of unordered lists, dividing my work into categories. I organised the categories and projects by how useful I felt they'd be in the interview itself — making it really simple for me to switch projects and categories around, or add and remove them, next time I need to break out the portfolio. The lists also impose a nice tab order on the links — which will come in handy later. Originally, I also illustrated the front page and set the colour scheme as a reference to the company I was interviewing with — in the example, names (and colour scheme) have been changed to protect the innocent.

offline portfolio: playing cards

The individual pages themselves are simple horizontal arrangements based on the available height of the viewport on my screen, allowing the whole page to scroll sideways. This is the least obtrusive layout I could think of — allowing for pages to contain as many (or as few) items as necessary, and allowing me to move quickly to any item I wanted to talk about during the interview. Some of the more 'complex' layouts feature multiple rows, set to an even three-row grid — these are created using block elements, positioned relatively, and containing smaller, absolutely positioned items (such as the business cards and skate decks shown below).

offline portfolio: semiBad

In these images, you can see the small amounts of CSS3 I've used in the layouts — items are raised from the background using a slight box-shadow, in the same way that this site uses them around images. In the cases of the cards and skate decks, I've used a border-radius to give rounder corners as necessary — the skate decks have slightly different curves on each corner, in order to 'cut out' those images evenly. This keeps the shadows consistent with the shape of the image, although bear in mind that if you use this technique, you should be sure to use a transparent .png for those images — otherwise the background-coloured corners will stick out over the shaped drop shadow. You could probably get around this by placing the image as a background on the element, rather than directly as an image — I chose not to do this as these images are content and should be marked up as such. I also rotated the skate decks by a few degrees using -moz-transform (or -webkit-transform, if you like). If you wanted to take these techniques further, many can be forced onto Internet Explorer by using Microsoft's proprietary CSS filters — Jonathan Snook recently posted a good example dealing with text rotation, for instance.

MAMPing it up

Obviously, if you're a web designer, you probably want to show of some of the sites you've built. Rather than building 'item' pages for these sites, I decided just to link directly to virtual hosts running locally. If you do any development work you may well already be running a MAMP environment, allowing you to run a virtual server locally. I wasn't, as I tend to develop directly onto a live test server, so that my clients can see how work is progressing. OSX comes with a basic MAMP stack set up by default, although sadly it's not really very useful in most cases without a fair bit of fairly in-depth upgrading — the default installation of PHP provided is lacking in several 'must-have' modules such as the GD image processing library.

Fortunately, there is a quick and easy method of setting up a fully-featured development environment — an off-the-shelf application which is usefully (or confusingly, depending on your outlook) also called MAMP. It comes in two flavours, one of which is free. By default, this version only supports a single virtual host — but luckily, there is an excellent step-by-step guide which tells you how to extend this to add as many hosts as possible. This lets you set up local folders as virtual 'domains' (e.g. http://mysite) — which is handy for creating nice, readable URLs from your main portfolio site. It's obviously not a necessary step, especially if your sites don't need the MAMP stack. That said, I like to think that the difference between http://semibad and some godawful monstrosity of a folder reference in the browser bar is the sort of detail that marks you out as the person to hire.

Using the remote

While I was clearing all the reference books and random lidless pens out of my laptop bag in preparation for the interview, I discovered the Apple Remote that came with my Macbook. I have to admit that I'd never used it before, except for maybe a little test run when I unpacked the laptop for the first time. However, I had a niggling worry about how I was going to navigate the portfolio while talking about my work, without getting in the interviewer's face(s) — you never know how many people you're going to be presenting to, or how you're going to be positioned relative to each other. Something I remember reading (or being told) is that a common mistake while showing off a portfolio is to present it to yourself, rather than the interviewer — in this context, I thought the remote could possibly come in handy.

I'll be writing up a separate post dealing with this specifically at some point in the next 24 hours — I couldn't find a lot of information when I looked at the weekend, and I don't want my guide to be stuck at the end of this post. Thanks to the simple nature of my layout, it was quite simple to set up a decent control scheme specific to my site. Up and down moved through the lists of links, and the central button 'clicked', allowing me to quickly navigate to whichever piece of work I was talking about at the time. Bear in mind that if you want to do this, it's obviously really important to set a visual style for your a:active pseudo-elements. Left and right scrolled horizontally around the item pages, although it was a little bit jerky as it was bound to the left and right arrows. If this is something you plan to do, I recommend you factor in a simple bit of javascript to make your scrolling a bit prettier. Finally, the menu button was bound to the virtual domain URL for my portfolio (e.g. http://portfolio) to let me click instantly back to the main menu. I got really lucky that the navigation functions I needed mapped so well to the remote's control, as the site was already complete before I even considered this possibility. If you try this, maybe bear this in mind while creating your layout.

One last point about using the remote — remember that it works on infrared. I've got so used to bluetooth remotes that at one point I was holding the remote under the table, cutting off line-of-sight between the remote and the receiver. In fact, I didn't realise why it had 'mysteriously' stopped working until several hours after the interview. Smooth.

Hope this is of some help to someone — I will definitely be developing my local portfolio site further in the future, and it has already become my favourite method of presenting my work. If you do have a go, let me know how you get on — good luck, hope you get the job you're after!

Comments - 4 so far

Sorry, no comments!

Comments are temporarily disabled while I work out a few issues with a certain canned meat product. Normal service will resume shortly — in the meantime, you can tell me what you reckon on Twitter, or get in touch directly!