Betty killed my social life

0

Lilypad Studio goes responsive

Posted: February 2nd 2014

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_01

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

 

responsive_menu_01

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

 

responsive_footer_01

Footer - menus are stacked and css3 has replaced some images


responsive_portfolio_01

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


responsive_contact_01

Contact form - stacked form fields


responsive_blog_01

Blog


responsive_archive_01

Archive menu - redesigned with nested accordions for past years


responsive_share_01

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

 

responsive_button_01

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!