BMW

View BMW

The new BMW site looks very high end which is something that you would definitely associate with the brand.

It has an auto-playing (but silent) video on the homepage that does a great job of quickly loading and playing with no noticeable drag on mobile or desktop.

As you scroll down the site, each of the call to action areas (CTAs) have some kind of movement within them. Each CTA is an image that occupies the entire container and plays a short looped video along with textual headings.

The entire site is built as flat HTML which is probably a focus on getting the Time To First Byte (TTFB) down as far as possible (TTFB was 3.5s on a poor 3G connection but 0.285s on cable)

The meta viewport title does what you would usually expect by setting the width=device-width and initial-scale=1.0, however, it also enforces a minimum-scale=1 and a maximum-scale=5.0. I can only assume this is to help AMP (yes, the site has been built entirely based on AMP) with controlling the layout or overcome a browser bug I’m unaware of (anyone know?)

The missing meta viewport tag for me is for the new iPhoneX which contains the notch and some safe areas. To ensure that a site like this which is intended to dazzle and delight AND fill the whole screen you should also include viewport-fit=cover

There are only a few standard breakpoints based on traditional device widths (768, 1024, 1280) but there are also some interesting uses of aspect-ratio to control things like the header having a max height of 100vh units (i.e. taking up the full screen on wide displays)

@media screen and (min-width:768px) and (min-aspect-ratio:16/9) {
.pw-m-stage--full header {
  max-height: 100vh;
  height: 56.25vw;
  min-height: 400px;
  overflow: hidden;
}
}

I was hopeful to see that the grid layout of the site would be done in CSS Grid Layout but it wasn’t to be (maybe they’re working on the next phase already) but it was great to see that it used Flex for this rather than the float approach. I think 2017 is the year which we abandon floats and firmly move forward with a better way of creating web pages.

.row {
  margin-left: 30px;
  margin-right: 30px;
  flex-direction: column;
  display: flex;
  box-sizing: border-box;
}

.row > .col {
  box-sizing: border-box;
  flex-grow: 1;
  flex-shrink: 1;
}

There is a great use of SVG where they were able to swap out icons traditionally delivered with PNG’s and replace it with the SVG format to ensure that no matter what the size or resolution of the device the images are still crystal clear.

Images are handled responsively, however, this is where I start talking about implementation methods that fall into an area that I’m still not convinced about which is the AMP side of the implementation. Regardless of my personal opinions let’s take a look at these.

In the below code we have the AMP version of the <img> tag, in fact all of the amp versions of tags simply add the amp- to the start of an ordinary tag to make it easier to learn and pickup (and remove at render).

Most of it should be familiar if you’ve looked at (responsive images before – link to a responsive images thing), however, there is one attribute layout="fill" which is unusual. The layout attribute informs how the element should behave and on the image tag it would usually be defined as ‘responsive’. In this case, however, I think the use of fill has been used to ensure that the images within the containers expanded out to fill them completely… kind of like what object-fit does.

The most difficult thing for me on this site is the head. Maybe I should get over myself (this is very likely) but something about the following code just doesn’t sit right with me when we talk about building websites the right way in a progressively enhanced approach.

    
    <script async src="https://cdn.ampproject.org/v0.js"></script>
            <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
            <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script>
            <script async custom-element="amp-user-notification" src="https://cdn.ampproject.org/v0/amp-user-notification-0.1.js"></script>
            <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
            <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
            <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js"></script>
            <script async custom-element="amp-install-serviceworker" src="https://cdn.ampproject.org/v0/amp-install-serviceworker-0.1.js"></script>
            <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp-facebook-0.1.js"></script>
            <script async custom-element="amp-font" src="https://cdn.ampproject.org/v0/amp-font-0.1.js"></script>
            <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
            <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

It should be totally fine, but still… a site that is performant and requires JS is difficult to swallow. But let’s press on and look at the carrots the site has for being built in AMP.

1. It’s fast — well yes it is, and it loads well on my devices. In this case though, it was a complete rebuild of a site on what looks to be a pretty reasonable budget with time to achieve it. It is a new site as well, and it doesn’t have an AMP version of the site because the site is built on AMP. Why wouldn’t you just build a regular great performing site from the outset?
2. Priority placement in search results – this is surely the golden egg carrot that encourages most people to use AMP (aside from the performance, but anyone can make a fast website… only AMP pages can get the coveted top spot. Although I would have thought this was the main reason I did a number of Google Searches for very specific titles but couldn’t get the carousel to appear at the top (nor the pages aside from the last search)

The only real disappointment I have is if for what ever reason the AMP Project JS doesn’t load the content pages don’t display any content at all. I can’t imagine this is a limitation of AMP because Google just wouldn’t do that, so it must be down to the implementation of those pages in particular.

BMW Technical Details

Site Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1, maximum-scale=5.0"/>

Media Queries

@media screen and (min-width:768px) { }

@media screen and (min-width:1024px) { }

@media screen and (min-width:1280px) { }

@media screen and (min-width:768px) and (min-aspect-ratio:16/9) { }

@media screen and (min-width:768px) and (max-height:700px) and (min-aspect-ratio:16/9) { }