The Visual Student

Designing a Better Portfolio Website: Part 2

You’ve read Part 1 of this series. You understand your potential audience, you’ve edited your photos with clear navigation in mind and you’ve professionalized yourself on social media.

You’re feeling inspired and productive. You sit down at your computer, ready to put your work online.

And…uh-oh.

Suddenly, building a website feels as daunting as hand holding a two-second exposure. But don’t despair.

In Part 2 of this series, we’ll discuss how to choose a template, modify it using basic HTML and CSS and add useful plug-ins. According to Placeblogger C.E.O. Lisa Williams, “No journalism student should be intimidated by the process of setting up and managing a website– it is well within your ability, and it can all be learned and practiced before you graduate.” That’s the quote I use on the syllabus of my Web Design for Journalists class.

This is the second of a three-part series on how you can plan, design, build and maintain a successful photojournalism portfolio website. Part 3 discusses trends and techniques for smart portfolio graphic design.

I emulated these elements, but made sure not to copy them wholesale. A website should be uniquely your own. Inspiration saves time.

• Find the Right Template

Most photojournalists rely on a template to leapfrog the steep learning curve involved in building a website from scratch. Unless you’re comfortable with Dreamweaver, HTML and CSS, constructing a website from scratch will be a slog. Luckily, there are a slew of template options from which to choose.

• Free Templates

The intrigue of “free templates” for most photographers is “free.” WordPress, Google’s Blogger, Flavors.me or Tumblr will let you customize and host a portfolio website without paying a cent. Tens of thousands of pre-made designs integrated with a functioning Content Management System (CMS) are nothing to sneeze at either.

WordPress: Twenty-two percent of all new websites going online are built using the WordPress platform. You’re on a WordPress blog right now!

Designer Jeff Hendrickson calls WordPress “a fantastic platform for photographers” in his list of 30 WordPress themes for photographers. It’s a useful list to find a template that hews to your professional needs.

I, on the other hand, despise the WordPress interface. To post the above logo on the front page of The Visual Student, for example, requires an embittering series of seven or eight clicks. They are difficult to customize without a sophisticated understanding of FTP protocol and advanced CSS.

If you’ve never built a website until WordPress, you’ll likely figure out what you need to do. But if you’re versed in web design and web building, you’ll be puzzled by the needlessly complicated organization and workflow in WordPress.

Blogger: Google’s blog platform has a friendlier interface than WordPress does. Unfortunately, it also has far fewer template options for photographers.

Tumblr: If WordPress is a 2005 Chrysler minivan, Tumblr is a fixed gear bike rocking a Sleigh Bells sticker on the basket. Hip and well designed, Tumblr offers some nice templates, and Has A Portfolio will help you create a functional portfolio Tumblr.

There’s a dark side to Tumblr– sometimes literally. For photographers, copyright and citation are weak to nonexistent concepts. The templates, though customizable, require an intermediate knowledge of HMTL and CSS to effectively change the elements of the page.

Flavors.me: Flavors is an easy-to-design web platform that produces nifty websites in a couple of minutes. For print reporters or students looking for an easy, professional web presence, it’s the site I recommend.

Yet its simplicity limits its usefulness for photojournalists, who must present a variety of images, stories and multimedia. As a photographer, Flavors would only work if you link out to a public Flickr or Picasa account, with your portfolio content arranged in different albums. That’s not ideal.

• Templates that Require Intermediate Web Skills

Drupal, Indexhibit and OpenDesigns.org all offer customizable templates that a true beginner will find challenging. The advantage of Drupal and the similar Joomla! Is that you can incorporate server-side content management programming into the site. OpenDesigns.org is great if you know Dreamweaver and dislike the interface of blog platforms.

Depending on your bank account, a paid site could be a painless option for a portfolio website. If you’re shelling out the bucks, though, it’s reasonable to ask what each platform can do that a free template cannot.

If I were going to pay for a portfolio website, here are the questions I would ask. Will I have easy access to live support staff? How easy is it to customize the site? Does the site include a mobile version? Can I add e-commerce or a database? How long does it take an average user to create his or her site?

Avoid Flash-based websites. They often load slowly, and the 5-15 percent of visitors likely to visit on an iPhone or iPad won’t see a thing.

• Have a basic understanding of HTML and CSS.

Templates are generic by definition. If you want to personalize them, understanding basic HTML and CSS is crucial.

Think of HTML as the skeleton of any website; you can learn it in an hour. CSS is more the fancy haircut and Paul Smith suit. It takes more practice to master, because it’s finicky: the wrong property or a missing semi-colon can confuse the look and layout of an entire site.

Together, HTML and CSS work together to control the appearance, layout and functionality of a website.

• HTML

The perfect id of pure HTML is the 1996 Space Jam movie website, which has been up, unchanged, for 15 years. HTML is clunky and simple, and you’ll quickly run up against its limitations. Nonetheless, it’s the superstructure on which all websites are based.

It’s fairly easy to learn. HTML is a language of tags, read top to bottom. Every tag has an opening tag between two brackets– for example, <title> or <span>. It also has a closing tag signified by a slash– </title>, for example. Anything that comes in between that opening and closing tag is the title itself. Know that there are a few exceptions, like the image tag, <img>, that don’t use closing tags.

On this page, the title itself isThe Visual Student | A resource for students in Visual Journalism. That’s because the HTML is <title>The Visual Student | A resource for students in Visual Journalism.</title>

HTML works like those Russian nesting dolls because tags go inside of other tags. There are also attributes, which are HTML adjectives: they modify the tag and always appear in the opening tag. Every attribute is written in an attribute=”value” format.

Understand those basic concepts, and you’re on your way to writing your own HTML. To learn more, follow this tutorial and check out a full list of HTML tags. Here are the most important tags to know:

<head>: Every page has a <head> tag, inside of which all the information and metadata lives. The page title, description and links to external style sheets and scripts all appear in the head.

<body>: Anything between the opening and closing body tag is what appears on the page.

<title>: This tag is especially important for S.E.O. That means your title has an oversized effect on how high you appear on the Google rankings, depending on the search. Include your name, a pithy description of your job and the city where you work for a portfolio website.

<p>: The paragraph tag is the main conduit of text online. <h1> through <h6> are heading tags that can function as the HTML equivalent of headlines.

<a>: This stands for anchor, and it’s the tag that surrounds all links to internal and external web pages when paired with the href=”…” attribute. Put an <a> tag around an <img> tag, and the picture will become a clickable link.

<img>: Photographers should know the image tag! It is always paired with the source attribute, src=”…” Img needs no closing tag.

<ul> or <ol>: The list tags, paired with the sub-tag <li> (list item), are useful because that’s how you can build a navigation menu. The step-by-step Listutorial website is a great resource.

<div>: This tag stands for division, and it is the primary method in HTML for organizing your pages. For example, if you have a header, you might put a <div> around the <img> logo, the <h1> name and title, and the <p> subhead into a single entity. Paired with the id=”…” attribute, you can use CSS to layout and work with those specific elements on the page without disturbing the other content.

• Understanding CSS

Everyone has used the box in Word where you can make text bold, blue or 16pt. CSS is the nerdy cousin of that box. It’s also the way to build pages that look professional. With CSS you can change fonts, colors and sizes, add background images and colors, and even layout the page.

The format of CSS is always the same. p {color:blue;} means that anything inside of the paragraph tag will be blue. #header {width:800px; height:100px;} means that the header <div> will be a box that’s 800 pixels wide and 100 pixels high. For more, read a general CSS tutorial here.

Understand that CSS takes some practice. There are rules on what you can apply CSS to in the HTML code, how you apply it and how one CSS rule interacts with another conflicting CSS rule. Learn it. Finding the CSS on your template and modifying it can be the difference between a site that looks generic and a site that looks like your own.

• What if I need a database or e-commerce system?

Alina Grosman works for VII, where she is the manager of sales and assignments for the Americas. She’s also involved in the upcoming redesign of the VII website.

“One thing that a lot of photographers don’t consider right away- a big thing to think about as they develop their business- is having a readily-searchable archive of images,” she said.

For photographers with an established client base, an income dependent on resale or for wedding photographers, that’s good advice. For students and young editorial photographers, the expense might not be worth it.

Orange Logic, Picturemaxx (which VII currently uses) and Photoshelter are all viable options, Grosman said. All allow for e-commerce, and all can be the platform on which you design your entire website.

If you’re working with plug-ins, here’s what has to happen. You need to download the pre-written JavaScript onto your site and then make sure that code is linked to your individual pages in the <head> tag. Often you download CSS that can be modified, but you will rarely modify the script itself.

Because fonts live on the computer of the person viewing the web page, programs like Dreamweaver limit you to only a handful of common fonts. If you want something more creative, Google Fonts is a free resource.

Like JQuery plug-ins, you’ll need to paste a link to the font into the <head> tag of any page displaying the new font. As long as you then add that font into a CSS rule, it will appear on the page.

-Brian McDermott teaches web design, photojournalism, and multimedia journalism at the University of Massachusetts Amherst. He is the chair of the NPPA’s Student Quarterly Clip Contest and designed the logo above.