Skip to content

Website makeover case study: using the power of CSS to improve an existing PhotoShelter site

If you know that your website is gathering dust but can’t afford a new full-featured custom website, you can consider just freshening up your existing website (I call it a “website makeover”).

With the help of a photography website designer, you can bring new life into your existing website by doing CSS tweaks (and maybe minor HTML/template changes as well where if needed).

That’s what I recently did for a Hawaiian stock photography website running on a classic PhotoShelter template:

This is a great example of how a photography website can be improved with custom CSS code, and I hope you can draw some inspiration from it:



Project description

Tami, who runs the site, wanted a fresh new look, as the site has been as is for about 7 years.

“It has been such a successful business over the years. I am not ready to let it go, so I must find a new way to market it given the crazy scene going on in the world of stock. I know being in Hawaii is the only reason I have made it this far. I have a home business and have to supplement my income with other work. I love Hawaii and sharing its beauty with the world. It is living Aloha!”

She wanted to make the website mobile-friendly, and to switch to lighter colors (as she knew the black background made text hard to read).

Instead of implementing these tasks blindly, I really wanted to understand Tami’s goals for the site, to make sure that any changes will also help her in the long run. After answering all the questions from my “project-kickstarter” form, we both decided it made sense to stick to the existing PhotoShelter template she had (called “Caboose”, instead of redesigning the whole site from scratch), because it was just the right type of text-heavy template she needed to sell stock images.

Here’s a recap of the goals we had set for the design “makeover”:

  • making the entire site mobile-friendly
  • adding a prominent search box in the header throughout the site (on mobile too)
  • cosmetic changes throughout the site to make it more modern
  • having a stronger watermark applied throughout the site

Over all, I wanted to bring a new face for the website. Everything was meant to be lighter, with bigger text, and all elements more spaced out and relaxing to the eyes :-)

Making the site mobile-friendly

The old site required users to pinch-and-zoom in order to navigate the site. Using CSS, the new site was how completely responsive, fluidly adapting to any screen size (not just to some fixed breakpoints). Here’s a before-and-after comparison:


General site tweaks

Besides featuring the search box more prominently in the header area, I changed the accent color (for links/buttons and other graphic elements) from red to blue, the exact shade of blue used in the logo, which works well with all the ocean images on the site.

Typography was also improved by increasing both font-size and line-height throughout the site for a more easy-to-read experience.

I then started to take each page/template in the site and tweak the code (after switching to manual-customization mode) and add custom CSS to “modernize” it. Along the way, I also gathered some recommendations where I thought the content can be improved/consolidated. Image pages now also display the IPTC caption and headline (instead of just the filename) to help both users and search engines understand the images better.

Here are a series of before-and-after screenshots from the site:

In fact, gallery thumbnails automatically occupy the full width of the browser on very large desktop screens, increasing the number of images per row:


“I am loving how fast and efficient you are! My lord, what a great web master! I am super pleased with your service.” – Tami Winston



Building a full-featured WordPress site (that’s maybe integrated with a photography eCommerce platform like PhotoShelter) would obviously be the most powerful online solution for a photographer. But sometimes that’s a bit out of reach financially, or there would simply be no need for that type of complexity.

A website makeover is basically a simpler way to improve your photography website without investing in a new redesign from scratch.
Having an experienced designer optimize your site and polish all the small design details can really help you in the long run. An improved online presence will grow your business as a result.

P.S. If you enjoyed this case study, also check out this WordPress design makeover I did a while back, and learn how small typography/alignment/design tweaks can have a big impact on the overall look of a website.

Off-topic or inflammatory comments may be moderated.
Please add VALUE to the web, thanks!

Search for other articles:

Or explore these related categories:

Book a one-to-one consulting call with me:

Get more CLARITY and answers to your most pressing web-related questions.
You get actionable, specific advice, answering your questions on how to improve your photography website design & SEO, and get more results.

Learn more

Level up your photography website

Learn the exact tactics to grow your photography business and get more inquiries and sales from your website.
My BEST advice. Your inbox. Every Tuesday. Free.

No spam ever. You are free to unsubscribe at any time.ย 

“If you haven’t subscribed to Alex’s newsletter yet you’re a nutjob!”

“SO MUCH good stuff in there – where have you been all my life!!”

โ€œDefinitely worthwhile subscribingย  – always full of great info.โ€

“The most useful out of everything I get via email. So thank you!”

โ€œSo much interesting content. It got my head spinning.”

โ€œIt’s so comprehensive and I love Alex’s brutal honesty”

“One of the very few emails that I allow to show up in my inbox.โ€

“Straightforward, to the point, no nonsense, solid information.”

“You have so much good information – it’s almost overwhelming!”

“The best information & advice on photography websites anywhere.”

๐ŸŽ™๏ธ My interview on the Hair of the Dog Podcast Free SEO course for photographers Wedding photographers need to be different ๐ŸŽ™๏ธ New podcast interview The market is selfish Google hates seeing repeated content! How to develop your soft skills as a photographer 7 quick principles for creating a great website 4 ways to make your photography website more trustworthy What are famous photographers doing right on their websites? Or better yet, what are they doing awfully wrong despite being successful?