10 best practice tips for your research/portfolio website

I just ran a 2 hour workshop for the Media and Arts Technology Doctoral Training Centre using a variant of the Spectroscope Facilitation method during which 10 people showed and discussed their researcher / artist / technologist portfolio websites and gave each other structured feedback. After the show & tell session, each of the participants went home with 27 prioritised ‘todo’ advisory notes written by other participants to improve their own websites. However, one of the most useful outcomes – that I’m going to share here – was a set of 10 best-practice tips derived from each participant writing down what they really liked about each other’s sites.

These are neither comprehensive, nor all compatible with one another – and I certainly could take much of this advice to improve my own website, but anyone thinking of setting up and academic / personal / portfolio site might find these useful. The most important question for anyone to address with their website was to ask who and what is the website for. Is it a CV to convince potential employers in academia, or to appeal to ad agencies, or to attract artistic commissions? Once these central questions were answered, the following tips could be used to improve each site.

1. Prioritise clarity and coherence.
   • Make a clear statement of who you are and what you do in plain language – right up front.
   • What is the website for? If it’s basically a CV, use the word ‘CV’. If it’s a portfolio, use the word ‘portfolio’. Shape the expectations of the visitor so they know what they’re getting.
   • Add this information to the title/metadata the homepage, so the title bar (and Google’s web crawlers) read e.g. “Name, Job description, Purpose of site”.
   • If you have a lot of projects to show, put a selection of only the best/most targeted to the purpose of the site on the front page.
2. Foreground your main activity/role.
   
   • If you have multiple quite different audiences/purposes in mind for your site, consider making multiple sites.
   • However, it can also be useful to show multiple facets of what you do – if one is a minor activity and the other a major activity, combine and show a richer combined picture.
3. Keep it current.
   • Make sure you can update it easily, reduce friction by choosing technology that you enjoy using.
   • Show what’s upcoming – tell people what you’re doing next.
   • Avoid showing out of date information by e.g. not using temporally-relative wording ‘this year’ etc.
   • Keep your CV rigorously up to date and centralised (i.e. don’t have Linkedin profiles or freelance CVs sitting out of date around the web). A good hack for this is to use a Google Doc that you update regularly – and link to a PDF-downloadable version of it from your website.
4. Show people where to go.
   • Show as many of your menu items as you can all at once – don’t hide menus behind fancy dropdowns or multiple click-throughs.
   • Optimise for ‘fewer clicks’. Try to make everything on the site only one or maximum two clicks away. The most important things must be one click away and immediately visible on the homepage.
5. Get a domain name.
   • Buy your own domain name. It costs almost nothing and it mostly looks more professional.
   • It’s also more future-proof, i.e. if you buy www.myname.com and point it to a wordpress site, or a squarespace site, or a cargocollective site, but then change where you host the site, you can take the domain with you. If you relied on wordpress.com/myname – you’re stuck with wordpress.
   • If you can, use short urls e.g. http://myname.com/about or http://myname.com/project/myproject – this is relatively portable (as above) so you can change which software you use to produce your website without being tied to software-specific page names and urls.
   • It’s good to have your own domain for email (especially if you’re a freelancer – less an issue in academia where people use institutional emails). However, be careful not to use vanity emails like info@myname.com to sign up for core services. Here’s why.
6. Use a nice photo of yourself doing something.
   • It’s good to show something about yourself – but try to show yourself doing something relevant to the style and purpose of your site.
   • You might want to use a widely identifiable gravatar so that your website is visually identifiable with your social media profiles/comments from around the web.
7. Use relevant copyright notices.
   • As long as you’ve created your website, whatever you publish is legally yours whether you add a colophon with a ‘©’ symbol or not. The symbol is just there to advise people on how to use your content.
   • If you are an artist with lots of great visual work – which unscrupulous people love to use without permission – say how you want people to use it.
   • If you want people to spread your work and give you credit, use a license such as the CC-BY – or use the CC0 option if you want to put your work in the Public Domain.
8. Offer alternatives to audiovisual content.
   • A few images work as well as a video, sometimes better.
   • Consider using a simple explanatory animated GIF so people don’t have to download a whole video. ¹
   • Always consider people with low bandwidth, small screens, out of date browsers. Responsive designs are easy these days with lots of great templates available for most website/blogging engines or just HTML5 templates.
9. Enhance your ‘findability’.
   • Add a list of hardware / software / techniques / approaches used for each project. This shows what you can do, and it helps people using Google to find you and what you know about.
   • In general think of your site as a dragnet for people to find you. It’s much better to be found than to go knocking on people’s doors – so think about who do you want to find you.
   • Use analytics – you should know how people see your site, where from, and which pages they visit – it helps you make decisions about how to change and update it.
   • Link to your social media/other platforms from your site and vice versa (linkedin, twitter, github, academia.edu, researchgate, your institutional sites etc.)
10. Show people who you are.
    • It’s amazingly important to care about your web presence these days – make it reflect who you are, what you care about and believe, and make it unique. Of course this also means being critical, self-aware and careful not to project those bits of yourself that might undermine the purpose of your site!
    • Sometimes a web 1.0 site at an address like  http://institutionalname.edu/~yourname is a good way to show who you are – if you’re an academic in engineering or computer science. Go with that, engineering academics who are looking to hire you will recognise you as one of their own.
    • A really beautiful, unique and intriguing image of your work – or a great video or poem can be a wonderful hook into an art or design-focused site. Intrigue people, then reward them with more eye candy and carefully thought through information.
    • Show your network – link to others, make sure to credit all collaborators and link to them, they’ll appreciate it!

These are somewhat general tips. There was also a lot more technical advice in our email thread about this workshop, as well as some advice on which website services might be useful. Some of those links are included below – but any further explanation as to what to do with them is well beyond the scope of this post!

Beginners:

• WordPress – either as a hosted service – or self-hosted on your own server. If self-hosted, beware! It can be tricky to maintain and has had lots of security problems in the past.
• Squarespace – looks easy, but it’s pretty expensive for a simple portfolio/website.

Intermediate/advanced: (thanks to Victor Loux).

• Self-hosted: Kirby, Grav, Pico (file-based, PHP); Jekyll (static, Ruby); Pelican (static, Python);  Indexhibit (admin, PHP). Hugo (static, go). Simple HTML5/CSS – which can be very pretty.
• Services: Carbonmade, Cargo Collective (invite only), Behance (though it’s more of a social network).

Hosting:

• self-hosting: 1&1  (cheap/OK) / Linode (advanced/my host) / Digital Ocean (advanced) / trick.ca (arty/minimal/cheap).
• services: Github Pages (free, can be tricky to set up),

Thanks to Toby Harris, Victor Loux, Daniel Gabana, Jacob Harrison, Julie Freeman, Laurel Pardue, Raphael Kim, and Betül Aksu for presenting their works in progress and giving great feedback.

---

Update 7/18/2016:

Travis Noakes suggests (see the comments section below), using a unifying visual metaphor that brings together your website, your visual presentations and even the binding of your thesis. Travis’ excellent research blog uses the “+” sign to do this and is well worth checking out as a great example of a researcher’s site that integrates his description of his roles and foci with the site’s navigation and visual communication. He also suggests using Google’s Blogger platform for enhanced google juice and ease of use.