Lilypad Studio goes responsive

February 2nd 2014 0

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:

Responsive home page

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

 

Responsive menu

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

 

Responsive footer

Footer - menus are stacked and css3 has replaced some images

 

Responsive Portfolio

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

 

Responsive contact form

Contact form - stacked form fields

 

Responsive blog

Blog

 

Responsive archives

Archive menu - redesigned with nested accordions for past years

 

New share buttons

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

 

New buttons

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!

Betty killed my social life

Diabetes is a treatable, manageable condition. You can maintain your sanity and your cat's health, all on a reasonable budget. Read Betty's story

More on...