KK Picker 2016

Once again Christmas is upon us! As is becoming customary with Christmas, a new KK Picker template has arrived.

Typically we try to choose a theme that relates to something that has happened in the past year, and that most if not all of the people involved in the Kris Kringle will know. After leaving it far too late in the year to start thinking about the theme for this year’s template. With almost no hesitation, I decided upon Pokemon Go.

In the next week or so I spent some time thinking about what a Pokemon Go KK Picker template would look like until I finally drew out a rough draft. There were a few things I wanted to try this year that I’d been avoiding in the past. It just so happens that the template design below incorporated all of those elements.
kk-picker-design

First of all I wanted to try and have text mixed in with images. So far I’ve been avoiding this by using images that take up the full “row” and then stacking text in it’s own neat little rows. This wouldn’t work for the above. I knew for sure I didn’t want to make an image per-person containing their names. I wanted text on top of an image. This meant that I had to use tables with background images (so gross!). I used a bulletproof background with some slight modification to include a css hack that I found that helps background-size work on some email clients.

The next thing that I hadn’t done before was try to use web fonts. I did a bit of research, found out that I needed a solid fallback font and to be wary of Outlook. This year’s template includes the Google font Lato (as that is what I read was the font used in Pokemon Go).

The last thing I wanted was to have the email properly responsive. I don’t just mean a 100% table that squishes. But actual breakpoints that have different sizings applied. I started off with a 480px wide design (@2x for retina of course) and added in a breakpoint for devices smaller than 480 to change the content width to 300px. Through testing I refined this to be mobile-first instead. Starting with a content size of 280px (leaving room for Apple’s padding/margins) and then growing the content width to 480px when the screen is large enough. When the template width increases, so does the positioning and font size of the text that is overlaid on top of the images.

From my testing I found that these templates work well in Gmail (web, Android, and iOS). However the background images don’t obey the background size rules on the default Android mail client or outlook.live.com. Due to the potential for these templates to not appear properly I included a “show on web” link that uses a UUID to ensure that people can’t just easily change the url to figure out who other people got.

But no no no, that’s not all! The templates above also implied some new scope that I’d have to consider in the Java side of the application. This is that the trainer shown in the picture could be either male or female. So far a Person in KKPicker was just represented by their name and email. This has now been extended to include their gender.

As if that wasn’t enough, Ellie informed me that her mum had requested that we add some restrictions to the randomness. At first I declined, arguing that the whole point of my implementing KK Picker was so that it was actually random and that people didn’t know who everyone else got. However after some more thought, I remembered that a complaint was made by someone involved as they had got their partner as their KK. Eager for this to not be repeated this year I decided to implement a way of adding an exclusion list to each Person. If a person picked themselves, or someone in their exclusion list, they would have to redraw. Detection was added for states that involved people running out of people to pick so that the program didn’t get stuck in a loop. This allowed me to prevent couples from getting their other halves as a KK, but also allowed me to add the other restrictions requested by Ellie’s mum.

Below are the final templates, male and female. Please note that the Pokemon and trainer personalisations were arbitrarily picked based on what I could find source images for using Google image search.