Real Time Analytics

All Posts in Web Design

January 18, 2015 - 1 comment.

Photojournalist Lynn Johnson’s Website Redesign

The standard for most photographers in the 1990s and early-to-mid-2000s was to build a website using Flash. I remember LiveBooks being super popular along with BigFolio and a few others. Most photography website companies back then offered Flash-based templates. Oh, how presentation and marketing has changed!

Lynn’s former website served her well and she felt it was time to finally update. So when she engaged me to redesign her website I was excited and of course extremely flattered.

Research

Every website I work on starts with research. I have loads of questions so we discussed a lot of options: budget, structure, content, marketing and maintenance; all of which overlap and how I determine the best solution. Time is precious and she wasn't keen on spending a lot of it updating software, plugins, backing up her site, security, etc. Naturally she wanted to focus on people and stories — her passion.

Note: Of course there are ways to automate backup, security, etc. but those require additional and typically on-going costs.

Squarespace

Squarespace was the best option and after several rounds and tests of the various templates they offer, we moved forward with the Fulton template. CSS was used to tweak the template. 

Template Limitations

We ran into a few frustrations or “not crazy about” aspects of working with a template but both of us did our best to come to terms with those limitations. Designing websites can be a tremendous challenge because it is often about working with constraints. There is always the dream scenario but in most cases, that is not an option. Still, the best part of the job is figuring out creative ways to get around constraints.

The one section where I had to compromise was the “Library”. It contains an archive of selected stories that she has published over the years. It is quite a body of work and I wanted to give it the real estate it deserved.

I started in one direction but realized I was making it too complicated for her to do on her own. Working around the built-in functions to present the content differently would require too many steps. So, the best option was to stick with a baked-in format. It’s a bummer that we’ve already had some feedback that the Library section is confusing so it’s my hope to revisit after we do some training, review the analytics and do some training. Perhaps it won’t be too complicated (crossing fingers).

Dream Client

Working with Lynn was incredibly satisfying and flat-out fun. She placed a great deal of trust in me and that felt great. It was a true collaboration; my favorite type of relationship.

Congratulations Lynn!

January 18, 2015 - No Comments!

Multimedia Photojournalist Janet Jarman’s Website Redesign

I’m excited to present Janet Jarman’s new website!

She announced the launch last week but I’ve been so busy with another website project and finishing up the details of my personal branding and marketing course that I just haven't had the time! It's all good stuff of course 😉

Janet, her assistant Kati, our developer Alex and I worked on the redesign for nearly two years. Gasp if you will but Janet has been pretty damn busy working which naturally shifted her focus to making pictures; something she cannot afford to not do! It was a bit like ships passing in the night but we finally made it happen and I'm excited for her and proud of what we were able to accomplish.

Reception to her site has been positive — yay!

Content Relationships

A website redesign of course is not without its challenges. In terms of design and development, Alex and I had to figure out a way to present her video and still photography in a way that met her requirements: one type of media format needs to takes priority over another but there could be a situation where only one type of content was published.

Meaning: If say a video for a story was the featured format type but she had a still photo gallery version of the same story, she wanted the video to be presented first and the still gallery presented second. It could also be reversed or there could be only a video or only a still gallery.

HonestlyI was super confused at first because when I hear the term “related content” I immediate think “related stories or articles”; content that could be related in terms of topic but not the same story in a different format. You know, like “Other Stories You May Like”.

Our language while the same meant different things! So it took awhile to hash it out since we were working primarily via email and Basecamp. Alex is based in the Midwest, Janet in Mexico and I’m in Syracuse!

But, because the content also drives the direction of development — a reason why development or developers should be involved in the project as soon as it begins — it was critical to reach an understanding. I was trying to avoid was the possibility of a major CMS implementation nightmare.

We eventually created 4 different templates which I believe works but it was an intense point of discussion since the actual presentation of secondary content was purposefully designed not to be consistent.

Mobile

Janet’s new website is fully responsive thanks to Alex’s mad skills. Mobile use surpassed desktop last year and it will continue in that direction so building a responsive website was one of the most important requirements. Her previous Flash-based website wouldn't even show up. A mobile-friendly website imho is a non-negotiable for website owners.

Photoshelter

We used a BEAM template to create the archives section of her website and we had a few limitations. 

  1. The URL for the logo cannot be modified to be linked to an external web page
  2. Templates have a lot of customization limitations.

The first kinda drives me bonkers. The second I can live with. In the end it was a decision based on priority. We went with mobile-friendly over customization. So, it isn't an ideal set-up but as always you gotta work within constraints and I personally do not feel that every section of a website or web page these days needs to be feel like an exact match.

What I Love Most

Perhaps it is bad form to share what I love about my own design but I feel like I gotta say how glad I am that it has some warmth and texture. It feels approachable just like Janet.

January 26, 2013 - No Comments!

7 Website Design Considerations for Photographers in 2013

A new year, another chance to evaluate your marketing mothership.

What are some of the most important web design considerations for photographers?

I get asked this question in various forms because heck, imagine hiring a web designer and ending up with a website that sucks or has nothing to do with your big plans for the new year!

Here are 7 important website design considerations for 2013 to help you make the most of your marketing investment for the long term.

1. Focus on Mobile

Seriously. If your site isn’t at least responsive (mobile-friendly), ya better get on it.

Photo by Elmastudio

Photo by Elmastudio

It is and will be worth every penny to invest time and cash to get your awesome content to display beautifully on mobile devices.

I cannot tell you enough how important it is to have a mobile-friendly web site.

Why 2013 is the Year of Responsive Web Design” by Pete Cashmore

What does the term responsive web design mean?

A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices.

Source: Standford University IT Terminology

Basically, your website would adjust to various screen sizes at “break points” so you don’t have to create a million different sites for a million different devices. The industry-standard practice for accomplishing this is to use “media queries”.

Believe me, it is way more cost effective than developing a native app. A responsive website is also better than a website template that merely serves another stripped down template to show your work on a smartphone or tablet.

Why? There’s more to mobile design than just getting content to show up.

A responsive site (properly coded and thought-out) will:

  • Be respectful of content
  • Be easy to navigate
  • Be respectful of context and offer the best experience
  • Display and maintain your brand
  • Maintain the beauty and seductive visual qualities of your website

Be sure to read

2. Edit to Your Brand & The Gigs You Want

You worked your ass off creating that image. You know, that image you just can’t bear to edit out of your portfolio.

Ask yourself: Are you attached to that image because of what it took to capture that image? Are you attached to that image because of who is in that image? Are you attached to that image because your mom loves it?

Go back to your criteria for what makes a kick ass photo. Show photographs that truly reflect your overall brand story and business goals.

Hire a picture editors like Mike or Jasmine. You know, objective awesome people who will give you honest and helpful feedback.

Now ...

If you want travel assignments, show images that will help get you travel assignments. If you want sports assignments, show images that will appeal to clients who need sports and sports-related photography.

Makes sense, right?

So ... what about editing images to themes or emotion rather than literal categories? Risky? Go ahead, take a risk.

But ...

If you don’t know who you are or what you want to do or what you value (hello, your brand), editing is going to be tough.

3. Have a few case studies

I tell my students to have a few projects in their portfolio that present their thinking. 

What makes this gold?

Your clients get to know your thought process and view you as a problem solver and not just a technician.

Here’s a working format (below). Take what you want, leave the rest.

  • Name of Project
  • Name of client
  • The challenge
  • The solution
  • The results

Simple.

You could also add publication date, credits, locations, etc. but remember to keep it short. If you want to add more detail, write a blog post and add a link at the bottom of the case study to that blog post.

Set yourself apart. Differentiate yourself from others by sharing how you think or how you approach an assignment, project, photo shoot.

Beauty and brains. Love!

4. Mind Your Page Load Times & More Pictures isn’t Better

Since 2010, Google has taken page load times as a factor when ranking web pages.

So, keep your portfolio images tight and targeted. Super duper quality trumps quantity any day.

I mean, people are busy!

Are there exceptions? Heck yeah.

Wedding photographers. Brides LOVE looking at images of other weddings. Give ‘em what they want but make sure you can live with what you show.

If you have a lot of images, look into getting an Amazon S3 account and using a CDN (Content Delivery Network) like CloudFront or MaxCDN to save some money, have a back-up of your website assets and deliver content faster.

Be sure to read:

5. Seduce Me with Your Copy, Too

Your work will not speak for itself.

There. I said it.

Photo by Pierre Metivier

Photo by Pierre Metivier

Work with a copywriter who understands content strategy, audience, branding to help you write some killer copy, a killer tagline, a killer about page, killer navigation labels, a killer 404 page.

Copy is part of an overall content (brand) strategy that extends beyond your website. If you’ve been copy averse, give copy a second chance. 

Your work kicks ass but so does the work of that other photographer.

What makes you different? Why should anyone hire you over them?

The people who hire you want to connect with a photographer who is a person, who has social proof, who clearly spells out what they offer.

Great copy paired with great photography can entice like no other. 

It’s important to have layered content, content that complements each other, elevates message to clearly communicate your brand and the benefits you offer your clients.

Your about page just isn't enough.

6. Reduce the Clutter & Be Critical of Features

Present and package your portfolio without complexity and lots of doo-dads.

With every cool feature, ask yourself, why?

Why do you need that music? Why do you that animation? Why include all the social sharing buttons? Why use parallax?

With every piece of content, ask yourself, why? Does it really need to be there? Establish clear hierarchy and prioritize. 

Successful design is knowing when to strip away the excess to communicate clearly, effectively, purposefully.

Focus your message, get clear on your audience and you won’t need the extra accessories.

7. Have a Blog or a Tumblr page

Content, content, content.

If you still don’t buy into the blogging thang, all I can say is that dimension is so much more fascinating.

Share your personality. Share your interests. Share the way you think. Most of all, share content that helps people; that serves people.

With content you will reach your people and win fans and heck, Book Yourself Solid.

I mean hey, even Martin Parr has a blog (which honestly has poor interaction design — sorry Martin!)

A blog helps people connect with you. It’s a lot like those case studies I mentioned way up there. (I really am thrilled you are still reading 🙂

Bonus: Have more than just an online Portfolio

Sure the world has gone digital but if you’re like me you know paper can still be a magical experience.

Photo by Jonas' Design

Photo by Jonas' Design

I once met a few student photographers who brought only their laptops or iPads to show me their work. They eagerly launched browsers to show their online portfolios.

What happened next?

They weren’t able to connect to the hotel’s wireless connection. Boy, did I feel for them

If you have the opportunity to meet with a client, a picture editor, gallery curator or other very important people in person, a print portfolio can make quite an impression sans internet.

Consider strategically editing your work so you offer a teaser of stupendous images online and more in a printed portfolio. It works in the reverse too!

Imagine your digital portfolio and your print portfolio working harmoniously to your advantage. Both can offer unique but complementary experiences, showcasing your secret sauce.

Check out these supreme photographers who use print and digital exceptionally well.

Got any other tips to pass along? Share them in the comments below!

You may want to check out an oldie but goodie, “9 Things to Consider When Planning Your Website

December 7, 2011 - 2 comments

Danger Will Robinson! It’s Your Flash-Based Website!

Last month Adobe announced that it will no longer support Flash for mobile.

The interwebs were quick to announce that Flash is Dead. Heck, it makes a great headline.

I'm waiting to see what happens but I do lean toward this camp.

But if that doesn't jive with you maybe this will: Flash isn't dead but it is moving in a new direction.

So I'm putting up a red flag for all the photographers using a purely Flash-based website or even thinking about buying into a Flash-based template. (My yellow flag? It's Time to Break Up with Your Flash Website.)

Hello, Mobile is the Future

Let me say that again: Mobile is the future.

Adobe has clearly recognized (as well as most savvy business peeps) that the mobile market is just going to continue to grow.

If anything Adobe laying off 750 people to concentrate their efforts on HTML5 should alert you to where things are headed.

Sure, your flash plug-in may still be working on your desktop but here's fact: Desktop market share (for browsers) is declining.

Check out this infographic on mobile marketing, too.

Now is the time to ask

Ask your website company what they think about the future of Flash at their company.

How will it impact your website (your business)?

What are their plans to help you deliver content on mobile devices?

Will they make it easy for you to migrate your existing content?

Switch to HTML5, CSS3 & Javascript Soon

I've stopped many photographers from buying "quick and easy" Flash website templates because it has always been important to design for the present and the future.

With devices and technology changing so often you want to be ahead.

The photographers who are currently using HTML(5), CSS(3) and javascript as the languages to display and deliver content don't have much to worry about. They invested in a more long-term solution; a long-term solution that will scale. It's future-proof.

It's Good Enough?

Some of you may feel you're OK because the company you use utilizes a combination of Flash (for desktop) and HTML5 (for mobile).

You maybe in a better position (remember: desktop is declining, mobile is rising.) but the problem I've heard (and seen) even with this setup is this: Most of your branding disappears.

Maybe you don't care. Good enough is good enough.

Compare your non-branded HTML5 iPad experience to an HTML5 iPad experience that is branded.

Consistency IS important. Every time your audience comes in contact with your brand elements such as your logo, color scheme, photographs, it reminds them of you.

Who is your target audience? Will they notice? Do they care?

Sophistication attracts sophistication. Details matter.

Make time and start your research.

Whatever the outcome of Flash, you want to be in a position where you are ready; not scrambling to get a new website up.

The time it will take to migrate content and possibly start from scratch may cost you more.

Time is money.

Are you willing to risk eyeballs and possibly your next lead because your portfolio or website won't display? Do you have the time to keep track of what Flash is doing or where it is going?

Wouldn't you rather be making your next best picture?