I got an email from Brendan Foster the other day, a developer at the Australian agency The Competition. He was showing me an interesting CSS trick that helped him pull off a layout thing on a website he was helping work on for Margaret River Beverages. I actually thought the whole site was pretty interesting, and the idea occurred to me to jot down my thoughts as I explored the site. He was cool with it.
Oooo how is that grungy bottom texture stuff made?
It looks super crisp.
They could style that up on-the-fly then, especially if they removed those inline fill attributes. There is a lot of solid color backgrounds on this site, so that might come in handy.
This doesn’t appear to be a case of jammin’-more-stuff on the homepage though, at least not ultra-egregiously. Good things about it:
It animates only with opacity, which is pretty smooth.
The images within use responsive images. The <picture> element, specifically. It’s a WordPress site, too, so I wonder if they are using an older responsive images plugin, from before that feature went native.
And also quite importantly, the site has…
Really nice photography
The entire site is covered in it. Such a vital thing for a site like this where they are selling a real product. A “premium” brand, where it’s as much about the perceived lifestyle as it is the product.
Good photos can really make a site. It’s almost cheating. All the better when they are implemented with responsive images.
There are some big wins to be had here though. In running the homepage through WebPagetest, it found that many of the images could have been compressed a lot more:
4,460.7 KB total in images, target size = 1,012.8 KB – potential savings = 3,447.9 KB
3.5 MB of bandwidth savings is super huge.
This test exposed two other huge things as well:
Gzipping isn’t enabled
Expires headers aren’t set
Those are two things that will have a massive effect on performance, and luckily are quick wins. The 2-second time-to-first-byte isn’t great either, but that might improve after setting the expires headers, alleviating some server load.
It’s obviously a store
I’ve been to some sites lately that sell stuff, but you can’t really tell until you end up browsing to a section that looks like a product page and happens to have an “add to cart” button. The ever-present “View Cart” and “Checkout” links on the site are more the convenient, they teach you that the site is a store.
An SVG icon system. Sweet.
And speaking of that “Checkout” button, looks like they are rocking an icon there, I wonder what they use for icons?
SVG again, very nice. In the case of the cart button, no fallback or accessibility attributes/elements needed as it’s just visual flair. There are a few places (like the menu open/close icons) that could likely benefit from some accessibility work, particularly adding a <title> into those <svg>s. It would be tempting to move to <symbol> instead of <g> so that those titles can come along with the <use>, as well as the viewBox.
The ol’ edge-to-edge Google Maps thing
The all grayscaled-out map looks pretty sweet, but it goes edge to edge which freaks me out a little because I thought that could be a scrolling trap.
Looks like on desktop it’s no big deal, scrolling doesn’t zoom the map like it does when you’re actually on Google Maps, so you can scroll right past. On mobile though, the edge to edge map does trap your scrolling:
It’s not a major problem though as they have locked the height of the map to be not tall enough to cover (at least, most?) mobile screens.
So if you get trapped you can always move your finger to a non-map area. Probably a good opportunity for an Adaptive Map.
I was able to peak at that CSS right in the source code, meaning it wasn’t compressed CSS. Not too big a deal since gzipping is so much more important, but a slightly bigger deal since gzipping isn’t on yet.
A nice grid
Covers all possible widths nicely:
Notice that some content is full-width and some isn’t. As in, a photo that will always touch the right edge and text to the left of it that doesn’t hug the left edge.
A little SEO in the main nav
This is the weirdest page, to me. “Premium soft drinks” is literally all they do. Why the special one-off page for it? Isn’t that kinda the home page? My best guess is that there is some business value to being super clear about it and potentially an SEO play.
They are 2nd on the 2nd page though, so looks like it could be working.
The font on the product and the display font on the web is the same!
It’s not every day you can pull that off. Perhaps the product design team and the web design team are the same company, and they made that a requirement for their recent rebranding.
I took a peak to see what typeface it was:
Which, if you web search, you’ll find a really scripty cursive thing as a free font in places like Google Fonts. I was able to use WhatTheFont though, upload an example, and find it:
More tiny little things I notice right away for whatever reason
<html lang="en-AU"> – It wasn’t until I saw that that I realized it was Australian!
The @font-face block is looking for a missing `.woff2` file, another little potential performance win.
The fixed navigation bar gets a little stuck when scrolling back up sometimes and covers some of the top of the page. They are aware of this one and trying to fix.
There is a little bit of letterspacing on the body copy. I thought that was for sheep stealers?
What kind of stuff do you look at when digging into another site for the first time as designer/developer? What goes through your brain?