Web design

Add nth-child to your css toolkit

I have skimmed over nth-child (css) for the past few years, effectively ignoring it and boy was I silly for doing so. Picture this typical scenario:

I often have items in a list that are laid out horizontally and covering multiple rows. Until I discovered nth-child I was closing that list at the end of each row and starting a new list for each row so that I could control the margins and padding to ensure each item was correctly aligned.

Although this works it is very wasteful and assumes that all rows are different which isn’t always true. Then I stumbled across a tutorial by Trevor Davis who works at the amazing Viget. In a tutorial about css-transforms and diamonds I discovered he was using nth-child to change the margin for items that start on each row and it was this explanation that was my light-bulb moment with nth-child.

Over at Css-tricks where I could lose days learning new techniques  they explain how nth-child works very well and I suggest you head over there now to see it in action.

I have just added nth-child to my base templates and implemented it for a current project for CUPP. On the Shop page I have used nth-child to space the 4th and 5th items so they can sit nicely between the row above.

Web design

Audio recordings from Responsive Day Out

Last week I attended the very affordable one day Responsive Day out in Brighton. It was on the subject of emerging practices within the web industry on responsive web design. I really enjoyed the day and think the format of 3x 30min talks per block is really good and I didn’t miss any of the pricey conference “things” they skipped out on to keep the cost down – more of this please!

All of the sessions were recorded and are now available to listen to, enjoy.

Notes, Web design

Event: Accessible Bristol launch

Last week I attended the launch of Accessible Bristol, a local group who are hoping to gather anybody with an interest or expertise around accessibility. After an introduction from Steve Hilton, director of futures for the Bristol City Council, there were three talks and here are my notes from their talks.

Leonie Watson, Director of Accessibility at Nomensa with a talk called Digital inclusion reasons, challenges and action


  • Liberty – Our day to day is now digital – Shopping, council services and travel
  • Economy – 20 percent may not have access and this is money being lost
  • It is digital common sense ( SEO, speed of access is important) to reach a wider and larger audience and is no longer a luxury.


  • People’s attitude
  • Technology – we should ensure we kick out all the old technology that doesn’t aid accessibility
  • Lack of education


  • As a nation we can use the equality act, hopefully give the legislation more weight
  • As individuals be vocal to call out bad practices and technology
  • Change one thing about some technology that you have control over

Joshua marshall, Developer and accessibility lead for Gov.uk

  • Digital by default without leaving anybody behind
  • Getting 30 million visits a month which is the equivalent of everybody in the UK over 16yrs old
  • Why should we care ?
  • All gov.UK stuff needs to meet wcag 2.0
  • They started from scratch to purposefully leave behing crap tech and make it inclusive from the start.
  • Small teams, build fast and iterate, agile with a small a.
  • Aim to deliver the minimal viable product and get it in front of users.
  • Got developers? Ask really nicely or lie, cheat, beg, steal to get stuff done.
  • Start small, making tiny changes is still a step in the right direction and won’t be noticed if you didn’t ask for permission.
  • Add aria roles.
  • Have an ideal. Not all gov guidelines are equal, a WCAG double aa may not be best just because it passes
  • There is always more work to be done
  • Gov are trying to help by being an example.
  • They have the design principles
  • Trying to position digital by default by April 2013 as a service standard similar to BIS.
  • New and redesigned services that no need meet the standard will not be hosted on gov.UK
  • If he can do it for millions so can you for our smaller audiences
  • Gov.uk has had over 1000 releases since launch in October
  • Keep it lean as much as possible, hence no images until everybody complains ha!

Tim Taylor

  • Lloyds bank has around 103,000 employees and has been behind.
  • Laying the foundation for IT accessibility
  • Battery on phone dies…
Web design

Me the user vs sizing guide

After being entertained watching Cal Crutchlow today in the MotoGP race I thought i’d show my support and buy one of his polo shirts from the official seller Clinton Enterprises.

I very quickly hit a snag.

The problem

Screengrab of shopping page

On the one hand, the folks at Clinton sell clothing in more than one size (yeeeah) but then on the other they FAIL to reference what those sizes are other than the usual “small through large”. This makes buying near impossible for the buyer and a likely large pile of clothing rotting in a warehouse under the end of season sale.

Zoomed in view of shopping page

The clothes item page. Missing the point by failing to let the buyer know what size is small etc. Clothing purchases revolve around the buyer who  a) chooses the clothes I want for a price I am willing to pay and b) chooses the correct size. Generally I am a “Medium” sized kind of guy. But not always. At this point you just lost another customer.

The small solution to a large problem

I would hazard a guess that adding a simple and clear “sizing guide” would reduce lost sales from folks like me, which would see an increase in (lost) sales and reduce support emails or telephone calls. I emailed them yesterday but with a long weekend due to two bank holidays I expect I’ll be lucky to hear back within 5 days…

Go and see that Howies has a great sizing guide table that also rather cleverly shows you exactly where the measurement should be taken.

screengrab of the navigation link to the sizing guide

Which leads to:
Howies sizing guide

The result of which is that I am now a regular howies online customer as the sizing guide allows me to buy with confidence.

Oh and please don’t make it a PDF, mainly because it is annoying but also you’ll be able to measure traffic to the “sizing guide”. If you want to go even further than Howies, put a link to the sizing guide right up near the sizing list – it may be lost in the footer.

** UPDATE 12th June 2012 **
#1 In the second graphic I questioned why it was labelled a 2011 polo shirt… turns out that this week (racing at his home circuit Silverstone) they have released the 2012 shirt just after my 2011 arrived at home…. why the 2012 shirt has only become available 1/4 through a season I have no clue – not happy to have missed this newer shirt!

#2 They emailed me back and it turns out that I am a ‘small’ size.  Great quality shirt.. even if it is a year old!

What is “Me the user VS?”

Whenever I come a cropper using a service I will document the experience. I hope this will be useful to those concerned but also to keep a record of my user experience, as sometimes it will be “it’s me not you”.