Lolly Mack

November 12th 2012 • 0

Many people inspire me in many different ways. Last week I went to the Royal Festival Hall to see my all time number one hero, Neil Hannon, but that is another blog. what all of my hero's have in common is their strength of spirit, their beautiful souls, the value that they add to my life.

I was introduced to Lolly Mack by my hugely talented friend 'Mad Michelle'. The pair of them worked together in Space NK before Michelle taught herself her genius photography talent and before Lolly's accident. Michelle has taken some stunning pictures of Lolly and Lolly wanted to showcase herself and her cause, with a website. It was to be 'pink', 'glamorous', 'editable' and with a background slider like the one on Madonna's site (but better).

I turned up early to meet Lolly for the first time. She was just finishing her morning exercises in a girly flat full of pink and animal print. She was charming, funny, open, sexy and an absolute joy to be around. But you can read the endless messages of support and admiration for her on her Website and her facebook page. Her positivity and energy are a lifeline to so many people.

So this blog had to introduce the wonderful character that is Lolly, but it's really about my first venture into Wordpress and responsive design. Lolly's site is the first one I have built that has focussed on the front end predominantly. I normally use my private projects to enhance my PHP skills, favouring Zend Framework. This time it was all about the bling! and responsive design that worked better than Madonna's site, oh yes!

I still have some tweaking to do and a couple of issues with viewing the site on an iPad. But the challenges I have overcome include:

  • Teaching myself Wordpress theme design, admin and finding suitable plugins. This book is ace.
  • Scaling a background image so that Lolly's face is viewable in most browser window sizes. This meant using media queries to test for landscape and portarit mode and having different image/s for each.
  • Building on the challenge above - creating a background slider that is as responsive as the single background images (Madonna's site does not do this!).
  • Writing my first responsive menu.
  • Styling the Facebook widget to match the overall theme. Something Facebook try to stop you doing. Evil FB. Thanks Daddy Design.

So here are some screenshots of the homepage viewed at varying browser sizes.

Lolly Mack home page

Width > 800px
Background image determined according to orientation (landscape)

 

Lolly Mack home page

Max width 800px - Single column layout and Menu wraps
Background image determined according to orientation (portrait)

 

Lolly Mack home page on mobile

Max width 480px - Menu becomes dropdown, font size reduced, margins reduced

 

Lolly Mack menu on mobile

Max width 480px - view of dropdown menu expanded

 

Lolly Mack inspiration

Hey Madge! Maybe you should seek the skills of this Cat Woman?