Geeky Medics was launched in September after a few months of figuring out the technical side of creating a website.  Since September around 60 articles were added and a mobile version of the site was launched.  After i’d written around 50 posts I started to become aware that the current site was not really making it easy to sort and browse the increasing amounts of content, and it was quickly becoming a hassle to find any one particular article.  So once the Christmas exams were out of the way I knew I had to get to work on redesigning the site, with the aim of making Geeky Medics much more able to sort and present articles in a much more elegant, efficient and eye popping manner.

I decided to start my efforts with altering the way in which posts were displayed.  Because the original template had been designed for a blog of chronological posts it really wasn’t a good way to browse through a large number of articles.  They were presented in a linear manner with each link and summary spanning the entire page.  It meant that you couldn’t just glance quickly and spot the 1 out of the 15 articles you were interested in.  Instead the experience was something like “scroll, stop, click next page, scroll, stop, click, etc…” until you eventually found the article you needed or gave up in the process.

Whilst on a night shift in hospital I found a blunt pencil and drew what my ideal page organisation would look like.  The problem was I didn’t have a clue if it was even possible to achieve this concept, and even if it was, I wasn’t exactly a grand master in CSS and I knew absolutely nothing about PHP.

Over the next few days I researched about PHP, CSS as well as the inner workings of the ways in which WordPress gathers and presents posts. Even after all that I felt like I was going nowhere. I had written some PHP but every time I saved my new code the results were awful, usually involving the web page completely falling to pieces, a far-cry from my drawing I had so optimistically sketched.

I asked the wordpress community if they could take a look at my code and give me some pointers, and in retrospect it was the best thing I ever did.  They showed me where I had been going wrong and after tweaking my code for a few days one night I clicked save and when I refreshed the page……… it almost looked like my drawing!!!.  I was so happy that I immediately headed back to the wordpress forums to thank those who had helped me out.

Once I had managed to get the posts to fall in a grid like fashion, it was now just a case of tweak, tweak and tweak some more to get it all looking pretty and the way I had originally imagined it would be. This took a few days until I was finally happy with it and the end result can be seen on the left.  I couldn’t believe i’d managed to bring to life that tatty piece of paper i’d drawn my ideas on only a week before.

 I couldn’t believe i’d managed to bring to life that tatty piece of paper i’d drawn my ideas on only a week before.

— Lewis

I then needed to improve the appearance & functionality of the body systems page.   This was because clicking body systems caused you to be greeted with almost every single post on the site, with zero organisation.

I redesigned the page as a grid of buttons, each depicting a particular body system in a pixel art style.  The coding wasn’t anywhere near as difficult as the previously mentioned task, but drawing an image for each body system pixel by pixel took a considerable amount of time. However I felt it was time well spent, as I wanted to give the site a very unique style and identity.  I also created a similar design for the OSCE page.

After completing all these tasks I decided that the home page needed some attention. I felt it would be much more useful if it also had some big buttons linking to all the major categories of the site. This meant you could immediately jump into the section you needed quickly & easily.  I decided to use the space below the latest posts slider for this purpose and it turned out pretty good.

The final part of the redesign involved revision articles themselves.  I felt that posts on complex topics sometimes were difficult to read due to the presence of multiple titles all with similar colours and font’s.

As a result I altered the CSS to make section titles much clearer.  The articles are now much easier to scan and read as each section in clearly defined by the blue bars.  This means that when your revising at 3am after twelve cups of coffee you will at least stand a chance of staying on track.

There were countless other small changes I made to the sites code, but this post is already far too long, so i’ll spare you the details.  I just hope the hours i’ve poured into redesigning the site will in some way make Geeky Medics a little more useful for you and maybe even make revision a little more bearable