Website Design

Google fonts with a beautiful ampersand – what’s up with Baskerville?

Design, News, Website Design, Wordpress

I spent some time recently working on a couple of website designs that could really use a little design flourish, and I thought styling the ampersand would be just enough. Looking back to an old bit of code I knew you could usee CSS to style your special ameprsands, render them in Baskerville styled in Italic and hey presto….. wait what? This doesn’t look so good anymore, what the heck is up with Baskerville.

After trawling the web for a while I *think* I have found the answer – Baskerville is now called ‘Libre Baskerville’ in the Google font library, so changing your css font-family reference from “Baskerville” to “Libre Baskerville” fixed it up. For a couple of great references on styling beautiful ampersands I’d recommend these resources.

https://johndjameson.com/blog/ampersands-and-google-fonts/

My Top 30 Fonts with the Sexiest Ampersands

WordPress, Woocommerce Speed & How To Make Them Faster

Website Design, Wordpress

I’ve been building a website using Woocommerce for the first time recently. It started off with less than 100 items and expanded to over 500 by the time we had finished. That’s still not many products at all but I began to notice some speed issues after a while and if they were bugging me they were definitely going to bug the customer once the site was live. {There is now an updated post on speeding up a WordPress site here.}

I started researching WordPress speed in general as I suspected it was an issue with the framework itself rather than Woocommerce, although more likely a combination of the two, and along the way I found some useful articles and tips which I thought I’d share.

To make your WordPress / Woocommerce site work faster you need to tackle 3 areas, in no particular order :

  1. Optimise your database
  2. Check your theme & code
  3. Check your plugins

Note – it goes without saying that you should backup everything before you start. If you don’t already have a WordPress back up solution then I’d recommend looking at either Backup Buddy or Updraft, both of which are really great, I’d say it’s just down to personal preference which one you choose.

1. Optimise Your Database

I found 2 really useful plugins for this. The first is called DB Optimise Plugin – http://cagewebdev.com/index.php/optimize-database-after-deleting-revisions-wordpress-plugin. It removes all redundant data from your database. Coupled with switching off WordPress revisions I noticed quite a speed improvement with this. If you want to switch off WordPress post revisions then add this line to your wp-config.php file:

define('WP_POST_REVISIONS',FALSE);

If you want to get more information on what this does please read more in the WordPress Codex.

The second plugin is called SQL Profiler – http://wordpress.org/extend/plugins/mysql-profiler/. Once installed and activated it will show you a list at the bottom of your page for every single database request made on that page, how long each query took and the total time. Crucially it also shows you where the request came from. In my case I discovered one of the Woocommerce plugins was taking a terribly long time to run a request that I didn’t even need.

2. Check your theme and code

Validate your code at http://validator.w3.org/ to get rid of any silly errors. Then really dig deep if you are using a third party theme and third party plugins. You may have paid good money for those but that does not mean they have been written well. A good tool here is Pingdom which tests the loading speed of your website and can often pinpoint a particular bottleneck. It shows you every external file the page has to load, for example javascript files, css stylesheets and images and tells you how long each took to load. It even breaks the information down further enabling you to figure out if your server is what’s slowing everything down.

My initial tests on the homepage of the site I was analysing gave me a loading speed of 6 seconds, which is way too slow. This led me to making a few changes as follows:

  • I merged as many css files as was comfortable
  • I removed all calls for unecessary css and js files from the functions.php file

3. Check Your Plugins

Make sure they are all up to date, it’s a simple step but if a plugin developer has found a bug they may well have released an uodate that fixes it and makes it work better.

4. Change your host

Check your site using Google PageSpeed Insights, if it shows server response time as one of your issues then you may want to look at changing your host. Try WPengine for managed scalable super fast hosting for WordPress websites.

So, Did It Work?

Yes. I’ve only gone through a few steps so far but I have reduced the page load time from 6 Seconds down to 3.5 Seconds. Still not good enough but I’m pretty happy with the progress so far, especially as I know there are quite a number of things I could still improve on that will bring the speed down much further. I will update this when I’ve completed the next stage.

This was a really useful article, he goes into more detail than I have – http://www.sdavismedia.com/page-speed/

Hacking M.E.D.I.C With The Wellcome Trust & Open Data

News, Website Design

Last weekend I was lucky enough to join a great group of people at a Rewired State hack event for the Wellcome Trust. On a beautiful morning in London we were given access to a tonne of open science data and asked to show the Wellcome Trust what could be done with it.

Pretty quickly our team joined together with the idea to build a monitoring system for Intensive Care. Currently the existing monitoring equipment is plugged into a network and the data is saved (not everywhere, but increasingly so). We asked ourselves the question “what could we do if we centralised all that data?”. Our team included a couple of data analysts and they started discussing the possibility of finding ‘usefulness’ within the data. “Would we find any patterns in terms of vital statistic changes and mortality rates?”.mockup

Having access to this data is AMAZING not only because we can learn so much from it, but because we can DO so much with it.

So we set to it, the devs building the frontend and the framework, and the ‘data guys’ crunched numbers. It was so exciting when they started to realise that they had found some potential clues in the data – certain numbers changing in a certain direction seemed to point towards higher probability that the patient would die.

By combining the two ideas we came up with MEDIC – Monitoring & Early Detection in Intensive Care. We would pipe all of that live data into a central database and show a live representation of that patient on a screen so all their vital stats are instantly visible and instead of a zillion alarms going off if something does start to go wrong there would be one centralised alarm. This would reduce the possibility of alarm saturation, the phenomenon where so many alarms go off in the intensive care unit that they start to lose their significance.

By tying that together with the results of the data analysis, an algorithm, we could change the status of any of those patients to ‘warning’ should their stats be showing signs that from the historical data suggest their condition is likely to worsen soon.

A summary of the project can be found here – we were very proud to be awarded the Open Research prize.

I have to say we were really excited by the possibilities of this, having access to this data is AMAZING not only because we can learn so much from it, but because we can DO so much with it. Thank you fellow team members (Allen Lin, Ben Webb, Emily Christy, Florian Rathgeber, John Sandall, Matt Shawkat, Tom Pollard), thank you Rewired State and thank you Wellcome Trust. What a great weekend.