Bournemouth Universitites Student run newspaper - Now online.

Web Design

Development

Wordpress

The Rock first came to me just when they needed a site. It luckily had already been designed. It was being handled by someone who was going to make a custom CMS for them. I soon learned that the editors would have to upload a text file if they wanted to update the site. What a load of hassle! I convinced them to use wordpress.

This was when I'd done very little Wordpress, this was an excellent opportunity to improve my skills in this area. Unfortunately I don't have any screen grabs of the site before it's current version. This is because I rebuilt the site again a year later so that it was responsive. This was important mainly because when we looked at the analytics a majority of the traffic was coming from mobile devices.

Re-desigining the site.

I had fun re-desigining the site, I do spend alot of time jumping between design and development sometimes. I like to keep the designs I do as minimal as possible.

The concepts below made sense for a news site. I opted for a card based design to maximise discoverability. People would be able to view quickly what the news is in an east to read grid.

I also decided to go for a sidebar which would grow as the site did. It takes all the categories that exist on the site and will grow with every new category they add. It was also good choice of design pattern for smaller resolutions because it existed as a hidden draw that could be opened and closed on demand.

After going through these different designs, The actual result of the finished site ended up looking like a blend between the two of the designs. The concepts I did were more to just establish a design direction. After, it was a case of just hitting the ground running and anything that needed doing I just did in the browser / in code as I get a bit impatient with design sometimes.

When I showed the designs to the rock they were genuinely happy and ended up putting total trust in me and just left me to get on with it without lots of mock ups. They liked the direction and that was good enough. The total freedom on this was really nice. The result in the end I was also quite happy with.

Making a better search

The one thing the Rock did want was a good search functionality. Over time they had managed to create over 500 posts and sometimes it was all highly relevant.

I hate Wordpress' default search engine I find it just isn't specific enough. I decided to hack my way around it.

I'd recently discovered a really cool client side javascript full text search engine called lunr. It was able to accept a json document as an input, it would then go through tokenize it, index it and then allow you to perform text searches on it. It was so cool. The extra benefit is that it is client side which means every time you search it doesn't have to send a new request to a server each time. Finally because it is javascript it made it possible to perform a search on a change key event of an input creating a realtime search.

Now that I knew I could do client side searching I needed a way of providing a list of all the posts placed into a json document. Luckily this was quite easy to do and I very quickly made a wordpress plugin. That would dump all the posts into a json document based on if the file exists or not. If it didn't exist it makes the file and dumps the json in it and if it did it would re dump all of the post data if anyone is to update, create or delete a post.

The result was this client-side powered realtime search. I decided to write a tiny functional programming style wrapper for my search feature where you could find results and then render them using mustache. For the sake of brevity though I won't go into much detail on it, maybe I'll save it for a post later. The search feature of the Rock is probably my favourite thing about the re-build of it.

I open-sourced the wp_posts-to-json and I'm still working on the lunr search part at the moment. Just be sure to check my Github regularly if you're interested.

Thanks for reading. Now go forth and check out my handy-work