Weeknote 46: Full bleed

Happy Sunday, weeknote fans. I am roughly 30% hungover after having some wine at home with the missus. We stayed in and watched Perfect Days, an incredible movie but maybe not the one when you've shared 3 bottles and you don't want to end up sobbing into your shirt.

I'm gonna play around with the format of these notes a little bit to try and be more semantic in terms of content and more brief. Let's give it a go.

This week

  • Got the brand guidelines MVP into a solid enough state to be at least shown to the brand team for a round of feedback whilst we put it down for a little bit and focus on other product stuff. Some stuff I worked on in particular:
    • a swanky landing page format
    • a complete version of that Inform Inspire graphic I mentioned last week
    • a minor contribution to some handover docs
  • Renamed all the file names in these weeknotes from their dates in yyyy-mm-dd format to just their number, then realised that Cloudflare has quite tight restrictions on redirect allowance so I decided to bite the bullet and not redirect them. I'm sorry to RSS people because it's cocked up the feed. I also need to make a 404 page for this site some when...
  • Started playing Death Stranding
  • Tried and failed to re-affix a light fixture in my bathroom that came loose a while ago and has been bothering me for a while. I was really sure I could use a tube of bathroom adhesive intended for a caulk gun without using a caulk gun
  • ...ordered a caulk gun

Deeper reflections

Learning about container queries

The posh landing page format I mentioned was really interesting and challenging (in a good way) to work on. To summarise the design it's a hero that sites within the page's main landmark, which itself is within a roughly 2/3rds grid container with navigation on the first 1/3rd. Note that that side navigation, along with a few other in-between-landmarks things like a breadcrumb, are outside the main, which is the right move. On big screens, the hero bleeds to the right edge of the screen on desktop and has a 2-colour background and a graphic per landing page, each representing a section of the website. On desktop these colours travel from left to right and on mobile they travel from top to bottom. Ah, there's also a light blue background on desktop that's also full bleed across the viewport and the hero, at least visually, contains the breadcrumb.

This is the sort of thing that I would build without thinking in my earlier career but trying to think about semantics right now makes this really hard. How do you maintain the html structure in place whilst also having elements find the edge of the screen accurately AND be sized and positioned based on the hero contents?

One other little challenge: we ended up initially making heavy use of the vw unit in CSS (vw = viewport width, read about it on MDN). However vw doesn't take scrollbars into account on desktop browsers, or rather they sometimes do but inconsistently across browser/OS combos. What to do??

Here's the solution we landed on:

  • Instead of using vw, instead use the cqi unit which we can achieve by giving a parent element a container query. This functions similar to vw but takes scrollbars into account. Full credit to beeps and Romaric for figuring a out and prototyping it which I then reapplied to my stuff.
  • Give the hero a minus right margin that, when the width container is at it's maximum length calculated based on the viewport width and the govuk-width-container max width (at time of righting I believe 950px) to get the space between the edge of the width container and the edge of the screen, plus any extra padding/margins
  • Create a pseudo element of the hero that is absolute positioned behind the rest of the page content, has a light blue background colour and is the width of the entire screen aka 100cqi, plus left positioning to get it in the right place using a similar calculation to how we found the edge of the screen for the hero's right margin, creating the illusion of a full width background
  • The background of the hero is just a linear gradient where the colours have the same colour stop value so there isn't actually a gradient effect, plus a positioned svg background image (using em values for text-zoom users), that changes based on screen size. I then use CSS custom properties to change the colours and the svg based on the landing page
  • Give the hero a top padding and top margin of zero and do the same thing for the breadcrumb for it's bottom and then give the breadcrumb access to the same colour custom properties and background positioning to look like one element containing everything

This has been real core-to-the-frontend-experience-styling type stuff and I've really enjoyed it as a change of scenery to the more in depth scripting I was doing previously. Thanks to the designers on the team for being extremely cooperative and pragmatic in the face of asks to 'make it pop' on one side and developers huffing about semantics on the other.

Are you feeling guided about the brand?

So the plan is to put this website down for a bit. It's not going to get published for a while whilst the GDS policy team figure out how best to present it and also so that the brand team can rustle up a multi-disciplinary team. However from talking to my squadmates that's not the reality at all. There's stuff left undone, in particular a proper accessibility audit and a round of signoff from the brand team which do need to get done. It's likely that team members will continue to fix odd bits here and there. I know I will be in the coming weeks as neat little tasks between larger work. It's likely we'll pick this up again but ideally not for a moment.

I was a little worried about this vibe of 'there's so much to do and no time to do it' present when I joined this squad and I saw it in this last week. I wonder if there's something there with how we're working where we have a sort of agency/client relationship with the brand team. We're not super used to stakeholders as a team and that model can be disruptive to our rhythm of work. I know I find the added layer of stakeholders stressful to my work.

I don't really know what the answer is besides a break for a bit. I do think this team could be better at learning how to put stuff down and then commit to picking it up again at a pre-ordained date. This might be a good test of that.

I'll meet you on the beach

Last week I mentioned needing a new game to get into and I landed on starting Death Stranding. Hideo Kojima is a big blind spot in my gaming experience as this auteur game director with a lot of welly in the history and culture of games. I feel like I know loads about his games and the types of games he makes without actually ever picking up anything he's made. I feel a lot of the DNA I've observed by osmosis in this.

I'm really liking it so far. It's fun and tense but also well directed. The button to hold your breath around scary ghosts being the same one you use to scan to see where they are? Smart. Walking through the wilderness and then the camera zooms out and shows the title of the song playing. Hell yeah. Seeing Norman Reedus's meticulously 3D modelled bare butt when he showers is also pretty funny.