August 24, 2018

WordPress Theme for Venues

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

The main UX improvement is in how many events are displayed on small mobile devices. The ‘card’ style layout when viewed on small mobile devices only displayed one event per screen. To display more events I’ve created a ‘list’ style viewed on small screens. 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 an 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 via the main navigation and menu.

Other Improvements

The secondary adverts can be added 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

I’ve also removed the carousel. This 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. Why would they want to swipe throught your ads, it’s the content they are after.

As UX Designers and champions of the user first approach we would try to persuade site owners not to put barriers between the user and what they are trying to find. A trade-off solution is having the main ad content added via the main post editor so if content creators were savvy, they could embed custom HTML and in-line CSS to create promotional ads.

Otherwise they could use the main ad as one large promotional ad via a background image and overlayed copy. It’s not perfect but it’s a good enough compromise. What we don’t want to avoid is three or four large banner ads loading before the content.

Preview the theme here