McMenamins’ Disappointing New Web Site
Friday 24 February 2017 — Category: Miscellaneous
Sections Outline [+]
On February 2, 2017, I received an e-mail from McMenamins which included this announcement:
“Today we launched a new mcmenamins.com with the goal of providing the best possible McMenamins experience — across mobile and desktop viewing. Many of you visit our site from your phones or other mobile devices, so we’ve made our site more visual with larger images; easier-to-find pages; an improved search function; and ease of use in booking a hotel room and buying movie, concert and event tickets. We invite you to wander slowly through its pages and listings for a fresh window to see into our world.”As a regular user of their site during my McMenamins Passport adventure, I was eager to take it for a spin. As a Web site developer for the past 20 years, I was interested to see what sort of improvements had been made. Unfortunately, both as a user and as a developer, I think that their new site is a step backwards instead of a step forwards. Portland-based Planet Argon. This time around they chose to use Ashland-based ProjectA. Seeing that their previous site was pretty good looking and functional, I don’t know what motivated McMenamins to change developers. Perhaps they wanted something completely different.
In one sense they did get something completely different ... if you compare it to their previous Web site. But if you compare it to the modern, trendy Web site design common on so many sites these days, it is nothing new at all. The old site evoked McMenamins’s unique, artistic, and somewhat-counter-culture aesthetic much more than it does now. If you were to judge by the new Web site alone, McMenamins is merely a trendy look-alike which does not stand out from the crowd. Open the following subsection and see for yourself.
Visual Aesthetic Comparison [+]
Take the comparison test by clicking on the following screen shot to alternate between the old and new look. Which style best represents the McMenamins you know and love? I think it is pretty obvious!
The first thing I noticed when I visited (and continue to visit) the new site is that it is very slow. I use the Web extensively every day, visiting quite a number of Web sites. The new McMenamins site is definitely near or at the bottom of the list when it comes to speed. Their old site was pretty snappy, but the new one flows like molasses in the winter: very slowly. Even though the developers display a cute spinning McMenamins sun while you are waiting, that gets really old really fast.
There could be a number of reasons for the slowness, but one of the most obvious is that, as McMenamins stated above, the site is “more visual with larger images.” In addition, the site makes heavy use of interactive graphics which, while flashy, are merely eye candy that do not make the site faster or more useable.
Investigating further behind the scenes, I have found a couple more issues that significantly affect the site’s performance. I looked at the HTML source code for one very slow page which lists the McMenamins locations ( https://www.mcmenamins.com/eat-drink ). You can expand the following subsections for more details and examples of what I discovered.
Huge Amount of Hidden Data [+]
In the source code for the previously-mentioned McMenamins locations page, I found 536 KB of hidden (not visible to the user) data in a form field called ‘ViewState’. From a human perspective it’s just gibberish ... here is a tiny sample:
wEPDwULLTIwMTY3MTIyMzYPZBYCZg8PFgYeD19fQW50aVhzcmZUb2tlbgUgNjYzYTRkMzThe entire huge chunk of data does not present any useful information for the user, but apparently the Web site itself uses the data to make the site function properly.
Just to put this quantity in perspective, it is equivalent to — on this (my) Web site — the 60 photo previews on the Abiqua Falls 2012 contact sheet, or 450 article titles and descriptions on the index of articles page. That is a lot of excess baggage for the McMenamins site to be loading behind the scenes. A small sampling of other pages turned up a similar huge chunk of hidden data on each page. It’s just one more reason why their site is so slow.
Tabbed Layout Inefficiencies [+]
Referring to the same McMenamins locations page mentioned above, you will notice that there are four tabs across the top of the page: ‘All Places’, ‘By Region’, ‘Near Me’ and ‘On Tap’.
The first three tabs present a lot of similar information, because they all have to do with McMenamins locations. But the fourth tab, ‘On Tap’ does not display location information at all. Rather, it is a long list of every beer, cider, wine and spirits currently available across the entire McMenamins empire.
So even if I just wanted to find a McMenamins location, this particular page, because of the tabbed layout, is always loading the text and large semi-generic icons for more than 250 drinks on tap. Even if I don’t look at the On Tap section. This inefficiency is yet another reason why this page, and their entire site, loads so slowly.
At first I thought the different layout was mobile device vs. desktop computer. Even though my iPad Mini 2 has a screen width of 2,048 pixels, for historical and compatibility reasons the screen width is often considered to be 1,024 pixels, which is below ProjectA’s 1,250 pixel cut-off. In contrast, my desktop screen is 1,920 pixels wide, although I often use the browser at 1,600 pixels. Both widths are over that magic 1,250 number. As soon as I resized my desktop browser to less than 1,250 pixels, the layout changed to what I was experiencing on my iPad. As Spock would say: fascinating. Check out the following subsections for more details.
Browser Width Comparison Example [+]
Let’s look at an example to help clarify what I’m talking about. Just now I randomly chose the Web page for Boon’s Treasury in nearby Salem. When I made my desktop browswer 1,251 pixels wide (or wider), the page displayed in a shorter, tabbed format.
When I reduced the width of the browser by 2 pixesl to 1,249 (or narrower), the layout radically changed. Instead of presenting the information in five tabbed sections, all of the info was arranged on one long page. I prefer the tabbed layout, because I would rather click on the tab section I am interested in rather than scrolling through a long page to find what I am looking for.
I also prefer how the tab sections of the wider pages display what’s on tap. With this layout I can take my time to consider all of the options, and then click on a certain drink for more info. Here is a screen shot:
The layout at less than 1,250 pixels is quite different and ever changing:
As you can see, only four offerings are shown at a once. By the time I see what each option is, the listing automatically moves on to the next four options. It’s like playing a game of tag, and if you are not fast enough, you loose! This eye candy is way more frustrating than useful and functional.
Meltdown at 1,250 Pixles [+]
If you have been paying close attention, you will notice that in the previous subsection I investigated the page layout at less than 1,250 pixels, and at greater than 1,250 pixels. But what happens when the browser width is set to exactly 1,250 pixels? I was astonished to discover that Boon’s Treasury page I was on failed to load at all! Here is what the entire page looked like:
No images, no menus, no beers, no events, no history ... nada! If you ask me, as a professional programmer, I would say that this is definitely a programming error.
Or Is It 1,265 Pixles? [+]
In order to provide the most accurate information in this article, I decided to see if this same error occured in the Mac Safari browser. There was always the possibility that it was a Firefox-only problem. The same disappearing-act meltdown happened in Safari, but only when the browser was 1,265 pixels wide instead of at 1,250 pixels in Firefox (both Mac and Windows versions).
I have been unable to determine why there is a 15-pixel difference. Perhaps it is some internal difference between the browsers themselves. Or maybe it has to do with the Web site programming. Who knows?
On the new Web site, links to pages relating to a specific location are mostly found on the home page for that location. Once you start exploring other pages for that location, there is no location-specific menu to help you get to the other pages for that location. You are forced to go back to the home page for that location, and then perhaps click on a certain tab (using the “wide” layout), or else scroll down (using the “narrow” layout, until you find the link to the page you are looking for.
There are two problems with this new system. First, it makes navigation very inefficient because you have to do a lot more clicking, and then wait for slow pages to load. Second, it is more difficult to see what pages of information are available for a given location, because the links to those pages are not presented in a compact, consistent menu like they were before. You can expand the following subsection to see an example of what I am talking about.
Navigating the Edgefield Pages [+]
To the right is part of the extenive navigation menu from the old McMenamins site for all the pages related to Edgefield. No matter which page I was looking at, I could easily and quickly jump to any other Edgefield page by using this menu, which was on the left side of each page. There was no need to go back to the Edgefield home page. Nor did I have to wonder where to find the links to all the Edgefield pages, because they were all right there.
So, for example, if I were on the Little Red Shed page on the old Web site, I could easily go to the Winery Tasting Room page directly, using the menu. On the new site, navigation is much slower and more cumbersome. On the new Little Red Shed page, there are no links to the other restaurants and bars on the Edgefield property. So in order to find out about those other venues, I have to click on a link to go back to the Edgefield home page, wait for that slow page to load, scroll down to the Restaurants & Bars tab and click on it (if I am viewing the page in “wide” mode), and then finally click on the link to the other venue I want to check out.
If I am viewing the Web site in “narrow” mode, once I get back to the Edgefield home page, instead of scrolling down just a little bit to find the Restaurants & Bars tab, I have to scroll way down the page, past tons of hotel reservation info, until I finally arrive at the Eat & Drink section. But I’m not done yet! Because the “narrow” layout shows me only four venues at a time, I have to either wait for the venue I want to click on to appear, or scroll horizontally through the list until I find it. WHEW! What a pain!
Unfortunately the new Web site is so graphics-heavy that the images actually hinder the communication of information. Now it not only takes longer to find what you are looking for, you have to fight the clutter of graphics which muddles the information. “New and improved” makes life more complicated! You can expand the following subsections to see specific examples of this.
McMenamins Locations Listing Comparison [+]
The page listing all the McMenamins locations used to display quickly because it was text-based. Now, with a very graphics-intensive listing, it takes quite a while for the page to load. The new listing is much longer, so I have to scroll more. And because the name of each location is superimposed over a photo of the property, my eyes struggle to separate the text from the graphics.
Finding a Movie at Mission Theater [+]
As part of my McMenamins Passport adventure, I need to get a stamp from the Mission Theater. This is one of a handful of locations at which you need to buy a ticket in order to get your stamp.
So I went to the Mission Theater home page to see what movies are going to be shown. As you can see below, the new site presented me with a cluttered screen of graphics that did not provide much information. Once again, text superimposed over pictures is harder to read. And this is their new look which is supposed to be an improvement!
To the right is the Mission Theater events listing from the old site. It provides more of the information I want — the time, price and a description — in a layout that is much clearer and easier to read. It does include images, but they are more reasonably sized and less overbearing.
Do I really need a screenful of large pictures to try to tell me what’s on offer? I can read!
Despite the famous saying, a picture is NOT worth a thousand words on the new McMenamins Web site!
Finding a Beer at Boon’s Treasury [+]
The following screen shot already appeared in the Browser Width Comparison Example subsection above, but I am showing it again here so you won’t have to go back to that subsection to see what I’m talking about.
As you can see, this listing gives little information beyond the name of the beer (or cider). There appears to be a photo of each drink, but upon closer inspection I do not think they are actual individual photos of that exact drink. Well, perhaps for the ciders they are. But for the beers, they seem to be semi-generic photos which attempt to represent the beer’s color based upon its SRM value. Ruby Ale and Wissler’s Wheat may have similar SRMs, but because Ruby is brewed with a generous addition of raspberries, it seems very unlikely that these two beers would actually look the same.
If I were wanting to choose a drink from this Boon’s Treasury listing, I would have to click on each of the 13 photos, one at a time, in order to find out more information about each drink, like its ABV, IBU, and a detailed description. By the time I got to the end, I would probably have forgotten what I read at the beginning. This method of presenting information is highly inefficient, and tedious to interact with.
Furthermore, as I shared in that Browser Width Comparison Example subsection above, the experience is even worse when viewing the Web site in its “narrow” mode, when only four drinks are shown at a time, and they are likely to scroll by before you have a chance to see what each one is.
In stark contrast is the Boon’s Treasury On Tap listing from the old McMenamins Web site. You can click on the following partial screen shot in order to open a complete, full-sized version in a new tab / window.
As you can see, this listing provides all of the information about each drink all on one page, without any additional clicking or navigation. You can easily scroll through it to compare all the offerings. The information is not cluttered and muddled by unnecessary generic photos. If you learn the meaning of the SRM values, you don’t need such photos to tell you the drink’s color.
Once again, a flashy, modern, image-based Web design hinders the communication of information, and causes the user experience to be slower and more frustrating.
But what I was shocked to discover is that there is also significant differences in the content of the two layouts. Check out the following subsection for all the shocking details!
The Amazing Disappearing Edgefield Info [+]
When viewing the new Edgefield home page with a browser width of 1,600 pixels (“wide” layout), it had about 2 screens of information to scroll through, arranged in 10 tabbed sections with 22 tabbed subsections. Here is a list of the tabbed sections, with their tabbed subsections following in (parentheses).
Even though I criticized the tabbed layout in the Tabbed Layout Inefficiencies subsection above, in general I think it can be a great way to present a lot of information in a compact space. Take, for example, the information about the Celebration of Syrah. When those details were presented on the 10th tab of the “wide” layout, they was easy to get to. But in the “narrow” layout, when Celebration of Syrah was the last section on a long page, it took a lot of scrolling to get to that info.
For example, I don’t like seeing mobile device layouts on my iPad Mini, so in the browser I use, Mercury, I set the user agent to be Firefox 23, which tells the Web servers to give me the desktop version of sites. The built-in iOS version of Safari does not have this feature.
But this technique does not work on the new McMenamins Web site, because the decision of which layout to use is not based on the user agent info, but, as I have mentioned above, the width of the browser in pixels. On a desktop computer you can easily adjust the width of a browser window. But on a mobile device, you are (with rare exceptions) limited to the screen width reported by the device, which as I said before, is generally less than the 1,250 pixel decision point. As a result, on mobile devices you are unable to view the “wide” layout, and are stuck with the “narrow” layout.
I think it would have been much better for McMenamins to follow the normal method of using the user agent info to determine layout instead of the browser width. That way their Web site visitors would have a choice as to which layout they want to use.
Another way to give users a choice of layouts is to specifically give them that choice right on the Web site. For example, this is what Wikipedia does. When visiting their Web site with a mobile user agent, you are presented with the mobile site layout. But if you scroll down to the bottom of the page, there is a link called ‘Desktop’. Click on it, and once the page reloads, you are now viewing the desktop layout.
Wikipedia’s design is very nice, simple, and user friendly. I think all Web sites with multiple layouts should provide such a feature. But McMenamins has not provided us with that choice, either through user agent spoofing nor via a specific link.
When McMenamins redesigned their Web site, for some strange reason they moved their blog to a completely different Web site!  It is now found at blog.mcmenamins.com. Fortunately, all of the same posts seem to have made the move.
Unfortunately, when you search for ‘Hammerhead’ on McMenamins new main Web site, blog posts are NOT included, so none of the blog posts mentioning Hammerhead are listed in the search results. To find those posts, you have to go to their totally separate blog Web site, and search there. That is very inconvenient, nonobvious and nonintuitive.
This complete separation of McMenamins information is an incomprehensible and unnecessary step backwards. I hope that they will eventually see the error of their ways and reintegrate their content.
Unfortunately, those artist bios are nowhere to be found on the new Web site. I even looked on the separate blog Web site I mentioned in the previous section. Well, at least all their artwork seems to have made it to the new Artwork section. For that we can be grateful, even though the artist bios got axed.
Because this omission bothered me so much, I decided to track down the bios and make them available to the world once again through my Web site. Using various techniques to scour the Web, I was able to successfully download all of the relevant text and images. You can see these reborn bios in McMenamins Artists Lost and Found. URLs (Web page addresses), which were used 1,081 times on this site!
Out of those 221 unique URLs, 150 of them (about 2/3) had been programmed by the developer to redirect to the equivalent page on their new Web site. But that left the remaining 1/3 (71 links) which led to nowhere except an unhelpful Error 404 page.
So I spent the next two days tracking down the correct address for all 221 URLs, and then replacing the 1,081 old McMenamins URLs on my Web site with the new correct URLs. But for some old pages there was no equivalent new page, particularly for the dozen or so artist bios I mentioned in the previous section.
Since the developers were able to program forwarding for many of the old URLs, it seems like they should have been able to put in a bit more time and effort to program ALL of them to forward properly. “to make obscure or unclear.” This is what the developers of the new McMenamins Web site have done with the URLs to much of the specific content.
In the Tabbed Layout Inefficiencies subsection above I referred to the McMenamins locations listing at https://www.mcmenamins.com/eat-drink. I had mentioned that there are four tabs across the top of the page: ‘All Places’, ‘By Region’, ‘Near Me’ and ‘On Tap’.
No matter which tab I click on — which changes the content of the page — the URL does not change, because in reality it’s all one page, with certain content being shown or hidden depending which tab I click on.
So, for example, what if I wanted to link directly to the content on the ‘On Tap’ tab. Is there a URL to accomplish that? I wouldn’t know by looking at the address bar in my browser, because it didn’t change when I clicked on the ‘On Tap’ tab. This is a really unfortunate design decision on the part of the developers.
After a bit of experimentation, I figured it out. By adding the name of the tab, in a modified format, to the end of the URL, I can link directly to the ‘On Tap’ tab, like this: https://www.mcmenamins.com/eat-drink/on-tap. After more testing, I found that this method works for most, but not all, of the other tabbed pages on the new site.
I think developers should make it possible for others to link to specific contents on their site. I have made a conscious effort to make all of the content on this (my) Web site linkable, down to the individual sections in a long article like this. I wish that more developers would follow my good example. the McMenamins App for almost a year. It’s not perfect, but it is pretty good for looking up McMenamins info, especially while out and about. In the end, I think it is good enough for mobile use, and with some effort it could even be improved.
I think that the new McMenamins Web site is slow, clunky, difficult to navigate, and difficult to find information on. I just experienced this afresh today when I tried to find details about an Edgefield event next week. The new site is so dysfunctional that I almost gave up. How is making things slower, more difficult and more frustrating an improvement?!
I also just tried looking up the same event in the App, and it was much quicker and easier. I think it would have been much better to leave the old site as it was, and perhaps tweak it a bit to make it work better on mobile devices if there were any specific issues. The way things stand now, I’m going to dread each time I need to go to the new Web site. That is definitely a step backwards for McMenamins!
There are no reader comments for this blog entry. Why don't you be the first to write one?