I just got back from a short trip to Door County, Wisconsin. If youâ€™re not familiar, itâ€™s a popular weekend getaway spot for people all over Wisconsin (and Chicago too!). Itâ€™s scenicâ€”mostly rural and rusticâ€”and filled with great restaurants and wineries. And it plays host to throngs of Jamie Lee Curtis lookalikes that frequent the many shops: antique, crafts, clothing, etc. If you imagine Wisconsin as a hand, itâ€™s the peninsular thumb.
I like to go there often with my (as of a few days ago) wife. We like to hike and eatâ€”just get away, alone. I usually bring only my phone. Occasionally Iâ€™ll take the iPad, rarely will I bring a laptop.
This makes the mobile experience crucial. The peninsula doesnâ€™t get great cell reception. Usually itâ€™s a bar or two and 3G. Iâ€™m of the generation that looks up businesses online and gets annoyed when a business does not have a web presence (Facebook doesnâ€™t count). If I sound like a damned young person, sorry (not sorry), but this is the future. There are so many restaurants in Door County, I need look up menus and hours online to help narrow down where to eat.
This causes problems.
One of my favorite restaurants in Door County is The Cookery. We went there for breakfast today. Before we left, I wanted to check their hours and also peek at the menu. I went to their site, immediately saw their logo, then waited for about a minute for the rest of the page to load.
Looking at the mobile view in Chrome DevTools right now, the page weight sits at 8.7MB and 96 requests. It is responsive, but it is not mobile friendly. In an area that gets shoddy reception, downloading that much data not only digs into my data plan but also kills my battery as the phone is constantly searching for reception.
Thankfully, the hours are on the home page, but theyâ€™re all the way at the bottom of a 7,500-pixel-high page (on an iPhone 5). I have to scroll through 7,400 pixels of marketing filler to get any useful information. I donâ€™t need to know the history of the restaurant and the ethos behind it. If I do, Iâ€™ll look for that section of the site. Give me the most important information firstâ€”especially on mobile.
Knowing the hours, I wanted to find the menu. There are no links in the footer, so I scroll back to the top. I donâ€™t see anything. I do see a weird clock emoji on the hero image. I noticed similar clock emojis on a different Door County restaurant site the previous day, in place of arrows for a carousel.
Then it dawned on me: content blockers on iOS9 with external fonts disabled kill CDN-hosted icon fonts. Instead of a useless hamburger icon, I saw a flower emoji, tapped it, and the site menu opened. 5.9MB later and the breakfast menu loaded.
At least the site tried to work on mobile. Most Door County restaurants have desktop-only views (which oddly tend to have a smaller page weight because they donâ€™t clog the page with large high-res photos).
This is why I care about mobile-first and performance-driven design. The situation in Door County just exacerbates the problems with ignoring mobile and performance. Thereâ€™s poor reception, so a webpage is already going to load slowly, if at all. And I might only be able to download a little bit of data before I lose my connection. Even if the page loads, it might be desktop only, with difficult-to-navigate drop down menus. Or icon fonts are used, but external fonts are blocked, so esoteric emojis show up instead of the hamburger icon. Or the most important informationâ€”the reason Iâ€™m on your site while on a phone just miles away from your businessâ€”is hidden at the bottom of the page or difficult to find elsewhere on the site.
Design for context. Design for performance. Design for the user. Because itâ€™s fucking frustrating when a site gets in the way of the people trying to use it.