Lilypad Studio goes responsive

The last three sites I have built have been responsive. That means the layout changes according to device: mobile, tablet, desktop, really big desktop! Responsive design is very current. So it was a bit shameful that my own site had become so out of date. I also had some design issues that have been bugging me for a while. So I decided to enter one of my manic phases and redo my design.

The cosmetic changes are minor, though I will point them out because I'm proud of them. The idea of responsive design is to make sites easier to read and navigate at different viewport sizes. Noone reads my blog (apart from lovely Mitch) so my purpose was really just to practice using the Bootstrap 3 framework and to get some more experience using LESS and Font Awesome. That bit is only interesting to fellow geeks. As an aside, I do get the occasioonal acrocat researcher landing here. But they stick to the blogs tagged Betty. 

So, the changes are best illustrated in picture form. Below are screen shots of pages before and after the redesign, as viewed on a mobile phone:

Home page - at smaller screens the main content and side content are now stacked

Menu - at smaller screen widths, the menu becomes a dropdown

Footer - menus are stacked and css3 has replaced some images

Portfolio - there are three breakpoints for the portfolio page, showing 1, 2 or 3 columns

Contact form - stacked form fields

Blog

Archive menu - redesigned with nested accordions for past years

Share buttons - third party code replaced with bespoke buttons using Font Awesome and Bootstrap tooltips

Buttons - redesigned and colour coordinated

My next project is to rewrite the backend code. It is currently written using ZF 1.8. I will be migrating the code to ZF 2 and replacing my wysiwyg.

More stupidly late nights!