Alex Jacque : Blaahg » Your Portfolio Online

Your Portfolio Online

Presentation & Handout

Presentation Slides (PDF 13.9 MB)
Handout (PDF 193 KB)

Primer

An online portfolio is really one of the more important things – more so than a nicely designed resume – you can have as an artist. Your portfolio is very likely to be the very first thing people see when they try to find information about you, before any other means of contact. Your online portfolio is a tool to persuade potential clients into buying into your work or services and as such it’s important to showcase your work in a visually pleasing and well thought out manner.

The internet is so ingrained within the world’s culture that ignoring it as a medium to showcase your work is borderline negligent.

What are my options when it comes to publishing for the web?

There are many options to choose from when putting your work on the web. Here are just a few of the more common options you’d come across:

IFS

This is your personal webspace provided to you by the university. Your web URL would look something like www.umich.edu/~uniquename. Cheap it is, but professional it is not. You can not use a personal domain name with this option. No fancy stuff besides javascript works on IFS. After you graduate this space disappears, unless you pay a yearly fee to keep it.

MobileMe

This is a slightly more professional looking alternative to IFS with a good deal of hand- holding to go along with it. You can use a personal domain name with this option, so you can have www.yourname.com. With MobileMe you can create your website in iWeb and publish it by clicking one button. Using iWeb is super easy, but everything made in iWeb tends to look like everything else made in iWeb. MobileMe will run you $99 a year. Buying a custom domain name will run you roughly $7-10 a year from many of the major companies that sell domains (registrars). Again, nothing fancy works on MobileMe besides some Javascript. You don’t have to use iWeb with MobileMe, you can use other software to create a wholly custom site hosted on MobileMe.

Personal Hosting

The best way to get the most personalization out of your options is to buy a domain name from a registrar, and hosting from a web host. A good number of hosts will allow you to pick a free domain name when you sign up for one of their hosting plans. This option allows you to use almost every different type of web design software out there to build your site, allowing for more freedom and creativity. Plans and price ranges for a year of hosting vary widely, but expect to pay in the neighborhood of $100/year give or take. For the most part, anything you’d make will be supported on a personal web host.

What kind workflow is involved with these hosting options?

IFS

Design your site in something like iWeb or Dreamweaver (or hand code if you’re at that level). Upload it via an FTP client (Dreamweaver has one built in), or through the university’s IFS navigator website, mfile.umich.edu.

MobileMe

Same deal as with IFS, design it in whatever software you’ve got. Upload it – both iWeb and Dreamweaver can do this automatically – and that’s it. If you want to use a custom domain, you add it in your settings page at me.com.

Custom Hosting and a Custom Domain

This is a little more involved to setup, but well worth it when sending possible employers and clients to your website. The potential for customization is boundless. There are lots of options for buying hosting and domain names; personally I use DreamHost and GoDaddy, respectively, and have never had a problem. For the sake of saving space and being as succinct as possible without loss of detail, I’ll outline the steps for using DreamHost alone (but rest assured, it’s very similar across the board for the other hosts and registrars). Here’s the process:

1) Buy some hosting.
DreamHost costs around $120 a year, but one can go month-to-month as well. I setup a promotional code that saves you $50 on a new yearly billed hosting plan if you end up using DreamHost, bringing the total cost to a very affordable $70. I recommend this particular host, but hey, shop around, see what kind of deals you can find. The promo code is:

UMIP

2) Buy a domain.
If you had already setup a new account with DreamHost, you were able to get a free personal domain already, no need to register one with a registrar. Else wise, use a company like GoDaddy to buy a domain, and make sure to look for coupon and promo codes before finalizing a purchase.

3) Build your website.
Create a custom website from scratch, or use some existing web software to build upon and customize.

Website Creation Software

iWeb is probably the easiest web content creation software that you’ll chance upon. With iWeb, the name of the game is drag-and-drop. It’s really as easy as that. Works great in tandem with Apple’s MobileMe service (not surprisingly). With that said, iWeb is quite limiting in the variety of layouts and styling you can do. Things made in iWeb tend to look similar to most other things made in iWeb.

Dreamweaver is most likely the tool you’ll be second most comfortable using. With Dreamweaver you can create your pages using the drag-and-drop WYSIWYG (what you see is what you get) method, or by getting into the code itself. A benefit of Dreamweaver is that you can create things by code, then click a tab and see how it looks rendered out, or alternatively, drag and drop items onto the canvas, then click a tab and see how the code works. You can also create templates that allow you to create many pages quickly within the same layout. Dreamweaver features an integrated FTP client and syntax coloring to help with coding by hand.

The more advanced might want to give something like Coda a whirl. It’s got all the organizational perks of Dreamweaver while catering to those who prefer to hand-code their soft- ware. It has a robust preview system so you can see how your physical design looks while you work on your code. A very nice FTP client is built in. Coda also features the stan- dard (and helpful) syntax coloring to help when coding. It costs $99 and has a 15-day trial period, so you can try it out.

Another option for the more adept is TextMate, which is just simply a really advanced text editor. It is very light on the pretty visuals, but what it lacks in visual beauty it more than makes up in underlying power and versatility. Syntax color- ing is de rigueur of course. The option to change the color palette of the application to best suit one’s eyes is available (and really handy). TextMate costs $60 and has a 30 day trial.

Content Management System (CMS) Recommendations

What is a CMS? A content management system is just that, a system to manage one’s content. Simply put, it’s basically a web application that aids in publishing and archiving of your creations, be they text, images, audio, or video. The underlying framework is set in place already and all one has to do is insert content and style the site. It is not necessary to use a CMS to build a successful portfolio, but in the right cases, it can help make updating in the future much quicker and easier.

Indexhibit is a free, super lightweight CMS well suited for portfolios. Easy to install, easy to add your work to, but not super suited for adding lots of text. Very easy to style, and there are lots of examples out there to get inspiration from. This is a very minimalist solution; it’s decently trendy in designer/artist websites at the moment.

Wordpress is a free, ubiquitous and open source CMS that many web hosts (including DreamHost) offer one-click installs that guide you through the installation procedure and require you to do actually very little. Wordpress is mainly used as a blog but can be adapted to fit a portfolio very easily. Many themes are available to use, or you can create your own. Wordpress also offers the ability to use plug-ins, of which there are thousands available for download.

Textpattern is another free, open source and extensible CMS. Pretty similar to Word- press, but probably less suitable for portfolios. That is to say though that an enterprising young soul couldn’t figure out a way to make it useful for such an endeavour.

Best Practices

Creating Code:

If you can, writing HTML by hand is the best way. You’ll know what every line is doing, and how to best change and update your existing code if you run into any problems or need to update down the road (you will). If you can’t then it’s no big deal, but try to get under the hood, if just to take a peek, and try to make sense of what the code is doing.

I’ve always thought that the best way to better learn how to code in any language is to set small achievable goals and break every task down to it’s most basic functions. After you know how to achieve a few small things, you can begin to string them together to create larger and more robust designs.

Uploading:

Fugu is a free, open source FTP client originating from within University of Michigan. It’s very simple to operate with drag and drop functionality. Although a major issue I find is that dragging in folders that contain folders is problematic.

Transmit is a FTP / SFTP client. I personally use this FTP client. It’s very similar to Fugu, but more polished and has more features. It’s $30.

Dreamweaver has a pretty great FTP client built-in, which is easy to configure and connect to your site.

MFile is the university’s online uploading tool for only the university’s own IFS service.

Other options include Fetch, Cyberduck, and FileZilla.

Figuring out CSS:

CSS is a very powerful and very simple system of providing rules to how HTML elements (text, images, paragraphs, tables, divs, etc) are positioned, styled, and generally displayed. Just knowing all the possible attributes you can assign to a particular block of text or element is one of the harder aspects to CSS. A good way to figure out what is possible with CSS is to look at the source code to websites that use CSS heavily. One of the best places to do this, is a website called CSSZenGarden. On CSSZenGarden, each and every design is comprised of the exact same HTML and the only thing that differs between each design is the CSS file associated with that particular layout.

The most important thing to remember…

Do not wait to till the last minute to start your portfolio; Rome was not built in a day and neither was any good portfolio. Give yourself plenty of time to figure things out and anticipate for the roadblocks you will encounter.