June 6, 2018

New WP Theme, Highgate

I’ve been working on a new WordPress for the last two weeks which addresses some UX drawbacks of the last theme.

The main UX improvement is in how the events are displayed. The ‘card’ style layout doesn’t display enough events in mobile view. In fact it only displays one! You can see the comparison in the screen shot.

As well as displaying more events, the new design doesn’t have to have a fixed height event name element. The fixed height was used to retain alignment when a event name is particularly long and takes up two lines. This happens rarely but has to be accommodated in the design. This meant that every event had to have enough space to fit two lines which was pretty wasteful from a UI point of view. The ‘list’ style view also doesn’t re-flow to ‘block’ layout under 768 pixels wide so the images only have to be 550 pixels max width instead of 720 pixels which is another small performance improvement.

I made a number of other improvements such as swapping the custom header and left-hand hamburger menu for a Bootstrap-friendly right hand hamburger menu. This change was partly down to wanting to retain as much BS compatibility as possible and not being able to correctly implement the social sharing icons with duplicating them and showing / hiding the alternative sets on different resolutions. I’m working to fix that problem. I also think it’s increasingly important to have social links visible and accessible.

 

Check it out

Other Improvements

 

The secondary adverts can be added in two ways. A simple image wrapped in a link, via a widget and a CMS version via a custom post type ‘Secondary Ad’. This allows users to create ads by simply finding an appropriate background image and adding their copy and link over the top via an overlay. If they do have ads that have been designed graphically these can be added as well.

New font – Teko from Google fonts.

Consolidated small print and legal links in footer

New Youtube icon

Added a bit of subtle fade in and up animation to the events

Totally removed the carousel. Mainly due to mobile speed load and usability issues on mobile ( no swipe support – unless you want to add a paid-for plugin, which I don’t for a simple theme ). I’ve also read a few articles recently that suggest no one actually uses carousels.