Aidan Garnish

Collaboration Not Competition

Lovely Beaded Lanyards, Flexible Grids and CSS Media Queries

My girlfriend Kathryn decided several months ago that she didn't like the standard lanyard that work had given her to hold her staff badge and was going to make her own beaded lanyard. After receiving positive comments about her new lanyard things have escalated and full on lanyard production and selling has commenced.

As a result I volunteered to build the ecommerce platform that would propel this beaded lanyard making enterprise to new heights. The plan was to use earlier PayPal integration experiences to enable payments and I thought it would also be a good opportunity to take a closer look at responsive web design and build a site that worked well in mobile devices.

To help achieve this I used the CSS 1140px Grid as a starting point. This is a flexible 12 column grid that uses CSS media queries to apply alternative CSS styles when the screen width of the browser drops below 767px. This allows you to create a design that is 1140px wide and then with a few tweaks to the CSS it is possible to change the look and feel of the page so that it will also display nicely on a mobile device. For this project it generally meant increasing the size of buttons and making sure there was enough padding around navigation elements for those of us with fat fingers.

CSS 1140px was great and really helped speed up development although the single break point at 767px did create some interesting results when viewing the site on a netbook but by adding another media query to the CSS most of the issues were ironed out. Having spent a bit more time researcing and working with responsive techniques I think that next time I would look at the option of designing for mobile first as this really does help you to focus on prioritising the content that is most important. It also forces you to think hard about the task the user is trying to complete on any particular page and making it as easy as possible for that task to be accomplished on smaller screens with single column layouts.

The design "philosophy" for the site was to make it as easy as possible for the user to find the lanyard they are looking for and make a purchase. This has been achieved by ruthlessly cutting out any steps that aren't 100% necessary. For example there is no need to sign up to make a purchase, in fact there is no sign up at all, ever. In addition users don't need to provide a delivery address, instead all payments are through PayPal so we use the address that is listed on the PayPal account with an option to let us know if this isn't the correct address. As a result it is possible to go from the homepage to having made a purchase with only 3 clicks on the site.

So if you are interested in seeing streamlined responsive web design in action or in a beautiful handmade beaded lanyard for yourself, girlfriend, mum, granny or sister please take a look at Pimp It Pretty.

Add comment