Web Design Critique #66: Matthew Coughlin

by on 23rd September 2011 with 10 Comments

Every week we take a look at a new website and analyze the design. We’ll point out both the areas that are done well in addition to those that could use some work. Finally, we’ll finish by asking you to provide your own feedback.

Today’s site is the portfolio of photographer Matthew Coughlin.

If you’d like to submit your website to be featured in a future Design Critique, it just takes a few minutes. We charge $49 for critiquing your design – considerably less than you’d pay for a consultant to take a look at your site! You can find out more here.

About Matthew Coughlin

Matthew Coughlin is a creative portrait photographer from Pensacola, Florida. His work makes heavy and quite gorgeous use of studio lighting in natural environments. The result is a very distinct style that typically has an impressive dynamic range and a very dramatic look and feel. I particularly like his ability to really capture the personality of his subject. Each photo tells a very defined story in a very engaging way.

Here is a screenshot of the homepage:

screenshot

Look Ma, No Flash

We recently held a little giveaway for a critique that required entrants to simply shoot us a tweet with their site’s URL. After looking through the entrants I was instantly drawn to Matthew’s site personally both as a photographer and as a web developer.

The first thing that I thought was really refreshing was the lack of Flash. I don’t want to turn this into a Flash-bashing session but I firmly believe that there is a critical over-dependence on Flash in the photography industry. Just about every photographer site you can find is built almost completely on Flash.

To be fair, there are both pros and cons to this tendency. On the upside, photographer sites tend to be incredibly dynamic and interactive, which can be a very engaging way to view photos. This is an element that is definitely missing from Matthew’s site as it’s a fairly static page. There is some interactivity, which we’ll look at later, but for the most part it’s just a standard CSS image gallery.

On the negative side, Flash has a lot of baggage. It’s processor intensive, can definitely be pointed out as the cause for a good number of browser crashes, but most importantly, it’s not very mobile-friendly. iOS obviously blocks Flash completely but even those mobile platforms that support it are fairly weighed down by huge, 100% Flash photographer sites.

All that to say, I love seeing the occasional photographer that decides to buck against what is definitely the industry standard and use a more widely compatible site approach.

Responsive Layout

Another thing I immediately appreciated about this site is that the layout is fairly responsive. So we see that this site is not only mobile-friendly in the sense that it doesn’t use Flash but it also scales extremely well to smaller screen sizes. Granted, the design is simple enough that this wasn’t a huge feat but that’s definitely not a bad thing!

screenshot

The responsive/felxible layout is accomplished very simply, with only a single media query and plenty of percentage-based values. Nothing really resizes as the layout changes, the page merely reflows. I think that a little bit of consideration towards fluid images could make the mobile view nicer.

Not All Responsive

screenshot

One thing that confuses me a little is that the responsive design essentially stops at the home page. The blog layout, being a very similar grid to that on the home page, is perfectly suited for the same technique and yet it’s definitely not as solid.

Interestingly enough, the blog page actually looks better on my iPhone than it does on my desktop, suggesting perhaps the designer was taking a mobile-first strategy. However, as you can see in the image above, the layout is quite awkward on a desktop as there is a large amount of empty space on the right side.

Interaction

Jumping back to the home page, let’s take a look at what happens when you click on an image. Here you see that you get this nice, big jQuery slider that shows off the images in a more focused setting.

screenshot

I like this a lot and I think the site definitely needs it, however, I have a few suggestions for making it better. For starters, the forward/back controls are a bit out of the way, and that’s perhaps a poor way to put it because I like them where they are, but I think it would be much more usable if, in addition to what’s already in place, clicking the big picture advanced the slideshow. This functionality is intuitive, I expect to get a new image when I click the main image area, but I don’t.

Further, I think it might be nice to toss in a little “Play” button that cycles through the images automatically. You simply can’t get around that people are used to viewing slideshows on photography sites, it’s a great way to take in a group of images and requires zero work on the part of the user. I think tossing in this functionality here while staying in the realm of JavaScript/jQuery will boost the impression of the overall experience.

Conclusion

To sum up, I really like the basic, photo-centric design of the site. I love that the site isn’t Flash-based as so many photography portfolios are and I appreciate the extra work that’s been put into making the homepage somewhat responsive.

As I mentioned, I would definitely rethink the layout of the blog page and add some functionality to the slider on the home page. As one final suggestion, it might be nice to have a featured image or slideshow on the homepage. The grid is perfectly attractive but may be perceived as a little boring and uniform. Breaking up the design a bit with one image that’s larger than the rest will add variation and reduce the redundancy in the layout.

Your Turn!

Now that you’ve read my comments, pitch in and help out by giving the designer some further advice. Let us know what you think is great about the design and what you think could be stronger. As always, we ask that you also be respectful of the site’s designer and offer clear constructive advice void of any harsh insults.


Comments & Discussion

10 Comments

  • http://jim-nielsen.com Jim

    One thing to think about: the image overlay is a neat feature. However, I was viewing the site on my iPad and if you scroll down past the iPad’s “fold line” and tap on a thumbnail, nothing appears in the viewport. You have to actually scroll back to the top of the page to see the enlarged image and the overlay.

    I believe the problem stems from the lack of support for ‘position:fixed in CSS for safari on the iPad (and lots of mobile devices for that matter) Supposedly iOS5 is going to support that rule and so it won’t be a problem, but I haven’t tested any of this or looked to see if you are using ‘position:fixed’ in your overlay (as I am typing this from an iPad :)

    Anyway, I figured if you were working on a responsive design for the website, you might want to think about having a responsive solution that works for your image overlays :)

  • http://matthewcoughlin.com Matthew Coughlin

    Joshua, first off, thank you for choosing to critique my site. I will also let you know that I designed and built the site on my own. I know enough about html and css to get myself in trouble. My number 1 goal was to make it about the photography and not some heavy flash based site. That is why I chose to go minimalistic, due away with the flash and go with big thumbnails right out of the gate. As for the blog, I plan on getting rid of the non responsive grid layout of post summaries and go straight into the posts themselves. And Jim (first comment) is right about the ipad isssue if you scroll down the page, I am trying to figure that out. Thanks so much again for the awesome critique, very much appreciated!

  • Char

    The art of simplicity was used very well :)

  • http://www.webdesigncreare.co.uk Kim Ruddock

    I really like the simplicity of the design of this site. It allows the main subject of the site, the photography, to stand out. I did notice use of the tag several times in the code of the contact page and one on the home page which isn’t semantically correct. It may be worth considering if these could be replaced with CSS. Overall the look of the site is a little safe but the clean look helps to focus on the great photography.

  • Hasti

    I have degree in psychology and my main field is psychology of design. Regarding your website; I was disappointed that it was not any short biography about ‘the man behind the faces’. Your pictures represent human beings and stories. As a listener/viewer it is important to get introduced to the author. It will establish a so called ‘ingroup‘ relationship which will elicit a feeling of belonging. Furthermore the person will feel more welcomed into your ‘home’ (website).

    I would recommend you to very briefly present yourself as a person, maximum two paragraphs (Helpful tips: You can think about what you say when you are mingling at a cocktail party). This is in order let the pictures talk for themselves and not get too influenced of your story.

    I really like the website and the pictures. Good luck!

  • http://www.mediadivinitydesign.com Adeniyi Moses Adetola

    Simplicity at its peak.

  • http://www.voxelration.com voxelration

    Simplicity always like users

  • http://arcadiusphotography.com/ arcadius

    I really like Matthew’s website – simple and clear ! all about the pics

  • Pravat Shah

    #1>There’s photograph everywhere! I think it would confuse user that what to click first which means there are lots of options and the more the option more it would take time to engage the user!

    #2> It doesn’t inform where am I?? That means if I click blog than there isn’t any thing that will give me hint “O I’m here”. Anything that show’s current navigation would do the work!

    #3> I feel the white space of the top margin of portfolio contents would be same as of blog! so that symmetry wold be maintained!

    Photo’s are great but personally I think web should be also great tooo… that gives your personality and support the user science!

    • Pravat Shah

      And sorry there are lot of typo’s! Hope design shack would place the edit button so that user won’t feel they are idiot! :D

Subscribe

Membership
About the Author