Photobite: Announcing the New 2018 release

Announcing the new PhotoBite update for 2018

Some of you may already know PhotoBite, a collective of photographers, videographers and content creators who have come together to create a site to share photography and videography news, reviews, competitions and products.

Over the last few years PhotoBite have been busy creating content, keeping the site updated and putting a lot of work in to their YouTube channel. But as one of the owners, I’m never far away, in the background I’ve been busy, silently managing the site, and working hard on a visual refresh, performance overhaul and ** Drum Roll Please ** a store where you can buy all those things you so desire.

PhotoBite’s Visual Refresh

Despite only being a few years old, PhotoBite’s content grew considerably faster than we’d expected, both in volume and type. Data from Analytics showed that visitors often read the one article they’d landed on and then moved on. Visitor numbers were good, retention wasn’t great and bounces were terrible. Reading over the data is was clear that the original colourful extravagant design was either putting people off or not helping them find the content that was important to them.

This was something we had to change. An overhaul of the way in which PhotoBite presented articles and categories was drawn up. Everything was made clearer, grouped specifically to provide clarity on which items belonged to which sections and an easier route for visitors to find the exact content that interested them.

PhotoBite 2018 Design Refresh

PhotoBite’s 2018 redesign uses modular blocks to separate out individual categories for easy browsing

The initial “Blast to the eyes” of the bright blue header was also toned down. Allowing the blue to now be used to attract attention to a specific message or call to action rather than as the main background. Not only is it easier on the eyes and less distracting now, but it allows for a much cleaner layout without having to work the layout around the solid colour blue background.

PhotoBite's newer, cleaner header

PhotoBite’s newer, cleaner header allows the reuse of the old blue colour for call to actions and general eye catching design elements. The new and improved hero space removes the clunky slider and leaves room for a very design orientated space with highly visible call to actions.

Throughout the site there’s been a huge swathe of changes to both the colour blend used and the typography. Imagery is used more prominently than ever before (I mean it’s in the name isn’t it?) and the font selection has been minimised with an emphasis on clarity.

Performance and Back End

A very important part of the new PhotoBite release was to work on previous performance issues the site suffered.

The initial roll out of Photobite was intended to reach a much smaller audience than it ended up with, neither the framework nor the hardware back end were in a position to handle the un-planned influx of visitors and issues were logged that needed urgently looking at.

I made the decision to scrap the original theme and start fresh with an emphasis on performance and scalability. The original front end was created in a very short space of time for a much smaller audience, as time has gone on and PhotoBite grew, the need to react to the growing visitor numbers has become more and more important. With this in mind (and a healthy dose of visitor data collected from google Analytics) I decided to rebuild the main home page and global elements such as the header and footer in CSS Grid. This allowed me to use much more concise and scalable code. Comparing the visitor data to the “Can I Use” CSS Grid support table, I was able to establish that the current visitors would be unaffected by this change as they were all using devices and browsers offering great support for modern HTML and CSS. Any visitors unable to view the site using the newer code would see a graceful degradation of the design and always be able to access the content.

PhotoBite CSS Grid in Action

Using CSS Grid on PhotoBite allowed for much cleaner more concise code. Plus graceful degradation means nobody misses out

Every ounce of HTML, CSS and JavaScript was scrutinised for its usefulness. One of the culprits of longer loading times for the main home page was also the sliding banner at the top. I’m personally not a huge fan of these any way and after doing some research, looking across not only the PhotoBite site’s analytics but also those of various client sites I manage, I came to a realisation. In 90% of the use cases I studies, the slider was pointless. In every case I looked at, the first slide got 100% of the eyeballs, the second, at best, got 40% and only in one case did I see that a third slide got a chance to even begin loading and this was on an eCommerce store where the promise of goodies hiding within those slides is a prospect worth hunting for.

With the data to back up my opinions (for once) PhotoBite lost it’s slider, the page lost a ton of weight and I was pretty smug.

Overall, the performance audit paid dividends but the back end hardware was still causing issues. Originally the site had sat on a TSOHOST VPS account. It is my personal opinion that TSO have been going downhill as a service provider ever since they were bought out by Paragon Internet. Support questions about lack of performance are often met with denial, followed by a sudden boost in site performance which would degrade again in less than an hour.

As a quick experiment I fired up a Digital Ocean Droplet (highly recommended), dropped a copy of the old PhotoBite site on and lo-and-behold the performance boost was incredible, and this was before the new tweaks and theme were added. At that exact moment I made the decision to move the live site across to Digital Ocean.

The rest

All of the above also goes for the back end content creation. Authors simply should not have to spend their time navigating clunky interfaces and waiting forever for a page to load. I created a bespoke content addition system using Advanced Custom Fields to help our authors populate content.

An early look at PhotoBite's modular content system

An early look at PhotoBite’s modular content system

This allowed modules of content to be added by type, and edited, repositioned and tweaked as desired. However this may all have been unnecessary in the long run as the WordPress Gutenberg editor is on track for release with version 5 of WordPress which is due very soon. We’re currently testing Gutenberg over at PhotoBite and despite it’s general poor reception with developers, it looks like it’ll be a great fit for the site.

The Future

The switch over to a the new look and code went well and happened little over two weeks ago. Visitor number are already up, retention is up and bounce rates are down. There’s still a long way to go with this ongoing project. The plan is to collect a months worth of visitor data, look at how the site is being used and act accordingly.

If your a visitor to PhotoBite then please do let me know how it’s working for you ( I’m more than happy to take any constructive criticism on board. There’s a long road ahead to really nail every aspect of the site so be expecting more blogs soon!

1 thought on “Photobite: Announcing the New 2018 release

  1. Pingback: Are You Ready for Gutenberg, Wordpress' Updated Editing Experience? | Miniman Web Design

Join in!